未加星标

JavaScript 数组方法对比

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

javascript 提供了多种新增,移除,替换数组元素的方法,但是有些会影响原来的数组;有些则不会,它是新建了一个数组。

注意:区分以下两个方法的不同点:

array.splice() 影响原来的数组 array.slice() 不影响原来的数组 I. 新增:影响原数组

使用 array.push() 和 array.ushift() 新增元素会影响原来的数组。

let mutatingAdd = ['a', 'b', 'c', 'd', 'e']; mutatingAdd.push('f'); // ['a', 'b', 'c', 'd', 'e', 'f'] mutatingAdd.unshift('z'); // ['z', 'b', 'c', 'd', 'e' 'f'] II. 新增:不影响原数组

两种方式新增元素不会影响原数组,第一种是 array.concat() 。

const arr1 = ['a', 'b', 'c', 'd', 'e']; const arr2 = arr1.concat('f'); // ['a', 'b', 'c', 'd', 'e', 'f'] (注:原文有误,我做了修改 “.” ---> “,”) console.log(arr1); // ['a', 'b', 'c', 'd', 'e']

第二种方法是使用 JavaScript 的展开(spread)操作符,展开操作符是三个点(…)

const arr1 = ['a', 'b', 'c', 'd', 'e']; const arr2 = [...arr1, 'f']; // ['a', 'b', 'c', 'd', 'e', 'f'] const arr3 = ['z', ...arr1]; // ['z', 'a', 'b', 'c', 'd', 'e']

展开操作符会复制原来的数组,从原数组取出所有元素,然后存入新的环境。

III. 移除:影响原数组

使用 array.pop() 和 array.shift() 移除数组元素时,会影响原来的数组。

let mutatingRemove = ['a', 'b', 'c', 'd', 'e']; mutatingRemove.pop(); // ['a', 'b', 'c', 'd'] mutatingRemove.shift(); // ['b', 'c', 'd']

array.pop() 和 array.shift() 返回被移除的元素,你可以通过一个变量获取被移除的元素。

let mutatingRemove = ['a', 'b', 'c', 'd', 'e']; const returnedValue1 = mutatingRemove.pop(); console.log(mutatingRemove); // ['a', 'b', 'c', 'd'] console.log(returnedValue1); // 'e' const returnedValue2 = mutatingRemove.shift(); console.log(mutatingRemove); // ['b', 'c', 'd'] console.log(returnedValue2); // 'a'

array.splice() 也可以删除数组的元素。

let mutatingRemove = ['a', 'b', 'c', 'd', 'e']; mutatingRemove.splice(0, 2); // ['c', 'd', 'e']

像 array.pop() 和 array.shift() 一样, array.splice() 同样返回移除的元素。

let mutatingRemove = ['a', 'b', 'c', 'd', 'e']; let returnedItems = mutatingRemove.splice(0, 2); console.log(mutatingRemove); // ['c', 'd', 'e'] console.log(returnedItems) // ['a', 'b'] IV. 移除:不影响原数组

JavaScript 的 array.filter() 方法基于原数组创建一个新数组,新数组仅包含匹配特定条件的元素。

const arr1 = ['a', 'b', 'c', 'd', 'e']; const arr2 = arr1.filter(a=> a !== 'e'); // ['a', 'b', 'c', 'd'](注:原文有误,我做了修改) // 或者 const arr2 = arr1.filter(a=> { return a !== 'e'; }); // ['a', 'b', 'c', 'd'](注:原文有误,我做了修改)

以上代码的条件是“不等于 ‘e’ ”,因此新数组( arr2 )里面没有包含 ‘e’。

箭头函数的独特性:

单行箭头函数,’return’ 关键字是默认自带的,不需要手动书写。

可是, 多行箭头函数 就需要明确地返回一个值。

另一种不影响原数组的方式是 array.slice() (不要与 array.splice() 混淆)。

const arr1 = ['a', 'b', 'c', 'd', 'e']; const arr2 = arr1.slice(1, 5) // ['b', 'c', 'd', 'e'] const arr3 = arr1.slice(2) // ['c', 'd', 'e'] V. 替换:影响原数组

如果知道替换哪一个元素,可以使用 array.splice() 。

let mutatingReplace = ['a', 'b', 'c', 'd', 'e']; mutatingReplace.splice(2, 1, 30); // ['a', 'b', 30, 'd', 'e'] // 或者 mutatingReplace.splice(2, 1, 30, 31); // ['a', 'b', 30, 31, 'd', 'e'] VI. 替换:不影响原数组

可以使用 array.map() 创建一个新数组,并且可以检查每一个元素,根据特定的条件替换它们。

const arr1 = ['a', 'b', 'c', 'd', 'e'] const arr2 = arr1.map(item=> { if(item === 'c') { item = 'CAT'; } return item; }); // ['a', 'b', 'CAT', 'd', 'e']

使用 array.map() 转换数据

array.map() 是个强力方法,可以用于转换数据,而不污染原先的数据源。

const origArr = ['a', 'b', 'c', 'd', 'e']; const transformedArr = origArr.map(n=> n + 'Hi!'); // ['aHi!', 'bHi!', 'cHi!', 'dHi!', 'eHi!'] console.log(origArr); // ['a', 'b', 'c', 'd', 'e']; // 原数组毫发无损

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaScriptJava数据删除变量
分页:12
转载请注明
本文标题:JavaScript 数组方法对比
本站链接:http://www.codesec.net/view/529762.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(74)