ES6学习笔记_es6最大的亮点_RheaWang的博客-程序员秘密

技术标签: javascript  

1. let 与var区别

不同之处:
—- let变量所在的代码块内有效,而var没有块级作用域的概念,只有全局变量和局部变量的概念;
—- let声明的变量不存在变量提升,未声明变量使用变量会报错,var 声明的变量存在变量提升;
—- let存在暂时性死区;暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。
—- let不允许在相同作用域下重复声明同一个变量;
—-let声明的变量不会与顶层对象挂钩,而var声明的变量与顶层对面挂钩。
关于const:
const声明的是常量,不允许修改。同样不存在变量提升,变量暂时性死区。针对于基础数据来说,const保证的其实是变量指向的那个内存地址不得改动,而不是值不可以改动。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指针,const只能保证这个指针是固定的。

   const foo = {};
   foo.hello = 'hi';//不会报错;
    foo = {};//会报错;

2. 关于解构赋值
解构赋值的定义:可以按照一定模式,从数组和对象中提取值,对变量进行赋值

  let [a,b,c] = [1,2,3]  //类似于let a = 1,b = 2,c = 3;
  let [foo, [[bar], baz]] = [1, [[2], 3]];
  let [head, ...tail] = [1, 2, 3, 4];//head = 1, tail = [2,3,4]
  //当等式右边不为数组时,则会出现报错情况。
   let [foo] = 1;
   let [foo] = Null;
   //对于set解构的解构赋值
   let [x, y, z] = new Set(['a', 'b', 'c']);
    x  //'a'
    y  //'b'

同时解构赋值允许默认值

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError x引用y时,y还未声明

针对于对象的解构赋值,但是需要找到同名的属性,当未找到时,则是undefined.

let {foo} = {foo:'bar'};//foo 'bar'

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

函数参数的解构赋值

  function add([x,y]) {
    return x+y;
  }

  console.log(add([1,2]));

3. 字符串的扩展
ES6为字符串添加了遍历接口,可以使用for…of进行遍历

for(let key of 'foo'){
  console.log(key);
}

且遍历器最大优点是可以识别大于0xFFFF的码点

var text = String.fromCodePoint(0x20BB7);

for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "

for (let i of text) {
  console.log(i);
}
// 可以识别

同时提供了新的三种方法,includes(),startWith,endsWidth,第二个参数表示开始搜索的位置

var s = 'Hello world!';

s.startsWith('Hello') // true  参数是否在原字符的头部
s.endsWith('!') // true    参数是否在原字符的尾部
s.includes('o') // true    是否找到了参数字符串

repeat表示将原字符串重复n次,padStart()用于头部补全,padEnd()用于尾部补全。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
'x'.padStart(5, 'ab') // 'ababx'
 'x'.padEnd(4,'ab') // 'xaba'

最大的优点,ES6引入了模板字符串,${}可以引入js变量和调用函数。用反引号应用,且可以嵌套模板

var obj = {x: 1, y: 2};
`${obj.x + obj.y}` //3

模板编译:该模板使用<%…%>放置JavaScript代码,使用<%= … %>输出JavaScript表达式。

