0

0

JavaScript数组常用操作技巧

黄舟

黄舟

发布时间:2016-12-12 11:45:13

|

1320人浏览过

|

来源于php中文网

原创

前言

相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法。这里无非是对原生js的数组操作多了一些包装。
这里主要汇总一下JavaScript数组操作的常用API。相信对大家解决程序问题很有帮助。

一、性质
JavaScript中的数组是一种特殊的对象,用来表示偏移量的索引是该对象的属性,索引可能是整数。然而,这些数字索引在内部被转换为字符串类型,这是因为JavaScript对象中的属性名必须是字符串。

二、操作

1 判断数组类型

立即学习Java免费学习笔记(深入)”;

var array0 = [];    // 字面量
var array1 = new Array();   // 构造器
// 注意:在IE6/7/8下是不支持Array.isArray方法的
alert(Array.isArray(array0));
// 考虑兼容性,可使用
alert(array1 instanceof Array);
// 或者
alert(Object.prototype.toString.call(array1) === '[object Array]');

2 数组与字符串

非常简单:由数组转换为字符串,使用join;由字符串转换为数组,使用split。

// join - 由数组转换为字符串,使用join
console.log(['Hello', 'World'].join(','));    // Hello,World
// split - 由字符串转换为数组,使用split
console.log('Hello World'.split(' '));    // ["Hello", "World"]

3 查找元素

相信大家都常用字符串类型indexOf,却很少知道数组的indexOf同样可以用于查找元素。

// indexOf - 查找元素
console.log(['abc', 'bcd', 'cde'].indexOf('bcd'));  // 1
// 
var objInArray = [
    {
        name: 'king',
        pass: '123'
    },
    {
        name: 'king1',
        pass: '234'
    }
];
console.log(objInArray.indexOf({
    name: 'king',
    pass: '123'
}));    // -1
var elementOfArray = objInArray[0];
console.log(objInArray.indexOf(elementOfArray));    // 0

从以上可以看出,对于数组包含对象的这种数组,indexOf方法并非是经过深度比较来得到对应的查找结果,仅仅是比较对应元素的引用。

4 数组连接

使用concat,要注意,使用concat之后会生成一个新的数组。

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var array3 = array1.concat(array2); // 实现数组连接之后,会创建出新的数组
console.log(array3);

5 类列表操作

用于添加元素,可分别使用push和unshift,移除元素可分别使用pop和shift。

// push/pop/shift/unshift
var array = [2, 3, 4, 5];
// 添加到数组尾部
array.push(6);
console.log(array); // [2, 3, 4, 5, 6]
// 添加到数组头部
array.unshift(1);
console.log(array); // [1, 2, 3, 4, 5, 6]
// 移除最后一个元素
var elementOfPop = array.pop();
console.log(elementOfPop);   // 6
console.log(array); // [1, 2, 3, 4, 5]
// 移除第一个元素
var elementOfShift = array.shift();
console.log(elementOfShift);   // 1
console.log(array); // [2, 3, 4, 5]

6 splice方法

易通cmseasy免费的企业建站程序2.0 UTF-8 build 201000510 中文版
易通cmseasy免费的企业建站程序2.0 UTF-8 build 201000510 中文版

易通(企业网站管理系统)是一款小巧,高效,人性化的企业建站程序.易通企业网站程序是国内首款免费提供模板的企业网站系统.§ 简约的界面及小巧的体积:后台菜单完全可以修改成自己最需要最高效的形式;大部分操作都集中在下拉列表框中,以节省更多版面来显示更有价值的数据;数据的显示以Javascript数组类型来输出,减少数据的传输量,加快传输速度。 § 灵活的模板标签及模

下载

主要两个用途:
① 从数组中间位置添加和删除元素
② 从原有数组中,获取一个新数组

当然,两个用途是一气合成的,有些场景注重用途一,有些则注重用途二。

从数组中间位置添加和删除元素,splice方法为数组添加元素,需提供如下参数
① 起始索引(也就是你希望开始添加元素的地方)
② 需要删除的元素的个数或者是提取的元素的个数(添加元素时该参数设置为0)
③ 想要添加进数组的元素

var nums = [1, 2, 3, 7, 8, 9];
nums.splice(3, 0, 4, 5, 6);
console.log(nums);  // [1, 2, 3, 4, 5, 6, 7, 8, 9] 
// 紧接着做删除操作或者提取新的数组
var newnums = nums.splice(3, 4);
console.log(nums);  // [1, 2, 3, 8, 9]
console.log(newnums);   // [4, 5, 6, 7]

7 排序

主要介绍reverse和sort两个方法。数组反转使用reverse,sort方法不仅可以用于简单排序,也可以用于复杂排序。

// 反转数组
var array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array); // [5, 4, 3, 2, 1]
我们先对字符串元素的数组进行排序
var arrayOfNames = ["David", "Mike", "Cynthia", "Clayton", "Bryan", "Raymond"];
arrayOfNames.sort();
console.log(arrayOfNames);  // ["Bryan", "Clayton", "Cynthia", "David", "Mike", "Raymond"]

