[JavaScript知识库]ES6新增语法

ES6新增语法

let 和 const

let

//let定义的变量不能重名
			let a = 19;
			let a ="张三";
			console.log(a);//Uncaught SyntaxError: Identifier 'a' has already been declared

    //let没有变量提升也就是预解析必须先定义才能使用
			console.log(name);//Uncaught ReferenceError: name is not defined
			
			let name = "张三";

//let拥有块儿级作用域（也就是一个大括号{} 像if语句  for循环 switch语句   但是不包括对象的大括号）
               if(1)
			   {
				   let a = 20;
			   }
			   console.log(a);//报错 Uncaught ReferenceError: a is not defined

//let  存在暂时性死区（TDZ）
//暂时性死区: let在一个块儿级作用域中声明一个变量，let就会绑定这一块儿区域，不受外界的影响
             var a = 10;
			 {
				 console.log(a);//报错 Uncaught ReferenceError: a is not defined
				 let a = 20;
			 }

const

1.const用来定义常量，一般常量要大写
2.常量一旦被定义就不能被修改了
3.使用const声明常量的同时还要赋初始值 const PI = 3.1415926 否则会报错

           const PI = 3.1415926;
			 PI = 3.14;
			 console.log(PI);//报错    Assignment to constant variable.

附加: const 其实const有时候也是可以被修改的 对于一些引用数据类型像数组或者对象还是会被修改的

             const arr = [12,34,56,67,90];
			 arr[2] = 30;
			 console.log(arr);//[12, 34, 30, 67, 90]
			 //可见使用const 定义的引用数据类型也是会被修改的

解构赋值

数组解构

//完全解构   值与变量一一对应
			let [a,b,c] = [12,34,56];
			console.log(a,b,c);//12 34 56
//不完全解构   变量多于值
			let [a,b] = [12,34,56];
			console.log(a,b);//12 34
//解构失败  变量多于值
			let [a,b,c] = [12,34];
			console.log(a,b,c);//12 34 undefined
		    //解构默认值
			 let [a=0,b=5,c=10] = [10,20];
			 console.log(a,b,c);//10 20 10    当变量严格等于undefined时默认值生效
//缺省  会一一对应赋值
			 let [,b] = [20,30];
			 console.log(b)//30

对象解构

//由于对象不像数组一样是无序的所以对象在解构赋值的时候点特殊
//1.情况   要求定义的变量与对象的属性名一样
			 let {name,age} = {"name":"张三","age":20};
			 console.log(name,age);//张三 20
//情况2:   可以通过":"来给对象更改变量名
			 let {name:n,age:a} = {"name":"李四","age":24};
			 console.log(n,a);//李四 24
//情况3:    只要变量名与键名一一对象就行不一定顺序要按照对象的排列方式
			 let {age,name} = {"name":"李四","age":24};
			 console.log(age,name);//24 "李四"
//情况4     ...a用来接收剩余的属性值
		     let {name,...a} = {"name":"张三","age":23,"gender":"男"};
			 console.log(name,a);//张三 {age: 23, gender: "男"}
//复杂情况下   
             let obj = {
				 "name":"张三",
				 "age":23,
				 "hobby":{
					 "listfirst":"唱歌",
					 "listsecond":"跳舞"
				 }
			 }
			 let {hobby:{listfirst,listsecond}} = obj;
			 console.log(listfirst,listsecond);//唱歌 跳舞

reset 和 spread

reset 用来将参数存放到一个数组中

//reset   
			//语法：  ...参数名   用于接收剩余参数并以数组的形式去接收
			function number(...a)
			{
				return a;
			}
			let arr = number(10,23,34,50);
			console.log(arr);// [10, 23, 34, 50]
//需要注意的是  ...参数是永远接收剩余参数的所以不能反到最前面，否则会报错
			function number(...a,20)
			{
				return a;
			}
			let arr = number(10,23,34,50);
			console.log(arr);//报错 Rest parameter must be last formal parameter

//正确写法
			function number(b,...a)
			{
				return a;
			}
			let arr = number(10,23,34,50);
			console.log(arr);//[23, 34, 50]
//所以我们也可以用它来代替arguments(箭头函数支持arguments但是支持reset模式)

spread

//1.相当于是reset的逆运算  将数组元素一个一个展开
//spread  将arr拆开
			let arr = [12,34,56,67];
			console.log(...arr);//12 34 56 67
//复制---数组(相当于浅拷贝)
			let arr = [12,34,56,67];
			let arr2 = [...arr];
			console.log(arr2);//[12, 34, 56, 67]
//为什么说是浅拷贝
			let arr = [12,34,56,67,[20,40]];
			let arr2 = [...arr];
			console.log(arr2);//[12, 34, 56, 67,[20,15]]
			arr2[4][1] = 15;
			console.log(arr);//[12, 34, 56, 67,[20,15]]
