展开对ES6学习的第一天

面试题

说明：体现js的单线程加事件队列，同步任务优先执行，异步任务会有等待时间

习题测试

	//下列代码输出什么
	for(var i = 0;i < 10;i++){
		setTimeout(()=>console.log(i))
	}
	//输出十次10
	//那么下面的代码输出什么
	for(let i = 0;i < 10;i++){
		setTimeout(()=>console.log(i))
	}
	//依次输出0~9
	//这里就有同步任务与异步任务的执行；
	//for循环是同步任务会一直执行，直到满足条件，而setTimeout定时器是异步任务，他会等待，在等待过程中for循环结束了而setTimeout可能还没开始，
	//当用var声明是变量不断变化，而每一个setTimeout最后就只接受最后一次的变量了
	//当用let声明变量也会变化，但是在每一次的for循环中都会保留当前的值留给setTimeout不让它被取代
	

let声明变量

说明：ES6新增的变量声明类型，具有自己独特的作用域

特点：1. let声明的变量不会挂载到window上，不会造成全局污染（全局污染即在window上声明一个变量若之后再次声明会将本次声明的变量替换，从而污染了新的变量）
2. let声明的变量只会再一个块级作用域下生效，在作用域外就不会被访问
3. let声明的变量不允许有重复的出现，不能重复的声明一个已经存在的let变量
4. let不会有变量提升（注意：这里的变量提升虽然表面上没有但实际上let是有一个变量提升的，只是这个提升的变量被提前至临时性死区里了，一般浏览器会以报错的方式来提醒不要企图用let去变量提升）

特点演示

	//第一点
	let a = 123
	console.log(window.a)//undefined
	//第二点
	if(true){
		let age = 3
	}
	console.log(age)// 报错；age is not defined
	//第三点
	let sex = 'm'
	let sex = 'w'
	console.log(sex)// 报错；'sex' has already been declared
	//第四点
	console.log(say)// 报错；say is not defined
	let say = function(){
		console.log('你好哦！跳跳虎')
	}

const声明变量

说明：与let相似，具有独特的块级作用域，但是comst一般用于声明一个常量不会被修改

特点：1. 不会挂载全局
2.具有独特作用域，在作用域外是访问不到该变量
3. const不允许重复声明
4. const不允许变量提升
5. const不允许被更改
6.const在声明时必须得赋值
7.const声明的引用值的内存地址不允许被修改

特点演示

	// 第一点
	const a = 233
	console.log(window.a)// undefined
	//第二点
	if(true){
		const b = 666
	}
	console.log(b)//报错；b is not defined
	//第三点
	const c = 444
	const c = 888
	console.log(c)//报错；c has already been declared
	//第四点
	console.log(d)//报错；d is not defined
	const d = 666
	//第五点
	const age = 18
	age = 17
	console.log(age)// 报错；Assignment to constant variable
	//第六点
	const sex
	sex = 9494
	console.log(sex)// 报错；Missing initializer in const declaration
	

箭头函数

说明：ES6引入的一种对匿名函数的简写方法

特点：箭头函数没有this指向，但是会继承上层作用域的this就像普通的变量一样，箭头函数不可以被new，也不会像普通函数一样自动拥有prototype属性，使用箭头函数在特殊情况下能有效的减小内存消耗

运用场景：在数组的方法里面的回调函数里用的比较多

方式：当箭头函数只有一个参数时，（）可以省略，直接用参数箭头就可以；当执行语句只有一句时，{}可以省略，直接写返回值就可以；当没有参数时，（）一定要带上或者用_取代也可以

方式演示

	let arr = [1,2,3,4,5]
	//原先对一个数组的处理方法
	arr.map(function(item){
		return item * 2
	})
	//用箭头函数表示
	arr.map(item => item*2)
	//在立即执行函数中(原)
	(function(){
		let a = 3
		let b = 4
		return a + b
	})()
	//箭头函数(改)
	(_=>{
		let a = 3
		let b = 4
		return a + b
	})()

解构赋值

说明：ES6对赋值运算符的一种扩展，针对数组或对象进行赋值，简化代码书写长度，提高效率

特点：在赋值时是一一对应的，如果有缺了就舍弃

案例演示

	//对数组
	//少量对多数(原)
	let arr = [1,2,3,4,5,6,7,8,9]
	let a = arr[0]
	let b = arr[1]
	let c = arr[2]
	console.log(a,b,c)// 1 2 3
	//用解构赋值去(改)
	let [a1,b1,c1] = arr
	console.log(a1,b1,c1)// 1 2 3
	//获取数组长度(原)
	 let length = arr.length
	 //解构赋值(改)
	 let {length} = arr
	//小案例
	let {1:a,0:b,2:c,3:d} = arr
	console.log(a,b,c,d)//2 1 3 4 
	//一一对应
	let [a,,b] = [4,5,6]
	console.log(a,b)//4 6
	//一一对应，不存在的就算undefined
	let [a = 6,b] = []
	console.log(a,b)// 6 undefined

扩展运算符

说明：在ES6中针对数组进行展开，ES7开始对对象展开

功能：扩展运算符可以收集，展开，写入，克隆

功能演示

	//收集功能与arguments一样
	//arguments收集多个参数
	function fn(){
		console.log(arguments)
	}
	fn(1,2,3)// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
	//...扩展运算符
	function fn2(...arg){
		console.log(arg)	
	}
	fn2('a','b','c')// (3) ["a", "b", "c"]
	//展开功能与concat一样
	let arr = [1,2,3]
	let arr2 = ['a','b','c']
	//concat合并数组
	let arr3 = arr.concat(arr2)
	let arr4 = [...arr,...arr2]
	console.log(arr3,arr4)// (6) [1, 2, 3, "a", "b", "c"] (6) [1, 2, 3, "a", "b", "c"]
	//写入
	//计算一组数的平均值
	function sum(...arg){
		return arg.reduce((p,n)=>p+n)/arg.length
	}
	sum(1,2,3,4,5)//3

伪数组转换为数组

说明：利用…扩展运算符的展开特性，可以将一个伪数组转化为数组

案例演示

	function arg(){
		// 转化arguments这个伪数组为真实的数组再去调用数组方法进行排序
		let arr = [...arguments]
		//对传入的值进行排序
		let res = arr.sort((a,b)=>a-b)
		return res
	}
	console.log(arg(22,13,11,35,61,1,99))// (7) [1, 11, 13, 22, 35, 61, 99]

find方法

用于查找满足条件的数组成员，并返回第一次找到符合条件的值

案例演示

	let arr = [1,2,3,4,5,10,6,7,9,8]
	let result = arr.find(item => item > 6)
	console.log(result)//10