基础知识常被8：ES6中的相关语法（持续更新中）（超级详细，一笔一笔亲自打印上去的）

在2019年的8月的最后一天，有必要写点总结的东西，所以今天就来讲讲ES6中的那点事儿。

let，const，var的对比：

let

1.使用let声明得变量不能再次声明

   let a = 5;
   let a = 6;
   console.log(a); 
   错误提示：Uncaught SyntaxError: Identifier 'a' has already been declared

2.具有块级作用域

 {
   let a = 5;
   console.log(a);
 }
   console.log(a); //a is not defined

3.let没有变量提升，必须要先定义在使用

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

   console.log(a); //Cannot access 'a' before initialization
   let a = 5;

4.let的声明不会像var声明一样作用到window中

   var abc = function(x, y) {
      return x + y;
   }
   console.log(abc(1,2));
   console.log(window) // 在这里window中已经存在abc的属性了，作用到了abc中


	let abc = function(x, y) {
      return x + y;
    }
    console.log(abc(1,2));
    console.log(window) // 因为是let定义的函数，所以在window的属性中就看不见abc的这个方法了

const

1.const 定义常量必须给初始值

	const a;
    console.log(a);//Missing initializer in const declaration

2.const 一但定义了就不能修改了

    const a = 5;
    const a = 10;
    console.log(a);Uncaught SyntaxError: Identifier 'a' has already been declared

3.具有块级作用域（同let）

4.常量是独立的，和window对象没有关系（同let）

5.常量必须先定义再使用，没有提升（同let）

数组的解构：

1.模式=数组

模式=数组
        let [a,b,c] = ['测试1','测试2','测试3'];
        console.log(a); //测试1
        console.log(b);	//测试2
        console.log(c); //测试3

2.变量多，值少

变量多，值少
        let [a,b] =  ['测试1','测试2','测试3'];
        console.log(a); //测试1
        console.log(b); //测试2

3.变量少，值多

变量少，值多
        let [a,b,c] = ['测试1','测试2']
        console.log(a);//测试1
        console.log(b);//测试2
        console.log(c);undefined

4.按需取值

 按需取值
        let [a, , b] = ['测试1', '测试2', '测试3']
        console.log(a);//测试1
        console.log(b);//测试3

5. 剩余值

 剩余值
        let [a,b,...c] = ['测试1', '测试2', '测试3','测试4']
        console.log(a);//测试1
        console.log(b);//测试2
        console.log(c);//["测试3", "测试4"]

6. 复杂情况

  复杂情况
        let[,,[a,b],c] = ['aa','bb',['cc','dd'],'ee']
        console.log(a)//cc
        console.log(b)//dd
        console.log(c)//ee

对象的解构：

1. 基本的解构

 基本的解构
		let {id,name,age} = {id:1,name:"张三",age:18};
        console.log(id)//1
        console.log(name)//张三
        console.log(age)//18

2. 按需取值

 按需取值
		let {id,name} = {id:1,name:"张三",age:18};
        console.log(id)//1
        console.log(name)//张三

3.剩余值

 剩余值
		let {id,...c} = {id:1,name:"张三",age:18};
        console.log(id) //1
        console.log(c)// object{
        					age:18,
        					name:"张三"，
        				}

4. 有冲突，可以为变量定义其他名字

 有冲突，可以为变量定义其他名字
		let id = 5;
        let {id} = {id:1,name:"张三 ",age:18};//Identifier 'id' has already been declared
        let {id:nameId} = {id:1,name:"张三 ",age:18};//Identifier 'id' has already been declared
        console.log(nameId);//张三

5. 复杂的情况

 复杂的情况
		 let {code, data} = {
            code: 200, 
            msg: '成功', 
            data: [
                {id:1, title: 'aaa'}, 
                {id:2, title: 'aaa'}, 
                {id:3, title: 'aaa'}
            ]
        };
        console.log(code);
        console.log(data);

箭头函数

样式：

let fn = () =>{
			  }
()小括号内放入参数，{}大括号内放入函数体

特点：

• 如果箭头函数参数只有一个，则小括号可以省略
• 如果箭头函数的函数体只有一行代码，则大括号可以省略，并且默认表示返回函数体的值（自带return效果）
• 箭头函数的内部没有arguments对象
  • 没有argument对象那怎么遍历呢？
  • let abc = (…z) =>{
    console.log(z);
    }
    abc(1,2,3,4,5,6);