//复制---对象(相当于浅拷贝)
            let obj = {
				"name":"张三",
				"age":24,
				"hobby":"打球"
			}
			let obj2 = {...obj};
			console.log(obj2);//{name: "张三", age: 24, hobby: "打球"}
//合并数组
            let arr1 = [12,24,56];
			let arr2 = [67,89,80];
			let arr3 = [...arr1,...arr2];
			console.log(arr3);//[12, 24, 56, 67, 89, 80]

箭头函数()=>{}

箭头函数特点： 减少函数代码量，回调函数用的频率比较高

//普通函数
			function fuc(a) {
				return a
			}
			console.log(fuc(20));//20
//箭头函数
			let c = (b)=>{
				return b;
			}
			console.log(c(10));//10
//箭头函数特性1.传参
//1如果传送多个参数同普通函数一样将其用逗号隔开
			let func = (a,b,c)=>{
				return a+b+c;
			}
			console.log(func(10,20,30));//60
//2.如果传送的参数只有一个小括号可以省略不写
            let func = a =>{return a;};
			console.log(func(30));//30
//3.如果传送的参数不确定可以使用...arg,但是不能使用arguments因为箭头函数不支持arguments
			let func = (...arg)=>{return arg}
			console.log(func(10,20,50,60));// [10, 20, 50, 60]
//参数默认值
			let func = (a=10)=>{return a};
			console.log(func());//10
//如果函数只有一条语句并且还是return语句    那就可以将花括号和return 省略
			let func = (a,b)=> a + b;
			console.log(func(10,20));//30
//箭头函数不可以做构造函数
           let func = (a)=>{console.log(a);}
		   let fc = new func(10);
		   console.log(fc);//func is not a constructor
//箭头函数中的this比较特殊  它指向上一层环境的指向，一个{}表示一个环境对象的花括号除外
			 let func = ()=>{
			 	console.log(this);//window
			 }
		     func();
			 function func2()
			 {
			 	return {
			 		"func3":()=>{
			 			console.log(this);
			 		}
			 	}
			 }
			 let obj = func2();
			 obj.func3();//window
			
			function func4(i)
			{
				if(i==1)
				{
					return {
						name:"张三",
						skill:function()
						{
							return ()=>
							{
								console.log(this);
							}
						}
					}
				}
			}
			let obj = func4(1);
			let b = obj.skill();
			b();

iterator迭代器

介绍: 我们知道数组迭代可以使用every,some,filter,map,foreach，但是有类似数组结构也想使用这样的方法是不可以的，所以es6提出的iterator迭代器供多种数据结构使用，array,string,dom元素集合，等等伪数组,但是数组不可以使用。
介绍2：iterator是一种接口机制，为不同数据结构提供统一的访问，为不同的数据机构提供不同接口

			let str = "1234567890";
			let arr = [];
			for(let key of str)
			{
				arr.push(Number(key)+1);
			}
			console.log(arr);//[2, 3, 4, 5, 6, 7, 8, 9, 10, 1]
//获取元素集合
		   let Oli = document.getElementsByTagName("li"];
		    let arr = [];
			for(let key of Oli)
			{
				arr.push(key);
				
			}console.log(arr);//[li, li, li, li, li]

find和findIndex()

 //返回数组中第一个满足条件的数据，如果没找到返回undefined
 			let arr = [12,34,56,78,20];
			let result = arr.find((value)=>{
				return value > 30;
			});
			console.log(result);//34
//返回数组中第一个满足条件的数据的下标,找不到返回-1
			let result2 = arr.findIndex((value)=>{
				return value > 30;
			});
			console.log(result2);//1

includes()和startsWith()、endsWith()

//includes(参数1(必选),参数2(非必选，从下标多少开始))
			let arr = [1,2,3,4,5,6];
			console.log(arr.includes(2));//true;
			console.log(arr.includes(7));//false
			console.log(arr.includes(3,4));//false
//判断字符串头部有没有参数字符串，返回一个布尔值
//startsWith(str,[position])position表示指定位置
			 let str = "123.jpg";
			 console.log(str.startsWith("123",0));//true
			 console.log(str.endsWith("jpg"));//true

set和map

特点：类似数组，成员值唯一（可以对数组进行去重）
语法：let set = new Set(数组||伪数组)
常见方法：
size: 获取集合的长度
add(值) 1.在set集合中添加成员返回一个新的集合 特点：会修改原来的集合 2.向集合中添加两个NaN，结果集合中只出现了一个，原因是es6中NaN == NaN;
delete(值) 在set集合中删除成员，返回是否删除成功
has(值):判断集合中是否有这个元素存在
clear()清空集合

	        let set = new Set([12,20,30,35]);
			set.add(10);//添加到了尾部
			console.log(set);//set(5){12,20,30,35,10}
			console.log(set.size)//5
			console.log(set.delete(12))//true
			console.log(set)//set(4){20,30.10}
			console.log(set.has(30));//true
//set去重的特性
               let arr = [12,34,56,12,12];
				let arr2 = new Set(arr);
				console.log(arr2);//set(3){12,34,56}