ES6 学习笔记 1 --- let&const array class

ES6(2015)

let & const

4个作用域

• 全局作用域 window

• 函数作用域 var

var a = 3
function test (){
    var b = 4
    console.log(a)
    console.log(b)
}
console.log(a)
console.log(b)

分别是 3 4 3 报错

因为,b被函数test() 封装了.

• 块作用域 let

var a = 3
function test (){
	if(a === 3){
		var b = 4
		let c = 5
	}
	console.log(a)
	console.log(b)
	console.log(c)
}

分别是 3 4 报错

因为, 编译后 b 会变量提升, c不会,实际内容是

var a = 3
function test (){
    var b
	if(a === 3){
		b = 4
		let c = 5
	}
	console.log(a)
	console.log(b)
	console.log(c)
}

• 动态作用域 this

window.a = 3
funciton test(){
	console.log(a)
}
test()
test.bind({a:100})

分别是 3 100

因为,this指向了 使用他的对象

let & const

var a = 3
let b = 4
console.log(a,b)
console.log(window.a,window.b)
var a = 5
let b = 5 // 报错!

分别是 3 4 3 undefined

因为 let 不会绑定全局变量

const a = 3
a = 4 // 报错!
const b 
b = 5 //报错!

const 常量 以上两种在let 可以用的定义方式,const不能

总结

用 let 取代var

Array

ES5中的遍历方法 (4种)

1. for循环(基础)

   const arr = [1,2,3,4,5]
   for (let i = 0 ; i<arr.length ; i++){
       if(arr[i]===2){
           continue
       }else if (arr[i]===3){
           break
       }
       console.log(arr[i])
   }
   

   有 continue 和 break

2. forEach(ES5 增加)

   const arr = [1,2,3,4,5]
   arr.forEach((item,i)=>{
   	if(item === 2){
   		contingue // 报错!
   		break // 报错!
   	}
       cosole.log(item)
   })
   

   不支持 continue 和 break

3. every(ES5 增加)

   const arr = [1,2,3,4,5]
   arr.every((item,i)=>{
   	if(item === 4){
   		return false // 类似break
   	}else if(item === 3){
   		// 类似 continue
   	}
       cosole.log(item)
   	return true // 需要返回true 才能继续
   })
   

4. for in (ES5 遍历对象)

   const arr = [1,2,3,4,5]
   arr.a = 6
   for (let i in arr){
   	if(index*1 === 2){
   		continue  // 类似continue 但是,索引是字符串,不再是数字
   	}
   	console.log(i,arr[i])
   }
   

   for in 遍历数组 会参入 奇怪的东西

ES6中的遍历方法(1种 for of)

1. for of(ES6 遍历自定义可遍历对象)

   const price = {
   	a: [1,2,3],
   	b: [4,5,6],
   	c: [7,8,9]
   }
   for( let key in price){
   	console.log(key,prick[key]) // 只能得到数组
   }
   
   

   挖个坑,要想得到 每个组中的最小值 用for of 才可以做到

伪数组的转正(Array.from)

伪数组定义

1. 索引数据结构

2. 有属性 length

可遍历集合 比如nodelist,jquery的选择器集合无法直接forEach遍历

ES5 的转正方法

let args = [].slice.call(document.querySelectorAll('img'))  

ES6 的转正方法

let args =Array.from(document.querySelectorAll('img'))

Array.form 语法

Array.from(arrayLike,mapFn,thisArgs)

3个参数: 伪数组,转换同时执行方法,this的指向

let array = Array.from({length:5},()=>{return 1},this)

转正并执行重置方法

数组的初始化(Array.of & Array.fill)

Array.of 语法

Array.of(...arr)

Array.of(1,2,3,4,5)

通过可变参数,初始化个数组

Array.fill语法

Array.fill(item,start,end)

let array = Array(5).fill(1)

通过重复参数,初始化个数组

let array = [1,2,3,4,5]
array.fill(8,2,4) //[1,2,8,8,5]

替换数组

查找数组(find & findIndex)

let array = [1,2,3,4,5]
let find = arr.filter((item)=>{
    return item % 2 === 0
}) // find 是 符合的数组 [2,4]
let find2 = arr.find((item) =>{
    return item % 2 === 0
}) // find2 是 第一个符合的数 2
let find3 = arr.findIndex((item) =>{
    return item % 2 === 0
}) // find3 是 第一个符合索引 1

总结

遍历/转正/生成/查找

Class

类的定义

ES5的类对象

const Animal = function(type){
	this.type = type
}
Animal.prototype={
    eat:(food)=>{
    	console.log(food)
	}
}

ES6的类对象

class Animal {
	constructor(type){
		this.type = type
	}
	eat(food){
		console.log(food)
	}
}

类的属性(setter,getter)

class Animal {
	constructor(type){
		this.type = type
        this._age = 4
	}
	eat(food){
		console.log(food)
	}
    get age(){
        return this._age
    }
    set age(value){
        this._age = value
    }
}

类的方法(static)

class Animal {
	constructor(type){
		this.type = type
        this._age = 4
	}
	eat(food){
		console.log(food)
	}
	static drink(water){
        console.log(water)
    }
}

如果,方法根据实例对象的参数而改变,用正常方法.否则可用静态方法.

类的继承(extends)

class Animal extends All { // 要点1
	constructor(type){
        super(type) // 要点2 必须第一个,必须有参数
		this.type = type
        this._age = 4
	}
	eat(food){
		console.log(food)
	}
}

总结

ES6的类是 ES5的语法糖