JS 中数组的常用方法——SevenOne

it2025-02-14  27

一、push()

说明:push() 方法用于给数组尾部添加一条或多条数据。push() 方法无参数时返回数组的长度。var arr0 = [1,2,3,4,5]; console.log("数组长度为:"+arr0.push()); 输出结果: 数组长度为:5push() 方法有一个参数时,表示将这个参数添加到数组末尾。var arr0 = [1,2,3,4,5]; arr0.push(6); console.log("添加一条数据后的数组:",arr0); 输出结果: 添加一条数据后的数组: [1,2,3,4,5,6]push() 方法有多个参数时,表示将多个参数添加到数组末尾。var arr0 = [1,2,3,4,5]; arr0.push(6,7,8); console.log("添加多条数据后的数组:",arr0); 输出结果: 添加多条数据后的数组: [1,2,3,4,5,6,7,8]push() 方法的参数为数组或对象时,表示将数组或对象添加到数组末尾。var arr0 = [1,2,3,4,5]; arr0.push([1,2,3]); console.log("添加数组后的数组:",arr0); 输出结果: 添加多条数据后的数组: [1,2,3,4,5,[1,2,3]]var arr0 = [1,2,3,4,5]; arr0.push({name:"SevenOne",age:21}); console.log("添加数组后的数组:",arr0); 输出结果: 添加多条数据后的数组: [1,2,3,4,5,{name:SevenOne,age:21}]

二、unshift()

说明:unshift() 方法用于给数组首部添加一条或多条数据,添加成果后,后面的数据下标依次向后推。unshift() 方法无参数时返回数组的长度。var arr1 = [1,2,3,4,5]; console.log("数组长度为:"+arr1.unshift()); 输出结果: 数组长度为:5unshift() 方法有一个参数时,表示将这个参数添加到数组首部。var arr1 = [1,2,3,4,5]; arr1.unshift(0); console.log("添加一条数据后的数组:",arr1); 输出结果: 添加一条数据后的数组:[0,1,2,3,4,5]unshift() 方法有多个参数时,表示将这些参数添加到数组首部。var arr1 = [1,2,3,4,5]; arr1.unshift(-2,-1,0); console.log("添加多条数据后的数组:",arr1); 输出结果: 添加一条数据后的数组:[-2,-1,0,1,2,3,4,5]unshift() 方法参数为对象或数组时,同 push() 方法,只是位置不同。

三、pop()

说明:pop() 方法用于删除数组中最后一项数据,返回值为被删除的数据。pop() 方法无需带参数。var arr2 = [1,2,3,4,5]; var date = arr2.pop(); console.log("删除最后一项数据后的数组:",arr2); console.log("被删除的数据是:",date); 输出结果: 删除最后一项数据后的数组: [1, 2, 3, 4] 被删除的数据是: 5当数组为空时,使用 pop() 方法的返回值为 undefinedvar arr2 = []; var date = arr2.pop(); console.log("被删除的数据是:",date) 输出结果: 被删除的数据是: undefined利用 pop() 与 push() 方法将数组剪切后逆向粘贴。var arr3 = [9,8,7,6,5,0,-1,-2]; var arr4 = []; console.log("原数组:",arr3); var bool = arr3.pop(); while(bool != undefined) { arr4.push(bool); bool = arr3.pop(); } console.log("剪切后的数组:",arr3); console.log("逆向粘贴后的数组:",arr4); 输出结果: 原数组:[9, 8, 7, 6, 5, 0, -1, -2] 剪切后的数组: [] 逆向粘贴后的数组: (8) [-2, -1, 0, 5, 6, 7, 8, 9]

四、shift()

说明:shift() 方法用于删除数组的第一个数据,函数返回值是被删除的数据。同 pop() 方法,shift() 无参数。console.log("例 5:shift()"); var arr5 = [1,2,3,4,5]; var date1 = arr5.shift(); console.log("删除第一项数据后的数组:",arr5); console.log("被删除的数据是:",date1); 输出结果: 删除第一项数据后的数组: (4) [2, 3, 4, 5] 被删除的数据是: 1

五、join()

说明:将数组转换成字符串,并以参数作为分隔。无参数是同 arr.toString()join() 方法无参数时:var arr = [1,2,3,4,5] console.log("没有参数:",arr.join()); 输出结果: 没有参数: 1,2,3,4,5join() 方法参数为 # 时:var arr = [1,2,3,4,5] console.log("参数为 # :",arr.join("#")); 输出结果: 参数为 # : 1#2#3#4#5join() 方法参数为空字符串时:var arr = [1,2,3,4,5] console.log("参数为空字符串时:",arr.join("")); 输出结果: 参数为空字符串时: 12345

六、concat()

说明:concat() 方法用于连接两个或多个数组。concat() 参数为空时,相当对数组的深拷贝。var arr1 = [9,8,7,6,5]; var arr2 = arr1.concat(); // 此处修改 arr1 中的值,查看是否是深拷贝 arr1[0] = 10; console.log("arr1: ",arr1); console.log("arr2: ",arr2); 输出结果: arr1: [10, 8, 7, 6, 5] arr2: [9, 8, 7, 6, 5]concat() 有参数时相当于将参数拼接到原数组的尾部后赋给新数组,原数组不变。var arr3 = [1,2,3,4,5]; var arr4 = arr3.concat(6,7,8,9); console.log("arr3: ",arr3); console.log("arr4: ",arr4); 输出结果: arr3: [1, 2, 3, 4, 5] arr4: [1, 2, 3, 4, 5, 6, 7, 8, 9]concat() 参数为一个数组时,相当于将两个数据链接在一起。var arr5 = [1,2,3]; var arr6 = arr5.concat([4,5,6]); console.log("arr5: ",arr5); console.log("arr6: ",arr6); 输出结果: arr5: [1, 2, 3] arr6: [1, 2, 3, 4, 5, 6]

