技术基础1. es6新特性

块作用域构造Let and Const

Block-Scoped Constructs Let and Const（块作用域构造Let and Const）

1、块级作用域：{ }，用大括号定义块级作用域。
2、let是一种新的变量申明方式，它允许你把变量作用域控制在块级里面。因此没有变量提升，变量需声明后使用。
3、const声明一个只读的常量，声明后值不能更改；当声明常量的值为对象时，常量存储的为空间地址，对象可以添加属性。

模板文本、多行字符串

Template Literals （模板文本）in ES6
Multi-line Strings （多行字符串）in ES6

1、多行字符串（模板字符串）：(—``—这里是两个反点)用两个反点将所需编写的字符包起来即可。
2、模板文本：${ },在多行字符串中用；模板文本不会被当做文本，模板文本中可以放变量。
例：

    for(let i=0;i<ary.length;i++){
        str=`
            <div>
                <ul>
                    <li>${ary[i].attrOne}</li>
                    <li>${ary[i].attrTwo}</li>
                    <li>${ary[i].attrThree}</li>
                </ul>
            </div>
            `
    }

注：上面示例中，反引号代替所有的拼接字符串中的引号，并用模板文本将ary中的每项的三个属性值插到编写的字符串中。

增强的对象文本

Enhanced Object Literals （增强的对象文本）in ES6

解构赋值

Destructuring Assignment （解构赋值）in ES6
解构赋值：允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。

数组的解构赋值：

语法：let [variable1，variable2，…variableN]=array;

	例：let [a,b,c]=[1,2,3,4];
	console.log(a,b,c)      //1,2,3

1、左边还可以用连续逗号的方式跳过右侧对应的值。

	例：let [a,,c]=[1,2,3,4];
	console.log(a,c)        //1,3

2、嵌套赋值

	例：let [a,[b,c]]=[1,[2,3],4];
	console.log(a,b,c)      // 1,2,3

3、与剩余运算符连用

	例：let [a,...b]=[1,2,3,4];
	console.log(a,b)       // 1,[2,3,4]

4、当解构赋值为空，或过界时，返回undefined

	例：let [a] = [];
	console.log(a);       // undefined
	   let [a,b]=[1];
	console.log(a,b);     // 1 undefined

5、解构赋值时，可以设置默认值，但默认值只有在undefined时起作用

	例：let [a,b=3]=[1];
	console.log(a,b);     // 1,3

注：数组解构赋值时，注意顺序问题。

对象的解构赋值：

语法：let [variable1，variable2，…variableN]=array;

例：let {name:xxx}={name:'yan'};
console.log(xxx);          // yan

1、可以通过声明与对象属性值相同名称的变量来获取对象的属性值

	例：let {a}={a:4};
	console.log(a);             // 4

2、可嵌套（可与数组嵌套）

	例：let {a,b}={a:1,b:{c:2}};
	console.log(a,b)            // 1 { c: 2 }
	   let {a,b:{c}}={a:1,b:{c:2}};
	console.log(a,c);           //  1,2
	   let [a,{b}]=[1,{b:2}];
	console.log(a,b);           //  1,2

3、当解构赋值为空，或过界时，返回undefined

	例：let {a} = { };
	console.log(a);             // undefined

4、解构赋值时，可以设置默认值，但默认值只有在undefined时起作用

	例：let {a=1} = { };
	console.log(a);             // 1

函数的解构赋值(默认参数)：

Default Parameters（默认参数） in ES6

1、传参（jQuery为例）

   jQuery.ajax = function ({
      url : "/getList",
      async : true,
      cache : true,
      dataType : 'json',
      success(result){console.log(result)}
     })

2、返回值

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

解构赋值的用途：

（1）交换变量的值

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

（2）从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

	// 返回一个数组
	
	function example() {
	  return [1, 2, 3];
	}
	let [a, b, c] = example();
	
	// 返回一个对象
	
	function example() {
	  return {
	    foo: 1,
	    bar: 2
	  };
	}
	let { foo, bar } = example();

（3）函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来。

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

（4）提取 JSON 数据

解构赋值对提取 JSON 对象中的数据。

	let jsonData = {
	  id: 2,
	  status: "OK",
	  data: [7, 9]
	};
	
	let { id, status, data: number } = jsonData;
	
	console.log(id, status, number);
	// 2, "OK", [7, 9]

（5）函数参数的默认值

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

指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || ‘default foo’;这样的语句。

（6）遍历 Map 结构

任何部署了 Iterator 接口的对象，都可以用for…of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。

	const map = new Map();
	map.set('first', 'hello');
	map.set('second', 'world');
	
	for (let [key, value] of map) {
	  console.log(key + " is " + value);
	}
	// first is hello
	// second is world
	如果只想获取键名，或者只想获取键值，可以写成下面这样。
	
	// 获取键名
	for (let [key] of map) {
	  // ...
	}
	
	// 获取键值
	for (let [,value] of map) {
	  // ...
	}

（7）输入模块的指定方法

加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

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

箭头函数

Arrow Functions （箭头函数）in ES6

去掉function关键字， 参数有一个可以省略小括号，小括号和大括号之间有一个箭头
如果没有大括号则直接是返回值，有大括号必须写return;

Classes

Classes（类） in ES6

Promises

Promises in ES6

1. promise是什么？

• promise是一个构造函数,用来生成promise实例。
• 接受一个函数（下面以fn代指此函数）作为形参，fn又接受resolve和reject两个函数作为形参。

2. promise解决什么问题？

• 链式写法解决回调地狱

3. promise的方法有哪些？

• all( )
• race( )
• then( )
• catch( )
• resove( )
• reject( )

Modules

Modules（模块） in ES6