一些ES6的常用特性

1、let 和 const：

​ let为声明变量，const为声明常量。

块级作用域：

​ let的用法类似于var但他只能在声明的代码块里面使用，称之为：块级作用域
​ const为一个只读的常量，且常量的值无法改变，作用域也在声明的代码块里，是块级作用域

暂时性死区 TDZ：

​ 当let以及const在代码块里面声明以后就绑定在这，无法在当前块级外面使用，并且JS编译是从上往下编译，所以只能在当前声明行一下调用

				if (true) {
  					console.log(MAX); // ReferenceError，因为提前调用
  					const MAX = 5;
				}

不允许重复声明：

​ let和const是不允许在一个块级作用域内重复的声明多个和它同样“名称”的变量以及常量，那将会导致报错
​ var message = “Hello!”;
​ let age = 25;

				// 重复声明
				const message = "World!";
				const age = 30;

块级作用域和全局作用域：

​ 全局变量将会导致，内层变量可能会覆盖外层变量。并且计数循环的变量“i”会泄露为全局变量

			var s = 'hello';

			for (var i = 0; i < s.length; i++) {
 				 console.log(s[i]);
			}

			console.log(i); // 5 输出完最后一个i值之后泄露出去为全局变量

2、解构赋值:

​ 从数组和对象中提取值，并且对变量进行赋值，称之为解构。

		//以前写法
			let a = 1;
			let b = 2;
			let c = 3;		

		//解构函数
			let [a, b, c] = [1, 2, 3]; //从数组中提取值

默认值：

		let [foo = true] = [];
		foo // true

		let [x, y = 'b'] = ['a']; // x='a', y='b'
		let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

import导入：

		React, { useState, useEffect } from "react";

Props取值：

		const { valueInput, sex } =props.location.state
        

3、Promise对象：

​ 一个异步操作，异步编程，一个容器

两个特点：

对象的状态不受外界影响：

​ Promise代表一个异步操作，其中有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

一旦状态改变就不会再变：

​ Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。

Promise调用API数据接口：

​ //new在一个函数里面

			new promise((resolve,reject) =>{
                //.....这个里放.fetch(API)

				.then(resolve =>{

					Console.log(‘成功’)

				})

				.catch(error=>{

					Console.log(‘失败’)

				})

			})

4、箭头函数 => :

​ 语法更加简洁，简短。不需要 funaction关键字，return以及大括号。

			// ES5
				var x = function(x, y) {
   					return x * y;
				}

			// ES6
				const x = (x, y) => x * y;

			const x = (x, y) => { return x * y };

继承上下文this关键字：

默认的this上下文：

​ 箭头函数不绑定自己的this，而是从父范围继承一个”词法作用域。箭头函数其实并没有自己的this,但它们从父作用域去继承它，下面例子为全局作用域

						const myFunction = () => {
 				 			console.log(this);
						};

箭头函数用作方法：

​ 在本例中是父窗口或全局对象。

					const myObject = {
  						myMethod: () => {
    						console.log(this);
 					 	}
					};

5、展开运算符 … ：

	用扩展运算符对数组或者对象进行拷贝时，只能扩展和深拷贝第一层的值，算浅拷贝。

				function myFunction(x, y, z) { }			
				var args = [0, 1, 2];
				myFunction.apply(null, args);

			//展开运算写法
				function myFunction(x, y, z) { }
				var args = [0, 1, 2];
				myFunction(...args);

数组浅拷贝：

			var arr = [1, 2, 3];
			var arr2 = [...arr]; // like arr.slice()
			arr2.push(4);

			// arr2 此时变成 [1, 2, 3, 4]
			// arr 不受影响

一般用处位置：

数据连接:

​ 连接数组，使用push将数组添加到另一个数组的尾部

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

					// ES5处理方式
					Array.prototype.push.apply(arr1, arr2);
					console.log(arr1) // [1, 2, 3, 4, 5, 6]

					// ES6处理方式
					arr1.push(...arr2);
					console.log(arr1) // [1, 2, 3, 4, 5, 6]

合并数组：

​ 合并数组(代替concat方法)

					var arr1 = ['a', 'b', 'c'];
					var arr2 = ['d', 'e', 'f'];

					// ES5 合并
					var es5Arr = arr1.concat(arr2);
					console.log(es5Arr) // ['a', 'b', 'c', 'd', 'e', 'f']

					// ES6 合并
					var es6Arr = [...arr1, ...arr2];
					console.log(es6Arr) // ['a', 'b', 'c', 'd', 'e', 'f']

数组和对象的拷贝:

数组拷贝：

					var arr1 = [1, 2, 3];
					var arr2 = [...arr1];

					console.log(arr1 === arr2) // false

					arr2.push(4); // 修改arr2，不会影响arr1的值

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

对象拷贝：

					var arr1 = [1, 2, 3];
					var arr2 = [...arr1];

					console.log(arr1 === arr2) // false

					arr2.push(4); // 修改arr2，不会影响arr1的值

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

字符串转数组:

					var str = 'hello';

					// ES5 处理方式
					var es5Arr = str.split('');
					console.log(es5Arr) // ["h", "e", "l", "l", "o"]

					// ES6 处理方式
					var es6Arr = [...str];
					console.log(es6Arr) // ["h", "e", "l", "l", "o"]

​ 总结：三点放在形参或者等号左边为rest运算符;放在实参或者等号右边为spread运算符，或者说，放在被赋值一方为rest运算符，放在赋值一方为扩展运算符。

6、支持Class：

​ ES6类是对基于原型的OO模式的简单补充。具有单个方便的声明形式使类模式更易于使用，并鼓励了互操作性。类支持基于原型的继承，超级调用，实例以及静态方法和构造函数。

7、导入‘import’以及导出‘export’：

​ 导入文件用‘import’关键字，导出文件用‘export’关键字

导入方式举例：

			import React, { useState, useEffect } from "react";//Hooks的导入方式

			export default JSfile;//导出当前js文件
			import JSfile from "./JSFILE";//导入当前文件，文件内部的类名：JSfile，"./JSFILE"为文件路径名，他们是不同的

			import logo from "./logo.svg";//react的svg图片导入方式
			import "./App.css";//react的css文件导入方式

注意点：一个模块中只能有一个默认导出export default，但是却可以有任意命名导出

默认导出，也就是export default时，在其他页面导入进来

//导出A.js
export default


import A from './A'，//这个A命名方式可以和路径名不一致，可以是B可以是C之类的

模块导出，export name就不一样，

//模块A.js中命名导出为A的export name
export const A = 42

//另一个js中使用{}引用模块时，import时的模块命名是有意义的
// B.js
import { A } from './A'                 // 正确，因为A.js中有命名为A的export
import { myA } from './A'               // 错误！因为A.js中没有命名为myA的export
import { B } from './A'         // 错误！因为A.js中没有命名为B的export
//想要上面B.js导入正确执行就需要明确每个命名导出
// A.js
export const A = 42
export const myA = 43
export const B = 44