本文摘自PHP中文网,作者php中世界最好的语言,侵删。
在JavaScript里,有很多新增,移除,替换数组元素的方法,很多方法都能实现同一个功能,但是他们却有很大的不同之处,今天我们就来对比一下,JavaScript里的数组方法到底有什么奥秘。在JavaScript 提供了多种新增,移除,替换数组元素的方法,但是有些会影响原来的数组;有些则不会,它是新建了一个数组。
注意:区分以下两个方法的不同点:
array.splice() 影响原来的数组
array.slice() 不影响原来的数组
I. 新增:影响原数组
使用 array.push() 和 array.ushift() 新增元素会影响原来的数组。
1 2 3 | let mutatingAdd = [ 'a' , 'b' , 'c' , 'd' , 'e' ];
mutatingAdd.push( 'f' );
mutatingAdd.unshift( 'z' );
|
II. 新增:不影响原数组
两种方式新增元素不会影响原数组,第一种是 array.concat() 。
1 2 3 | const arr1 = [ 'a' , 'b' , 'c' , 'd' , 'e' ];
const arr2 = arr1.concat( 'f' );
console.log(arr1);
|
第二种方法是使用 JavaScript 的展开(spread)操作符,展开操作符是三个点(…)
1 2 3 | const arr1 = [ 'a' , 'b' , 'c' , 'd' , 'e' ];
const arr2 = [...arr1, 'f' ];
const arr3 = [ 'z' , ...arr1];
|
展开操作符会复制原来的数组,从原数组取出所有元素,然后存入新的环境。
III. 移除:影响原数组
使用 array.pop() 和 array.shift() 移除数组元素时,会影响原来的数组。
1 2 3 | let mutatingRemove = [ 'a' , 'b' , 'c' , 'd' , 'e' ];
mutatingRemove.pop();
mutatingRemove.shift();
|
array.pop() 和 array.shift() 返回被移除的元素,你可以通过一个变量获取被移除的元素。
1 2 3 4 5 6 7 | let mutatingRemove = [ 'a' , 'b' , 'c' , 'd' , 'e' ];
const returnedValue1 = mutatingRemove.pop();
console.log(mutatingRemove);
console.log(returnedValue1);
const returnedValue2 = mutatingRemove.shift();
console.log(mutatingRemove);
console.log(returnedValue2);
|
array.splice() 也可以删除数组的元素。
1 2 | let mutatingRemove = [ 'a' , 'b' , 'c' , 'd' , 'e' ];
mutatingRemove.splice(0, 2);
|
像 array.pop() 和 array.shift() 一样,array.splice() 同样返回移除的元素。
1 2 3 4 | let mutatingRemove = [ 'a' , 'b' , 'c' , 'd' , 'e' ];
let returnedItems = mutatingRemove.splice(0, 2);
console.log(mutatingRemove);
console.log(returnedItems)
|
IV. 移除:不影响原数组
1 2 3 4 5 6 7 | JavaScript 的 array.filter() 方法基于原数组创建一个新数组,新数组仅包含匹配特定条件的元素。
const arr1 = [ 'a' , 'b' , 'c' , 'd' , 'e' ];
const arr2 = arr1.filter(a => a !== 'e' );
const arr2 = arr1.filter(a => {
return a !== 'e' ;
});
|
以上代码的条件是“不等于 ‘e’ ”,因此新数组(arr2)里面没有包含 ‘e’。
箭头函数的独特性:
单行箭头函数,’return’ 关键字是默认自带的,不需要手动书写。
可是,多行箭头函数就需要明确地返回一个值。
另一种不影响原数组的方式是 array.slice()(不要与 array.splice() 混淆)。
1 2 3 | const arr1 = [ 'a' , 'b' , 'c' , 'd' , 'e' ];
const arr2 = arr1.slice(1, 5)
const arr3 = arr1.slice(2)
|
V. 替换:影响原数组
如果知道替换哪一个元素,可以使用 array.splice() 。
1 2 3 4 | let mutatingReplace = [ 'a' , 'b' , 'c' , 'd' , 'e' ];
mutatingReplace.splice(2, 1, 30);
mutatingReplace.splice(2, 1, 30, 31);
|
VI. 替换:不影响原数组
可以使用 array.map() 创建一个新数组,并且可以检查每一个元素,根据特定的条件替换它们。
1 2 3 4 5 6 7 | const arr1 = [ 'a' , 'b' , 'c' , 'd' , 'e' ]
const arr2 = arr1.map(item => {
if (item === 'c' ) {
item = 'CAT' ;
}
return item;
});
|
使用 array.map() 转换数据
array.map() 是个强力方法,可以用于转换数据,而不污染原先的数据源。
1 2 3 | const origArr = [ 'a' , 'b' , 'c' , 'd' , 'e' ];
const transformedArr = origArr.map(n => n + 'Hi!' );
console.log(origArr);
|
关于数组的方法对比就这么多,希望能帮助大家了解并且使用JS里的数组。
相关阅读:
关于JS数组Array方法汇总
js数组去重方法汇总
解析angularjs数组的传参方式
以上就是JavaScript关于数组的方法有哪些不同之处?的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
js中prototype是什么
javascript条件控制语句有哪些
javascript和css的区别是什么
javascript函数一定要定义吗
javascript中array什么意思
javascript怎么读取map的值
javascript怎么将字母转为小写
javascript 中判断变量是否为数字
原生js实现年份轮播选择效果
vue.js前端框架有哪些特点
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » JavaScript关于数组的方法有哪些不同之处?