Js知识梳理2：ES6新增部分内容

  ES6是ECMAScript6的简称，是ECMAScript的第六个版本，与2015年6月正式发布的JavaS语言的标准，正式名位 ECMAScript2015（ES2015）。但是目前浏览器的JavaS是ES5的版本，大多数的高版本的浏览器也支持ES6，不过只实现了ES6的部分特性和功能。但ES6会成为未来的趋势。

新增作用域

块级作用域
  在ES6中，使用ES6的声明关键词可以创建块级作用域。使用{…}语法，就可以标注出一个块级作用域，并且{}是可以直接存在的，它并不是函数。块级作用域的每个使用区域都是独立的，包括if，for。

新增的声明关键字

一、声明变量
  ES6新增了两个重要的JavaScript关键字，let和const。
1.let：
(1).首先let不同于var，它没有提升（不存在预解析）。

console.log(a);  //  ReferenceError: a is not defined
let a = "abc";

console.log(b);  // undefined
var b = "def";

(2).let不同于var，不能重复声明。

let a = "abc";
let a = 5;  //  Identifier 'a' has already been declared

(3).let存在块级作用域。

{
	let a = "abc";
	var b = "def";
}
console.log(a);  // ReferenceError: a is not defined
console.log(b);  //def

  在for循环中的let：

<ul>
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
    <li>link4</li>
</ul>
    var ali = document.getElementsByTagName("li");
    // let生成了块级作用域，在此处，块级作用域触发了闭包
    for(let i=0;i<ali.length;i++){
        ali[i].onclick = function(){
            console.log(i);
        }
    }  //根据点击的li从上到下的结果是0，1，2，3
	for(var j=0;j<ali.length;j++){
	    ali[j].onclick = function(){
	        console.log(j);
	    }
	}  //不论点击那个，结果都会是4

2.const:
  const在使用上与let没有区别，但const声明的是常量，不是变量（常量不允许被修改，声明的是什么就是什么，声明之后不允许修改），所有const在声明时，必须立即给初始值。

const a = “abc”;
console.log(a);  //abc 

const b;  // Missing initializer in const declaration

3.let与const的区别
  在写法上没什么不同。const要立刻赋值，另一个不用。let可以随意修改，另一个不允许修改地址，可以修改值。
二、声明类（面向对象）
  在ES6中，class(类)作为了对象的模板被引入，可以使用class关键字来声明类。但class的本质是function，它只是让写法更加清晰，更像面向对象的编程语法。

ES5:

function Fn(){
	this.x = 0;
	this.y = 0;
}
Fn.prototype.addEvent = function(){
	this.setA;
	this.setB;
}
Fn.prototype.setA = function(){}
Fn.prototype.setB = function(){}
Var t = new Fn();
t.addEvent();

ES6class:

class Fn{
	constructor(){
		this.x = 0;
		this.y = 0;
	}
	addEvent(){
		this.setA();
		this.setB();
	}
	setA(){}
	setB(){}
}

三、声明接口和引入接口（模块化开发）
  ES6引入了模块化，分为导出(export)与导入(import)。以后有机会再补充。

新增的箭头函数

  ES6新增了一种更加简洁函数书写方式，书写方式是()=>{}。箭头函数就是简化了的无名函数，不允许直接存在，必须作为值存在。
当只有一个参数的时候，小括号可以省略:

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

  可以省略花括号的场景(如果想将函数的内容，返回，可以省略花括号的同时，可以省略return，仅限简单语句）。

let fn = a=>{"0"+a;}
let fn = a=>"0"+a;

注!：在箭头函数内部，没有自己的this，使用的是外层函数的this。同时，在箭头函数内部没有arguments。
一般来说，箭头函数用在回调函数上，会比较方便（如果是事件监听式绑定事件的方法，不要使用箭头函数）。

ES6新增的处理默认参数的方式

ES6新增了一种对默认参数处理的方式：

function fn(a,b="默认值"){console.log(a,b);}

function fn(a,b="abc"){console.log(a,b);}
fn("xyz","def");  //xyz,def
fn("xyz","");  //xyz,
fn("xyz");  //xyz,abc

ES6解构赋值

1.数组的解构赋值[]：从左向右（按照书写顺序）依次解构

let arr = ["hello","world","aaa",777]
let [a,b,c,d] = arr;
console.log(a,b,c,d);  //hello world aaa 777

2.对象的解构赋值{}：按照对象的键名去解析

let obj = {name:"Admin", age:18, sex:"man", like:"ball", show: ()=> {console.log("a");}}
let {name,age,like} = obj;
console.log(name,age,like);  //Admin 18 ball

3.字符的解构赋值：等同于数组的解构赋值

let str = "hello html";
let [a,b,c,d,e,f] = str;
console.log(a,b,c,d,e,f); // h e l l o  

4.两个变量的值的交换

var a=10;
var b=20;
var [a,b] = [b,a]
//注：不能用let

5.函数的参数的快速解析

function fn([q,z]){console.log(q,z)}
let arr = ["hello","world"]
fn(arr)  // hello world

ES6新增的字符串拼接

  在老版本中，字符串的使用有双引号或这单引号，但它们不是很方便，不能进行换行等操作。而在ES6中新增了一种字符串的使用方法反引号``，这种字符串支持换行，而在反括号中拼接变量直接使用${}就可以，不像老版本需要使用双引号以及单引号交替拼接。

<div id="box"></div>

老版本：

var a = 5;
var str = '<div><p>'+5+'</p></div>';
var box = document.getElementById("box");
box.innerHTML = str;

新版本：

Var a = 5;
Var str = `<div>
			<p>${a}</p>
		   </div>`
var box = document.getElementById("box");
box.innerHTML = str;

ES6新增的展开运算符

  在ES6之中，新增了一种展开运算符，用…表示。可以把数组或对象之中的值展开，打散。

数组：

let arr1 = [4,5,6];
let arr2 = ["hello", ...arr1, "world"];
console.log(arr2);  // ["hello", 4, 5, 6, "world"]

对象：

let obj1 = {
	name:"admin",
	age:18
}
let obj2 = {
	...obj1,
	like:"ball",
	sex:"男"
}
console.log(obj2);// {name: "admin", age: 18, like: "ball", sex: "男"}

  这次整理就到这里，有机会再完善。在疫情之中逆战必胜。