ES6及babel转换

ES6简介

  ES6又称ES2015，在之前的版本基础上增加了新的特性，并不是独立于之前的版本存在。

node安装 babel配置

  在Node.js的官网https://nodejs.org/en/可下载适合自己电脑版本的node，安装全程点next，直到finish。
  在命令行窗口输入node -v，如果出现版本号，说明node安装成功。

由于ES6新增特性可能在低版本浏览器会出现运行不成功的问题，故需要使用babel工具来进行转换，每创建一个项目，就配置一遍babel依赖。
1、全局babel安装
  npm install (安装) babel-cli（包名） -g（全局）
  （1）如果安装npm安装时一直出错，或特别慢，使用cnpm
  npm install -g cnpm --registry=https://registry.npm.taobao.org
  （2）如果要结束当前安装命令，使用ctrl+C
2、进入项目的文件夹，按住shift键右击，进入项目的命令行窗口
  npm init初始化，一直按回车
  npm install babel-preset-es2015 --save-dev 安装依赖
3、新建js文件夹，新建es6.js文件
  babel js/es6.js --presets es2015
  把es6.js文件中的代码翻译成es2015显示在命令行窗口，但我们需要让他放到js文件中，而不是在命令行窗口
4、创建.babelrc配置文件
  win7系统： type nul>.babelrc
  win10系统： new-item .babelrc -type file
  出现.babelrc文件。文件中写入{“presets”:[‘es2015’]}
  最后再执行下面一句代码，将es6.js转为es2015语法放到es5.js文件中
  babel js/es6.js -o js/es5.js -w

ES6变量常量语法

let，用来声明变量
const，用来声明常量，不能改变常量的值
声明的变量常量，只在所在代码块内有效。

1、存在块级作用域{}
不仅仅是函数，if{},for{},只要花括号包含，都是块级作用域

2、不存在声明提升（但会有暂时性死区TDZ）
能感知到声明提升，但不能用声明提升

let a = 10;
if(true){
	console.log(a); // 报错，不能声明提升，但是由于暂时性死区，也不能去向上找
	let a = 20;
}

3、不允许重复声明

let a = 10;
// let a = 20; 报错，不允许重复声明
a = 20;
// var a = 20; 也报错

const cardId = 41010101010;
// cardId = 4101212121212;  报错。常量的值不允许重新赋值

const obj = {a:1};
// obj = {a:2}; 报错
obj.a = 3; 
console.log(obj);
// obj为引用类型，值为地址，不改地址；
// 但是可以改内存中的属性值

解构赋值

1、数组的解构赋值，大致有以下三种情况
（1）一一对应，进行赋值

let [a,b,c] = [1,2,3]; //一一对应
console.log(a,b,c);    // 1 2 3

// 两个值进行交换
let a = 10;
let b = 20;
[a,b]=[b,a];
console.log(a,b); // 20 10

（2）可以取默认值

let [a,b=2] = [3];//可以取默认值
console.log(a,b); // 3 2

（3）如果赋值为undefined，有默认值，则取默认值

let c;
let[a=3] = [c]; //如果赋值为undefined，有默认值取默认值
console.log(a); // 3

2、对象的解构赋值
（1）对象的属性值对应赋给左边的变量

let {a,b} = {a:"aaa",b:"bbb"};
console.log(a,b); // aaa bbb

（2）对象的属性值赋给左边的属性值

let {a:b} = {a:"aaa"};
// console.log(a);// a is not defined
// 左边是对象，a是属性名，无法打印 
console.log(b);//变量名 aaa

（3）可取默认值

let {a,b=5} = {a:1};
console.log(a); // 1
console.log(b); // 5

ES6字符串新增方法

includes(s) startsWith(s) endsWith(s) repeat(n) padStart(n,s) padEnd(n,s)

var str = "abc";
console.log(str.includes("d")); //false
// 判断该字符串在str中是否存在,存在为true,不存在为false
			
console.log(str.startsWith("b")); //false
// 判断str是否以该字符串开头,是为true,否为false
			
console.log(str.endsWith("c")); //true
// 判断str是否以该字符串结尾,是为true,否为false
			
console.log(str.repeat(5)); //abcabcabcabcabc
// 将str重复5次输出
			
console.log(str.padStart(10,"0")); //0000000abc
// 将str不够的位数，在开头以0补充，如果字符串超出10位就会打印全部
			
console.log(str.padEnd(10,"0")); //abc0000000
// 将str不够的位数，在结尾以0补充，如果字符串超出10位就会打印全部

模板字符串
  即使用``写整个字符串，${}包含变量，可将变量值进行字符串的拼接。优点：结构较清晰，不容易写错。

let str = "";
let a = 10;
			
console.log("变量a的值为"+a);//普通的字符串拼接
// 变量a的值为10
			
console.log(`变量a的值为${a+20}`);//模板字符串
// 变量a的值为30

ES6函数新增方法

1、函数参数默认值，即不传参数时，也可以有默认值运行函数；传参数时，就把实参替换掉默认值

function bar(a=1,b){
	console.log(a,b);
}
bar();  // 1 undefined
bar(2,3); // 2 3

2、函数的length属性

function foo(a,b){
				
}
console.log(foo.length); // 得到函数的形参个数
// 注：arguments.length得到实参的个数

3、rest参数 …params
即在函数参数，写…后跟变量名，变量里存放的就是传进来的实参

function foo(...a){
	console.log(a);//[1, 2, 3]
	// 返回的是数组,可使用数组的方法
	// 伪数组不能使用数组的方法
}
foo(1,2,3);

function foo(a,...b){
	console.log(a); // 1
	console.log(b); // [2, 3]
}
foo(1,2,3);

ES6数组新增方法