• 箭头函数不能当作构造函数
• 箭头函数的内部没有自己的this,箭头函数的this指向外部作用域的this

函数参数的默认值

（如果某个参数有默认值，则需要把该参数放到参数列表后面）

function abc (x,y=3){
	console.log(x+y);
}

内置对象的扩展：

Array

1.拼接

拼接
        let arr1 = [1,2,3,4];
        let arr2 = [4,5,6,7];
        let arr3 = [...arr1,...arr2];
        console.log(...arr3);  //1,2,3,4,4,5,6,7

2.将为数组转换成数组

将为数组转换成数组
        let weishuzu = {
            0:"张三",
            1:"李四",
            2:"王五",
            length:3
        }
        let arr = Array.from(weishuzu);
        console.log(...arr)//张三，李四，王五

3.forEach遍历

forEach 遍历
        ES5
        [1,2,3,4,5,6,7,8,9].forEach(function(item){
            console.log(item)
        });
        ES6
        [1,2,3,4,5,6,7,8,9].forEach(item=>console.log(item));

4.find(值)和findIndex(索引)

find(值)和findIndex(索引)
        let result = [1,2,3,4,5,6,7,8,9].find(function(item,index,arr){
            return item>5;
        });
        console.log(result);
        let result = [1,2,3,4,5,6,7,8,9].findIndex(function(item,index,arr){
            return item>5;
        });
        console.log(result);

5.includes（‘查找的值’,[开始的位置]）

includes
		let arr = [1,2,3,4,5,6,7,8,9];
        console.log(arr.includes(4,2));//true
        console.log(arr.includes(4,9));//false
        console.log(arr.includes(10));//false
        console.log(arr.includes(1));//true

String

1.模板字符串

模板字符串
        let a ="你好";
        let b = {
            name:"张三",
            age:18,
        };
        let c = `${b.name}${a}今天是一个号好天气,我今年${b.age}岁`
        console.log(c);//张三你好今天是一个号好天气,我今年18岁

2.includes查找字符串中是否包含了某个字符串

includes查找字符串中是否包含了某个字符串
        let a = 'ABCDEFGHIJKLMN';
        console.log(a.includes('A',0));//true  从索引为0的地方开始寻找A 返回boolean
        console.log(a.includes('A',1));//false

3.startWith() 查找字符串开头是否含有某个字符串

startWith() 查找字符串开头是否含有某个字符串
        let a = 'ABCDEFGHIJKLMN';
        console.log(a.startsWith('A'));//true
        console.log(a.startsWith('B'));//false

4.endsWith() 查找字符串结尾是否含有某个字符串

endsWith() 查找字符串结尾是否含有某个字符串
        let a = 'ABCDEFGHIJKLMN';
        console.log(a.endsWith('LMN'));//true
        console.log(a.endsWith('kMN'));//false

5.repeat() 重复一个字符串 参数为重复的次数

repeat() 重复一个字符串 参数为重复的次数
        let a = 'ABCDEFGHIJKLMN';
        console.log(a.repeat(10));

6.trim() 去掉字符串两边的空白

trim()  去掉字符串两边的空白
        let a = '        ABCDEFGHIJKLMN      ';
        console.log(a.trim());

Number

		Number.parseInt()
        Number.parseFloat()
        console.log(Number.parseInt('123abc'));

数据结构Set、Map

set

Set
        //Set的特点就是该对象里面的成员不会有重复。
        // - `size`：属性，获取 `set` 中成员的个数，相当于数组中的 `length`
        // - `add(value)`：添加某个值，返回 Set 结构本身。
        // - `delete(value)`：删除某个值，返回一个布尔值，表示删除是否成功。
        // - `has(value)`：返回一个布尔值，表示该值是否为`Set`的成员。
        // - `clear()`：清除所有成员，没有返回值。

        let s = new Set();
        let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6, 5, 4, 3, 2, 1];
        arr.forEach(function (item) {
            s.add(item) //set的add方法
        });
        console.log(...s); //去重  方式1
        console.log(Array.from(s)); // from是将伪数组变为数组; 去重 方式2
        console.log(s.size) //获取个数
        console.log(s.delete(9)); //删除数据返回boolean
        console.log(...s); //输出删除之后的set
        console.log(s.has(2)); //返回一个boolean，告知参数是否是set的成员
        s.clear(); //清空所有的成员，没有返回值
        console.log(s); //查看清空之后的set


 完成字符串去重
        let set = new Set('ababbc');
        let str = ([...set]).join('');
        console.log(str); // abc

