JavaScript数组常用操作技巧汇总


Posted in Javascript onNovember 17, 2014

本文实例汇总了JavaScript数组的常用操作技巧。分享给大家供大家参考。具体如下:

前言

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

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

二、操作

1 判断数组类型

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方法

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

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

从数组中间位置添加和删除元素,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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
vue视频播放暂停代码
Nov 08 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
Node.js API详解之 zlib模块用法分析
May 19 Javascript
jquery 实现返回顶部功能
Nov 17 #Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 #Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 #Javascript
javascript将url中的参数加密解密代码
Nov 17 #Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 #Javascript
PHP PDO操作总结
Nov 17 #Javascript
JavaScript函数详解
Nov 17 #Javascript
You might like
PHP 文件扩展名 获取函数
2009/06/03 PHP
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
PHP实现事件机制的方法
2015/07/10 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
PHP微商城开源代码实例
2019/03/27 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
php5与php7的区别点总结
2019/10/11 PHP
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
python查看列的唯一值方法
2018/07/17 Python
详解Django配置JWT认证方式
2020/05/09 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
旷课检讨书1000字
2014/02/14 职场文书
办公室主任职责范本
2014/03/07 职场文书
小学见习报告
2014/10/31 职场文书
元旦晚会开场白
2015/05/29 职场文书
交通事故协议书范本
2016/03/19 职场文书