七、splice()

说明:splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

splice() 方法没有参数时表示创建一个新的空数组。

var arr7 = [0,1,2,3,4,5,6,7,8,9]; var arr8 = arr7.splice(); console.log("arr7: ",arr7); console.log("arr8: ",arr8);

输出结果: arr7: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] arr8: []

splice() 方法一个参数 a 时表示删除下标为 a 以后的元素。

var arr7 = [0,1,2,3,4,5,6,7,8,9]; var arr9 = arr7.splice(6); console.log("arr7: ",arr7); console.log("arr9: ",arr9);

输出结果: arr7: [0, 1, 2, 3, 4, 5] arr9: [6, 7, 8, 9]

splice() 方法参数为 0 时表示将原数组清空,原数组的所有元素添加到新数组中。

var arr7 = [0,1,2,3,4,5] var arr10 = arr7.splice(0); console.log("arr7: ",arr7); console.log("arr10: ",arr10);

输出结果: arr7: [] arr10: (6) [0, 1, 2, 3, 4, 5]

splice() 方法参数有两个值时 splice(a,b) 表示从下标为 a 的元素开始,删除 b 个元素。

var arr10 = [0,1,2,3,4,5] var arr11 = arr10.splice(0,2); console.log("arr10: ",arr10); console.log("arr11: ",arr11);

输出结果: arr10: (4) [2, 3, 4, 5] arr11: (2) [0, 1]

splice() 方法参数有三个值时 splice(a,b,c) 表示从下标为 a 的元素开始,删除 b 个元素后将数据 c 插入数组的首位。

var arr10 = [2,3,4,5] var arr12 = arr10.splice(0,1,-1); console.log("arr10: ",arr10); console.log("arr12: ",arr12);

输出结果: arr10: [-1, 3, 4, 5] arr12: [2]

splice() 方法参数有多个值时 splice(a,b,……) 表示从下标为 a 的元素开始,替换 b 个元素,后面的参数表示替换的数据。

var arr10 = [-1,3,4,5] var arr13 = arr10.splice(0,2,-1,0); console.log("arr10: ",arr10); console.log("arr13: ",arr13);

输出结果: arr10: [-1, 0, 4, 5] arr13: [-1, 3]

八、slice()

说明:截取数组,返回值为一个数组,数组中元素是从原数组中截取的数据。没有参数时相当于对原数组进行复制。var ar0 = [0,1,2,3,4,5,6,7,8,9]; var ar1 = ar0.slice(); console.log("ar0: ",ar0); console.log("ar1: ",ar1); 输出结果: ar0: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] ar1: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]一个参数 a 时表示从下标为 a 的元素开始截取到最后。a = 0时相当于复制数组。var ar0 = [0,1,2,3,4,5,6,7,8,9]; var ar2 = ar0.slice(5); console.log("ar0: ",ar0); console.log("ar2: ",ar2); 输出结果: ar0: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] ar2: [5, 6, 7, 8, 9]参数有两个值时 slice(a,b) 表示从下标为 a 的元素开始截取,截取到下标为 b 的元素。var ar0 = [0,1,2,3,4,5,6,7,8,9]; var ar3 = ar0.slice(1,4); console.log("ar0: ",ar0); console.log("ar3: ",ar3); 输出结果: ar0: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] ar3: [1, 2, 3]

九、高阶函数

filter() (1)返回值必须为布尔值。 (2)返回值为 true 时:函数内部会将这次回调的值赋给新的数组。 (3)返回值为 false 时:函数内部会将这次回调的值过滤掉。

案例需求:将 arr1 中大于 10 的数赋给新数组。

let arr1 = [5,8,9,6,5,12,15,48,9,3]; let arr2 = arr1.filter(function(n) { return n > 10 }) console.log(arr2);

输出结果: [12,15,48]

map() (1)对数组内部数据进行操作。 (2)将返回值赋给一个新的数组。

案例需求:将 arr2 中的数据扩大两倍

let arr2 = [12,15,48]; let arr3 = arr2.map(function(n) { return n*2; }) console.log(arr3);

输出结果: [24,30,96]

reduce():对数组中所有内容进行汇总

案例需求:将 arr3 中的数据累加起来

let arr3 = [24,30,96] let sumArr = arr3.reduce(function(preValue,n) { return preValue + n },0) console.log(sumArr);

输出结果: 150

计算过程:

(1)第一次:n = 24; preValue = 0; return 24; (2)第二次:n = 30; preValue = 24; return 54; (3)第三次:n = 96; preValue = 54; return 150;

(4)第一次进来时,preValue 的初始值为 reduce 的第二个参数 0;n 的值为数组的第一项 (5)第二次进来时,preValue 的值为上一次 return 出去的值。

使用链式编程,完成上面的三个需求。

let arr01 = [5,8,9,6,5,12,15,48,9,3]; let arrNum1 = arr01.filter(function(n) { return n > 10; }).map(function(n) { return n * 2; }).reduce(function(preValue,n) { return preValue + n; },0) console.log(arrNum1);

输出结果: 150

利用箭头函数完成三个需求

let arr02 = [5,8,9,6,5,12,15,48,9,3]; let arrNum2 = arr02.filter(n => n > 10).map(n => n * 2).reduce((pre,n) => pre + n); console.log(arrNum2);

输出结果: 150

最新回复(0)