摘要：返回布尔值标签模板可以紧跟一个函数名后边，该函数将被调用来处理这个模板字符串。其它情况下返回值为在内部，整数和浮点数使用同样的存储方法，所以和被视为同一个值。

简介

ES6目标，让JavaScript变成一个企业级的开发语言，不仅仅限制与前端页面的脚本语言。

标准（Standard）： 用于定义与其他事物区别的一套规则
实现（Implementation）： 某个标准的具体实施/真实实践

编译

服务端使用 babel 编译

构建工具fis使用
插件：fis-parser-babel2 编译ES6

fis.match("**.ts", {
    
    parser: fis.plugin("babel2"),
    
    rExt: ".js"
    
});

TypeScript与babel编译有区别：

例如：对一个类的编译TypeScript编译的结果是一个闭包类，babel编译的结果是一个安全类.

function _classCallCheck( instance, Constructor ) { 
    if (!(instance instanceof Constructor)) { 
        throw new TypeError("Cannot call a class as a function"); 
    } 
}

var Person = function Person() {

    _classCallCheck(this, Person);

};

浏览器端编译traceur库来编译.

traceur库，引入两个库：traceur.js 和 treaceur-bootstrap.js

写 let&const let

let声明一个块级作用域，并且可以初始化该变量。用法与var类似。只能在所在的代码块内有效。

块作用域：{}构成的一个代码库处的作用域叫做块作用域。

let 允许吧变量的作用域限制在块级域中。与var 不同的是：var声明变量要么是全局的，要么是函数级的，而无法是块级的。

典型应用：for循环中的计数器
let定义的变量，会在块作用域保留下来，访问的就是当前循环的变量值。

for ( let j=0; j<4; j++ ) {
}

console.log(j); // error 报错。

for(let i = 0; i < 5; i++){
  setTimeout(function(){
      console.log(i);
  }, i * 100);
}

作用域规则

用let定义的变量的作用域是定义它们的块内，以及包含在这个块中的子块
与var区别，是否可以有块级概念，是否有存在变量提升

function test () {
    
    let a = 10;
    
    if ( true ) {
        
        let a = 20;
        
        console.log(a); // 20
        
    }
    
    console.log(a); // 10
    
}

test();

不存在变量提升

console.log(b); // undefined
console.log(a); // 报错ReferenceError

let a = 10;
var b = 10;

function foo(){

  a = 20;  // 报错 ReferenceError
  console.log(a);
  
  let a = 10;
  console.log(a);
  
}
foo();

let 的暂存死区

在同一个函数或同一个作用域中的let重复定义一个变量将引入TypeError

注意：switch中声明的变量。

if ( true ) {
    
    let a;
    
    let a; // TypeError thrown.
    
}

如果块中存在let 和const。 凡是在声明之前就使用这些变量，就会报错。
let声明之前，该变量都是不可用的。称之为：暂时性死区(temproal dead zone简称 TDZ)

if (true) {
  // TDZ开始
  a = 10; // ReferenceError
  console.log(tmp); // ReferenceError

  let a; // TDZ结束
  console.log(tmp); // undefined

  a = 100;
  console.log(tmp); // 100
}

ES6中的TDZ 像是运行时的检查而不是语法声明上的概念.

if(true){
    
    setTimeout(function(){
        
        console.log(x); // 1
        
    });
    
    let x = 1;
    
}

let特点：

具有块级作用域

没有变量提升

不允许重复声明

具有暂时性死亡区

为了不出发死亡区，必须，变量先声明，后使用的规定。
let声明的全局变量并不是全局对象的属性
let声明的变量知道控制流到达该变量被定义的代码行时才会被装载，所以在到达之前会使用该变量会触发错误，也就是所说的暂时性死亡区。没有分为预解析阶段。

块级作用域的意义：
ES5中，只有全局作用域和函数作用域，没有块级作用域。

缺点：
1：内存变量可能会覆盖外层变量。
2：用来计数的循环变量泄漏为全局变量。(循环内变量过度共享)

const

const声明一个只读的常量。 一旦声明，常量的值就不可更改。
意味着，const一旦声明常量，就必须立即初始化，不可留到以后赋值。

语法：const key = value;

在定义常量的前面，不能访问到常量，因此一般都将常量定义在文件的最前面。
例如：require() 模块的时候使用。

const http = require("http");

常量不能被重复定义，为了保证常量定义使用的时候的安全性。

const 和 let 的区别：
const具有let的所有特性，比let更加严格，不可以被重复定义(赋值)。

const 只是保证变量名指向的地址不变，并不保证该地址的数据不变。所以将一个对象声明为常量必须非常小心。

const foo = {};

foo.k1 = 100;

console.log( foo.k1 );

foo = {}; // TypeError: "foo" is read-only
// 常量foo 储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但是对象本身是可变的，所以依然可以为其添加新的属性。

Objcet.freeze()
作用：冻结对象(不可为对象添加属性和和方法)
参数：被冻结的对象

const foo = {}
Object.freeze(foo);


// 常规模式时，下面一行不起作用, 忽略添加 
// 严格模式时，该行会报错
foo.k1 = 100;

console.log(foo);

解构赋值

结构的作用是可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者obj[key]等传统方式进行赋值.

数组的结构赋值

解构：从数组和对象中提取值，对变量进行赋值。

基本用法：

let [a, b, c] = [1, 2, 3]; // 从数组中提取值，按照对应位置，对变量赋值。
// 这种写法，本质上属于“模式匹配”。 只要等号两边的模式相同，左右的变量就会赋予对应的值。

let [foo, [[bar], baz]] = [1, [[10], 100]];

let [x, y, ...z] = ["a", "b", "c", "d"];

console.log(x,y,z); // a b ["c", "d"]

如果解构不成功，变量值为undefiend。

let [d] = []; // undefined
let [e, f] = [1]; // 1 undefined

不完全解构： 等号左边的模式，只匹配一部分等号右边的数组。

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

let [a, [b], c] = [1, [2, 3], 4];

console.log(a, b, c); // 1 2 4

等号的右边不是数组，（严格的说，不是可遍历的结构），会报错。

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
// 转为对象以后不具备Iterator接口(前面5个表达式)， 本身就不具备Iterator接口(最后一个表达式) 

只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值。 (例如：函数执行之后的返回值)

默认值
解构赋值允许设置默认值

let [a = 100] = [];

console.log(a); // 100

ES6内部使用严格相等 运算符(===),判断一个位置是否有值。如果一个数组成员不严格等于undefeind，默认值不会生效。

let [a = 1] = [undefined];
let [b = 10] = [null];
let [c = 100] = [NaN];

console.log(a, b, c); // 1 null NaN

如果默认值是一个表达式，这个表达式是惰性求值(只有在用到的时候才会求值)。

function fn () {
    console.log("a");
}

let [x = fn()] = [1];

console.log(x); // 1 
// fn(); 函数不会执行

默认值可以引用其它解构赋值的变量
默认值可以引用解构赋值的其它变量，但该变量必须已经声明，如果不声明，将会报错。

let [x = 1, y = x] = []; // x = 1  y = 1
let [x = y, y = 1] = []; // ReferenceError 
// x用到默认值y时，y还没有声明。

