ES6笔记

ES6新特性学习笔记

let和const

ES6有了大括号块级作用域,let定义的只在当前块级作用域有效,循环绑定onclick清楚多了。

for(let i=0;i<list.length;i++){
  list[i].onclick = function(){
    alert(i);
  }
}

let存在暂时死区(必须在声明之后只用),不允许重复声明

const所定义的变量只读,一旦声明,不可改变,且必须在定义时赋值

const foo = 1;
const foo = {}; //注意
const foo = {};

// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only

const所保证的只是指向的内存地址不变,指向对象时需要谨慎。

变量的解构赋值

数组

let [a, b, c] = [1, 2, 3];

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

let [x, y, z] = new Set(['a', 'b', 'c']);

可以指定默认值

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

对象

let { foo, bar } = { foo: "aaa", bar: "bbb" };

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

let { log, sin, cos } = Math;

字符串

const [a, b, c, d, e] = 'hello';

函数参数

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

add([3, 3]);  //6
add([4]);     //6
add([,1]);    //2
add();        //3
add(null);    //TypeError  

字符串的扩展

遍历器

1
2
3
4
5
6
7
8
let str = 'a b';
for (let s of str) {
console.log(s);
}
//a
//
//b

搜索 includes,startsWith,endsWith

1
2
3
4
5
6
var s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
// 第二个参数表示开始搜索的位置,默认为0,endsWith从指定位置向前搜索,其他两个向后搜索

重复 repeat

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

补全 padStart, padEnd

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

模板字符串

1
2
3
// 基本的变量嵌入和简单计算
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

数组的扩展

Array.from

只要是部署了Iterator接口的数据结构,Array.from都能将其转为数组。

1
2
3
4
5
6
7
8
9
10
11
// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function (p) {
console.log(p);
});
// arguments对象
function foo() {
var args = Array.from(arguments);
// ...
}

entries(),keys()和values()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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"

includes

解决了indexOf不够语义化和对NaN误判的问题。

1
2
3
4
5
6
// 第二个参数表示从开始搜索位置的index
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[NaN].includes(NaN)
// true

函数的扩展

默认值

```