专栏首页九彩拼盘的叨叨叨JavaScript 数组常用方法介绍

JavaScript 数组常用方法介绍

修改数组

  • array.pop - 删除数组最后一位元素。
var arr = [1, 2, 3];
arr.pop();// 返回 3
arr;// [1,2]
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]
var arr = [1, 2, 3];
arr.reverse();// [3, 2, 1]
arr;// [3, 2, 1]
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;
});
// 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]

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

迭代方法

['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]
// 数组内容求和。0 为初始值
[1, 2, 3].reduce(function(prev, each){
    return prev + each;
}, 0);
// 返回 6

当要使用迭代方法时,forEach 应该是最后被考虑的。主要原因是:forEach 与其他迭代方法比,语义性是最差的。更详细的说明见 avoid forEach

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

其他方法

Array.isArray(3); // false
Array.isArray({}); // false
Array.isArray([]); // true
[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'
// 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"]
['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

参考


本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用 CSS 3 来做个平安果吧~

    圣诞将至,我们就用 CSS 3 来做个平安果吧~ 愿所有程序猿和媛们都平安夜不加班~

    用户2930719
  • BEM 简介

    BEM 是一种前端项目开发的方法学,由 Yandex 公司提出。BEM 的名称来源于该方法学的三个组成部分的英文首字母,分别是块(Block)、元素(Eleme...

    用户2930719
  • 学习前端 第6周 第2天

    用户2930719
  • js数组去重五种方法

    今天来聊一聊JS数组去重的一些方法,包括一些网上看到的和自己总结的,总共5种方法(ES5)。

    半指温柔乐
  • JavaScript基本语法(三)

    一、数组的概念: 所谓数组,就是将多个元素(通常是同一类型)按一定顺序排列放到一个集合中,那么这个集合我们就称之为数组。

    靠谱先生
  • 动态规划(二):0-1背包

    代码中存在两层循环,以二维数组的形式记录中间数据,分别记录不同物品个数在各个空间大小下的最大价值。循环内部存在两种判断,分别用于判断空间大小

    zhipingChen
  • 2 :基本语法

    六月的雨
  • JavaScript:Array

    1. 原数组不变,返回新数组 concat(value/array) 连接两个或更多的数组,并返回结果。

    奋飛
  • PHP常用函数 常用数组函数

    数组是PHP中一个常见的数据类型,其中PHP封装了许多有关数组处理的PHP函数,过去的几个月由于使用框架进行逻辑操作多一些,对数据的操作特别是数组的操作少之又少...

    Debug客栈
  • JavaScript数组基础及实例

    js数组 和var i=1;这样的简单存储一样是js中的一种数据结构,是专门用来存储多个数据的一种数据结构。 摘:数组是一组数据的集合,其表现形式就是内存中的一...

    二十三年蝉

扫码关注云+社区

领取腾讯云代金券