遍历

			let arr = ['add', 'delete', 'clear', 'has'];
            let list = new Set(arr);
			********************1.***********************
            for (let key of list.keys()) {
                console.log('keys', key);
            }
            //  keys add
            //  keys delete
            //  keys clear
            //  keys has
            **********************************************
            ********************2.***********************
			for (let value of list.values()) {
                console.log('value', value);
            }
            //  value add
            //  value delete
            //  value clear
            //  value has
            **********************************************
            ********************3.***********************
			for (let [key, value] of list.entries()) {
                console.log('entries', key, value);
            }
            //  entries add add
            //  entries delete delete
            //  entries clear clear
            //  entries has has
            **********************************************
             ********************4.***********************
			list.forEach(function (item) {
                console.log(item);
            })
            //add  delete  clear  has
            **********************************************

weakset

• 方法
  • WeakSet.prototype.add(value)：向 WeakSet 实例添加一个新成员。
  • WeakSet.prototype.delete(value)：清除 WeakSet 实例的指定成员。
  • WeakSet.prototype.has(value)：返回一个布尔值，表示某个值是否在 WeakSet 实例之中
• 注意
  • WeakSet 没有size属性和forEach方法，没有办法遍历它的成员。
  • WeakSet的元素只能是对象， WeakSet中的对象是弱引用， 只是把地址拿过来， 没有clear属性， 不能遍历
• 原因：
  • WeakSet 不能遍历，是因为成员都是弱引用，随时可能消失，遍历机制无法保证成员的存在，很可能刚刚遍历结束，成员就取不到了。WeakSet 的一个用处，是储存 DOM 节点，而不用担心这些节点从文档移除时，会引发内存泄漏。

        let weakList = new WeakSet();
        let arg = {
            a: '1'
        };
        weakList.add(arg);
        weakList.add({
            b: '2'
        });
        console.log('weakList', weakList);
        //weakList WeakSet {Object {b: "2"}, Object {a: "1"}}

map

• Map中的key可以是任意数据类型：字符串、数组、对象等 要注意集合Set添加元素用add()，而集合Map添加元素用set()

		*******************************1.***************************
		let map = new Map();
        let arr = ['123'];
        map.set(arr, 456);
        console.log('map', map, map.get(arr));
        ************************************************************
        *******************************2.***************************
        let map = new Map([
            ['a', 123],
            ['b', 456]
        ]);
        console.log('map args', map);
        //map args Map {"a" => 123, "b" => 456}

        //size delete clear方法 与 遍历同set一样
        console.log('size', map.size); //size 2
        console.log('delete', map.delete('a'), map); //delete true Map {"b" => 456}
        map.clear();
        console.log('clear', map); //clear Map {}
        ************************************************************

weakmap

• 方法：

  • 1.没有遍历方法clear()、keys()、values()、entries()、size属性

  • 2.只有get()、set()、has()、delete()

• 注意：
  • 同WeakSet一样接收的key值必须是对象， 没有size属性， clear方法， 也是不能遍历

        let weakmap = new WeakMap();
        let o = {};
        weakmap.set(o, 123);
        console.log(weakmap.get(o)); //123

定义对象的简洁方式

		let id = 1;
		let name = 'zs';
		let age = 20;
		
		// 之前定义对象的方案
		// let obj = {
		//     // 属性: 值
		//     id: id,
		//     name: name,
		//     age: age,
		//     fn: function () {
		//         console.log(this.age);
		//     }
		// };
		
		// obj.fn();
		
		// ES6的新方案
		let obj = {
		    id,  // 属性名id和前面的变量id名字相同，则可以省略 :id
		    name,
		    nianling: age,
		    // 下面的函数是上面函数的简化写法，可以省略 :function  。但是注意这里仅仅是上面函数的简化，不是箭头函数
		    fn () {
		        console.log(this.name);
		    }
		};
		obj.fn();

---

好了，今日就更新到这里，有时间我会持续更新ES6的最新语法的，欢迎大家前来评论！