ECMA Script6 特性整理 - @lfanke个人学习笔记

资料：哔哩哔哩、ECMA

在Web环境下js就是ECMA script加上Web的Api：bom、dom

 

在node.js环境下js就是加上了Node Api

 

所以。。。js就是ecma script的扩展语言，es语言规定了基础语法，js实现es基础语法后还进行了一定的扩充。js语言本身指的就是es

 

从ES2015开始，就被称为ES6 ...ES2015长达6年的标准化带来了很多新功能。。。颠覆的 ...

之后每个版本也用年号作为版本标识。且一年一个新版本。

作用域

在es2015之前，只有两种作用域：全局作用域与函数作用域。在es2015中新增块级作用域

块：{ 这里 }，就是if语句或花括号包裹起来的那些。

一般区别

if (" ") {
    var xxx = 123;
}
console.log(xxx);   // -> 123

if(" ") {
    let xxx = 233;
}
console.log(xxx);   // -> ReferenceError

其他常见问题：

for (var i=0;i<3;++i) {
    for (var i=0;i<3;++i) {
        console.log(i);
    }
} // -> 0 1 2 因为内层的var i声明覆盖了外层的，所以内层结束外层也结束了..
// 看py就没有这个问题，py是给i赋值，直到StopIteration才停止，与i多少无关
// 但凡有一个let就不会出现这种情况。。。let声明的变量与var隔绝
// var定义的变量可以var重定义，let就会报错，反之也是。。。

代替闭包

var elements = [{}, {}, {}]
for (var i=0;i<elements.length;++i) {
    elements[i].onclick = function () {
        console.log(i)
    }
}
// 此时console.log的 i 是 3，当再次 i=233 时，log(i)就是233
// 可以看到作用域并未被隔绝
// 原来的解决方法是闭包，利用函数作用域隔绝全局作用域
for (var i=0;i<elements.length;++i) {
    elements[i].onclick = (function (i) {
        return function () {console.log(i)}
    })(i)
}
// 现在可以直接利用let来将块级作用域隔离
var elements = [{}, {}, {}]
for (let i=0;i<elements.length;++i) {
    elements[i].onclick = function () {
        console.log(i)
    }
}
// for 括号里是一层作用域，大括号里是一层作用域
for (let i=0;i<3;i++) {
    let i = 'foo';
    console.log(i);
}
// 相当于：
let i = 0;
if (i < 3) {
    let i = 'foo';  // 此时为内层 - 局部的！！！
    console.log(i);
}
i++
...

常量

const emm = 233 // 在 let 基础上多了 `只读` 特性。声明过后不允许再被修改
// 且声明必须赋值。注意：只读是针对内存地址而言的，赋值才会改变内存地址
// 表示不能修改指向的内存地址。但是里面的数据可变，如
const emm = {}
emm.name = 233

解构

数组解构

以前只能：let a = li[0], b = li[1], c = li[2]，只能通过下标取，但是现在可以解包

let [a, b, c] = li
//此时a是li的首元素，b、c依次，如果数组中只有俩元素，则多出来的是undefined
// 如果只想取一个，则记得逗号不能少
let [, , c] = li
// 剩余元素打包
let [a, ...last] = li    // 仨点只能在最后一个元素上使用
// 如果害怕提取到undefined，则可以提供默认值
let [a, b, c='emm'] = li

对象解构

对象只能靠变量名来提取，毕竟属性又没有一个固定次序，不能靠下标

let obj = {
    name: 'lfanke',
    age: 17,
    sex: 'man'
}
let {name, age, xxx} = obj;
// 其中，name、age正常取到了，但是由于没有xxx属性，所以xxx为undefined
// 但是直接用属性名常常会产生命名冲突，所以推荐使用别名
let {name: other_name = 'default value'} = obj;
// 成员名 + : + 别名

常用但不推荐的偷懒方式：

const {log} = console;
log('你好呀！！！')

展开

展开数组，就是解包啊，有不同吗。。。

// 以前
console.log(
    arr[0], arr[1], arr[2]
)
// 或者
console.log.apply(console, arr)
// 现在
console.log(...arr)

和py一样，，，

let a = [1, 2, 3, ...[4, 5]]
let b = {name: 'lfanke', ...{age: 17}}

剩余内容之后补充