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）属性的键值对数组。