（1）扩展运算符…，类数组对象转换为数组
（2）Array.from()，类数组对象转换为数组
（3）Array.of()，序列转换为数组

<div></div>
<script type="text/javascript">
	var aDiv = document.querySelectorAll("div");
	// 类数组对象转换为数组
	console.log([...aDiv]);   // [div]
	console.log(Array.from(aDiv)); // [div]
			
	// 序列转换为数组
	console.log(Array.of(1,2,3));  // [1, 2, 3]
</script>

Set结构

一种新的数据结构，类似数组，值不重复

let set = new Set([1,2,2,3,4,3]);//值不能重复
console.log(set);
// Set(4) {1,2,3,4}

可以利用Set的这个属性进行数组去重

var arr = [1,1,1,2,3,1,2];
let set = new Set(arr);
let newArr = [...set];//数组去重
console.log(newArr);
// [1,2,3]

for of遍历

let set = new Set([1,2,2,3,4,3]);//值不能重复
for(let i of set){
	console.log(i);//取值
}
// 1
// 2
// 3
// 4

set.size  set.add(num)   set.delete(num)   set.has(num)  set.clear();

let set = new Set([1,2,3]);
set.add(5);
console.log(set);
// Set(4) {1, 2, 3, 5}
			
set.add(3);
console.log(set);
// Set(4) {1, 2, 3, 5}
// 3原本已经在set中存在,故添加不了

console.log(set.has(3));
// true
	
set.delete(3);
console.log(set);
// Set(3) {1, 2, 5}
			
set.clear();
console.log(set);
// Set(0) {}
			
console.log(set.size);
// 0

Set键值和索引是一样

// keys()：返回键名的遍历器
let set = new Set([4,2,6]);
console.log(set.keys());
// SetIterator {4,2,6}
			
// values()：返回键值的遍历器
console.log(set.values());
// SetIterator {4,2,6}
	
// entries()：返回键值对的遍历器		
console.log(set.entries());
// SetIterator {4 => 4,2 => 2,6 => 6}
	
// forEach()：使用回调函数遍历每个成员		
set.forEach(function(item,key){
	console.log(item,key);
	console.log(item*2);
})
// 4 4
// 8
// 2 2
// 4
// 6 6
// 12

Map结构

一种新的数据结构，类似对象

let map = new Map([["name","john"],["age",20]]);
console.log(map);
// Map(2) {"name" => "john","age" => 20}

console.log(map.keys());
// MapIterator {"name","age"}
console.log(map.values());
// MapIterator {"age",20}
console.log(map.entries());
// MapIterator {"name" => "john","age" => 20}
map.forEach(function(a,b){
	console.log(a,b);
	// john name
	// 20 "age"
}) 

箭头函数（Arrow Function）

箭头函数的写法，箭头函数不能当做构造函数来使用。

let foo = (a,b) =>{
	console.log(a,b);
}
	
foo(10,20);
// 10 20

箭头函数的this指向问题
  普通函数，谁调用，this指向谁
  箭头函数里的this，指向定义时所在环境中的那个this
1、在window下

let foo = ()=>{
	console.log(this);
	// window
}
foo();

2、对象的箭头函数中

let obj = {
	name:"obj",
	sayHello:()=>{
		console.log(this);
	}
}
obj.sayHello();
// 指向window
// 因为定义时，所在环境并不是obj，是window
// 与以下执行是一样的		
/* let obj = {};
obj.name = "obj";
obj.sayHello = ()=>{
	console.log(this);
}
obj.sayHello(); */

3、事件函数中

let oBtn = document.getElementById("btn");
oBtn.onclick = ()=>{
	console.log(this);
	// window
}

4、对象的普通函数中

let obj = {
	name:"obj",
	sayHello:function(){
		console.log(this);
		// {name: "obj", sayHello: f}
		let bar = ()=>{
			console.log(this);
		}
		bar();
	}
}
			
obj.sayHello();
// {name: "obj", sayHello: f}

call、apply、bind改变this指向
1、无参数时

var name = "window";
function foo(){
	console.log(this.name);
}
			
var obj = {
	name:"obj"
}
			
foo.call(obj);//foo执行，并且this指向call里第一个参数
// obj
foo.apply(obj);
// obj
foo.bind(obj)();
// obj

2、有参数时

var obj1 = {
	name:"obj1",
	sayHello:function(a,b){
		console.log(this.name);
		console.log(a,b);
	}
}
var obj2 = {
	name:"obj2"
}
obj1.sayHello.call(obj2,1,2);//接受的参数列表
obj1.sayHello.apply(obj2,[1,2]);//接受的是参数数组
obj1.sayHello.bind(obj2)(1,2);
// obj2
// 1 2

3、取数组中的最小值以及最小值索引

var arr = [11,3,5,1,9];
var minVal = Math.min.apply(null,arr);
var minIndex = arr.indexOf(minVal);
console.log(minVal,minIndex);
// 1 3

生成器函数（generator）

function* foo(x){
	//statements
	yield x+1;//暂停
	//statements
	yield x+2;
	return x+3;
}
			
var f = foo(1);
console.log(f.next()); //{value: 2, done: false}
console.log(f.next()); //{value: 3, done: false}
console.log(f.next()); //{value: 4, done: true}
console.log(f.next()); //{value: undefined, done: true}

案例：利用生成器函数编写斐波拉契数列
（ 0 1 1 2 3 5 8 13 21 34 … ）

Symbol

一种新的原始数据类型，主要是为了避免属性名的冲突。

let s = Symbol("name");//新增的原始数据类型
console.log(typeof s); // symbol
let s1 = Symbol("name");

let obj = {};
obj[s] = 11;
obj[s1] = 22;
			
console.log(obj);
// {Symbol(name): 11, Symbol(name): 22}