前端开发常用的数组方法

Posted 2021-06-27 笆哥柴庐

前端开发常用的数组方法（二）

接着上篇继续说一说，数组常用的方法

案例用的数组如下：

const Material_Array=[
       {MaterialCode:\'00061057\',MaterialName:\'运动袜\',ColorName:\'浅花灰/黑\'},
       {MaterialCode:\'00064060\',MaterialName:\'闪光背包\',ColorName:\'宝蓝/灰色\'},
       {MaterialCode:\'00066062\',MaterialName:\'拉托克背包\',ColorName:\'黑色/灰\'},
       {MaterialCode:\'00069063\',MaterialName:\'单车背包\',ColorName:\'红色/灰\'},
]

5、Array.forEach()

forEach()主要功能是遍历数组，其实是for循环的加强版，该方法需要一个回调函数，作为参数。回调函数的形参，依次是：value:遍历的数组内容；index:对应的数组索引；array：数组本身；

语法：

array.forEach(function(currentValue,index,array){},thisValue)

参数说明：

参数	描述
currentValue	必选。当前元素
index	可选。当前元素的索引值
array	可选。当前元素所属的数组对象

示例：

Material_Array.forEach((value,index,array)=>{
    console.log(\'当前值：\',value.MaterialName)
    console.log(\'索引index:\',index)
})

执行结果：

当前值： 运动袜
索引index: 0
当前值： 运动袜1
索引index: 1
当前值： 闪光背包
索引index: 2
当前值： 拉托克背包
索引index: 3
当前值： 单车背包
索引index: 4

6、for...of

ES2015版本中引入的for..of语句。for...of可迭代数组、类数组及其任何可以迭代的对象（maps、sets、Dom集合）。

语法：

for(variable of iterable){
   //statemenets
}

示例：

for(var material of Material_Array){
     console.log("货品编号：",material.MaterialCode)
     console.log("货品名称：",material.MaterialName)
     console.log("货品颜色：",material.ColorName)
}

执行结果：

货品编号： 00061057
货品名称： 运动袜
货品颜色： 浅花灰/黑
货品编号： 00061057
货品名称： 运动袜1
货品颜色： 浅花灰/黑2
货品编号： 00064060
货品名称： 闪光背包
货品颜色： 宝蓝/灰色
货品编号： 00066062
货品名称： 拉托克背包
货品颜色： 黑色/灰
货品编号： 00069063
货品名称： 单车背包
货品颜色： 红色/灰

7、for..in

for...in语句用于遍历数组或者对象的属性（对数组或者对象属性进行循环操作）。

for...in得到的对象的Key或者数组index,字符串的下标。

语法：

for(variable in object){
   //statement
}

variable

​ 在每次迭代时，variable会被赋值为不同的属性名。

object

​ 非Symbol类型的可枚举属性被迭代的对象

示例：

for(var materialIndex in Material_Array){
     console.log("货品编号：",Material_Array[materialIndex].MaterialCode)
     console.log("货品名称：",Material_Array[materialIndex].MaterialName)
     console.log("货品颜色：",Material_Array[materialIndex].ColorName)
}

执行结果：

货品编号： 00061057
货品名称： 运动袜
货品颜色： 浅花灰/黑
货品编号： 00061057
货品名称： 运动袜1
货品颜色： 浅花灰/黑2
货品编号： 00064060
货品名称： 闪光背包
货品颜色： 宝蓝/灰色
货品编号： 00066062
货品名称： 拉托克背包
货品颜色： 黑色/灰
货品编号： 00069063
货品名称： 单车背包
货品颜色： 红色/灰

8、Array.shift()

shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

shift()不对空数组进行任何操作，返回undefined值。请注意，该方法不创建新数组，而是直接修改原有的数组。

示例：

let first=Material_Array.shift();
console.log(first)

执行结果：

{MaterialCode: "00061057", MaterialName: "运动袜", ColorName: "浅花灰/黑"}

9、Array.unshift()

unshift()方法可向数组的开头添加一个或多个元素，并返回新的长度。

unshift()该方法改变数组的数目。

语法：

array.unshift(item1,item2,item3,...,itemx)

参数：

item1、item2...itemX 可选，向数组起始位置添加一个或者多个元素。

示例：

var first={MaterialCode:\'00069064\',MaterialName:\'单车背包1\',ColorName:\'白色\'}
let array_len=Material_Array.unshift(first)
console.log(Material_Array)

执行结果：

0: {MaterialCode: "00069064", MaterialName: "单车背包1", ColorName: "白色"}
1: {MaterialCode: "00061057", MaterialName: "运动袜", ColorName: "浅花灰/黑"}
2: {MaterialCode: "00064060", MaterialName: "闪光背包", ColorName: "宝蓝/灰色"}
3: {MaterialCode: "00066062", MaterialName: "拉托克背包", ColorName: "黑色/灰"}
4: {MaterialCode: "00069063", MaterialName: "单车背包", ColorName: "红色/灰"}
length: 5

10、Array.Filter()

filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

filter()不会对空数组进行检测，filter()不会改变原始数组。

语法：

array.filter(function(value,index,arr),this.value)

参数说明：

value 必须。当前元素的值。

index 可选。当前元素的索引值。

array可选。当前元素属于的数组对象。

提示：

var materarray=Material_Array.filter((value,index,array)=>value.MaterialCode==\'00061057\')
console.log(materarray)

执行结果：

[{MaterialCode: "00061057", MaterialName: "运动袜", ColorName: "浅花灰/黑"}]