乐趣区

关于javascript:ES6三-数组

jiezi

目录

  • 数据的重要性能【遍历、转换、生成、查找】

  • 数组遍历

    • ES5 中遍历有多少种办法？

      • for 循环
      • forEach
      • every
      • for-in

    • ES6 新增 for-of

      • 为什么 es6 要新增一个 for-of？
      • for-of 不能间接遍历对象? —— 对于可迭代接口
    • 劣势和毛病

  • 将伪数组转换成数组

    • 什么是伪数组？
    • ES5 的转换
    • ES6 的转换

  • 创立新数组

    • ES5

    • ES6

      • Array.from
      • Array.of
      • Array.prototype.fill

  • 数组中查找元素

    • ES5

    • ES6

      • Array.prototype.find
      • Array.prototype.findIndex

  • 函数参数

    • Array.from(arrayLike,mapFn,thisArg)
    • Array.of(element0[,element1…])
    • Array.fill(value,start,end)
    • Array.find(callback[, thisArg])
    • Array.findIndex(callback[, thisArg])
  • ES6-ES10 学习幅员

数据的重要性能【遍历、转换、生成、查找】

数组遍历

ES5 中遍历有多少种办法？

const arr = [1,2,3,4,5]

for 循环

for (let i = 0;i < arr.length; i++) {console.log(arr[i]) // 1 2 3 4 5
}

forEach

数组遍历办法

arr.forEach(function(item){console.log(item) //1 2 3 4 5
})

代码简洁上看，forEach比 for 循环 写法要简洁。

然而 forEach 不反对 reak 和continue，每个元素必须遍历到

// for 循环能够应用 break 管制遍历进行
for (let i = 0;i < arr.length; i++) {if(arr[i] === 2){break}
    console.log(arr[i]) // 1
}

// for 循环能够应用 continue 管制遍历跳过
for (let i = 0;i < arr.length; i++) {if(arr[i] === 2){continue}
    console.log(arr[i]) // 1 3 4 5
}

