ES6整理

1、let

let和var的作用相同，都是声明一个变量，但用var声明的变量会出现变量提升，而let声明的变量只在代码块内有效。

{
  let a = 10;
  var b = 1;
}
a // ReferenceError: a is not defined.
b // 1

非常常见的一个闭包题

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6]();

答案显而易见，是10。但是用let，结果就不一样了。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

for代码块没有形成作用域，所以里面的function不构成闭包，所以在每一次执行a[i] = function () { console.log(i);}时，并不会保存当时i的值，所以只有当a[i]()这个函数执行时，才会使i值变现，这时，function沿着作用域链查找i的值，父作用域就是window，i的值经过十次i++，已经是10，所以a[6]()会输出10

let声明的变量仅在块级作用域有效，所以这里的i只在本轮循环有效果，每次循环的i其实都是一个新的变量

除此之外，let不允许在相同作用域内，重复声明同一个变量。

2、const

const用来声明一个常量，一旦被声明，它的值将不可改变。且在初始化时，必须赋值，否则将会报错。

ps：es6有六种声明变量的方法var、function、let、const、import、class

3、变量的赋值

es6中给变量的赋值，不必像es5那样一个个赋值，它有更简便的方法。

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

es6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。要求是等号左边必须是数组，或可遍历的结构

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

解构不仅可以用于数组，也可以用于对象

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

字符串的解构赋值

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

4、字符串的方法

at()返回字符串给定位置的字符

'abc'.charAt(0) // "a"

5、数组的扩展

数组复制

const a1 = [1, 2];
const a2 = a1;
a2[0] = 2;
a1 // [2, 2]

上述数组复制的方法，不是真正的复制，a2的改变会导致a1的改变

es6让数组复制变得更简单

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

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

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

6、Set

set类似于数组，但是成员的值都是唯一的，没有重复的值。

可以用set进行数组去重

var arr2=Array.from(new Set(arr));

再来比较一下es5的数组去重方法，累觉不爱

var arr=[1,2,3,4,4];
var arr2=[];
for(var i=0;i<arr.length;i++){
    if(arr2.indexOf(arr[i])==-1){
        arr2.push(arr[i]);
       }
   }
return arr2;

7、Map（这个其实没有很懂）它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键

8、箭头函数

基本结构：=前面函数名，=后面参数，=>后面返回值

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

多参数或无参数

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

箭头函数的this和普通函数的this有很大的区别

普通函数的this指向调用它的对象，是可变的；而箭头函数自己实际上是没有this的，它的this来源于它父级函数，且是固定的。因为它没有this，所以不可以当作构造函数。

举个栗子

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

如果是普通函数，那this指向全局，输出为21；但是箭头函数，指向函数定义生效时所在的对象，即foo运行时，此时id的值为42，输出为42。

9、promise

关于这个，上篇转载文我觉得写得很清楚大白话讲解promise。

猜你喜欢