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不允许在相同作用域内,重复声明同一个变量。
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。