es6新增关键字、语法解析

 

let的应用

var btns=document.getElementsByTagName('button');
			for(let i=0;i<btns.length;i++){
				btns[i].onclick=function(){
					// btns[i].style.color='red';如果使用的是var 此时会报错 因为var声明的变量是全局变量，循环结束i等于5,而btns下标最大为4
					// this.style.color='red';
					btns[i].style.color='red' 
					// let声明的块级作用域

				}
			}

模板字符串

var stu={
				name:'zs',
				age:12
			}
			txt.innerHTML=`学生的姓名是${stu.name}，年龄是${stu.age}`;
2、标签模板，模板字符串不仅仅可以按照上面的这种方式使用。还可以跟在一个函数后面。该函数将被调用来处理这个模板字符串
			// alert(123);
			// alert`123`;
			function add(x,y){
				console.log(x,y);//[ '1 23' ] undefined
				console.log(arguments)//[Arguments] { '0': [ '1 23' ] }
			}
            let a=10;
			let b=2;
			// 如果实参有变量有常量的时候，会自动解析 把常量(用变量隔开的)拼接成一个数组，每一个变量依次拼接到后面
			add`hello${a}welcome${b}${a+b}`
            //[ 'hello', 'welcome', '', '' ] 10
            //[Arguments] { '0': [ 'hello', 'welcome', '', '' ], '1': 10, '2': 2, '3': 12 }

解构：es6中允许按照一定模式，从数组和对象中提取值，按照一定的规则，对变量进行赋值

//数组的解构赋值 按照数组的顺序一一赋值
let [a,b,c]=[1,2,4];
console.log(a,b,c);//1,2,4

// 通过解构可以直接交换值
			let m=12;
			let n='hello';
			// 通过解构可以直接交换值
			[m,n]=[n,m];
			console.log(m,n);//m='hello',n=12
//对象的解构赋值和数组有一个重要的不同，数组的解构是有顺序的，对象的解构没有顺序，由属性来决定
// 变量名字必须与属性名字一致，才能获取到正确的值
let stu={
				name:'zs',
				age:12
			}
			let {age,name,address}=stu;
			// address相当于声明了，没有赋值
			console.log(name,age,address);//zs,12,undefined
// 字符串的解构赋值 把字符串中的字符解析一一赋值。如果有多余的不会报错，只是没有对应变量赋值
let[x,y,z]='hi';
console.log(x,y,z);//h,i,undefined
// 字符串都会有一个长度属性，因此可以使用属性解构赋值
let {length:len}='hello';
console.log(len);//5
// 函数参数的解构赋值，类似于数组的解构赋值
function add([a,b]){
				console.log(a,b)
			}
			add([2,3])//2,3

数组扩展

// forEach只能用来遍历数组，不能用来遍历集合
    // btns类数组/集合 和数组类似
    //var btns=document.getElementsByTagName('button');


            // 会报错
            // btns.forEach(function(item,index,arr){
            //     console.log(item,index,arr)
            // })
// Array.from()可以把类数组/集合转化为数组
    //要将一个类数组对象转换为一个真正的数组，必须具备以下条件：

　　//1、该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数
    //组是一个空数组。

　　//2、该类数组对象的属性名必须为数值型或字符串型的数字

// array.of()相当于对new Array的扩展。不论输入什么，代表的都是数组元素

        //Array.of(7);       // [7]
        //Array.of(1, 2, 3); // [1, 2, 3]

        //Array(7);          // [ , , , , , , ]
        //Array(1, 2, 3);    // [1, 2, 3]
//数组.find(function(条件){书写具体条件})得到的结果是第一个符合条件的数组元素的值。
//查找顺序，从左到右
        // let score=[98,97,96,86,79,79,80];
        // let m=score.find(function(n){
		// 	return n<80
		// })
		// console.log(m) //79
//数组.findIndex(function(条件){书写具体条件})得到的结果是第一个符合条件的数组元素对应的下标。
//查找顺序，从左到右
        // let score=[98,97,96,86,79,79,80];
        // 	let m=score.findIndex(function(n){
		// 		return n<80
		// 	})
		// 	console.log(m)//4
// 数组.filter(function(条件){}) 可以把所有符合条件的数据过滤出来
        // let score=[98,97,96,86,79,79,80];
        // 	let m=score.findIndex(function(n){
		// 		return n<80
		// 	})
		// 	console.log(m)//[ 79, 79 ]
//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目 
//Array.splice(index,howmany,[item1,.....,itemX])
//index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
//howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
//item1, ..., itemX	可选。向数组添加的新项目。
//返回值类型为Array	包含被删除项目的新数组，如果有的话
        //let score=[98,97,96,86,79,79,80];
        //var res=score.splice(0,0,3)
		//console.log(res,score)//[] [ 3, 98, 97, 96, 86, 79, 79, 80 ]
//copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中
//array.copyWithin(target, [start], [end])
//target	必需。复制到指定目标索引位置。
//start	可选。元素复制的起始位置。
//end	可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数 复制结束的位置 
//含开始不含结束。
//如果复制的元素，超出数组的长度，直接舍弃，不会扩展数组
        //let score=[98,97,96,86,79,79,80];
			// 86,79,79
			//var res=score.copyWithin(1,3,5);
			//console.log(score);//[ 98, 86, 79, 86, 79, 79, 80 ]