最为常用的地方是：函数参数的arguments类数组对象的解构赋值。

对象的解构赋值

对象的解构与数组有一个重要的不同之处，数组的元素是按次序排序，变量的取值由它的位置决定的，而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let {a, b} = {b: 10, a: 100}; 

console.log(a, b); // 10  100

let { c } = {d: 1000, e: 100 }
console.log(c); // undefined

对象的解构赋值的内部机制：先找到同名属性，然后再赋值给对应的变量。真被赋值的是后者，而不是前者。

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

console.log(baz); // aaa
console.log(foo); // ReferenceError
// 被赋值的是变量baz，而不是模式foo

默认值

默认值生效的条件：对象的属性值严格等于undefined。

let {x = 3} = {x: undefined}
// x = 3;

let {y = 10} = {y: null}

console.log(x, y); // 3 null

如果解构失败，变量值等于undefined

字符串的解构赋值

字符串的解构赋值本质：字符串被转为类数组对象，类数组对象中有length属性，可以有Iterator接口，可以被遍历。

const [a, b, c, d, e] = "hello";

console.log(a, b, c, d, e); // h e l l o

数值和布尔值的解构赋值

需要指定包装对象toString
解构规则：等号右边的值不是对象，就先将其转为对象。 undefind 和 null 无法转为对象，对其二者解构赋值，都会报错。

let {toString: s} = 10;

console.log( s === Number.prototype.toString ); // true

console.log(s);  // function toString() { [native code] }

let { toString: t } = true;

console.log(t); // function toString() { [native code] }

函数参数解构赋值

可以解构赋值，可以使用默认值

[[1, 2], [3, 4]].map( ([a, b]) => a + b ); // 3 7
[[, 2], [, 4]].map(function ( [a = 10, b] ) {
    return a + b;
}); 

圆括号问题

对于编译器来说，一个式子到底是模式，，还是表达式，没有办法从一开始就知道，必须解析到(或解析不到)等号才能知道。
问题：模式中出现的圆括号怎么处理。
解析规则：只要有可能导致解构的歧义，就不得使用圆括号。

建议：只要有可能，就不要再模式中放置圆括号。能不使用，就不使用圆括号。

不能使用圆括号的情况

变量声明语句中，不能带有圆括号

// 全部报错
var [(a)] = [1];

var {x: (c)} = {};
var ({x: c}) = {};
var {(x: c)} = {};
var {(x): c} = {};}

var { o: ({ p: p }) } = { o: { p: 2 } };
// 都是变量声明语句，模式不能使用圆括号。

函数参数中，模式不能带有圆括号。

// 报错
function f([(z)]) { return z; }    

赋值语句中，不能将整个模式，或嵌套模式中一层，放在圆括号之中。

// 全部报错
({ p: a }) = { p: 42 };
([a]) = [5];

可以使用圆括号的情况：
赋值语句的非模式部分，可以使用圆括号。

[(b)] = [3]; // 正确  // 模式是取数组的第一个成员,跟圆括号无关
({ p: (d) } = {}); // 正确 // 模式是p，而不是d；
[(parseInt.prop)] = [3]; // 正确 // 模式是取数组的第一个成员,跟圆括号无关

用途

交换变量的值

[x, y] = [y, x]

从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。

// 返回一个数组

