ES6规范新特性总结-EW帮帮网

ES6新特性

var、let和const
解构赋值
- 用途：
字符串的扩展
正则的扩展
- RegExp构造函数
数值的扩展
数组的扩展

下面是波煮在阅读阮一峰圣经之后总结的一些关于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\nWorld

let 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

对数方法

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

三角函数方法

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

Math.sinh(x)：返回x的双曲正弦
2. Math.conh(x)：返回x的双曲余弦
Math.tanh(x)：返回x的双曲正切
Math.asinh(x)：返回x的反双曲正弦
Math.acosh(x)：返回x的反双曲余弦
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
// 1

for(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方法

ES6规范新特性总结

ES6新特性

var、let和const

不存在变量提升

暂时性死区

不允许重复声明

解构赋值

用途：

交换变量的值

从函数返回多个值

提取JSON数据

遍历map结构

输入模块的制定方法

字符串的扩展

codePointAt()

String.fromCharCode()

at()

includes(),startsWith(),endsWith()

repeat()

padStart(), padEnd()

模版字符串

String.raw()

正则的扩展

RegExp构造函数

数值的扩展

Number()方法

Number.isFinite() 和 Number.isNaN()

Number.parseInt() 和 Number.parseFloat()

Number.isInterger()

Number.EPSILON

安全整数和Number.isSafeInteger()

Math对象的扩展

Math.trunc()

Math.sign()

Math.cbrt()

Math.clz32()

Math.imul()

Math.fround()

Math.hypot()

对数方法

三角函数方法

指数运算符

数组的扩展

Array.from()

Array.of()

数组实例的copyWithin()

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

数组实例的fill()

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

数组实例的includes()

数组的空位

数组推导

网站公告

今日签到

热门文章

最新发布