资讯专栏INFORMATION COLUMN

Javascript数组常用方法

verano / 2022人阅读

摘要:数组常用方法介绍删除数组最后一位元素。开始下标删除个数,插入元素可以多个注意当数组执行上面的这些方法时,都会修改原数组。输出从数组中找出所有符合指定条件的元素。内容返回将数组合成一个值。合并数组或合并数组的值。

JavaScript 数组常用方法介绍

array.pop – 删除数组最后一位元素。

var arr = [1, 2, 3];
arr.pop();// 返回 3
arr;// [1,2]

array.shift – 删除数组第一位元素。

var arr = [1, 2, 3];
arr.shift();// 返回 1
arr;// [2,3

]
array.push – 往数组的末尾新增一个或多个元素。

var arr = [];arr.push(1);// 返回数组长度 1
arr;// [1]
arr.push(2,3);
arr;// [1,2,3]

array.unshift – 往数组的开头新增一个或多个元素。

var arr = [1, 2, 3];
arr.unshift(0);
arr.unshift(-1, -2);
arr;// [-1, -2, 0, 1, 2]

array.reverse – 把数组元素顺序逆转。

var arr = [1, 2, 3];
arr.reverse();// [3, 2, 1]
arr;// [3, 2, 1]

array.sort – 数组排序。

var arr = [1 ,-1, 2];
arr.sort();// [-1, 1, 2]
arr;// [-1, 1, 2]
arr = [{age: 10,},{age: 1}, {age: 12}];// 按照 age 从小到大排序
arr.sort(function(a, b){return a.age - b.age > 0 ? 1 : -1;});

array.splice – 给数组添加或者删除元素。

// splice(开始下标, 删除个数,插入元素(可以多个))var arr = [1, 2, 3, 4];

arr.splice(1, 2);// [2,3]
arr;// [1,4]
arr = [1, 2, 3, 4];
arr.splice(1, 2, "a", "b", "c");// [2,3]
arr;// [1, "a", "b", "c", 4]

注意:当数组执行上面的这些方法时,都会修改原数组。

迭代方法
array.forEach – 遍历数组。

["a" ,"b" ,"c"].forEach(function(each, index){console.log(each,index);});
// 输出 "a" 0  "b" 1 "c" 2

array.filter – 从数组中找出所有符合指定条件的元素。

// 找出所有正数
var res = [3, 4, -1].filter(function(each){return each > 0;});
res; //[3,4]
array.every – 数组中是否每个元素都满足指定的条件。

// 是否都为正数

var isAllPositive = [3, 4, -1].every(function(each){return each > 0;});
isAllPositive; // false;
isAllPositive = [3, 4].every(function(each){return each > 0;});
isAllPositive; // true;

array.some – 数组中是否有元素满足指定的条件。

// 是否有正数

var isSomePositive = [3, 4, -1].some(function(each){return each > 0;});
isSomePositive; // true;
isSomePositive = [-3, -4].every(function(each){return each > 0;});
isSomePositive; // false;

array.map – 将数组映射成另一个数组。

// 内容 * 2[1, 2, 3].map(function(each){return each * 2;});
// 返回 [2, 4, 6]

array.reduce – 将数组合成一个值。

// 数组内容求和。0 为初始值[1, 2, 3].reduce(function(prev, each){return prev + each;}, 0);// 返回 6
当要使用迭代方法时,forEach 应该是最后被考虑的。主要原因是:forEach 与其他迭代方法比,语义性是最差的。更详细的说明见 avoid forEach。

网址:http://aeflash.com/2014-11/avoid-foreach.html

注意 IE8 及以下版本不支持 every, some, map, reduce。如果想在 IE 8 及以下版本用这几个方法,可以用es5-shim 或 lodash。

其他方法
Array.isArray – 是否是数组。IE9+ 支持该方法。

Array.isArray(3); // false
Array.isArray({}); // false
Array.isArray([]); // true

array.concat – 合并数组或合并数组的值。

