ES6 study notes 1 --- let & const array class

ES6(2015)

let & const

4 Scope

• Global scope window

• Var function scope

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

343 are given

Because, b is the function test () encapsulates.

• Block scope let

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

34 are given

Because, after compiling the variable b will enhance, c does not, the actual content is

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

• Dynamic scope this

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

Respectively, 3100

Because, this points to the use of his objects

let & const

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

They are 3 4 3 undefined

Because let not tied to global variables

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

Const or more constants defined in two ways can be used to let, const not

to sum up

Var substituted with let

Array

ES5 traversing a method (4 types)

1. for circulation (basic)

   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])
   }
   

   There continue and break

2. forEach (ES5 increase)

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

   It does not support the break and continue

3. every (ES5 increase)

   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 traverse the object)

   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 the array will iterate incorporation strange things

Traversal method (one kind for of) ES6 in

1. for of (ES6 custom traversal may traverse the object)

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

   Dig a hole, in order to give each group the minimum value for of it can be done

Positive dummy array (Array.from)

Pseudo array definition

1. Index data structure

2. Length attributes

Can traverse the collection of such nodelist, jquery selectors to traverse the collection can not be directly forEach

ES5 regularization method

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

ES6 regularization method

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

Array.form grammar

Array.from(arrayLike,mapFn,thisArgs)

Three parameters: artificial array, while performing the conversion method, the this point

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

Positive and performing resetting method

Initialize the array (Array.of & Array.fill)

Array.of grammar

Array.of(...arr)

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

By the variable parameter, array initialization

Array.fill grammar

Array.fill(item,start,end)

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

By repeating the parameter initialization array

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

Replace Array

Find an array (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

to sum up

Traversal / positive / generation / Find

Class

Class definition

ES5 class objects

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

ES6 class objects

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

Class properties (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
    }
}

Method (static) class

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

If the process is changed according to the parameters of the instance of the object, otherwise normal way with the static method.

Class inheritance (extends)

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

to sum up

ES6 classes are syntactic sugar of ES5