由于现在项目中使用的大部分都是 es6,所以现在记录一下常用的,还有之前未注意到的。
简介
历史
略。
Babel 转码器
可以把 es6 转换成 es5
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
return item + 1
})
安装
npm install --save-dev @babel/core
polyfill
由于只转换新的 JavaScript 语法,而不转换 API,
let & const
var 会存在变量优先级提升的问题。而且作用域还是全局的。而且还可以多次声明。造成全局污染。
let、const 都是块级作用域,出了块作用域就无效了。
let 声明变量(就是可以改变指针指向的那种)。const 声明常量(指针指向不可以改变,但是对象内的数据可以改变)。
如果要声明一个对象完全不可变,那么需要冻结。
// 冻结对象的 API
Object.freeze({});
// 把一个对象和他里面所有的子对象全部冻结
var constantize = (obj) => {
Object.keys(obj).forEach((key, i) =>{
if (typeof obj[key] === 'object') {
constantize(obj[key])
}
}
})
}
顶层对象的属性
顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象。ES5 之中,顶层对象的属性与全局变量是等价的。
解构
允许默认值。
只有当 === undefined 才有效。
字符串
`${a + b}xxxx`
字符串、正则、数值的扩展
略
函数的扩张
支持默认值。
function fetch(url, { body = '', method = 'GET', headers = {} } = {}) {
console.log(method);
}
fetch('http://example.com')
如果你想使用默认值,那么不传或者显式的传一个 undefined 都是可以的。
rest 参数
理解 this
数组
扩展运算符
console.log(...[1, 2])
替代函数的 apply 方法
// es5
function f(x, y, z) {
}
var args = [0, 1, 2]
f.apply(null, args)
// es6
function f(x, y, z) {
}
let args = [0, 1, 2]
f(...args)
实际例子
Math.max.apply(null, [14, 3, 77])
Math.max(...[14, 3, 77])
Math.max(14, 3, 77)
赋值数组
[...arr1, ...arr2]
这种方法时浅拷贝
解构
const [first, ...rest] = [1, 2, 3]
字符串转换成为字符数组
[...'hello']
高阶函数
findIndex/includes 可以代替 indexOf 了。
对象
{x, y} 等同于 {x: x, y: y}
方法也是一个意思
const person = {
name,
age,
hello() {
xxxx
},
等同于
hello: funtion() {
xxx
}
}
this、bind、call、apply
引用: ECMAScript6入门