[1,2,3].concat(4,5); // 输出 [1, 2, 3, 4, 5]
array.join – 合并数组所有元素拼接成字符串。

[1,2,3].join(); // 输出 "1,2,3"
[1,2,3].join("@"); // 输出 "1@2@3"

array.slice – 选择数组中的一部分元素。

// slice(开始下标, 结束下标(可选,默认为数组长度))

["a", "b", "c", "d"].slice(1);// ["b", "c", "d"]
["a", "b", "c", "d"].slice(1, 2);// ["b"]
["a", "b", "c", "d"].slice(1, 3);// ["b", "c"]

array.indexOf – 查找数组中指定元素的下标。

["a", "b", "c", "d"].indexOf("c"); // 2
["a", "b", "c", "d"].indexOf("g"); // -1

array.lastIndexOf – 查找数组中指定元素的下标。查找方向为从后往前。

["c", "d", "c"].lastIndexOf("c"); // 2
["a", "b", "c", "d"].lastIndexOf("g"); // -1

参考
D3.js 的数组 Wiki
https://github.com/mbostock/d3/wiki/%E6%95%B0%E7%BB%84

avoid forEach
http://aeflash.com/2014-11/avoid-foreach.html

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78504.html

相关文章

  • JavaScript 常用方法

    摘要:常用方法作用向从数组中添加删除项目,然后返回被删除的项目。注释该方法并不会修改数组,而是返回一个子数组。语法表示数组开始选定的位置表示数组结束选定的位置作用从已有的数组末尾增加一个元素。 JavaScript 常用方法 1. splice() 作用:向/从数组中添加/删除项目,然后返回被删除的项目。 注释:该方法会改变原始数组。 语法:arrayObject.splice(...

    ranwu 评论0 收藏0
  • JavaScript Array对象常用方法

    摘要:省略则对数组元素进行排序返回该数组从数组中添加删除项目返回被删除的元素插入替换删除 Array对象常用方法 不改变原数组 concat() join() slice() toString() 改变原数组 pop() push() reverse() shift() unshift() sort() splice() 不改变原数组 array.concat(array) 连接两个...

    wangdai 评论0 收藏0
  • javascript数组常用方法

    摘要:数组常用方法数组作为中常用的数据类型使我们用的最多的在其他地方可以搜索出很多对其方法的总结本文列举了笔者认为的个人认为最为重要的一系列方法字符串数组转换数组字符串转换转换时可以添加符号还有一个是查找元素返回第一个与参数相同的元素的索引。 js数组常用方法 数组作为js中常用的数据类型使我们用的最多的, 在其他地方可以搜索出很多对其方法的总结, 本文列举了笔者认为的(个人认为^_^)最为...

    GraphQuery 评论0 收藏0
  • JavaScript数组——常用数组方法汇总

    摘要:本文记录关于数组的一些常用方法,搜集总结。对于数组中的每个元素,都会调用函数一次。返回值是一个新数组,其中的每个元素均为关联的原始数组元素的回调函数返回值。 本文记录关于js数组的一些常用方法,搜集总结。 主要思路: 1. 方法功能是什么 2. 传递的参数是什么 3. 返回值是什么 4. 原来的数组是否改变 第一组:关于数组的增加、删除和修改 1.push 向数组末尾增加新的...

    HollisChuang 评论0 收藏0
  • [ ES6 ] 快速掌握常用 ES6 (二)

    摘要:本系列文章适合快速掌握入门语法,想深入学习的小伙伴可以看看阮一峰老师的入门本篇文章是对之前文章的一个补充,可以使代码更简洁函数参数默认值在传统语法中如果想设置函数默认值一般我们采用判断的形式在新的语法中我们可以在参数声明的同时赋予默认值参数 本系列文章适合快速掌握 ES6 入门语法,想深入学习 ES6 的小伙伴可以看看阮一峰老师的《ECMAScript 6 入门》 本篇文章是对之前文章...

    hidogs 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<