function example() {
  return [1, 2, 3];
}
var [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
var { foo, bar } = example();

函数参数定义

将一组参数与变量名对应。

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

提取JSON数据

提取JSON对象中的数据

函数参数的默认值
遍历Map结构
输入模块的指定方法

加载模块时，往往需要指定输入那些方法。

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

String的扩展 satrtsWith

str.starsWith(str1, num);

判断字符串以指定参数开头
参数1：开头的字符
参数2：可选，指定开始查找的索引位置
返回布尔值

endWith

str.endWith(str1, num);

判断字符串以指定参数结束
参数1：结束的字符子串
参数2：可选，指定开始查找的索引位置
返回布尔值

includes

str.includes(str1, num);

判断指定的参数字符串是否包含在字符串中。
参数1：被查询的字符串
参数2：可选，从那边开始查找索引位置。
返回布尔值

标签模板

``可以紧跟一个函数名后边，该函数将被调用来处理这个模板字符串。 称之为：“标签模板”(tagged template);

alert`123`;
alert(123);  // 等同

标签模板实质并不是模板，而是函数的调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

如果模板字符里面有变量，就不在是简单的调用，而是会将模板字符串先处理成多个参数，再调用函数。

模板字符串

语法：${表达式}
需要通过``来声明字符串，才会生效。
如果使用""单引号声明没有效果。并不会解析模板中的表达式。

//let num = `十`;
let num = `5`;
let intro = `
笑一笑,${5 * 2}年少
`;

repeat

重复字符串
参数：指定重复的次数

let num = "10";

let intro = `
笑一笑,${num * 2}年少
`;

let introT = intro.repeat(2);

console.log(intro);

console.log(introT);

raw

返回原始字符串，该方法不会将字符串中的转义字符转义
这个方法特殊，不需要使用()调用.
是String底下的一个方法，直接通过String调用即可。

console.log("success 
 1");

let str = String.raw`success 
 1`;

console.log(str);

Number的扩展

ES6在Number对象上，提供了Number.isFinite() 和 Number.isNaN();两个方法。
用来检查Infinite和NaN这两个特殊值。

isFanite();

检查是否是作为数字存在，对于不存在或者是NaN返回值为：false，对于数字返回值为：true

Number.isFinite(15); // true
Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite(-Infinity); // false
Number.isFinite("foo"); // false
Number.isFinite("15"); // false
Number.isFinite(true); // false

// 实现方式
(function (global) {
  var global_isFinite = global.isFinite;

  Object.defineProperty(Number, "isFinite", {
    value: function isFinite(value) {
      return typeof value === "number" && global_isFinite(value);
    },
    configurable: true,
    enumerable: false,
    writable: true
  });
})(this);

isNaN();

当参数是NaN的时候，才返回true，其它情况都返回false。

Number.isNaN(NaN) // true
Number.isNaN(15) // false
Number.isNaN("15") // false
Number.isNaN(true) // false
Number.isNaN(9/NaN) // true
Number.isNaN("true"/0) // true
Number.isNaN("true"/"true") // true

// 实现方式
(function (global) {
  var global_isNaN = global.isNaN;

  Object.defineProperty(Number, "isNaN", {
    value: function isNaN(value) {
      return typeof value === "number" && global_isNaN(value);
    },
    configurable: true,
    enumerable: false,
    writable: true
  });
})(this);

与传统的全局方法isFinte()方法isNaN()的区别：
传统方法先调用Number()将非数值的值转为数值，再进行判断。
Number.isFinte()和isNaN();只对数值有效，非数值一律返回false.

parseInt&parseFloat

ES6将全局方法parseInt();和parseFloat();方法 移植到Number对象上，行为完全保持不变。

目的：逐渐减少全局性方法，是的语言逐步模块化。

isInteger

当参数是正整数，负整数，0，-0，的时候返回值为：true。其它情况下返回值为：false
在JavaScript内部，整数和浮点数使用同样的存储方法，所以3和3.0被视为同一个值。

Math的扩展 sign

Math.sign();用来判断一个数到底是整数，负数，还是零。
返回值：

参数为整数，返回+1

参数为负数，返回-1

参数为0 ，返回0

参数为-0，返回-0

参数为其它值，返回NaN

Math.sign(""); // NaN
Math.sign("a"); // NaN
Math.sign(NaN); // NaN
Math.sign(false); // NaN
Math.sign(undefined); // NaN
Math.sign(0); // 0
Math.sign(-0); // -0
Math.sign(-2); // -1
Math.sign(+2); // 1

// 模拟 Math.sign(); 方法
Math.sign = Math.sign || function ( x ) {
    
    x = +x;
    
    if ( x === 0 || isNaN(x) ) {
        return x;
    }
    
    return x > 0 ? 1 : 1;
    
}

trunc

Math.trunc(); 用于去除一个数的小数部分，返回 整数部分。

非数值，Math.trunc()内部先使用Number();将其转为数值。

Math.trunc(123.456); // 123

对于空值和无法截取整数的值，返回NaN

Math.trunc(NaN); // NaN
Math.trunc("hello"); // NaN

// 模拟Math.trunc();
Math.trunc = Math.trunc || function ( x ) {
    return x < 0 ? Math.ceil(x) : Math.floor(x);
}    

Array的扩展 form

作用：将类数组对象转化成数组对象
参数1：类数组对象
参数2：可选，处理的回调函数。可以处理类对象每个成员
该回调函数中参数1：value值，(类数组的成员)， 参数2：索引值。返回值会保留最终结果，如果没有返回值，那么from函数会返回由undefined构成的一个新数组

如果是转一个真正的数组，Array.from();会返回一个一模一样的新数组。
更经常的使用时：arguments 和 获取的DOM元素。

// 类数组对象
let arrayLike = {
    0: "a",
    1: "b",
    length: 2
}

// ES5的写法
let arr1 = [].slice.call(arrayLike); 

// ES6的写法
let arr2 = Array.from(arrayLike);

console.log(arr1, arr2); // ["a", "b"]["a", "b"]  

let arrayLike = {
    0: "a",
    1: "b",
    length: 2
}

// ES6的写法
let arr2 = Array.from(arrayLike, function ( value, index ) {
    
    return value + "-xixi";
    
});

of

Array.of();将一组值，转为数组。
返回值：返回参数值组成的数组，如果没有参数，就返回一个空数组。

作用：弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有所差异。
Array()如果是一个参数，则表示当前数组的长度。如果是二个或二个以上，则表示数组成员。

Array.of(1, 2, 3, "xixi");

Array.of();基本上可以用来替代Array()或new Array(); 并且不存在由于参数不同而导致的重载问题。

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]

// 模拟Arraay.of();方法
function ArrayOf () {
    return [].slice.call(arguments);
}

find

find();方法和findIndex();方法
find();
作用：获取第一个符合条件的数组成员。
参数：回调函数。所有的数组成员一次执行该回调函数。知道找出一个返回值为true的成员。如果没有符合条件的成员，则返回false。
回调函数中的参数： 当前value值，当前索引值index(可选)， 原数组arr(可选)

[1, 2, 23, 10].find( (n) => n > 10 ); // 23
[1, 2, 3].find( ( value, index, arr ) => value < 2  ) // 1

findIndex();
作用：返回第一个符合条件的数组成员的索引值，如果所有成员都不符合条件，则返回 -1.
参数：和find();参数一样是一个回调函数。

["cyan", "pink", "tan", "red"].findIndex( (value, index, arr) => Object.is("tan", value) );

提出的解决问题：
indexOf();无法检测出成员中是否有NaN

[NaN].indexOf(NaN);  // -1

findIndex();搭配 Object.is(); 可以检测出来

[10,NaN].findIndex(  (value) => Object.is(NaN, value) ); // 1

fill

使用给定值，填充一个数组。

参数1：填充的值
参数2：可选，填充的起始位置。
参数3: 可选，填充的结束位置。

keys

keys() & values(); & entrices();

keys();
获取数组所有成员的索引值。
返回的是一个迭代器对象。
需要通过 for-of遍历数组迭代器

let colors = ["cyan", "pink", "tan", "red"];

let Idx = colors.keys();

console.log( Idx );  // ArrayIterator {}

for ( let index of Idx ) {
    
    console.log(index);
    
}

values();
获取所有成员的值，返回一个数组迭代器对象。

let colors = ["cyan", "pink", "tan", "red"];

let vals = colors.values();

console.log( vals );  // ArrayIterator {}

for ( let val of vals ) {
    
    console.log(val);
    
}

entries();
对键值对的遍历。

将数组成员的索引值以及数组成员的值，保留在一个新数组中。

let colors = ["cyan", "pink", "tan", "red"];

let entri = colors.entries();

console.log(entri);

for ( let entris of entri ) {
    
    console.log( entris );
    
}
// 输出：
// [0, "cyan"]
// [1, "pink"]
// [2, "tan"]
// [3, "red"]    

如果不使用for-of遍历，可以手动调用遍历器对象的next();方法，进行遍历。

let colors = ["cyan", "pink", "tan", "red"];

let entri = colors.entries();

console.log( entri.next().value ); // [0, "cyan"]
console.log( entri.next().value ); // [1, "pink"]
console.log( entri.next().value ); // [2, "tan"]
console.log( entri.next().value ); // [3, "red"]   

// next();方法返回：Object {value: Array[2], done: false} 
  

空位

数组的空位：数组的某一个位置没有任何值。
例如：Array构造函数返回的数组都是空位。

空位不是undefined，一个位置的值等于undefined，依然是有值的。空位是没有任何值

注意：空位不是undefiend，一个位置的值等于undefeind。依然是有值。空位是没有任何值。

0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false
// 第一个数组的0号位置是有值的，第二个数组的 0 号位置没有值。

ES5中对于空位的不一致：

forEach(), filter(), every() ，some()都会跳过空位。

map()会跳过空位，但会保留这个值

join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。

// forEach();
[,"a"].forEach((x,i) => console.log(i)); // 1

// filter();
["a",,"b"].filter(x => true) // ["a","b"]

// every();
[,"a"].every(x => x==="a") // true

// some();
[,"a"].some(x => x !== "a") // false

// map();
[,"a"].map(x => 1) // [,1]

// join();
[,"a",undefined,null].join("#") // "#a##"

// toString();
[,"a",undefined,null].toString() // ",a,,"

ES6则明确将空位转成undeinfed
由于空位的处理规则非常不统一，所以应该尽量避免出现空位。

Object的扩展 属性的简洁表示

ES6允许直接写入变量和函数，作为对象的属性和方法。
在定义一个对象的时候，如果对象的属性与属性值对应的变量名同名，可以简写属性名。

let objName = "bar"; 
let obj1 = {objName}

console.log( obj1 ); // Object {objName: "bar"}

// 等同于
let obj2 = {objName: objName} // Object {objName: "bar"}
console.log(obj2); 

// 在对象之中，只写属性名，不写属性值，这时候，属性值等于属性名所代表的变量。 

// 参数简写
function Person ( name, age ) {
    return {name, age} // ES6 允许直接引入变量，不用对对象添加同名属性
}

console.log( Person("cyan", 22) );  // Object {name: "cyan", age: 22}

// 等同于    
function Person(name , age) {
  return {name: name, age: age};
}

// 方法的简写
// 如果对象属性名与对象属性名对应的方法名称相同，可以省略属性以及 function关键字， 像定义类中的方法一样定义这个属性方法。

let obj1 = {
    name: "cyan",
    age: 22,
    sayAge: function () {
        console.log(this.age); // 22
    },
    sayName () { // ES6允许定义方法的时候，可以省略方法对应的属性名，和 fucntion 关键字
        console.log(this.name); // cyan
    }
}

obj1.sayName();
obj1.sayAge();    

// sayName等同于
    
var obj1 = {
  sayName: function() {
    console.log(this.name);
  }
}

// 这种属性简写用于函数返回非常方便
function getPoint() {
  var x = 1;
  var y = 10;
  return {x, y};
}

getPoint();
// {x:1, y:10}

属性名表达式

JavaScript语言定义对象的属性，有两种方式。

// 方法一
obj.foo = true;  // 标识符作为属性名

// 方法二
obj["a" + "bc"] = 123; // 表达式作为属性名

// 允许定义对象时候，对对象属性应用表达式
let a = "num";
let b = "ber";

let obj = {
    [a + b]: 100
}

console.log( obj );

// 表达式也可以用于方法名
let obj = {
  ["h"+"ello"]() {
    return "hi";
  }
};

obj.hello() // hi

注意：属性名表达式不能与简洁表示法同时使用，会报错。

// 报错
let a = "b";
let b = "pink";
let color = { [a] }

console.log(color);

// 正确
let a = "cyan";
let color = { [a]: "pink" }

console.log(color);

方法的name属性

函数的name属性，返回函数名。
对象方法也是函数，，因此也有name属性。

let obj = {
    name: "cyan",
    sayName() {
        return this.name; 
    }
}

console.log( obj.sayName.name ); // sayName

特殊：
bind();方法创造的函数，name属性返回"bound"加上原函数的名字。
Function构造函数创造的函数，name属性返回"anonymous".

console.log( (new Function()).name ); // anonymous

let doSomething = function () {}

console.log( doSomething.bind().name ); //bound doSomething  

is

Object.is();
作用判断两个参数是否相等。
可以判断0与-0 ，是否相等。

ES5中，比较两个值是否相等使用：==或者===
==缺点：自动转换数据类型
===缺点：NaN不等于自身，以及0等于-0

ES6提出“Same-value equality”（同值相等）算法.
用来比较两个值是否严格相等，与严格比较运算符(===)的行为基本一致。

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

assgin

Object.assgin();
作用：用于对象合并。
将源对象（source）的所有可枚举属性，复制到目标对象（target）。
参数1：目标对象。
后面的参数都是源对象。

只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性（enumerable: false）。

如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
如果只有一个参数对象，则返回该参数对象。

let obj1 = {
    x: 1,
    y: 2
}

let obj2 = {
    a: "a",
    b: "b"
}

console.log( Object.assign(obj1, obj2) );

如果参数不是对象，则会先转成对象然后返回。
undefeind和null无法转成对象，作为参数，会报错。

Object.assign(2); // Number {[[PrimitiveValue]]: 2}
Object.assign(undefined) // 报错
Object.assign(null) // 报错

Object.assign();是浅拷贝，而不是深拷贝。如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

let obj1 = {
    x: 1,
    y: 2
}

let obj2 = {
    a: "a",
    b: "b"
}

let resObj = Object.assign(obj1, obj2);

console.log( resObj );
console.log( obj1 );
console.log( resObj == obj1 ); // true
console.log( obj2 );

assign用途

为对象添加属性

class Point {
    constructor (x, y) {
        Object.assign(this,{x, y});
    }
}

let p = new Point(10, 20);

console.log(p);  // Point {x: 10, y: 20}
// 通过Object.assign();将x属性和y属性添加到Point类的对象实例。

为对象添加方法

Object.assign(Some.prototype, {
    someMethod1 ( arg1, arg2 ) {
        // ....
    }
    someMethod2 ( arg1, arg2 ) {
        // ....
    }
})


// 等价
Some.prototype.someMethod1 = function ( arg1, arg2 ) {
    // ....
}
Some.prototype.someMethod2 = function ( arg1, arg2 ) {
    // ....
}    

克隆对象

function clone(origin) {
  return Object.assign({}, origin);
}    
// 将原对象拷贝到一个空对象，得到了原始对象的克隆。

合并多个对象

将多个对象合并到某个对象，可以是空对象中(合并之后返回新的对象)

const merge = (target, ...sources) => Object.assign({}, ...sources); 

属性遍历

ES6中共有5中可以遍历属性的方法：

for-in
for-in循环遍历对象吱声和继承的可枚举的属性(不含Symbol属性)。

Object.keys(obj)
Object.keys返回一个数组，包括对象自身的(不含继承)所有可枚举属性(不含Symbol属性)

Oject.getOwnPropertyNames(obj);
Object.getOwnPropertyNames(); 返回一个数组，包含对象自身的所有属性(不含Symbol属性，但是包括不可枚举属性)

Object.getOwnPropertySymbols(obj);
Object.getOwnPropertySymbols();返回一个数组，包含对象自身的所有Symbol属性。

Reflect.ownKeys(obj);
Reflect.ownKeys(obj);返回一个数组，包含对象自身的所有属性，不管是属性名Symbol或字符串，也不管是否可枚举

遍历规则：

首先遍历所有属性为数值的属性，按照数字排序。

其次遍历所有属性名为字符串的属性，按照生成时间排序。

最后遍历所有属性名为Symbol值的属性，按照生成时间排序。

keys&values&entries

Object.keys();
作用： 参数对象自身的(不含继承的) 所有可遍历属性的键名。
返回数组

Object.values();
作用：参数对象自身的(不含继承的) 所有可遍历属性的键值。
返回数组

Object.entries();
作用：参数对象自身的(不含继承的) 所有可遍历属性的键值对数组。
返回数组

let obj = { a: 1, b: 2 };

console.log( Object.entries(obj) );  [ ["a", 1], ["b", 2] ]

Symbol

ES6引入Symbol的原因：根本上防止属性名的冲突。

ES6引入一种新的原始数据类型Symbol，表示独一无二的值。
它是JavaScript语言的第七种中数据类型。前六中是：Undefiend，Null，布尔值(Boolean),字符串(String)，数值(Number),对象(Object)

let s = Symbol();
typeof s // symbol

Symbol值通过Symbol函数生成。
对象的属性名可以有两种类型，一种是：string。 一种是：Symbol。(凡是属性名属于Symbol类型，就是独一无二，可以保证不会与其它属性名产生冲突)

注意：Symbol函数前不能使用new关键字，否则会报错。因为：Symbol是一个原始类型的值，不是对象。由于Symbol值不是对象，所以不能添加属性。基本上，它是一种类似于字符串的数据类型。

Symbol函数可以接收一个字符串作为参数，表示对Symbol实例的描述，
作用：控制台显示或转为字符串时，比较容易区分。

返回值不相等

注意：Symbol函数的参数只是表示对当前Symbol值的描述，因此相同参数的Symbol函数的返回值是不相等的。

// 没有参数
let s1 = Symbol();
let s2 = Symbol(); 

console.log(s1 == s2);  // false 

// 参数
let s3 = Symbol("a");
let s4 = Symbol("b");

console.log(s3 == s4); // false

不能与其它类型值进行运算

let sym = Symbol("My Symbol");

console.log("your symbol is" + sym); // TypeError: Cannot convert a Symbol value to a string

console.log(`your symbol is` + sym);  // TypeError: Cannot convert a Symbol value to a string

可以显示转换为String，Boolean。(注意：不能够转为数值类型)

let sym = Symbol("My Symbol");

console.log(String(sym)); 
console.log(sym.toString());

console.log(Boolean(sym));
console.log(!sym);

console.log(Number(sym)); // TypeError: Cannot convert a Symbol value to a number
console.log(sym + 2);  // // TypeError: Cannot convert a Symbol value to a number

Symbol与字符串的区别：

独一无二

值不相等

不可与其它类型值进行运算

作为属性名Symbol

由于每个Symbol值都是不相等的，意味着Symbol值可以作为标识符。
用于对象的属性名，就能保证不会出现同名的属性。 对于一个对象由多个模块构成的模块情况，能防止某一个键被不小心改写或覆盖。

Symbol值作为属性名时，是公开属性，而不是私有属性。

let mySymbol = Symbol("a");

// 第一种方法
let a = {};
a[mySymbol] = "hello";

// 第二种写法
let b = {
    [mySymbol]: "hell2"
};
// 在对象的内部，使用Symbol值定义属性时，Symbol值必须放在方括号之中。

// 第三种写法
let c = {};
Object.defineProperty(c, mySymbol, {
    value: "hello3"
});

console.log(a[mySymbol], b[mySymbol], c[mySymbol]); 

注意：Symbol值作为对象的属性名，不能使用点语法。

let mySymbol = Symbol("a");

let obj = {};

obj[mySymbol] = "hello";

console.log( obj[mySymbol] ); // hello
console.log( obj.mySymbol ); // undefind

定义一组常量，保证这组常量值是不相等。

log.levels = {
  DEBUG: Symbol("debug"),
  INFO: Symbol("info"),
  WARN: Symbol("warn")
};

log(log.levels.DEBUG, "debug message");
log(log.levels.INFO, "info message");

消除魔术字符串

魔术字符串：在代码之中出现多次，与代码形成强耦合的某一个具体的字符串或者数值。
缺点：不利于将来的维护和修改。

消除魔术字符串的方法：把它写成一个变量，或者常量。
变量或者常量等于那个值并不重要，只要确保不会跟其它的属性冲突即可。

const shapeType = {
    triangle: Symbol(),
    triangleTow: Symbol()
}

function getArea ( shape, options ) {
    
    let area = 0;
    
    switch ( shape ) {
        
        case shapeType.triangle:
            
            area = .5 * options.width * options.height;
            
            break;
            
        case shapeType.triangleTow:
            
            area = .7 * options.width * options.height;
            
            break;
            
    }
    
    return area; 
    
}

let a = getArea( shapeType.triangleTow, { width: 20, height: 20 } );
let b = getArea( shapeType.triangle, { width: 10, height: 10 } );

console.log( a,b ); // 280 , 50

属性名的遍历

Symbol作为属性名，该属性不会出现在for-in， for-of循环中，也不会被Object.kes();. Object.getOwnProperTyNames();返回。
Symbol并不是私有属性，ES6中提供Object.getOwnPropertySymbols();

Object.getOwnPropertySymbols();
作用：获取指定对象的所有Symbol属性名。
返回一个数组。成员是当前对象的所有用作属性名的Symbol值。

let obj1 = {};
let c = Symbol("c");
let d = Symbol("d");

obj1[c] = "cyan";
obj1[d] = "tan";

let objectSymbol = Object.getOwnPropertySymbols(obj1);

console.log( objectSymbol ); // [Symbol(c), Symbol(d)]

Reflect.ownKeys();
作用：返回所有类型的键名，包括常规键名和Symbol键名。

let obj = {
    [Symbol("my_key")]: 1,
    enum: 2,
    nonEnum: 3
};

console.log( Reflect.ownKeys(obj) ); // ["enum", "nonEnum", Symbol(my_key)]

以Symbol值作为名称的属性，不会被常规方法遍历得到。可以为对象定义一些非私有的，但又希望只用于内部的方法。造成一种非私有话的内部的效果。

Symbol.for(),Symbol.keyFor()

Symbol.for();
作用：使用同一个Symbol的值。
参数：一个字符串。
过程：接收一个字符串后，搜索有没有以该参数作为名称的Symbol值。如果有，就返回这个Symbol值，否则就新建并返回一个以该字符串为名称的Symbol值。(具有登记机制，被登记的会在全局环境中供搜索)

let s1 = Symbol.for("a");
let s2 = Symbol.for("a");

console.log( s1 === s2 ); // true

Symbol.keFor();
返回：一个已经登记的Symbol类型值的key。

let s1 = Symbol.for("a");
let s2 = Symbol.for("b");
let s3 = Symbol("b");

console.log( Symbol.keyFor(s1), Symbol.keyFor(s2), Symbol.keyFor(s3) ); // a b undefined 

模块的Singleton模式

Signleton模式：指的是调用一个类，任何时候返回的都是同一个实例。

对于 Node 来说，模块文件可以看成是一个类。怎么保证每次执行这个模块文件，返回的都是同一个实例呢？

很容易想到，可以把实例放到顶层对象global。

对于Node来说，模块文件可以看成是一个类。怎么保证每次执行这个模块文件，都是返回同一个实例呢？ 可以把实例挂载到顶层对象global。

// mod.js
function A () {
    this.foo = "hello";
}

if ( !global._foo ) {
    global._foo = new A();
}

module.exprots = global._foo;


// 加载mod.js

let mod = require("./mod.js");
console.log( mod.foo );

存在问题： 挂载到global的属性，是可写的，任何文件都可以修改。
防止这种情况，可以使用Symbol.

// mod.js
const FOO_KEY = Symbol.foo("foo");

function A () {
    this.foo = "hello";
}

if ( !global[FOO_KEY] ) {
    global[FOO_KEY] = new A();
}

module.exprots = global[FOO_KEY];

Proxy&Reflect Proxy概述

Proxy作用：修改某些操作的默认行为。 在目标对象之前设置屏障，外界对该对象的访问，都必须先通过这层拦截，来保护该对象(内部的属性，状态，方法，行为等等)。(Proxy的操作等同于在语言层面做出修改，所以属性一种“元编程”，即对编程语言进行编程)

提供一种机制，可以对外界的访问进行过滤和改写。
Proxy这个词的原意是代理，这里表达hi由它来“代理”某些操作，可以译为“代理器”。

语法： new Proxy(代理对象, 屏蔽对象);

屏障的方法，比较特殊，并不是任意定，只能通过get来获取代理对象的信息，set来设置原始对象的额信息。但是它们不是直接处理对象的，在处理之前会过滤一些人为操作。屏蔽对象配置拦截行为(对于每一个被代理的操作，需要提供一个对应的处理函数，该函数将拦截对应的操作。)

get();
参数：target，key，receiver

set();
参数：target，key，value，receiver

let Start = {
    count: 0
}

let obj1 = new Proxy(Start, {
    
    get: function ( target, key ) {
        
        console.log(`getting ${key}!`);
        
        return target[key];
        
    },
    
    set: function ( target, key, value ) {
        
        console.log(`setting ${key}!`);
        
        return target[key] = value;
        
    }
    
});

console.log( obj1.count );

obj1.count = 1;

console.log( obj1.count );

注意：是的Proxy起作用，必须针对Proxy实例进行操作， 而不是针对目标对象进行操作。
如果屏蔽对象没有进行任何拦截操作，那就等同于直接通过原对象，操作原对象

let a = {};
let b = {};

let proxy = new Proxy(a, b);

proxy.tag = "javascript";

console.log(a.tag); // javascript

将Proxy对象，可以设置到Object.proxy属性上，从而达到可以从Object对象上调用。
Proxy实例可以作为其他对象的原型对象。

// 放在object.proxy 属性上
let object = {
    proxy: new Proxy(target, handler)
}

// 其它对象的原型上
let proxy = new Proxy({}, {
    get: function ( target, property ) {
        console.log( target[property] );
        return 10;
    }
});

let obj = Object.create(proxy);

console.log(obj.time); // 10    

同一个拦截器函数，可以设置多个操作。

var handler = {
  get: function(target, name) {
    if (name === "prototype") {
      return Object.prototype;
    }
    return "Hello, " + name;
  },

  apply: function(target, thisBinding, args) {
    return args[0];
  },

  construct: function(target, args) {
    return {value: args[1]};
  }
};

var fproxy = new Proxy(function(x, y) {
  return x + y;
}, handler);

fproxy(1, 2) // 1
new fproxy(1,2) // {value: 2}
fproxy.prototype === Object.prototype // true
fproxy.foo // "Hello, foo"

Proxy拦截器操作函数

对于可以设置，但没有设置拦截的操作，则直接落在目标对象上，按照原先的方式产生结果。

get()
拦截对象属性的读取

set()
拦截对象属性的设置

has(target, propKey)
拦截propKey in proxy的操作，以及对象的hasOwnProperty();
返回值：布尔值。

判断对象是否具有某个属性时，方法才会生效。典型的操作就是in运算符。
使用has方法隐藏某些属性，不被in运算符发现

let headler = {
    
    has ( target, key ) {
        
        if ( key[0] === "_" ) {
            return false;
        }
        
        return key in target;
        
    }
    
}

let target = { _prop: "aaa", prop: "bbb" }

let proxy = new Proxy(target, headler);

console.log( "_prop" in proxy ); // false

deleteProperty(target, propKey)
拦截delete proxy[propKey]的操作。
返回值：布尔值。 表示是否删除成功。

apply(target, object, args)
参数args：目标对象的参数数组。
拦截Proxy实例作为函数调用的操作，比如proxy(...ars) ,proxy.call(object, ...args), proxy,apply(...)

let target = function () {
    return "target";
}

let handler = {
    apply: function () {
        console.log("apply");
        return "handler";
    }
}

let p1 = new Proxy(target, handler);

console.log(p1()); // hanlder

construct(target, args)
拦截作为构造函数调用的操作。 比如: new Proxy(...args)

拦截函数和PHP中的魔术方法有相同的原理，当一定条件下，会触发该声明的函数。

Reflect概述

Reflect对象与Proxy对象一样
为了操作对象而提供的新API

设计目的：

将Object对象的一些明显属性语言内部的方法(比如Object.defiendProerty)，放到Reflect对象上，现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。

修改某Object方法的返回结果，让其变得更合理。

让Object操作都变成函数行为
比如： delete obj[name] 和 name in obj 的指令式操作

Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。

函数的扩展 参数的默认值

ES5的默认参数做法

如果没有if判断，参数是否被赋值，如果没有，再等于默认值
原因：如果参数赋值了，但是对应值是false，则该赋值就不应该起作用。 例如：调用的时候log("hello", ""); 如果参数是空字符串，就不应该被改为默认值。

function log ( x, y ) {
    
    if ( typeof y === undefined ) {
        
        y = y || "world";
        
    }
    
    console.log(x, y);
    
}

log("Hello"); // Hello world
log("Hello", "hi"); // Hello hi
log("Hello", ""); //   Hello

ES6使用默认参数，直接写在参数定义的后边。
好处：
1：易阅读代码
2：利于未来的代码优化。未来的版本在对外接口中，测底拿掉这个参数，也不会导致以前的代码无法执行。

特点：参数变量时默认声明的，不能用let或const再次声明

function Point ( x, y=10 ) {
    this.x = x;
    this.y = y;
}

let p = new Point(100);
console.log(p);  // Point {x: 100, y: 10}

参数默认的位置

一般的，定义默认值的参数，应该是函数的尾参数。这样可以比较容易看出来，到底省略了哪些参数。

如果非尾参数设置默认值，这个参数是没法省略。(想使用默认值，设置为undefeind)

function fn ( x = 1, y ) {
    
    return [x ,y];
    
}

console.log( fn() );  // [1, undefined]
console.log( fn(2) );  // [2, undefined]
console.log( fn(undefined, 1) ); // [1, 1] // 如果传入undefeind，将触发该参数等于默认值， 
console.log( fn(null, 1) ); // [null, 1] // 如果传入null，则会输出。
console.log( fn( , 10) ); // error 

function fn2 ( x, y = 1, z ) {
    
    return [x, y, z];
    
}

console.log( fn2() ); // [undefined, 1, undefined]
console.log( fn2(2) ); // [2, 1, undefiend]
console.log( fn2(2, undefined, 3) ); // [2, 1, 3]
console.log( fn2(2, , 3) ); // error 

函数的length属性

length属性的含义：该函数预期传入的参数个数。

指定了默认值后，length属性将失真。将返回没有指定默认参数的个数。
某个参数指定了默认值以后，预期传入的参数个数就不包括这个参数了。rest参数不会计入length属性个数中。

let len1 = (function (a) {}).length;

let len2 = (function (a = 5) {}).length; 

let len3 = (function ( a, b, c = 1 ) {}).length;  

let len4 = (fucntion (...args) {}).length;

console.log(len1); // 1
console.log(len2); // 0
console.log( len3 ); // 2
console.log( len4 ); // 0

作用域

如果参数默认值是一个变量，则该变量所处的作用域，与其它变量的作用规则是一样的，即先是当前函数的作用域，然后才是全局作用域。

var x = 1;

function fn ( x, y = x ) {
    console.log(y);
}

fn(2); // 2    

如果参数默认值是一个函数
该函数的作用域是其声明时所在的作用域

let foo = "outer";

function bar ( func = x => foo ) {
    
    let foo = "inner";
    
    console.log( func() ); // outer
    
}

bar();
// 函数bar的参数func的默认值是一个匿名函数，返回值为变量foo。这个匿名函数声明时，bar函数的作用域还没有形成，所以匿名函数里面的foo指向外层作用域foo

应用
利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出一个错误。

function throwMsg () {
    throw new Error("error");
}

function foo ( pro1 = throwMsg()  ) {
    
    return pro1;
    
}

foo(); // 抛出错误

可以将参数默认值设置为unfeined，表明这个参数是可以省略的。

function foo ( options = undefined ) {

}

rest参数

语法：...变量名
作用：把逗号隔开的值序列组合成一个数组

获取过来的是数组，将制定的多余变量放入数组中。

使用rest参数就不需要使用arugments对象

    
function add ( ...nums ) {
    
    let sum = 0;
    
    for ( let val of nums ) {
        
        sum += val;
        
    }
    
    return sum;
    
}

console.log( add(1, 2, 3) );  // 6    

注意：rest参数之后不能再有其它参数(即只能是最后一个参数)

扩展运算符

扩展运算符...。
好比rest参数的逆运算。

作用：把数组或类数组对象展开成一系列用逗号隔开的值（将一个数组转为用逗号分隔的参数序列）.

console.log(...[1, 2, 3]);
// 1 2 3

console.log(1, ...[2, 3, 4], 5 );
// 1 2 3 4 5 

一般的，主要用于函数调用：

function add ( x, y ) {
    
    return x + y;
    
}

let nums = [10, 20];

console.log( add(...nums) ); // 30

扩展运算符与正常的函数参数，rest参数可以配合使用，体现灵活性。

function fn ( x, y, z, n, m, ...nums ) {
    
    console.log(...nums); // 5 ,6
    
}

let args = [1, 2];

fn(-1, ...args, 3, ...[4, 5], 6);

扩展运算符的应用

合并数组

let moreArr = [3,4];

let arr1 = [1, 2].concat(moreArr);

console.log(arr1);

console.log( [1, 2, ...moreArr] );


let arr2 = ["a", "b"];

let arr3 = ["c", "d"];

let arr4 = ["e", "f"];

// ES5的写法
console.log( arr2.concat(arr3, arr4) );

// ES6的写法
console.log( [...arr2, ...arr3, ...arr4] );

与解构赋值结合

扩展运算符与解构赋值结合起来使用，用于生成数组。
注意：扩展运算符只能放在参数的最后一位。(否则将会报错)

const [first, ...rest] = [1, 2, 3, 4, 5];   
const [...butLast, last] = [1, 2, 3, 4, 5]; // SyntaxError: Rest element must be last element in array

const [first, ...middle, last] = [1, 2, 3, 4, 5];  // SyntaxError: Rest element must be last element in array

函数返回值

JavaScript的函数只能返回一个值，如果需要返回多个值，只能返回数组或对象。扩展运算符提供变通方法。

字符串

扩展运算符可以将字符串转为数组

console.log( [..."hello"] ); // ["h", "e", "l", "l", "o"]    

实现了Iterator接口的对象

任何Iterator接口对象，都可以使用扩展运算符转为真正的数组
例如：arguments对象，nodeList对象

let arrList = {
    "0": "a",
    "1": "b",
    "2": "c",
    length: 3
}

console.log( [...Array.from(arrList)] ); // ["a", "b", "c"]
console.log( [...arrList] );  // TypeError: arrList[Symbol.iterator] is not a function

name属性

函数的name属性，返回该函数的属性名。
属性被浏览器支持，到ES6才写入规范中。

ES5中匿名函数，name属性会返回空字符串。
ES6中匿名函数，name属性会返回实际的函数名

ES5，ES6中，有名的匿名函数，name属性返回具有函数名的名字

Function 构造函数返回函数实例， name 属性值为：anonymouse

let fn1 = function () {};

// ES5
console.log( fn1.name ); // ""

// ES6
console.log( fn1.name ); // fn1


const fn = function fn2 () {}

// ES5
console.log( fn.name );  // fn2

// ES6
console.log( fn.name ); // fn2

// Function 构造函数
console.log( (new Function).name ); // "anonymouse";

箭头函数

基本用法

使用 => 定义函数
() => 表达式
参数 => 表达式

var f = v => v;
// 等价
var  f = function ( v ) {
    return v;
}

如果箭头函数需要多个参数或者不需要参数，可以使用()代表参数。

() => { 函数体 }

var fn = () => 5;

// 等同于
var fn = function () { return 5; }



var sum = (num1, num2) => num1 + num2;

// 等同于
var sum = function ( num1, num2 ) { return num1 + num2 }

箭头函数返回对象，需要在对象外加()

var getTemp = id => ({ id: id, name: "cyan" });    

箭头函数与变量解构赋值，rest参数搭配使用

let fn = (...s) => {
    console.log(...s);
}

const full = ( first, last ) => {
    return first+ " " + last;
}

// 等同于
function full( first, last ) {
    return first+ " " + last;
}

箭头函数使用注意点

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

不可以当作构造函数，也就是不可以使用new关键字。否则会抛出一个错误。(names is not a constrtucor)

不可以使用arguments对象，因为arguments对象不存在函数体内

不可以使用yield命令， 因此箭头函数不能作用Generator函数。

this固定

this对象在箭头函数中，是固定的。

this的指向固定化，有利于封装回调函数。
this指向固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this。导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能够作为构造函数。

箭头函数的this永远指向定义的时候的作用域，在各对象中定义，就指向那个对象。
当使用call()和apply()方法更改作用于时候，箭头函数this是没有更改成功。

function foo () {
    
    setTimeout(() => {
        console.log( "id:", this.id );  // 42
    },100);

    setTimeout(function () {
        console.log("id: " ,this.id); //41
    }, 1000);
        
}

var id = 21;

foo.call({ id: 42 });
// 箭头函数导致this总是只想函数定义生效时所在的对象

对比箭头函数的setTimeout和ES5版本的普通回调函数：

// ES6
function foo () {
    
    setTimeout( () => {
        
        console.log("id:", this.id);
        
    }, 100 );
    
}

foo();

//ES5
function fn2 () {
    let _this = this;
    
    setTimeout(function () {
        console.log("id:", _this.id);
    }, 100);
}

fn2();

// fn2中清楚的说明了，箭头函数里面根本没有自己的this，而是引用外层的this。 

function foo() {
    
  return () => {
      
      console.log(this); // Object {id: 1}
      
    return () => {
        
        console.log(this); // Object {id: 1}
        
      return () => {
          
          console.log(this); // Object {id: 1}
          
        console.log("id:", this.id); // id: 1

      };

    };

  };

}

var f = foo.call( {id: 1} );

f()()();   

箭头函数中不存在：this,argumetns, super，new.target.相应的指向外层函数的对应 this,argumetns, super，new.target

function foo () {
    
    console.log("args:", arguments); // args: [1, 2, 3, 4]
    
    setTimeout( () => {
        
        console.log("args:", arguments); // args: [1, 2, 3, 4]
        
    },100 );
    
}

foo(...[1, 2, 3, 4]);

箭头函数嵌套

箭头函数的嵌套：具有管道机制（前一个函数的输出是后一个函数的输入）。

let insert = (value) => ({
    
    into: (array) => ({
        
        after: (afterValue) => {
            
            array.splice( array.indexOf(afterValue) + 1, 0, value );
            
            return array;
            
        }
        
    })
});

console.log( insert(2).into([1, 3]).after(1) ); //[1, 2, 3]

尾调用优化

尾调用

尾调用：指某个函数的最后一步是调用另一函数。
尾调用是函数式编程的重要概念。

function fn (x) {
    return g(x); // 函数的最后一步调用函数 g() ,就是指的尾调用
}

// 不属于为调用的情形
function f1 ( x ) {
    let y = g(x);
    return y;    
}
// 调用函数  g(x) 之后，还有赋值操作。

function f2 (x) {
    return g(x) + 1; 
}
// 调用之后还有其它操作

function f3 ( x ) {
    g(x);
}
// f3 最后是返回 undefined


// 尾调用不一定要出现在函数的尾部

function f ( x ) {
    
    if ( x > 0 ) {
        return m(x);
    }
    
    return n(x);
    
}

尾调用优化

尾调用特殊之处：与其它调用不同的，在于它特殊的调用位置。

函数调用会在内存形成一个“调用记录”，又称“调用帧” (call frame)，保存调用位置和内部变量等信息。
如果在函数A的内部调用函数B，那么在A的调用帧上方，还会形成一个B的调用帧。等到B运行结束，将结果返回到A，B的调用帧才会消失。如果函数B内部还调用函数C，那就还有一个C的调用帧，以此推类。所有的调用帧，就形成一个“调用栈”(call stack)

尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用帧，因为调用位置，内部变量等信息都不会再使用到。只要直接用内层函数的调用帧，取代外层函数的调用帧就可以。

尾调用优化：只保留内层函数的调用帧

function fn () {
    let m = 1;
    let n = 2;
    return g(m+n); // 执行到这一步，完全可以删除fn()的调用帧，只保留 g(3)  的调用帧
}

fn();

// 等同于
function fn () {
    return g(3);
}

fn();

// 等同于
g(3);

// “尾调用优化”: 只保留内层函数的调用帧。

如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，效果就大大节省内存。

注意：只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”

尾递归

函数调用自身，称为递归，如果尾调用自身，就称之为：尾递归。

递归非常消耗内存，因为需要同时保存成千上百个调用帧，很容易发生"栈溢出"错误(stack voerflow).但是对于尾递归来说，由于只存在一个调用帧，所以不会发生"栈溢出"错误。

// 对比阶乘  使用尾递归 和 不使用尾递归的情形

function factorial ( n ) {
    
    if ( n === 1 ) {
        return 1;
    }
    
    return n * factorial(n-1); 
    
}


// 尾递归
function factorial2 ( n, total ) {
    
    if ( n === 1 ) {
        return total;
    }
    
    return factorial2( n-1, n * total );
    
}

factorial2( 5, 1 ); // 120

递归函数的改写

尾递归的实现，往往需要改写递归函数，确保最后一步只调用自身。做到这一点的方法，就是把所有用到的内部变量改写成函数的参数。

方法1：是在尾递归函数之外，再提供一个正常形式的函数。

function tailFactorial(n, total) {
  if (n === 1) return total;
  return tailFactorial(n - 1, n * total);
}

function factorial(n) {
  return tailFactorial(n, 1);
}

factorial(5) // 120

方法2：函数柯里化
柯里化：将多参数的函数转换成单参数的形式。(函数式编程的重要概念)

方法3：ES6的函数默认值

 function factorial ( n, total = 1 ) {
    
    if ( n === 1 ) return total;
    
    return factorial(n-1, n * total);
    
}

console.log( factorial(5) ); // 120;   

递归本质上是一种循环操作。纯粹的函数式编程语言没有循环操作命令，所有的循环都是使用递归实现。
对于支持“尾调用优化”的语言，只需要知道循环可以用递归代替。
如果一旦使用递归，就最好使用尾递归。

尾递归只在严格模式下有效果

正常模式下：函数内部有两个变量，可以跟踪函数的调用栈。

func.argumetns : 返回调用时函数的参数
func.caller： 返回调用当前函数的那个函数。

尾递归优化生效的时候，函数的调用栈会改写，因此argumetns，caller会失真。严格模式下禁用这两个变量。 所以尾递归模式仅在严格模式下生效。

Set和Map数据结构 Set

基本用法

Set对象是ES6中新增的一种表示集合的数据结构。它类似于数组，但是成员的值都是唯一的。没有重复的值。

Set本身是一个构造函数，需要通过new关键字来生成。

Set函数可以接受一个数组(或类似数组的对象)作为参数，用来初始化。
得到的实例化对象是去重复的Set对象。

let s2 = new Set([123, 23, , 345, 345, 23]);

console.log(s2); // Set {123, 23, undefined, 345}
console.log(...s2); // 123 23 undefined 345

console.log( s2.size ); // 4

Set实例的属性和方法

Set结构的实例属性：

Set.prototype.constructor：构造函数，默认就是Set函数
Set.prototype.size: 返回Set实例的成员总数

Set实例方法分为:操作方法(用于操作数据) 和遍历方法(用于遍历成员)

操作方法

add(value): 添加某个值，返回Set结构本身。

delete(value):删除某个值，返回一个布尔值，表示是否删除成功。

has(value)：返回一个布尔值，表示该值是否为Set成员。

cleart(): 清除所有成员，没有返回值。

Array.form()可以将Set结构转为数组。

var items = new Set([1, 2, 3, 5, 6, 3, 4]);

console.log( Array.from(items) );  // [1, 2, 3, 5, 6, 4]

遍历操作

keys(); 返回键名的迭代器。

values(); 返回键值的迭代器。

entries(); 返回键值对的迭代器。

forEach(); 使用回调函数遍历每个成员。

Set结构的遍历顺序是插入顺序。 使用场景比如：使用Set结构保存一个回调函数列表，调用的时候，就能够保证按照添加顺序调用。

由于Set结构没有键名，只有键值(或者说键名和键值是同一个值)。 所以keys() 和values()是相同的。

let set = new Set(["pink", "cyan", "tan"]);

for (let item of set.keys()) {
  console.log(item);
}
// pink
// cyan
// tan

for (let item of set.values()) {
  console.log(item);
}
// pink
// cyan
// tan

for (let item of set.entries()) {
  console.log(item);
}
// ["pink", "pink"]
// ["cyan", "cyan"]
// ["tan", "tan"]        

Set结构的实例默认可遍历，它的默认遍历器生成函数就是它values方法。

console.log( Set.prototype[Symbol.iterator] === Set.prototype.values ); // true  

遍历的应用

数组去重

扩展运算符(...) 内部使用 for -of循环

实现交集，并集，差集。

与Array.from()搭配使用

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}


            
                     

                 

                                                                                                                    
                         GPU云服务器
                                             
                         云服务器
                                                                                                                                                 
                                      
                     
                    
                                                                                               ECMAScript6
                                                         
                 
               
              
             
               

                   
 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
                 
                   
转载请注明本文地址：https://www.ucloud.cn/yun/86474.html
               
                      
               

                 
                                  
上一篇：[微信音频播放器] html5 audio 制作的微信播放器
  
                                                
                                       
下一篇：React-Redux性能优化