//forEach 不反对 break 和 continue
arr.forEach(function(item){if(item === 2) {break // or continue 都会报错 Unsyntactic break 语法不反对}
    console.log(item)
})

arr.forEach(function(item){if(item === 2) {return false // 跳过本此循环 相似 continue}
    console.log(item) // 1 3 4 5
})

every

数组遍历办法

arr.every(function(item){console.log(item) // 1
})
// every 继不持续遍历取决于返回值，为 true 则持续遍历，false 退出。默认是 false
// 如果要全副遍历实现 须要返回 true
arr.every(function(item){console.log(item)  // 1 2 3 4 5
    return true
})

// 能够通过返回的 true or false 来管制循环
arr.every(function(item){if(item === 2) {return false // 相当于 for 循环中的 break}
    console.log(item)  // 1
    return true
})

for-in

for-in 自身是未 object 遍历的，而不是为数组。尽管能够遍历数组，然而有瑕疵。

for-in 中能够应用 continue 和break，然而不反对写return，会报错Illegal return statement

// 之所以数组能够用 for-in 取遍历
// 是因为 1. 数组是对象的一种 2. 数组是可遍历的
for (let index in arr) {console.log(index, arr[index])
}
// 0 1
// 1 2
// 2 3
// 3 4
// 4 5


// 瑕疵一：// 因为 arr 是一个对象，所以能够定义属性并赋值
arr.a = 8
for (let index in arr) {console.log(index, arr[index])
}
// 再次进行遍历
// 0 1
// 1 2
// 2 3
// 3 4
// 4 5
// a 8  这个时候 a 不是索引，而是字符串，如果这里咱们还是认为遍历之后只是返回索引就容易呈现 bug


// 瑕疵二：for(let index in arr) {if(index === 2) {continue}
    console.log(index, arr[index])
}
// 0 1
// 1 2
// 2 3
// 3 4
// 4 5
// 为什么能够应用 continue 然而 continue 却没有起作用
// 因为这个时候 index 是字符串而不是索引

// 解决办法一：只判断值，不判断类型
for(let index in arr) {if(index == 2) {continue}
    console.log(index, arr[index])
}
// 0 1
// 1 2
// 3 4
// 4 5
// 解决办法二：将 index 隐式转化成数字类型
for(let index in arr) {if(index * 1 === 2) {continue}
    console.log(index, arr[index])
}
// 0 1
// 1 2
// 3 4
// 4 5

for-of(ES6 新增)

// item 不是下标，间接是值，且能够应用 break 终止循环
for(let item of arr) {console.log(item) // 1 2 3 4 5
}

为什么 es6 要新增一个 for-of？

要判断一个对象是不是可遍历的，不能说其是不是一个数组 or Object。

ES6 容许用户自定义数据结构，这种数据结构既不是数组，也不是 Object，然而都是可遍历的。这种数据结构进行遍历，不能用数组的也不能用 for-in，就须要新增一种 for-of 去遍历

举例子：

// 定义一个数据结构，想要遍历拿到类别中的最低值
const Price = {A: [1.5, 2.3, 4.5],
    B: [3, 4, 5],
    C: [0.5, 0.8, 1.2]
}

for (let key in Price) {console.log(key, Price[key])
    // [1.5, 2.3, 4.5]
    // [3, 4, 5]
    // [0.5, 0.8, 1.2]
}
// 应用 for-in 只能返回数组，无奈间接把三个最低值遍历进去

for-of 不能间接遍历对象? —— 对于可迭代接口

for-of 能够用来遍历 Set 构造和 Map 构造，然而不能够间接遍历 object，因为其不是可遍历的对象，Iterable 接口没有实现。

上面看一下：数组、Set 和 Map 的原型对象上有迭代器



对象办法下面没有

那么咱们调用一下数组下面的 iterator 办法

const arr = ['foo', 'bar', 'baz']
console.log(arr[Symbol.iterator]())
// 返回一个 iterator 的对象，其原型对象下面有 next 办法
// Array Iterator {}  
//  __proto__: Array Iterator
//    next: ƒ next()   
//    Symbol(Symbol.toStringTag): "Array Iterator"
//    __proto__: Object
const iterator = arr[Symbol.iterator]()

console.log(iterator.next()) // {value: 'foo', done: false}
console.log(iterator.next()) // {value: 'bar', done: false}
console.log(iterator.next()) // {value: 'baz', done: false}
console.log(iterator.next()) // {value: undefined, done: true}

能够看到 for-of 外部的循环规定，外面有一个迭代器。只有对象能够实现 Iterable 接口就能够应用 for-of 进行循环。上面对一个对象进行可迭代革新。

劣势和毛病

循环形式 劣势 毛病 特点
for 循环 反对 break 和 continue 不反对 return
forEach 写法比 for 简洁明了 全副遍历，不反对 break 和 continue return false 相当于 continue
every 能够反对相似 for 的 break 和 continue
for-in 能够遍历 object 遍历数组的时候存在瑕疵 不反对 return
for-of(ES6 新增) 能够遍历除数组和 object 之外可遍历的数据结构，反对 break 和 continue 不反对 return
  • return 只能用在函数体内，呈现在代码的任何中央都会报错

将伪数组转换成数组

什么是伪数组？

简略了解：
具备一些数组的个性：可遍历、有长度。然而不能间接调用数组的 API，相似于 arguments 和 DOM nodeList。

严格了解：

  1. 依照索引形式存储数据
  2. 具备 length 属性

{0:’2′,1:’b’,length:2} 这种类型都能够称之为伪数组

为什么要将伪数组转换成数组？

如果想要应用数组的 API，就须要将伪数组转换为数组

ES5 的转换

let args = [].slice.call(arguments) //collection
// arguments 只能在函数体内应用
// ES6 曾经废除 arguments 的应用
let imgs = [].slice.call(document.querySelectorAll('img')) // NodeList

ES6 的转换

Array.from

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

大抵说一下 Array.from 这个函数

Array.from(arrayLike,mapFn,thisArg)<br/>
第一个参数：伪数组，必须 <br/>
第二个参数：遍历函数，非必须 <br/>
第三个函数：this 对象，非必须

举一个例子：
初始化一个长度为 5 的数组

//ES5 
let array = Array(5)

array.forEach(function (item) {item = 1})
console.log(array) // [empty × 5] forEach 只会遍历存在的元素

// 应用 for 循环能够遍历，然而仍旧是先申明，后赋值
for (let i = 0, len = array.length; i < len; i++) {array[i] = 1
}
console.log(array) // [1,1,1,1,1]

// 先将数组转化为 5 个空字符串数组，而后每个遍历赋值
let arr = Array(6).join('').split('').map(item => 1)
console.log(array) // [1,1,1,1,1]

// ES6
// 应用 Array.from 能够达到初始化并填充的成果
let array = Array.from({length: 5}, function () { return 1})
console.log(array) // [1,1,1,1,1]
// 下面之所以第一个参数能够传{length: 5}，是因为第一个参数应该传伪数组

// 应用 Array.fill 能够疾速实现初始化并填充
let array = Array(5).fill(1)
console.log(array) //[1,1,1,1,1]

创立新数组

ES5

let array = Array(5)
let array = ['',''] // 无奈定义长度，只能每个都初始化为空字符串

ES6

Array.from

let array = Array.from({length: 5})

Array.of

let array = Array.of(1,2,3,4,5) // 参数是依此放进去的元素，能够一个参数能够多个
console.log(array) //[1,2,3,4,5]

Array.prototype.fill

let array = Array(5).fill(1) // 参数是依此放进去的元素，能够一个参数能够多个
console.log(array) //[1,1,1,1,1]

Array.fill(value,start,end)<br/>
第一个参数：填充值 <br/>
第二个参数：起始地位，默认为数组的开始 <br/>
第三个函数：完结地位，默认为数组的完结 <br/>
[start,end)

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

数组中查找元素

ES5

查找元素包含看元素在不在数组中，也包含依据某个条件去筛选。

// 一
let array = [1, 2, 3, 4, 5]
let find = array.filter(function (item) {return item === 3})
console.log(find) // [3]
// 能找到没找到都返回一个数组，依据数组的长度判断数组中有或者没有元素

let find = array.filter(function (item) {return item % 2 === 0})
console.log(find) // [2,4]
// 如果数组中数据特地大，只是要有还是没有，并不要所有的数据

// 二
// 应用 every 也能够进行判断然而咱们须要额定定义变量
let isExt
array.every(function (item) {if (item === 3) {
        isExt = item
        return false
    }
    return true
})
console.log(isExt) // 3

ES6

Array.prototype.find

找到查找元素返回其值，找不到返回 undefined

let array = [1, 2, 3, 4, 5]
let find = array.find(function(item){return item === 3})
console.log(find)  // 2--- 以后值

let find1 = array.find(function(item){return item === 6})
console.log(find1)  // undefined--- 没有找到

let find2 = array.find(function(item){return item % 2 === 0})
console.log(find2)  // 2--- 找到 2 就不再持续找了

Array.prototype.findIndex

找到查找元素返回其索引地位，找不到返回 -1

let find = array.findIndex(function(item){return item % 2 === 0})
console.log(find)  // 1--- 索引地位

函数参数

Array.from(arrayLike,mapFn,thisArg)

第一个参数：伪数组，必须 <br/>
第二个参数：遍历函数，非必须 <br/>
第三个函数：this 对象，非必须

Array.of(element0[,element1…])

参数：任意个参数，依此成为数组的元素

Array.fill(value,start,end)

第一个参数：填充值 <br/>
第二个参数：起始地位，默认为 0 <br/>
第三个函数：完结地位，默认为 this.length<br/>
[start,end)

Array.find(callback[, thisArg])

第一个参数：回调函数，接管三个参数，element、index、array<br/>
第二个参数：this 对象

Array.findIndex(callback[, thisArg])

第一个参数：回调函数，接管三个参数，element、index、array<br/>
第二个参数：this 对象

学习幅员

退出移动版