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(this.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种)
-
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
-
forEach(ES5 增加)
const arr = [1,2,3,4,5] arr.forEach((item,i)=>{ if(item === 2){ contingue // 报错! break // 报错! } cosole.log(item) })不支持 continue 和 break
-
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 才能继续 }) -
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)
-
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)
伪数组定义
-
索引数据结构
-
有属性 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的语法糖
