ECMAScript 新特性—学习笔记

ECMAScript与JavaScript区别与联系

• ECMAScript是JavaScript语言本身，通常看作JavaScript得标准化规范
• JavaScript是ECMAScript的扩展语言
• ECMAScript只提供了最基本得语法，停留在语言层面，不能用于实际开发
• 2015年开始ES保持每年一个大版本更新

ECMAScript2015新特性

1、let声明变量，新增了块级作用域。外层代码块不受内层代码块的影响 块级作用域以{}区分

2、ES6允许块级作用域的任意嵌套。内层作用域可以定义外层作用域的同名变量。

3、ES5规定，函数只能在顶层作用于和函数作用域之中声明，不能在块级作用域声明。ES6引入了块级作用域，明确允许在块级作用域之中声明函数

4、ES6规定，块级作用域之中，函数语句声明行为类似let，在块级作用域之外不可用。

5、常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性:

const foo = {}; 
foo.prop = 123;
foo = {}; // TypeError: "foo" is read-only

6、ES5只有两种变量声明的方法：var和function 命令。ES6有6中变量声明方(letconstimportclass) 7、解构赋值允许指定默认值

var [foo = true] = []; 
foo // true

8、ES6内部相等运算符(===),判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined,默认值是不会生效的。

var [x = 1] = [undefined]; 
x // 1   
var [x = 1] = [null];
x // null

9、如果默认值是一个表达式，那么这个表达式时惰性求值的，即只有在用到的时候，才会求值。

function f() { 
    console.log('aaa');
} 
let [x = f()] = [1];

上述代码中，因为x能取到值，所以函数根本不会执行。 10、解构赋值不仅可以用于数组，还可以用于对象。

11、对象的结构与数组有一个重要不同。数组的元素是按次序排列的，变量夫人取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

12、如果变量名和属性名不一致，必须写成这样

var {foo:baz}={foo:'aaa,bar:'bbb};  
baz //'aaa  
let obj = { first: 'hello', last: 'world' }; 
let { first: f, last: l } = obj; 
f // 'hello'
l // 'world'

也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

var { foo: baz } = { foo: "aaa", bar: "bbb" }; 
baz // "aaa"
foo // error: foo is not defined

上述代码中，真正被赋值的是baz而不是foo

13、下面代码中，let命令下面一行的圆括号是必须的，否则会报错。因为解析器会将起首的达阔，理解成一个代码块，而不是赋值语句。

let foo;
({foo} = {foo: 1}); // 成功

14、和数组一样，解构也可以用于嵌套结构的对象。

15、对象的解构也可以指定默认值。

16、默认生效的条件是，对象的属性值严格等于undefined

var {x = 3} = {x: undefined}; 
x // 3 
var {x = 3} = {x: null}; 
x // null

17、如果解构失败，变量的值等于undefined

var {foo} = {bar: 'baz'}; 
foo // undefined

18、字符串也可以解构赋值

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

类似数据的对象都有对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length : len} = 'hello';
len // 5

19、解构赋值时，如果等号右边是数值和布尔值，否则就会转为对象

let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true

上面代码中，数值和布尔的对象都有toString属性，因此变量s都能取到值。

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

20、includes()、startsWidth()、endsWith()

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

这三个方法都支持第二个参数，表示开始搜索的位置，endsWidth()的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置只到字符的结束

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

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

如果参数是0到-1之间的小数，则等同于0，这是因为会先进行取整运算。0到-1之间的小数，取整以后等于-0，repeat视同为0。

'na'.repeat(-0.9) // ""
如果repeat的参数是字符串，则会先转换成数字。
'na'.repeat('na') // "" 
'na'.repeat('3') // "nanana"

22、padStart()，padEnd()

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

padStart和padEnd一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

如果源字符串的长度，等于或大于大于指定的最小长度，则返回原字符串

如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。

'abc'.padStart(10, '0123456789') // '0123456abc'

如果省略第二个参数，则会用空格补全长度。

'x'.padStart(4) // ' x' 'x'.padEnd(4) // 'x '

padStart的常见用途是为数值补全指定位数。下面代码生成10位的数值字符串。

'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

另一个用途是提示字符串格式

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

23、ES6在Number对象上，新提供了Number.isFinite()和Number.isNaN()两个方法。 Number.isFinite()用来检查一个数值是否为有限的（finite）。

Number.isNaN()用来检查一个值是否为NaN。

Number.parseInt(string,[ radix ])string - 要解析的值、radix - 表示基数的 2到36之间的整数。 Number.parseFloat(string)返回字符串的浮点表示。

24、Number.isInteger()用来判断一个值是否为整数。需要注意的是，在JavaScript内部，整数和浮点数是同样的储存方法，所以3和3.0被视为同一个值。

25、Math对象的扩展： Math.trunc方法用于去除一个数的小数部分，返回整数部分。

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

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

对于没有部署这个方法的环境，可以用下面的代码模拟。

Math.trunc = Math.trunc || function(x) {
return x < 0 ? Math.ceil(x) : Math.floor(x);
};

Math.sign()

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

• 它会返回五种值。
• 参数为正数，返回+1；
• 参数为负数，返回-1；
• 参数为0，返回0；
• 参数为-0，返回-0; 其他值，返回NaN。 对于没有部署这个方法的环境，可以用下面的代码模拟。

Math.sign = Math.sign || function(x) {
    x = +x; // convert to a number
    if (x === 0 || isNaN(x)) {
        return x;
    }
    return x > 0 ? 1 : -1;
};

26、Array.from()

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

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

任何有length属性的对象，都可以通过Array.from方法转为数组

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]

返回各种数据的类型：

function typesOf () {
    return Array.from(arguments, value => typeof value)
}
typesOf(null, [], NaN)
// ['object', 'object', 'number']

27、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() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

28、数组实例的find()和findIndex() 数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值 为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。 数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。 这两个方法都可以发现NaN，弥补了数组的IndexOf方法的不足。

[NaN].findIndex(y => Object.is(NaN, y))
// 0

29、数组实例的fill()

fill方法使用给定值，填充一个数组。

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

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

上面代码表示，fill方法从1号位开始，向原数组填充7，到2号位之前结束。

30、数组实例的entries()，keys()和values() 是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

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

31、 数组实例的includes()

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。该方法属于ES7，但Babel转码器 已经支持。

32、for...of循环也会遍历空位。map方法遍历，空位是会跳过的 33、

function add(...values) {
    let sum = 0;
    for (var val of values) {
        sum += val;
    }
    return sum;
}
add(2, 5, 3) // 10

34、扩展运算符

// ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

35、Set实例的属性和方法

Set实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。

add(value)// 添加某个值，返回Set结构本身。
delete(value)// 删除某个值，返回一个布尔值，表示删除是否成功。
has(value)// 返回一个布尔值，表示该值是否为Set的成员。
clear()// 清除所有成员，没有返回值。

36、计算属性名，对象中的键名可以使用表达式

在ES6中，把属性名用[ ]括起来，则括号中就可以引用提前定义的变量

let attName = 'name';
let p = {
    [attName] : '李四',  // 引用了变量attName。相当于添加了一个属性名为name的属性
    age : 20
}
console.log(p[attName])  // 李四

37、Proxy 38、Proxy对比defineProperty 39、Reflect 40、promise 41、class类 42、static 静态方法 43、extend 类的继承 44、map 可以使用任意类型的数据结构作为键值

{ name: 222 } : 555

45、Symbol

全新的原始数据类型

46、iterator

47、generator

48、yield关键词