ES2015学习笔记

ECMA6学习笔记

参考资料

ECMAScript6入门：http://es6.ruanyifeng.com/

官方文档：https://babeljs.io/learn-es2015/

开发软件：WebStorm 开源地址：https://coding.net/u/chenxygx/p/CodeSave/git/tree/master/ECMAScript2015

npm install

Settings - Keymap ： Main menu - Code - Reformat Code （配置格式化文件）

babel软件需要WebStorm配置一下

需要全局安装 babel，

npm install babel-preset-env --save-dev
npm install --save-dev babel-cli
npm install -g babel-cli
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

然后需要添加.babelrc文件，用来控制生成es2015

{
  "presets": ["env"]
}

然后package.json添加build，script用来控制编译目录

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "babel Script --watch --out-dir lib"
},

ES6声明变量的6种方式

ES5只有两种声明变量方式：var命令 和 function 命令。

ES6还有四种声明变量方式：let命令 、Const命令、import命令、class命令

let命令

用来声明变量，类似于var，声明的变量只在代码快（{}表示代码块）内有效。并且不会受到变量提升的影响。

如果区块中存在let和const命令，就会形成封闭作用域，在声明之前使用变量就会报错。这种行为称为：暂时性死区

var tmp = 123;
if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

let不允许重复声明，不能在函数内部重新声明参数。有块级作用域，就不再需要 立即执行函数表达式（IIFE）了

Const命令

const声明一个只读的常量，一旦声明，常量就不能改变。必须在声明的同时，进行初始化。

const作用域和let命令相同。只在声明所在块级作用域内有效。

const变量也不会提升，同样存在 暂时性死区

const本质上是指变量指向的内存地址不得改动。但对象和数组是可以进行变动的。

const x = {};
x.prop = 1;
x = {};

上面代码，可以对x进行添加属性，但不能重新进行赋值改变地址。

如果想让对象或数组完全冻结，可以使用object.freeze方法。

const x = Object.freeze({ prop : 2 });
x.prop = 1;
console.log(x.prop); //

顶级对象

顶级对象在浏览器环境指 window对象，在node指的是global对象。

因为顶级对象在各种实现中不统一，一般使用this变量，但是会有一些局限性。

全局环境中，this会返回顶层对象。但是node模块和ES2015模块中，this返回的是当前模块。

函数里的this，如果不是作为对象运行，而是单纯的函数，this会指向顶层对象。

针对this指向，可以查看javascript知识点记录

综上所述，可以在两种情况下都获取顶层对象的方法有两种

// 方法一
!(function () {
    (typeof window !== 'undefined'
        ? window
        : (typeof process === 'object' &&
        typeof require === 'function' &&
        typeof global === 'object')
            ? global
            : this);
    this.a = 1;
})()
console.log(a);

// 方法二
var getGlobal = function () {
    if (typeof self !== 'undefined') { return self; }
    if (typeof window !== 'undefined') { return window; }
    if (typeof global !== 'undefined') { return global; }
    throw new Error('unable to locate global object');
};
getGlobal().b = 2;
console.log(b);

数组的解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，被称为解构。

let [a,b,c] = [1,2,3]; console.log(a+b+c); // 6

上面代码表示，可以从数组中提取值，按照对应次序位置，对变量进行赋值。

如果解构不成功，变量的值就等于 undefined

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo //
bar //
baz //

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x //
y //

let [head, ...tail] = [1, 2, 3, 4];
head //
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

对象的解构赋值

对象的解构变量必须与属性同名，才可以取到值。次序不一致是没有影响的，如取不到值返回undefined

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

如果希望变量名与属性名不一致，必须写成下面这样。此时foo 和 bar是匹配模式，f是变量。

let { foo: f, bar: b } = { foo: "aaa", bar: "bbb" };

采用解构的写法，变量不能重新声明，所以如果有赋值的变量重新声明就会报错。

解构也可以用于嵌套结构的对象。此时p是模式不会赋值

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

对于结构嵌套对象，也是同样的操作。

var node = {
    loc: {
        start: {
            line: 1,
            column: 5
        }
    }
};
let { loc:{start:{line:l,column:c}} } = node;
console.log(l + c);

let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
obj // {prop:123}
arr // [true]

对象的解构也可以设定默认值，使用 = 可以在目标值的属性等于undefined的时候，进行赋初始化值

var {x = 3} = {};
x //

var {x, y = 5} = {x: 1};
x //
y //

var {x:y = 3} = {};
y //

var {x:y = 3} = {x: 5};
y //

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

如果要使用一个已经声明的变量，需要将内容嵌套在一个大括号里，告诉js不当做代码段处理

let x;
({x} = {x: 1});

字符串的解构赋值

字符串也可以进行解构，将字符串拆分成数组对象。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
let {length : len} = 'hello';
len //

数值和布尔值的解构赋值

如果等号右边是数值或布尔值，则会转换为对象。也就是说赋值的变量与等号右边类型相同。

赋值的规则是只要右边不是对象和数组，就会转换成对象。undefined和null是无法进行赋值的。

let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

函数参数的解构赋值

函数的参数也可以进行解构赋值，并且可以使用默认值。

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

但是注意，如果

move({x, y} = { x: 0, y: 0 })

则不会给参数赋默认值，因为上面代码是给函数的参数给默认值，而不是给变量赋默认值。

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

undefined也会触发函数参数的默认值。

[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]

圆括号问题

ES6的规则是，只要有可能导致解构的歧义，就不得使用圆括号。

可以使用圆括号的只有一种场景：赋值语句的非模式部分。

[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确

实际用途

1. 交换两个变量的值

let [x,y] = [1,2];
[x,y] = [y,x];
console.log(x+","+y); // 2,1

2. 从函数返回多个值

// 返回数组
function example() {
    return [1,2,3];
}
let [a,b,c] = example(); // 1,2,3

// 返回对象
function exampleObj(){
    return{
        foo:1,
        bar:2
    }
}
let{foo,bar} = exampleObj(); // 1,2

3. 函数参数的定义，可以将一组参数与变量名对应起来。

// 参数数组
function  f([a,b,c]) {
    console.log(a+","+b+","+c);
}
f([1,2,3]);

// 参数对象
function ff({a,b,c}){
    console.log(a+","+b+","+c);
}
ff({a:1,b:2,c:3});

4. 提取JSON数据

let jsonData = {
    "Name":"A",
    "Old":12
}
let {Name,Old} = jsonData;
console.log(Name+Old);

5. 函数参数的默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};

6. 遍历Map结构

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
//仅获取键 let[key]
//仅获取值 let[,value]

7. 输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

字符串的Unicode表示法

Js允许使用\uxxxxx形式表示一个字符，其中xxx表示字符的Unicode码点

单一码点只能在\u0000-\uffff之间。如果超过这个范围需要使用两个字符。

ES6对此进行了改进，只要将码点放进大括号，就能正确解读该字符。

"\u{20BB7}"
// "