1、let 的作用域与 const 命令相同:只在声明所在的块级作用域内有效。且不存在变量提升 。
let 所声明的变量,可以改变。
const 声明一个只读的常量。一旦声明,常量的值就不能改变。
简单类型的数据(数值、字符串、布尔值),不可以变动
复合类型的数据(主要是对象和数组),可以这样子变动
const a = [123]
a.push(456) // 成功
const b = {}
b.name = 'demo' // 成功
对于 数值、字符串、布尔值 经常会变的,用 let 声明。
对象、数组和函数用 const 来声明。
2、ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)
3、模板字符串(template string)用反引号(`)标识
模板字符串中嵌入变量,需要将变量名写在 ${ } 之中
let x = 1;
let y = 2;
console.log(`输出值为:${x}`) // "输出值为:1"
console.log(`输出值为:${x + y}`) // "输出值为:3"
模板字符串之中还能调用函数
function fn() {
return "Hello World";
}
console.log(`输出值为:${fn()}`) // "输出值为:Hello World"
4、字符串函数扩展
- includes():返回布尔值,表示是否找到了参数字符串。
- startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
- endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
这三个方法都支持第二个参数,表示开始搜索的位置。
let s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
5. 数值扩展
ES2016 新增了一个指数运算符(**)
多个指数运算符连用时,是从最右边开始计算的
指数运算符可以与等号结合,形成一个新的赋值运算符(**=)
let a = 1.5;
a **= 2;
// 等同于 a = a * a;
let b = 4;
b **= 3;
// 等同于 b = b * b * b;
6、函数的扩展
6. 1 rest 参数
ES6 引入 rest 参数(形式为...变量名),用于获取函数的多余参数,这样就不需要使用 arguments 对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
注意,rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错
// 报错
function f(a, ...b, c) {
// ...
}
6.2 箭头函数
如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分
// 等同于
const f = function () { return 5 };
const sum = (num1, num2) => num1 + num2;
// 等同于
const sum = function(num1, num2) {
return num1 + num2;
};
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用 return 语句返回
const sum = (num1, num2) => { return num1 + num2; }
使用注意点
箭头函数有几个使用注意点。
(1)函数体内的this
对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new
命令,否则会抛出一个错误。
(3)不可以使用arguments
对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
(4)不可以使用yield
命令,因此箭头函数不能用作 Generator 函数。
上面四点中,第一点尤其值得注意。this
对象的指向是可变的,但是在箭头函数中,它是固定的。
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
let id = 21;
foo.call({ id: 42 });
// id: 42
上面代码中,setTimeout 的参数是一个箭头函数,这个箭头函数的定义生效是在 foo 函数生成时,而它的真正执行要等到 100 毫秒后。如果是普通函数,执行时 this 应该指向全局对象window,这时应该输出 21。但是,箭头函数导致 this 总是指向函数定义生效时所在的对象(本例是{ id: 42}),所以输出的是 42。
箭头函数里面根本没有自己的this
,而是引用外层的this
对于非箭头函数来说:
this
就是函数运行时所在的环境对象。下面分四种情况,详细讨论this
的用法
情况一:纯粹的函数调用
这是函数的最通常用法,属于全局性调用,因此this
就代表全局对象。请看下面这段代码,它的运行结果是1。
var x = 1; function test() { console.log(this.x); } test(); // 1
情况二:作为对象方法的调用
函数还可以作为某个对象的方法调用,这时this
就指这个上级对象。
function test() { console.log(this.x); } var obj = {}; obj.x = 1; obj.m = test; obj.m(); // 1
情况三 作为构造函数调用
所谓构造函数,就是通过这个函数,可以生成一个新对象。这时,this
就指这个新对象。
function test() { this.x = 1; } var obj = new test(); obj.x // 1
运行结果为1。为了表明这时this不是全局对象,我们对代码做一些改变:
var x = 2; function test() { this.x = 1; } var obj = new test(); x // 2
运行结果为2,表明全局变量x
的值根本没变。
情况四 apply 调用
apply()
是函数的一个方法,作用是改变函数的调用对象。它的第一个参数就表示改变后的调用这个函数的对象。因此,这时this
指的就是这第一个参数。
var x = 0; function test() { console.log(this.x); } var obj = {}; obj.x = 1; obj.m = test; obj.m.apply() // 0
apply()
的参数为空时,默认调用全局对象。因此,这时的运行结果为0
,证明this
指的是全局对象。
如果把最后一行代码修改为
obj.m.apply(obj); //1
运行结果就变成了1
,证明了这时this
代表的是对象obj
。
7. 数组的扩展
扩展运算符(spread)是三个点(...)
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
数组实例的 entries(),keys() 和 values()
用 for...of 循环进行遍历,唯一的区别是 keys() 是对键名的遍历、values() 是对键值的遍历,entries() 是对键值对的遍历。
8. 对象的扩展
Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)
Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。
注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
Object.assign 方法实行的是浅拷贝,而不是深拷贝
9. Set
ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。
// 基本用法
const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
for (let i of s) {
console.log(i);
}
// 2 3 5 4
// 去除数组的重复成员
const array = [1, 1, 2, 3, 4, 4]
[...new Set(array)]
// [1, 2, 3, 4]
10. Promise 对象
Promise 是异步编程的一种解决方案。
Promise 对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。
Promise 对象的状态改变,只有两种可能:从 pending 变为 fulfilled 和从 pending 变为
rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)
Promise
也有一些缺点。首先,无法取消Promise
,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise
内部抛出的错误,不会反应到外部。第三,当处于pending
状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
promise.then(function(value) {
// success
}, function(error) {
// failure
});