ES6学习笔记(一)

‘变量’声明

ES6新增两个声明’变量’的关键字,let和const命令.

l  let用来声明局部变量

同ES5中var声明的变量不同的是,let声明的变量的作用域范围仅仅是从其声明的地方开始,到其所在的代码块结束.并且不会像var声明的变量那样存在变量提升效果,并且不能被重复声明.

这样的话就必须要确保用let声明的变量要在使用之前完成声明,否则会报错,所以好的变成习惯应该是在代码的开头完成所有变量的声明.

l  Const用来声明一个常量

用const声明的常量在完成声明后不可更改,因此其声明和赋值应一次完成.除此之外,const的表现基本同let声明的变量一样

变量的解构赋值

变量的结构赋值可以简单的理解成是一个从对象中快速拷贝引用来声明变量的语法糖,主要可以从数组(对象)中依次拷贝属性.具体格式如下图:

说明:

1. 从对象中拷贝时,默认是从同名属性中拷贝,如果没有同名属性,可以使用映射来完成;
2. 变量的结构赋值是一个变量声明+赋值的过程,同名的let/const会报错;

字符串相关

JavaScript内部，字符以UTF-16的格式储存，每个字符固定为2个字节。对于那些需要4个字节储存的字符（Unicode码点大于0xFFFF的字符），JavaScript会认为它们是两个字符。对于两个字节的字符,我们可以使用String.charCodeAt和String.fromCharCode方法来编码解码,对于占四个字节的字符,ES6为我们提供了codePointAt和String.fromCodePoint来编码和解码

l  方法说明

charAt方法可以识别占两个字节的字符的位置,新版中有at()方法来获取四个字节发字符的位置(不一定广泛使用,需要垫片库)

传统上，JavaScript只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。

includes()：返回布尔值，表示是否找到了参数字符串。

startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。

endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

这三个方法都支持第二个参数，表示开始搜索的位置。

repeat方法返回一个新字符串，表示将原字符串重复n次。参数如果是小数，会被取整。如果repeat的参数是负数或者Infinity，会报错。

l  模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中.模板字符串中嵌入变量，需要将变量名写在${}之中。

数值相关

ES6在Math对象上新增了17个与数学相关的方法。所有这些方法都是静态方法，只能在Math对象上调用。

l  Math.trunc()

Math.trunc方法用于去除一个数的小数部分，返回整数部分。

l  Math.sign()

Math.sign方法用来判断一个数到底是正数、负数、还是零。

它会返回五种值。

参数为正数，返回+1；

参数为负数，返回-1；

参数为0，返回0；

参数为-0，返回-0;

其他值，返回NaN。

l  Math.cbrt()

Math.cbrt方法用于计算一个数的立方根。

l  Math.hypot()

Math.hypot方法返回所有参数的平方和的平方根。

ES6新增了6个三角函数方法。

Math.sinh(x) 返回x的双曲正弦（hyperbolic sine）

Math.cosh(x) 返回x的双曲余弦（hyperbolic cosine）

Math.tanh(x) 返回x的双曲正切（hyperbolic tangent）

Math.asinh(x) 返回x的反双曲正弦（inverse hyperbolic sine）

Math.acosh(x) 返回x的反双曲余弦（inverse hyperbolic cosine）

Math.atanh(x) 返回x的反双曲正切（inverse hyperbolic tangent）

数组

数组静态方法

l  Array.from()

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

l  Array.of()

Array.of方法用于将一组值，转换为数组。

数组实例方法

l  数组实例的copyWithin()

数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组

它接受三个参数。

target（必需）：从该位置开始替换数据。

start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数。

end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。

这三个参数都应该是数值，如果不是，会自动转为数值。

l  数组实例的find()和findIndex()

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

l  数组实例的fill()

fill方法使用给定值，填充一个数组。fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去。

fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

l  数组实例的entries()，keys()和values()

ES6提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象（详见《Iterator》一章），可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