我们对数字元素的数组进行排序

// 如果数组元素时数字类型,sort()方法的排序结果就不能让人满意了
var nums = [3, 1, 2, 100, 4, 200];
nums.sort();
console.log(nums);  // [1, 100, 2, 200, 3, 4]

sort方法是按照字典顺序对元素进行排序的,因此它假定元素都是字符串类型,因此,即使元素是数字类型,也被认为是字符串类型。这时,可以在调用方法时传入一个大小比较函数,排序时,sort()方法将会根据该函数比较数组中两个元素的大小,从而决定整个数组的顺序。

var compare = function(num1, num2) {
    return num1 > num2;
};
nums.sort(compare);
console.log(nums);  // [1, 2, 3, 4, 100, 200]
var objInArray = [
    {
        name: 'king',
        pass: '123',
        index: 2
    },
    {
        name: 'king1',
        pass: '234',
        index: 1
    }
];
// 对数组中的对象元素,根据index进行升序
var compare = function(o1, o2) {
    return o1.index > o2.index;
};
objInArray.sort(compare);
console.log(objInArray[0].index < objInArray[1].index); // true

8 迭代器方法

主要包含forEach和every、some和map、filter
forEach相信大家都会,主要介绍一下其他四种方法。
every方法接受一个返回值为布尔类型的函数,对数组中的每个元素使用该函数。如果对于所有的元素,该函数均返回true,则该方法返回true。

var nums = [2, 4, 6, 8];
// 不生成新数组的迭代器方法
var isEven = function(num) {
    return num % 2 === 0;
};
// 如果都是偶数,才返回true
console.log(nums.every(isEven)); // true
some方法也接受一个返回值为布尔类型的函数,只要有一个元素使得该函数返回true,该方法就返回true。
var isEven = function(num) {
    return num % 2 === 0;
};
var nums1 = [1, 2, 3, 4];
console.log(nums1.some(isEven)); // true

map和filter这两个方法都可以产生新数组,map返回的新数组是对原有元素应用某个函数得到的结果。如:

var up = function(grade) {
    return grade += 5;
}
var grades = [72, 65, 81, 92, 85];
var newGrades = grades.ma

filter方法和every方法很类似,传入一个返回值为布尔类型的函数。和every()方法不同的是,当对数组中的所有元素应用该函数,结果均为true时,该方法并不返回true,而是返回一个新数组,该数组包含应用该函数后结果为true的元素。

var isEven = function(num) {
    return num % 2 === 0;
};
var isOdd = function(num) {
    return num % 2 !== 0;
};
var nums = [];
for (var i = 0; i < 20; i++) {
    nums[i] = i + 1;
}
var evens = nums.filter(isEven);
console.log(evens); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20] 
var odds = nums.filter(isOdd);
console.log(odds);  // [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]

三、总结

以上还存在某些方法在低级浏览器不支持的问题,还需要再采用其他方法进行兼容实现。

这些都是常见的可能大家不太容易想到的方法。大家不妨多留意一下。

希望本文所述对大家的javascript程序设计有所帮助。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
ip地址修改教程大全
ip地址修改教程大全

本专题整合了ip地址修改教程大全,阅读下面的文章自行寻找合适的解决教程。

86

2025.12.26

压缩文件加密教程汇总
压缩文件加密教程汇总

本专题整合了压缩文件加密教程,阅读专题下面的文章了解更多详细教程。

50

2025.12.26

wifi无ip分配
wifi无ip分配

本专题整合了wifi无ip分配相关教程,阅读专题下面的文章了解更多详细教程。

100

2025.12.26

漫蛙漫画入口网址
漫蛙漫画入口网址

本专题整合了漫蛙入口网址大全,阅读下面的文章领取更多入口。

293

2025.12.26

b站看视频入口合集
b站看视频入口合集

本专题整合了b站哔哩哔哩相关入口合集,阅读下面的文章查看更多入口。

589

2025.12.26

俄罗斯搜索引擎yandex入口汇总
俄罗斯搜索引擎yandex入口汇总

本专题整合了俄罗斯搜索引擎yandex相关入口合集,阅读下面的文章查看更多入口。

725

2025.12.26

虚拟号码教程汇总
虚拟号码教程汇总

本专题整合了虚拟号码接收验证码相关教程,阅读下面的文章了解更多详细操作。

63

2025.12.25

错误代码dns_probe_possible
错误代码dns_probe_possible

本专题整合了电脑无法打开网页显示错误代码dns_probe_possible解决方法,阅读专题下面的文章了解更多处理方案。

30

2025.12.25

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

94

2025.12.25

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Django 教程
Django 教程

共28课时 | 2.5万人学习

【web前端】Node.js快速入门
【web前端】Node.js快速入门

共16课时 | 1.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号