https://juejin.im/post/5ddc6ad8518825731161fa75?utm_source=gold_browser_extension
查看Array所有方法、属性：Array.prototype
一、for..of 循环
for(const item of items)循环遍历数组项，如下所示遍历colors列表：
const colors = ['blue', 'green', 'white'];
for (const color of colors) {
console.log(color);
}
// 'blue'
// 'green'
// 'white'
- 提示：
咱们可以随时使用break语句停止遍历。
二、for 循环
for(let i; i < array.length; i++)循环使用递增的索引变量遍历数组项。
for通常需要在每个循环中递增index 变量
const colors = ['blue', 'green', 'white'];
for (let index = 0; index < colors.length; index++) {
const color = colors[index];
console.log(color);
}
// 'blue'
// 'green'
// 'white'
index变量从0递增到colors.length-1。此变量用于按以下索引访问项：colors [index]。
- 提示
咱们可以随时使用break语句停止遍历。
三、Array.prototype.forEach
var colors = ['red', 'green', 'yellow'];
colors.forEach((item,index,array) => {
console.log(item, index, array)
})
- 提示：
咱们不能中断array.forEach()迭代。 - 原理：
Array.prototype.myForEach = function(callback){
for(var i=0;i<this.length;i++){
callback && callback(this[i], i, this)
}
}
四、Array.prototype.map
Array.map()方法
array.map(callback) 方法通过在每个数组项上使用callback调用结果来创建一个新数组。
在每个遍历中的callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身，并应该返回新项。
var colors = ['red', 'green', 'yellow'];
colors.map((item,index,array) => {
console.log(item, index, array)
})
- 提示：
array.map()创建一个新的映射数组，而不改变原始数组。 - 原理
Array.prototype.myMap = function(callback){
var newArr = []
for(var i=0;i<this.length;i++){
newArr.push(callback(this[i], i, this))
}
return newArr
}
五、Array.from()方法
Array.from(arrayLike[, callback])方法通过在每个数组项上使用callback 调用结果来创建一个新数组。
在每个遍历中callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身并且应该返回新项。
如下所示咱们对每个数组元素都递增 1：
const numbers = [0, 2, 4];
const newNumbers = Array.from(numbers,
function increment(number) {
return number + 1;
}
);
newNumbers; // => [1, 3, 5]
- 提示：
Array.from()创建一个新的映射数组，而不改变原始数组。
Array.from()更适合从类似数组的对象进行映射。
Array.prototype.every
数组内所有数据都满足条件就返回true否则返回false
Array.protorypr.some
数组内只要有一条数据满足条件就返回true都不满足返回false
Array.prototypr.filter
var data = [
{id: 1,name: 'name1'},
{id: 2,name: 'name2'},
{id: 3,name: 'name3'},
{id: 4,name: 'name4'},
{id: 5,name: 'name5'},
{id: 6,name: 'name6'},
{id: 7,name: 'name7'},
{id: 8,name: 'name8'},
{id: 9,name: 'name9'},
{id: 10,name: 'name10'}
]
var filterData = data.filter(item=>{
return item.id>6
})
console.log(filterData)
- 原理
Array.prototype.myFilter = function(callback){
var newArr = []
for(var i=0;i<this.length;i++){
if(callback(this[i], i, this)){
newArr.push(this[i])
}
}
return newArr;
}
Array.prototype.find
var data = [
{id: 1,name: 'name1'},
{id: 2,name: 'name2'},
{id: 3,name: 'name3'},
{id: 4,name: 'name4'},
{id: 5,name: 'name5'},
{id: 6,name: 'name6'},
{id: 7,name: 'name7'},
{id: 8,name: 'name8'},
{id: 9,name: 'name9'},
{id: 10,name: 'name10'}
]
var findData = data.find((item,index,array)=>{
return item.id === 5 // 有满足条件的就结束了，不会遍历所有的
})
console.log(findData) // {id: 5, name: "name5"}
- 原理：
Array.prototype.myFind = function(callback){
for(var i=0;i<this.length;i++){
if(callback(this[i], i, this)){ // 回调函数如果返回是true直接return当前数据
return this[i] // 返回当前数据
}
}
}
Array.prototype.findIndex
var data = [
{id: 1,name: 'name1'},
{id: 2,name: 'name2'},
{id: 3,name: 'name3'},
{id: 4,name: 'name4'},
{id: 5,name: 'name5'},
{id: 6,name: 'name6'},
{id: 7,name: 'name7'},
{id: 8,name: 'name8'},
{id: 9,name: 'name9'},
{id: 10,name: 'name10'}
]
var index = data.findIndex((item,index,array)=>{
return item.id === 5 // 有满足条件的就结束了，不会遍历所有的
})
console.log(index) // 4
- 原理
Array.prototype.myFindIndex = function(callback){
for(var i=0;i<this.length;i++){
if(callback(this[i], i, this)){ // 有满足条件的就结束了，不会遍历所有的
return i; // 返回当前索引
}
}
}
网友评论