l  数组实例的includes()

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。该方法属于ES7，但Babel转码器已经支持。该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

另外，Map和Set数据结构有一个has方法，需要注意与includes区分。

Map结构的has方法，是用来查找键名的，比如Map.prototype.has(key)、WeakMap.prototype.has(key)、Reflect.has(target, propertyKey)。

Set结构的has方法，是用来查找值的，比如Set.prototype.has(value)、WeakSet.prototype.has(value)。

函数

ES6中可以在定义函数时直接指定其默认值,也可以和函数的结构赋值结合使用,这样可以清晰明了的知道函数哪些参数是必须的,需要注意的是,定义了默认值的参数,应该放在参数序列的后面,这样可以明显看出来省略了哪些参数,也会为方法调用提供便利.

指定了函数参数的默认值后,函数的length属性返回的是没有默认值的参数个数,因此该属性不在可能会有误解,需要注意

l  Rest参数

Rest,顾名思义,就是其它,剩下的意思,放在他可以通过”…参数名”的形式来作为函数的一个参数,表示多余的参数,该参数是一个数组,会把多余的参数都放入数组中,如果函数只有一个rest参数,这该rest参数可以替代arguments对象

[注意]:rest参数必须是函数的最后一个参数,否则会报错;函数的length属性,不包含rest参数.

l  扩展运算符

扩展运算符（spread）是三个点（...）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用。

对象

l  Object.is()

ES6提出“Same-value equality”（同值相等）算法，用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。不同之处只有两个：一是+0不等于-0，二是NaN等于自身。

l  Object.assign()

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。

[注意点]Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

l  属性的可枚举性

对象的每个属性都有一个描述对象（Descriptor），用来控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。

描述对象的enumerable属性，称为”可枚举性“，如果该属性为false，就表示某些操作会忽略当前属性。

ES5有三个操作会忽略enumerable为false的属性。

for...in循环：只遍历对象自身的和继承的可枚举的属性

Object.keys()：返回对象自身的所有可枚举的属性的键名

JSON.stringify()：只串行化对象自身的可枚举的属性

ES6新增了一个操作Object.assign()，会忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性。

这四个操作之中，只有for...in会返回继承的属性。实际上，引入enumerable的最初目的，就是让某些属性可以规避掉for...in操作。比如，对象原型的toString方法，以及数组的length属性，就通过这种手段，不会被for...in遍历到。

l  属性的遍历

ES6一共有5种方法可以遍历对象的属性。

（1）for...in

for...in循环遍历对象自身的和继承的可枚举属性（不含Symbol属性）。

（2）Object.keys(obj)

Object.keys返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含Symbol属性）。

（3）Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组，包含对象自身的所有属性（不含Symbol属性，但是包括不可枚举属性）。

（4）Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组，包含对象自身的所有Symbol属性。

（5）Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组，包含对象自身的所有属性，不管是属性名是Symbol或字符串，也不管是否可枚举。

以上的5种方法遍历对象的属性，都遵守同样的属性遍历的次序规则。

首先遍历所有属性名为数值的属性，按照数字排序。

其次遍历所有属性名为字符串的属性，按照生成时间排序。

最后遍历所有属性名为Symbol值的属性，按照生成时间排序。

l  原型相关

（1）__proto__属性

__proto__属性（前后各两个下划线），用来读取或设置当前对象的prototype对象。目前，所有浏览器（包括IE11）都部署了这个属性。在实现上，__proto__调用的是Object.prototype.__proto__

（2）Object.setPrototypeOf()

Object.setPrototypeOf方法的作用与__proto__相同，用来设置一个对象的prototype对象。它是ES6正式推荐的设置原型对象的方法。

（3）Object.getPrototypeOf()

该方法与setPrototypeOf方法配套，用于读取一个对象的prototype对象。

l  对象枚举(遍历)

（1）Object.keys()

ES5 引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。

（2）Object.values()

Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。

（3）Object.entries 

Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。