一、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() 方法的返回值为 undefined
var 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
[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