ES6新特性超快速入门（大量实例）

ES新特性超快速入门

举例说明为主，基本概念叙述不多，建议配着相关概念文字理解。主要写了一些最常用的特性方法。

let和const

两者都是用来定义变量的，与var相比，let和const没有了变量提升，不能声明但不定义，产生了块级作用域的概念

if(true){
     var i = 1;
 }
 console.log(i); 			//结果为1

if(true){
     let i = 1;
}
console.log(i);				//直接报错，显示i is not defined

并且const定义的值不可修改，let可以正常修改赋值

const a = 1;
const a = 2;				//直接报错，显示a已被定义（Identifier 'a' has already been declared）

值得注意的一点，const写死的其实是值所在的地址，而不是具体的数值。例如：

const a = [1,2];
a.push(3);
console.log(a); 			//输出[1, 2, 3]

但是直接令 a = [1, 2, 3] 就会报错。

数组解构

通常我们取数组值用下列传统方法

function arr(){
	return [1,2,3]
}
var temp = arr();
let t1 = temp[0];
t2 = temp[1];
t3 = temp[2];
console.log(t1, t2, t3)		//1, 2, 3

利用数组解构方法更简单：

function arr(){
	return [1,2,3]
}
let [t1, t2, t3] = arr();  
console.log(t1,t2,t3);		// 1, 2, 3

对象解构

{
function obj() {
            return {t1:'1',t2:'2',t3:'3'}
}
let tempobj = obj();
let a = tempobj.t1,
    b = tempobj.t2,
    c = tempobj.t3;

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

利用对象解构的话，要注意一点，不能使用自定义变量名（例如上面的a, b, c），要与对象中的键值对中的键保持一致

function obj() {
    return {t1:'1',t2:'2',t3:'3'}
}

let {t1, t2, t3} = obj();
console.log(t1, t2, t3);		//1, 2, 3

模板字符串（超级好用）

如何打模板字符串：数字键1的左边、esc键的下边、table键上边的那个键就是了
下面用传统字符串和模板字符串写一个例子：

let a = '稀饭',
    b = '油条';

let str1 = '今天早上吃了'+ a +'和' + b;
let str2 = `今天早上吃了${a}和${b}`;

console.log(str1);		//今天早上吃了稀饭和油条
console.log(str2);		//今天早上吃了稀饭和油条

可以看出模板字符串的对于引用变量要方便很多，在没有模板字符串的时候，js里写的全是引引加加让人头疼。并且模板字符串也允许中间回车换行可以正常输出。后台早就有这种操作了，但js在ES6中才添加进来。

接下来顺便介绍几种新的字符串操作：字符串开头结尾中间包含的判断。

console.log(str2.startsWith('今天'));		//true	检测字符串开头
console.log(str2.startsWith('明天'));		//false
console.log(str2.endsWith('油条'));			//true	检测字符串结尾
console.log(str2.endsWith('稀饭'));			//false
console.log(str2.includes('吃了'));			//true	检测字符串中间
console.log(str2.includes('下午'));			//false

支持函数默认参数

function func(a=1, b=2){
   return a+b;
}

console.log(func());		//3		没有输入时按照默认参数来
console.log(func(2,4));		//6		有输入时会覆盖默认

展开运算符（超级超级好用）

利用三个点可以只把数据提取出来，可以用来合并数组：

let  arr1 = [1, 2, 3],
     arr2 = [4, 5, 6];

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

当…作为参数时是叫做剩余运算符，接受“纯数据”可以转换成数组

function func(...arg) {
   console.log(arg);
}

func(1, 3, 5, 6, 3, 8, 33, 66);		//[1, 3, 5, 6, 3, 8, 33, 66]

for of 循环

遍历数组时，for of可以直接拿到值，for in要考索引才能拿到，当处理对象时只能用for in才行

let arr = [10, 20, 30]；
let obj = {
    name:'zhangsan'
}
for (const key in obj) {
    console.log(key, obj[key]);		//name zhangsan
}

for (const val of arr) {			
    console.log(val);				//10 20 30
}
for (const key in arr) {
    console.log(key);				//0 1 2
}

箭头函数

利用箭头函数简化代码
我们利用传统方法进行数组平方操作

let arr = [10, 20, 30];
let newArr = arr.map(function(value, index){
    return value*value;
})
console.log(newArr);		//[100, 400, 900]

上面代码和下面用箭头函数是等价的

let arr = [10, 20, 30];
        
let newArr = arr.map(value => value*value)

console.log(newArr);

类定义class

class user{
   constructor(name, age){					//构造函数，类必须的部件
      this.name = name;
      this.age = age;
}
show(){										//可以在类中添加函数，实例可以直接调用
    console.log(`用户姓名${this.name},年龄${this.age}`);
}
}

let u = new user('张三',20);				//new一个实例函数
u.show();									//用户姓名张三,年龄20

set

//Set 允许我们存储任何类型的唯一值，常用来去重
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6, 1, 2, 3];
let newArr = new Set([...arr1,...arr2]);
console.log(newArr);				//[1, 2, 3, 4, 5, 6]

Map

 // Map	以键值对形式存储
        let myMap = new Map();
        myMap.set('a','1');
        let keyObj = {};
        myMap.set(keyObj,'我的key是对象');
        let keyFunc = function () {};
        myMap.set(keyFunc, '我的key是函数');
        console.log(myMap);					//{"a" => "1", {…} => "我的key是对象", ƒ => "我的key是函数"}

        console.log(myMap.get(keyObj));		//我的key是对象
        console.log(myMap.get({}));			//undefined		直接传相同的值是不行的因为引用的是地址，用空{}的话地址改变了

模块导入导出

//主文件
import abc from '引用文件路径'		//利用import从引用文件中导入，abc是自定义的变量名，用于调用引用文件中的变量和方法
console.log(abc.a, abc.b, abc.c);	//吃饭 睡觉 打豆豆

let a = '吃饭',
	b = '睡觉',
	c = '打豆豆';
export default {a,b,c};		//export是导出，default是参数，加上这个就可以在主文件中定义变量。（例如上面主文件中的abc）

其他常用资源

上述是对常见ES6的特性进行实例讲解，如果想对ES6进行进一步的深入学习，我在这里推荐一个很不错的仓库，里面有大量实例和详细讲解。
https://github,com/lukehoban/es6features
另外虽然大部分主流浏览器都已经支持ES6语法，但是仍有一些不兼容。这里推荐一个转换网站，可以将你输入的ES6语法自动转换为ES5。
https://babeljs.io/learn-es2015