箭头函数
箭头函数与包围它的代码共享同一个this,可以很好的解决this的指向问题。有经验的JavaScript开发者都熟悉诸如var self = this;或var that = this这种引用外围this的模式。但借助=>,就不需要这种模式了。
const f = v => v
上面的代码等同于
const f = function(v) {
return v
}
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
const sum = (num1, num2) => { return num1 + num2 }
由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。
const getTempItem = id => ({ id: id, name: "Temp" })
使用注意点
- 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
- 不可用当做构造函数,也就是说,不可用使用new命令,否则会抛出错误。
- 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
扩展运算符
1. 解构赋值
let {x,y,...z} = {x:1,y:2,a:3,b:4};
x //1
y //2
z //{a:3,b:4}
let a = { ...'hello', ...'wa'}
a = { 0: w, 1: a, 2: l, 3: l, 4: o }
let b = { ...'javascript', ...'javd', ...[1, 2, 3] }
b = { 0: 1, 1: 2, 2: 3, 4: d, 4: s, 5: c, 6: r, 7: i, 8: p: 9: t }
2.扩展运算符
let z = {a:1,b:2};
let n = {...z};
n // {a:1, b:2}
这等同于Object.assign的使用
let aClone = {...a};
//等同于
let aClone = Object.assign({},a)
如果扩展运算符的参数是null或undefined,这两个值会被忽略,不会报错。
let obj = {...null,...undefined}; //不报错
模板字符串
- 不使用模板字符串
const name = 'Your name is ' + first + ' ' + last + '.'
- 使用模板字符串
const name = `Your name is ${first} ${last}.`
模块化(Module)
ES5不支持原生的模块化,在ES6中模块作为重要的组成部分被添加进来。
模块功能主要由两个命令构成:export和import。
- export命令用于规定模块的对外接口
- import命令用于导入其他模块提供的功能。
导出(export)
- 导出变量
export const name = 'Rainbow'
- 导出函数
export function myFunction(arg) {
return arg
}
导入(import)
定义好模块的输出以后就可以在另外一个模块通过import引用。
import {myModule} from 'myModule';// main.js
import {name,age} from 'test';// test.js
promise
promise是异步编程的一种解决方案
- 不使用es6
setTimeout(function()
{
console.log('Hello'); // 1秒后输出"Hello"
setTimeout(function()
{
console.log('Hi'); // 2秒后输出"Hi"
}, 1000);
}, 1000);
- 使用es6
var waitSecond = new Promise(function(resolve, reject)
{
setTimeout(resolve, 1000);
});
waitSecond
.then(function()
{
console.log("Hello"); // 1秒后输出"Hello"
return waitSecond;
})
.then(function()
{
console.log("Hi"); // 2秒后输出"Hi"
});
let和const命令
let 和var的区别
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10
上面代码中,变量i是var声明的,在全局范围内都有效,所以全局只有一个变量i。每一次循环,变量i的值都会发生改变,而循环内被赋给数组a的function在运行时,会通过闭包读到这同一个变量i,导致最后输出的是最后一轮的i的值,也就是10。
而如果使用let,声明的变量仅在块级作用域内有效,最后输出的是6。
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
上面代码中,变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。
不存在变量提升
var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为undefined。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用。
为了纠正这种现象,let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
使用let与const定义的变量为块级作用域
{
let a = 10;
}
console.log(a); //-1 or Error“ReferenceError: a is not defined”