estudo ES6 notas 1 --- deixe & classe Array const

ES6 (2015)

deixe & const

4 Âmbito

• janela escopo global

• âmbito função var

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

343 são dadas

Porque, b é o teste de função () encapsulados.

• Bloco let escopo

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

34 são dadas

Porque, depois de compilar a variável b irá aumentar, c não, o conteúdo real é

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

• escopo dinâmico esta

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

Respectivamente, 3100

Porque, isso aponta para o uso de seus objetos

deixe & const

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

Eles são 3 4 3 indefinido

Porque vamos não vinculados a variáveis ​​globais

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

Const ou mais constantes definidas de duas formas podem ser usados ​​para deixar, não const

resumo

Var substituído com let

ordem

ES5 atravessando um método (4 tipos)

1. para circulação (básico)

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

   Há continuar e pausa

2. forEach (aumento ES5)

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

   Ele não suporta a quebra e continuar

3. cada (aumento 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. no (ES5 atravessar o objecto)

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

   para na matriz vai iterate incorporação coisas estranhas

método de passagem (um tipo de para) em ES6

1. para de (travessia de costume ES6 pode atravessar o objeto)

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

   Cavar um buraco, a fim de dar a cada grupo o valor mínimo para isso pode ser feito

matriz fictício positivo (Array.from)

definição de matriz pseudo

1. estrutura de dados Index

2. atributos de comprimento

Pode percorrer a coleção de tais NodeList, seletores jQuery para percorrer a coleção não pode ser diretamente forEach

método regularização ES5

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

método regularização ES6

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

gramática Array.form

Array.from (arrayLike, mapFn, thisArgs)

Três parâmetros: matriz artificial, durante a realização do método de conversão, a este ponto

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

Positivo e realizando método redefinir

Inicializar a matriz (Array.of & Array.fill)

Array.of gramática

Array.of (... arr)

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

Pelo parâmetro variável, inicialização de matriz

gramática Array.fill

Array.fill (item, início, fim)

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

Ao repetir a matriz parâmetro de inicialização

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

Substitua matriz

Encontre uma disposição (encontrar & 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

resumo

Traversal / positiva / geração / Find

Classe

definição de classe

objetos de classe ES5

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

objetos de classe ES6

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

propriedades de classe (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
    }
}

Método de classe (estática)

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

Se o processo é mudado de acordo com os parâmetros da instância de objecto, maneira de outra maneira normal com o método estático.

A herança de classe (se estende)

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

resumo

aulas ES6 são açúcar sintático de ES5