var template = `
<ul>
  <% for(var i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;

4. 函数的扩展

ES6允许给函数参数添加默认值。同时需要注意的是参数变量是默认申明的,不需要重复声明。

function log(x,y = 2) {
    
  console.log(x+y);
}

log(2,3);  //5

//可以与解构赋值一起使用。
function m2({x, y} = { x: 0, y: 0 }) {
    
  return [x, y];
}

同时可以通过函数的length属性,即将返回没有指定默认值的参数个数

(function (a) {
    }).length // 1
(function (a = 5) {
    }).length // 0
(function (a, b, c = 5) {
    }).length // 2

关于箭头函数
需要注意的点:1.当箭头函数不需要参数或需要多个参数,就用一个圆括号代表参数部分;2.当代码块的语句大于一句时,则需要用大括号将它们括起来,并且使用return语句返回。3:箭头函数返回一个对象时,必须要使用

 //基本语法:
 var f = () => 5;
 let getTempItem = id => ({ id: id, name: "Temp" });//返回对象必须加括号

同时其他注意点为:
1. 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象
2. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
3. 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
4. 不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

{
  function Timer() {
    this.s1 = 0;
    this.s2 = 0;
    // 箭头函数
    setInterval(() => this.s1++, 1000);//箭头函数绑定this,指向定义时所在的对象
    // 普通函数
    setInterval(function () {
      this.s2++;  // this指向window
    }, 1000);
  }

  var timer = new Timer();

  setTimeout(() => console.log('s1: ', timer.s1), 3100);  // 3
  setTimeout(() => console.log('s2: ', timer.s2), 3100); //0
}

箭头函数可以绑定this对象,大大地减少了显式绑定this对象的写法。同时可以使用双冒号来绑定对象

5. 数组的扩展

1.扩展运算符

  var arr1 = [1,2];
  var arr2 = [3,4];
  var arr = [...arr1,...arr2];
  console.log(arr);//[1,2,3,4]

与解构赋值结合

const [first, ...rest] = [1, 2, 3, 4, 5];
first    //1
rest    //[2,3,4,5]

函数的返回值

var dateFields = readDateFields(database);
var d = new Date(...dateFields);

实现了Iterator接口的对象

var nodeList = document.querySelectorAll('div');
var array = [...nodeList];  

Map 和 Set 结构,Generator 函数

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]
let value = [...map.values()] //'one','two','three'

2.Array.from()
Array.from方法用于将两类对象转为真正的数组,同时只要部署了Iterator接口的数据结构,都可以转换为数组。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.from()的另一个应用是,将字符串转为数组,然后返回字符串的长度

Array.of()用于将一组值转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

数组实例的find()和findIndex(),前者是用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。后者是找出位置,若未找到,则返回-1;

[1, 5, 10, 15].find(function(value, index, arr) {
    
  return value > 9;
}) // 10
[1, 5, 10, 15].findIndex(function(value, index, arr) {
    
  return value > 9;
}) // 2

fill()为填充数组,entries(),keys()和values()——用于遍历数组

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

Array.prototype.includes()方法返回一个布尔值,表示某个数组是否包含给定的值,

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

6.对象的扩展
ES6允许在对象之中,直接写变量。

function f(x, y) {
    
  return {x, y};
}

// 等同于

function f(x, y) {
    
  return {x: x, y: y};
}
f(1, 2) // Object {x: 1, y: 2}

Object.js用来判断两个值是否严格相等,Object.assign()用来判断两个对象是否严格相等。Object.assign是进行值的浅拷贝而不是深拷贝。对象拷贝得到的是这个对象的引用。

Object.is('foo', 'foo')
// true
Object.is({}, {});
Object.assign(var target = { a: 1 };

var source1 = { b: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);)//将source中的对象合并到target中。
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/RheaWang/article/details/77844401

智能推荐

《BREW进阶与精通——3G移动增值业务的运营、定制与开发》连载之52---BREW SDK 九大功能之位置服务..._iteye_20954的博客-程序员秘密

LBS(基于位置的服务)是相对复杂的服务,但BREW实现起来却很简单,只提供了一个IPosDet接口就能够取得与位置相关的多种信息。PosDet对LBS的支持主要是由手机中的GPSone模块提供的。手机中的GPSone软件模块结构如图11-9所示。图11-9:手机中的GPSone软件模块结构 的模式有3种:基于手机的定位模式(MS-Based),手机辅助的定位模式(MS-Assiste...

我做了一款iOS12捷径市场,也许是目前最好看也是最具技术含量的ShortCuts小程序_古人云小程序的博客-程序员秘密

随着iOS12的普及,以及捷径应用的大力推广要是你现在还不会玩甚至不了解这个强大的APP,那这是太浪费你手中的iOS设备了!ShortCuts这是一款捷径市场小程序,名字就叫做:ShortCuts你可以直接微信扫一扫下方小程序码或者在小程序中搜索体验用心之作我们简单介绍如何使用吧!首先确保你当前的设备已经安装了捷径APP,没安装?上AppStore搜然后我们进入ShortCut...

大企程序员亲身经历告诉你,CRM系统,自己的才是最好的_crm系统程序员工资_Oxhydrogen的博客-程序员秘密

我走进办公楼下便利店的时候,售货员小妹在低头看剧。她看得投入,以至于对我的进入浑然不觉。我从冰柜里拿了瓶水,还想要薄荷万宝路。我按下柜台前的铃铛,清脆的声音把店员的思绪从剧情中抽离到现实,我说:“麻烦再拿盒薄荷万宝路。”售货小妹按下暂停,起身走向身后的烟草货架。少顷,她摇着头走回收银台,表示没有薄荷味,推荐我用白盒原味万宝路配合薄荷糖,有惊喜。就在半小时前,我还趴在电脑前着急忙慌的加班,好在紧张的工作现已进入尾声,可以出来透透气。我回到办公室所在的楼层,站在窗边按便利店小妹推荐的方式抽着烟。烟气本是轻盈

删除.svn文件夹_iteye_14665的博客-程序员秘密

win7下测试代码可用将下面这段代码保存成.reg文件 Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\DeleteSVN] @=&quot;Delete SVN Folders&quot;[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder...

LevelDB源码解读_杰特JET的博客-程序员秘密

LevelDB源码解读提供的功能read and writeGroup commitsequence numberdeleteAtomic Updates同步写Synchronous Writes遍历 iteration快照 SnapshotsSlice比较器 Comparatorsconcurrency保证compactionLevelDB的性能优化参数Block sizeCompressionCache键分布 Key LayoutFilters校验和 ChecksumApproximate SizesE

SpringBoot @AutoConfigureAfter 注解_PazzFJ的博客-程序员秘密

@AutoConfigureAfter 在加载参数类之后再加载当前类 它的value 是一个数组 一般配合着@import 注解使用 ,在使用import时必须要让这个类先被spring ioc 加载好 所以@AutoConfigureAfter必不可少@Retention(RetentionPolicy.RUNTIME)@Target({ ElementType.TYPE })pub...

随便推点

nginx配置sendfile、tcp_nopush、tcp_nodelay_sendfile on_sugar_cookie的博客-程序员秘密

转载自:https://www.jianshu.com/p/cac0a92b9530Nginx 配置优化项:sendfile on;tcp_nopush on;tcp_nodelay on;1、TCP_NODELAY怎么可以强制socket在它的缓冲区里发送数据?一个解决方案是 TCP 堆栈的 TCP_NODELAY 选项。这样就可以使缓冲区中的数据立即发送出去。Nginx的 TCP_NODELAY 选项使得在打开一个新的 socket 时增加了TCP_

CCPC-WannaFly-Camp #4 L - 数论之神 数论题_GreyBtfly王宝彤的博客-程序员秘密

链接:https://www.nowcoder.com/acm/contest/205/L来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 262144K,其他语言524288K64bit IO Format: %lld题目描述终于活成了自己讨厌的样子。这是她们都还没长大的时候发生的故事。那个时候,栗子米也不需要为了所谓的爱情苦恼。她们可以在夏日的...

AD 设置1比1打印_ad如何1比1打印pcb_Steven&Aileen的博客-程序员秘密

为了直观地反应原件的尺寸,有时候需要按1比1比例进行打印,方便和结构设计人员沟通,确认尺寸。下面以Altium Designer 19为例进行简单的介绍。1、打开原始PCB图纸2、点击菜单栏的“File”-&gt;"Print Preview...";打印预览功能3、鼠标右键,页面设置,进行如图设置4、点击关闭,打印输出...

AppBarLayout 介绍和简单使用_马占柱的博客-程序员秘密

关于Android Design Support Library​ 在Android 5.0 时出现了 Material Design 。瞬时感觉Android 更加牛B哄哄了,可是其它老版本的Android 怎么办呢?它们也行这么牛B哄哄,走到哪里都耀眼夺目。怎么办呢?Google很贴心的提供了Android Design Support Library,这样就可以支持 Android

Java-XML-第36节_Xue__Feng的博客-程序员秘密

学习目标:了解XML文档的基本概念,明确它是怎样产生的学习XML的语法规则理解XML的解析器解析过程,并熟练掌握对XML文档的各种操作学习内容:一、XML1、概念Extensiable Markup Language 可扩展标记语言可扩展:标签是自定义的 功能存储数据:配置文件在网络中传输XML与HTML的区别XML标签都是自定义,HTML标签预定义XML语法规格严格,HTML语法规格松散XML存储数据,HTML展示数据2、语法基本语法

python机器学习用到的十大包_董广明的博客-程序员秘密

好记性不如烂笔头,记录下来以备用1. numpy and pandaspip3 install pandas2.scipypip3 install scipy3.scikit-learnpip3 install scikit-learn4.keraspip3 install keras5.matplotlib...

推荐文章

热门文章

相关标签