ES6 入门

153 阅读2分钟

由于现在项目中使用的大部分都是 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 会存在变量优先级提升的问题。而且作用域还是全局的。而且还可以多次声明。造成全局污染。 letconst 都是块级作用域,出了块作用域就无效了。 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

this/bind/call/apply

引用: ECMAScript6入门