其他分享
首页 > 其他分享> > 前端开发常用的数组方法(二)

前端开发常用的数组方法(二)

作者:互联网

前端开发常用的数组方法(二)

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

案例用的数组如下:

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: "浅花灰/黑"}]

标签:index,常用,数组,MaterialCode,Array,货品,MaterialName,前端开发
来源: https://www.cnblogs.com/buge/p/14939442.html