我的前端自学 ES6

（一）ES6中的新增语法
1 . let
let关键字是ES6中新增的用于声明变量的关键字，用来代替 var
①使用let关键字声明的变量具有块级作用域（一对大括号{}产生的作用域，块级作用域中的变量只能在同一个作用域内访问）

if (true) {
 	let a = 0;
 	let b = 0;
 	if (true) {
 		console.log(a); // 0
 	}
 }
 console.log(b) // b is not defined

②使用let声明的变量没有变量提升,必须先声明，再使用

console.log(a); // undefined
var a = 0;

console.log(b); // 报错
let b = 0;

③使用let声明的变量会出现暂时性死区

var a = 0;
if (true) {
	a++; // 报错，块级作用域外声明的a变量对块级作用域内无法造成影响
	let a = 10;
}

2 .const关键字
用于声明常量，常量就是值（内存地址）不能变化的量
①使用const声明的常量也具有块级作用域
②使用const声明常量时，必须赋值

const a; // 这是不允许的

③常量赋值后，对应的内存地址不可更改

// 基本数据类型
const PI = 3.14;
PI = 0; // 报错

// 复杂数据类型
const array = [1, 2, 3];
array[0] = 4;
array[1] = 5;
array[2] = 6; // 这是合法的更改，因为并没有改变数组的内存地址

array = [4, 5, 6]; // 报错，因为常量的内存地址改变了

3 .解构赋值
ES6中允许从对象中提取值，按照对应位置，对变量赋值
如果值的数量和变量数量不对等，多余的变量的值为undefined

let arr = [1, 2, 3];
let [a, b, c] = arr; // a = 1 , b = 2 , c = 3

let obj = {
	id: 1,
	name: "张三"，
	age: 18
}
let {id, name, age} = obj; 
// 自定义变量对象解构
let {id: a, name: b, age: c} = obj;

(二) 箭头函数
const fn =（参数）=> { JScode }

①如果函数体中只有一句代码，并且执行的结果就是返回值，那么就可以省略大括号

let fn = (a, b) => a + b;
fn(1, 2);

②如果形参只有一个，可以省略小括号

let fn = a => ++a;
fn(1);

2 .箭头函数中的this
箭头函数本身不绑定this，箭头函数中的this指向的是函数定义位置的this

let obj = { id: 1 };
function fn() {
	return () => { console.log(this) };
}
let result = fn.call(obj);
result(); // { id: 1 }

3 .剩余参数语法(展开运算符)
剩余参数语法允许我们将一个不定数量的参数表示为一个数组，使用三个点表示

function sum(a, b, c) {
	return a + b + c;
}
let theArgs = [1, 2, 3];
console.log(sum(...theArgs)); // 6

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

// 计算任意个数数字的和
const getSum = (...args) => {
	let total = 0;
	args.forEach(items => total += items);
	return total;
}
console.log(getSum(10, 22, 33)); // 65

剩余参数用于解构赋值：

let arr = [1, 2, 3];
let [a, ...args] = arr;
console.log(args); // [2, 3]

let obj = {
	id: 1,
	name: "张三",
	age: 18
}
let {id: theID, ...theArgs} = obj;
console.log(theArgs); // { name: "张三", age: 18 }

展开运算符用于合并数组：

let ary1 = [1, 2];
let ary2 = [3, 4];
let newAry = [...ary1, ...ary2]; // [1, 2, 3, 4]

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5, 6]; // [1, 2, 3, 4, 5, 6]
// 也可以用于push函数
arr2.push(...arr1); //[1, 2, 3, 4, 5, 6, 1, 2, 3]

用于将伪数组转换为真正的数组：

let set = new Set([1, 2, 3]); //伪数组 set(3){1, 2, 3}
set = [...set]; // 真数组 [1, 2, 3]

将伪数组转换为真数组还有个数组构造函数方法：Array.from();

let set = new Set(["rose", "jack", "吴老二"]);
let newSet = Array.from(set);
console.log(newSet); // ["rose", "jack", "吴老二"]

该方法还可以接受第二个回调函数参数，用来处理数组中的每一个元素

let set = new Set(["rose", "jack", "吴老二"]);
let newSet = Array.from(set, items => items + 1);
console.log(newSet); // ["rose1", "jack1", "吴老二1"]

剩余参数和函数内置对象arguments的区别：
1.剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。
2.arguments对象不是一个真正的数组，而剩余参数是真正的 Array实例，也就是说你能够在它上面直接使用所有的数组方法，比如 sort，map，forEach或pop。
3.arguments对象还有一些附加的属性

4 .Array 的扩展方法

①find()用于查找第一个符合条件的数组元素并返回值

let ary = [{
	id: 1,
	name: "first"
	}, {
	id: 2,
	name: "second"
}];
let getEle = ary.find(items => items.id == 1);
console.log(getEle); // {id: 1, name: "first"}

②findIndex()用于返回数组中符合条件的第一个元素的位置

let arr = [1, 11, 9, 15, -3];
let resutl = arr.findIndex(items => items > 10);
console.log(result); // 1

③includes()用于检查数组中是否包含指定元素，此方法也适用于字符串

let ary1 = [1, 2, 3];
console.log(ary.includes("sleep")); // false
console.log(ary.includes(1)); // true

(三)模板字符串
ES6新增的创建字符串的方式，使用反引号表示

let str = `模板字符串`;

模板字符串中可以解析变量，效果相当于拼接字符串,变量用${}包裹

let message = "Hello！";
let sayHello = `${message}干哈去啊？`
console.log(sayHello); //Hello！干哈去啊？

模板字符串中可以换行

let msg = {
	name: "张三",
	age: 18
}
let html = `
	<li>
		<span>${msg.name}</span>
		<span>${mes.age}</span>
	</li>
`;

模板字符串中可以调用函数

let say = mes => mes;
let msg = `${say('hi~')}`;
console.log(msg); // hi~

（四）字符串扩展方法
① 判断字符串是否以指定字符串开头

var str = "字符串扩展方法";
str.startsWith("字"); // true

②判断字符串是否以指定字符结尾

var str = "字符串扩展方法";
str.endsWith("串"); // false

③repeat()方法用于将原字符串进行重复，返回重复后的新字符串,它接收一个整数数字作为参数

let str = "字符串重复";
let newStr = str.repeat(3);
console.log(str); // "字符串重复字符串重复字符串重复"

(五)SET数据结构

1 .ES6提供了新的数据结构set,它类似与数组，但是成员的值都是唯一的，没有重复的值
Set本身是一个构造函数，用来生成Set数据结构。

const set = new Set(数组参数);

2 .Set数据结构的长度size
size用来返回一个Set数据结构的长度（元素个数），相当于数组的length

const s = new Set([1, 2, 3]);
console.log(s.size); // 3

3 .Set数据结构用于数组去重

let arr = ["aa", "bb", "cc", "aa", "bb", "cc"];
let set = new Set(arr);
set = [...set];
console.log(set); // ["aa", "bb", "cc"]

4 .Set数据结构数据操作

const s = new Set(["aa", "bb", "cc"]);
// 添加数据 add() 可以链式调用
s.add("dd").add("ee");
// 删除数据 delete()
s.delete("aa");
// 检测是否存在指定数据 has() ,返回布尔值
s.has("ab"); // false
// 清空Set数据结构中的所有数据
s.clear();

5 .Set数据结构遍历

Set结构和数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。

s.forEach(item => console.log(item));