ES6规范新特性总结

• 下面是波煮在阅读阮一峰圣经之后总结的一些关于ES6的知识点，希望可以帮助到大家

var、let和const

不存在变量提升

• var命令会存在变量提升，但是let命令不会变量提升

暂时性死区

• 本质：只要一进去当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量

不允许重复声明

• let不允许在相同作用域内，重复声明同一个变量

解构赋值

• 规则：只要等号右边的值不是对象，就先将其转化为对象，由于undefined和null无法转为对象，所以对它们进行解构赋值都会报错
  函数参数的解构赋值
• 函数的参数也可以解构赋值

function add([x,y]){return x + y
}add([1,2]) //x=1,y=2

用途：

交换变量的值

[x,y] = [y,x] //交换了x和y的值

从函数返回多个值

• 函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。有了解构赋值，取出这些值就非常方便

const example = ()=>{return [1,2,3]
}var [a,b,c] = example()
//a = 1
//b = 2
//c = 3

提取JSON数据

• 解构赋值对提取JSON对象中的数据尤其有用
• 可以快速提取JSON数据的值

var jsonData = {id:1,status:"OK",data:[123,321]
}let {id,status,data} = jsonData
//id = 1
//status = "OK"
//data = [123,321]

遍历map结构

• 任何部署了iterator接口的对象，都可以用for…of循环遍历。Map结构原生支持iterator接口，配合变量的解构赋值，获取键名和键值就非常方便

var map = new Map()
map.set('first','one')
map.set('second','two')for(let [key,value] of map){console.log(key + "is" value)
}
//first is one
//second is two

• 如果只想获取键名或者键值，可以写成下面这样

//获取键名
for(let [key] of map){}//获取键值
for(let [,value] of map){}

输入模块的制定方法

• 加载模块时，往往需要指定输入哪些方法。解构赋值是的输入语句非常清晰

const {method1, method2} = require('source-methods')

字符串的扩展

codePointAt()

• 能够正确处理4个字节储存的字符，返回一个字符的码点
• 对于2个字节储存的常规字符，它的返回结果与charCodeAt()方法相同
• codePointAt()方法返回的是码点的十进制值，如果想要十六进制的值，可以使用toString方法转换一下
• codePointAt()方法实测实一个字符由2个字节还是4个字节组成的最简单的方法

const is32Bit = (c)=>{return c.codePointAt(0) > 0xFFFF
}is32Bit("𠜂")
is32Bit("a")

String.fromCharCode()

• 可以识别大于0xFFFF的字符

注意：fromCharCode()方法定义在String对象上，而codePointAt()方法定义在字符串的实例对象上

at()

• ES5对字符串对象提供了charAt方法，返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符
• ES7为字符串实例提供了at方法，可以识别Unicode编号大于0xFFFF的字符，返回正确的字符

includes(),startsWith(),endsWith()

• includes()：返回布尔值，表示是否找到了参数字符串
• startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部
• endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部

var s = "Hello world"
s.startsWith('Hello') //true
s.endsWith('!') //false
s.includes('o') //true

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

repeat()

• repeat方法返回一个新字符串，表示将原字符串重复n次

'x'.repeat(3) //"xxx"

• 参数如果是小数，会向下取整，即忽略后面的小数部分

'x'.repeat(2.9)

• 如果参数是负数或者Infinity，会报错
• 参数NaN等同于0

padStart(), padEnd()

• ES7推出来字符串补全长度的功能，如果某个字符串未达指定长度，会在头部或者尾部补全。padStart用于头部补全，padEnd用于尾部补全

'x'.padStart(5,'ab') //'ababx'
'x'.padStart(4,'ab') //'abax''x'.padEnd(5,'ab') //'xabab'

模版字符串

• 模版字符串是增强版的字符串，用反引号标识。
• 可以都当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量

注意：在模版字符串中嵌入变量，需要将变量名写在${}中

String.raw()

• 是一个特殊的模版字符串标签，用于返回模版字符串的原始内容，而不是处理后的字符串。
• 他不会对字符串中的转义字符进行解释，而是直接返回他们的原始文本

let rawStr = String.raw`Hello\nWorld`;
console.log(rawStr);// 输出：Hello\nWorldlet str = `Hello\nWorld`;
console.log(str);// 输出：// Hello// World

正则的扩展

RegExp构造函数

• ES6允许RegExp构造函数接受正则表达式作为参数，这是会返回一个原有正则表达式的拷贝

var regex = new RegExp(/xyz/i)

数值的扩展

• ES6提供了二进制和八进制数值的新写法，分别用前缀0b 和 0o 表示

0b111110111 === 503 //true
0o767 === 503 //ture

• 如果要将使用0b和0x前缀的字符串数值转为十进制的值，要使用

Number()方法

Number('0b111') //7
Number('0o10') //8

Number.isFinite() 和 Number.isNaN()

• ES6在Number对象上新提供了Number.isFinite()和Number.isNaN()两个方法，用来检查Infinite和NaN这两个特殊值
• Number.isFinite()：用来检查一个数值是否非无穷
  - Number.isNaN()：用来检查一个值是否为NaN

注意：这两个新方法只对数值有效，对于非数值一律返回false

Number.parseInt() 和 Number.parseFloat()

• ES6将全局方法parseInt()和parseFloat()移植到了Number对象上，行为完全保持不变，这样做的目的，是逐步减少全局性方法，使语言逐步模块化
• 用于将字符串安全地转换为数字

Number.isInterger()

• 用来判断一个值是否为整数。
• 注意：在js内部，整数和浮点数是同样的储存方法，所以3和3.0被视为同一个值

Number.isInteger(25) //true
Number.isInteger(25.0) //true
Number.isInteger(25.1) //false
Number.isInteger("15") //false
Number.isInteger(true) //false

Number.EPSILON

• ES6在Number对象上新增了一个极小的常量------Number.EPSILON
• 引入这个值的目的：在于为浮点数计算设置一个误差范围。

安全整数和Number.isSafeInteger()

• ES6引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER两个常量，用来表示这个范围的上下限 ------ -2的53次方到2的53次方（不含两个端点）
• Number.isSafeInteger()：用来判断一个整数是否落在上述范围内

Math对象的扩展

Math.trunc()

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

Math.trunc(4.1) //4
Math.trunc(4.9) //4
Math.trunc(-4.1) //-4
Math.trunc(-4.9) //-4
Math.trunc(-0.1234) //-0

• 对于非数值，Math.trunc()内部使用Number方法将其先转为数值
• 对于空值和无法截取的整数的值，返回NaN

Math.trunc(NaN) //NaN
Math.trunc('foo') //NaN
Math.trunc() //NaN

Math.sign()

• Math.sign()方法用于判断一个数到底是正数、负数、还是零
• 返回值的五种情况：
  • 参数为正数，返回+1
  • 参数为负数，返回-1
  • 参数为0，返回0
  • 参数为-0，返回-0
  • 其他值，返回NaN

Math.cbrt()

• Math.cbrt()方法用于计算一个数的立方根

Math.clz32()

• 该方法返回一个数的32位无符号整数形式有多少个前导0

Math.imul()

• 该方法返回两个数以32位带符号整数形式相乘的结果，返回的也是一个32位的带符号整数

Math.imul(2,4) //8
Math.imul(-1,8) //-8
Math.imul(-2,-2) //4

Math.fround()

• Math.fround()方法返回一个数的单精度浮点数形式

Math.fround(1) //1
Math.fround(1.337) //1.3370000123977661

Math.hypot()

• 该方法返回所有参数的平方和的平方根

Math.hypot(3,4) //5
Math.hypot(NaN) //NaN
Math.hypot(3,4,'foo') //NaN

• 只要有一个参数无法转为数值，就会返回NaN

对数方法

1. Math.expm1(x)：返回e^x-1，即Math.exp(x) - 1
2. Math.log1p(x)：返回log(1+x)，如果x小于-1，则返回NaN
3. Math.log10(x)：返回以10为底的x的对数，如果x小于0，则返回NaN
4. Math.log2(x)：返回以2为底的x的对数。如果x小于0，则返回NaN

三角函数方法

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

1. Math.sinh(x)：返回x的双曲正弦
   2. Math.conh(x)：返回x的双曲余弦
2. Math.tanh(x)：返回x的双曲正切
3. Math.asinh(x)：返回x的反双曲正弦
4. Math.acosh(x)：返回x的反双曲余弦
5. Math.atanh(x)：返回x的反双曲正切

指数运算符

• ES7新增了一个指数运算符（**）

2**2 = 4
3**3 = 27//新的赋值运算符
a **= 2
等同于：a = a * a

数组的扩展

Array.from()

• 该方法用于将两类对象转为真正的数组：
  1. 类似数组的对象：必须有length属性
  2. 可遍历的对象（包括set和map）

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

注意：只要是部署了iterator接口的数据结构，Array.from都能将其转为数组

• 如果参数是一个真正的数组，那么该方法的返回结果是一个一模一样的数组
  - Array.from()还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组
• 应用：将字符串转为数组，然后返回字符串的长度，因为它能正确处理各种Unicode字符，可以避免JavaScript将大于\uFFFF的Unicode字符算作2个字符的bug

Array.of()

- Array.of()方法用于将一组值转换为数组

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

• Array.of()基本上可以用来替代Array()或者new Array()，并且不存在由于参数不同而导致的重载。
• Array.of()总是返回参数值组成的数组。如果没有参数，就返回一个空数组

数组实例的copyWithin()

• 该方法的作用：在当前数组内部将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。使用这个方法会修改当前数组

[1,2,3,4,5].copyWithin(0,3)
//[4,5,3,4,5]

• 上述代码的解释：上述代码表示将从3号位置直到数组结束的成员（4和5），复制到从0号位置开始的位置，结果覆盖了原来的1和2

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

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

[1,4,-5,10].find(n=>n<0)
//-5

• 数组实例的findIndex()方法与find()方法非常类似，返回的是第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

数组实例的fill()

• fill()方法使用给定值填充数组
• fill()方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置

数组实例的entries()、keys()、和values()

• 这三个方法都用来遍历数组，返回一个遍历器对象
• keys()是对键名的遍历
• values()是对键值的遍历
• entries()是对键值对的遍历

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

数组实例的includes()

• 该方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似
• 该方法的第二个参数表示搜索的起始位置，默认是0
• 没有该方法时，通常使用数组的indexOf方法检查是否包含某个值

注意：Map和Set数据结构有一个has方法，需要和includes进行区分

• Map结构的has方法是用来查找键名的
• Set结构的has方法是用来查找值的

数组的空位

• 数组的空位指数组的某一个位置没有任何值
• 注意：空位不是undefined，一个位置的值等于undefined依然是有值的。空位是没有任何值
• ES6明确将空位转为undefined

数组推导

• 允许直接通过现有数组生成新数组

var a1 = [1,2,3,4]
var a2 = [for (i of a1) i * 2]a2 //[2,4,6,8]

• 上面的代码表示，数组a2通过for…of结构直接在a1的基础上生成
• 注意，数组推导中，for…of结构总是写在最前面，返回的表达式写在最后面
• 数组推导可以替代map和filter方法