JavaScript中数组常见操作技巧

效果图如下所示:

Tip: 右键在新标签中打开查看清晰大图

下面介绍JavaScript中的数组对象遍历、读写、排序等操作以及与数组相关的字符串处理操作

创建数组

一般使用数组字面量[]创建新数组,除非想要创建指定长度的数组

// good
var arr = [];
var arr = ['red', 'green', 'blue'];
var arr = [
 ['北京', 90],
 ['上海', 50],
 ['广州', 50]
];
// bad
var arr = new Object();

使用push()动态创建二维数组实例<ul id = "source"><li>北京空气质量:<b>90</b></li></ul>

var sourceList = document.querySelector('#source');
// 取得<ul>标签下所有<li>元素
var lis = sourceList.querySelectorAll('li');
// 取得<ul>标签下所有<b>元素
var bs = sourceList.querySelectorAll('li b');
var data = [];
for (var i = 0, len = lis.length; i < len; i++) {
 // 法一:先对data添加一维空数组,使其成为二维数组后继续赋值
 data.push([]);
 // 分割文本节点,提取城市名字
 var newNod = lis[i].firstChild.splitText(2);
 data[i][0] = lis[i].firstChild.nodeValue;
 // 使用+转换数字
 data[i][1] = +bs[i].innerHTML;
 // 法二:先对一维数组赋值,再添加到data数组中,使其成为二维数组
 var li = lis[i];
 var city = li.innerHTML.split("空气质量:")[0];
 var num = +li.innerText.split("空气质量:")[1];
 data.push([city,num]);
}

String.prototype.split() 方法用于把一个字符串分割成字符串数组。 split() 方法不改变原始字符串。

li.innerHTML.split("空气质量:")-----这个拆成的数组为["北京","90"]的数组,再取数组

的第一项,即城市值。

Text.splitText()方法会将一个文本节点分成两个文本节点,原来的文本节点将包含从开始到指定位置之前的内容,新文本节点将包含剩下的文本。这个方法会返回一个新文本节点

querySelector()方法接收一个CSS选择符,返回与改模式匹配的第一个元素,如果没有找到,则返回null

querySelectorAll()方法接受一个CSS选择符,返回一个NodeList对象,如果没有找到,则为空

读取和设置

存取数组元素

一维数组

arr[下标索引]

多维数组

arr[外层数组下标][内层元素下标]

length属性

添加新项

arr[array.length] = []

清空数组或清除

arr.length = 0 || (少于项数的数值)

判断数组非空

if(arr.length) {}

数组遍历

遍历数组不使用for in,因为数组对象可能存在数字以外的属性,这种情况下for in不会得到正确结果

推荐使用forEach()方法

使用传统的for循环

for(var i = 0, len = arr.length; i < len; i++){}
for...in
for (var index in arrayObj){
 var obj = arrayObj[index];
}
forEach()
arr.forEach(function callback(currentValue, index, array) {
 //your iterator
}[, thisArg]);

应用

data.forEach(function (item, index) {
 li = document.createElement('li');
 fragment.appendChild(li);
 li.innerHTML = '第' + digitToZhdigit(index + 1) + '名:' + item[0] + '空气质量:' + '<b>' + item[1] + '</b>';
});
const numbers = [1, 2, 3, 4];
let sum = 0;
numbers.forEach(function(numer) {
 sum += number;
});
console.log(sum); 

引申1:在ES6中,可以使用let或const声明所有局部变量,不使用var关键字。默认使用const,除非需要重新分配变量。const用于声明常量,let是新的声明变量方式,具有块级作用域即由花括号封闭起来,这样就不用考虑各种嵌套下变量的访问问题了。

var foo = true;
if(foo) {
 let bar = foo*2;
 bar =something(bar);
 console.log(bar);
}
console.log(bar); // RefenceError

详情见https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md

引申2:可以使用箭头函数=>写出更简短的函数

MDN Arrow functions

numbers.forEach(numer => {
});

数组排序

sort()方法

默认情况下通过调用数组项toString()方法转型,然后比较字符串顺序(ASCII码)从小到大排列数组
为了避免类似数值字符串比较时,"10"会排在"5"的前面,sort()接受一个比较函数compare()参数,按数值大小比较

function compare(a, b) {
 if (a < b) {
 return -1;
 } else if (a > b) {
 return 1;
 } else {
 return 0;
 }
}

该函数返回值小于0,则 a 排在 b前面;如果返回值大于0,则 b 排在 a 前面;如果返回值等于0,则 a 和 b 的相对位置不变。最后返回的是升序数组,我们也可以通过交换比较函数返回的值产生降序排序的结果。
另外如果比较的是数,则可以简化compare()函数如下(其中a-b升序,b-a降序)

function compare(a, b) {
 return a - b;
}

运用实例

可以特定对像某个属性进行排序

var objectList = [];
function Persion(name,age){
 this.name=name;
 this.age=age;
}
objectList.push(new Persion('jack',20));
objectList.push(new Persion('tony',25));
objectList.push(new Persion('stone',26));
objectList.push(new Persion('mandy',23));
//按年龄从小到大排序
objectList.sort(function(a,b){
 return a.age-b.age
});

可以对多维数组某一列进行排序

var aqiData = [
 ["北京", 90],
 ["上海", 50],
 ["福州", 10],
 ["广州", 50],
 ["成都", 90],
 ["西安", 100]
];
aqiData.sort(function (a, b) {
 return a[1] - b[1];
});
console.table(aqiData); // 以表格输出到控制台,用于调试直观了然

reverse()方法

返回一个逆向排序的数组

var values = [1, 2, 3, 4, 5];
values.reverse();
alert(values); // 5,4,3,2,1

其他数组操作方法功能分类

数组元素的添加

arrayObj. push([item1 [item2 [. . . [itemN ]]]]); // 将一个或多个新元素添加到数组结尾,并返回数组新长度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]); // 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]); // 将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。第二个参数不为0(要删除的项数)时则可以实现替换的效果。
arr[array.length] = [] // 使用length属性在数组末尾添加新项

数组元素的删除

arrayObj.pop(); // 移除末端一个元素并返回该元素值
arrayObj.shift(); // 移除前端一个元素并返回该元素值,数组中元素自动前移
arrayObj.splice(deletePos,deleteCount); // 删除从指定位置deletePos开始的指定数量deleteCount的元素,返回所移除的元素组成的新数组

数组元素的截取和合并

arrayObj.slice(startPos, [endPos]); // 以数组的形式返回数组的一部分,注意不包括 endPos 对应的元素,如果省略 endPos 将复制 startPos 之后的所有元素
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); // 将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组

数组的拷贝

arrayObj.slice(0); // 返回数组的拷贝数组,注意是一个新的数组,不是指向
arrayObj.concat(); // 返回数组的拷贝数组,注意是一个新的数组,不是指向

数组指定元素的索引(可以配合splice()使用)

arr.indexOf(searchElement[, fromIndex = 0]) // 返回首个被找到的元素(使用全等比较符===),在数组中的索引位置; 若没有找到则返回 -1。fromIndex决定开始查找的位置,可以省略。
lastIndexOf() // 与indexOf()一样,只不过是从末端开始寻找

数组的字符串化

arrayObj.join(separator); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 separator 隔开。

可以看做split()的逆向操作

数组值求和

array.reduce(function(accumulator, currentValue, currentIndex, array), initialValue)// 累加器和数组中的每个元素 (从左到右)应用一个函数,将其减少为单个值,返回函数累计处理的结果
var total = [0, 1, 2, 3].reduce(function(sum, value) {
 return sum + value;
}, 0);
// total is 6

总结

以上所述是小编给大家介绍的JavaScript中数组常见操作技巧,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-08-29

js数组操作学习总结

shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefinedvar a = [1,2,3,4,5];var b = a.shift(); 结果 a:[2,3,4,5]     b:1 unshift:将参数添加到原数组开头,并返回数组的长度var a = [1,2,3,4,5];var b = a.unshift(-2,-1); 结果 a:[-2,-1,1,2,3,4,5]      b:7 注:在IE6.0下测试返回值总为undefined,FF2.0下测试返回值为7

Angular.js中数组操作的方法教程

前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.最近在学习Angular.js,将自己学习的一些经验技巧分享给大家,下面本文将给大家介绍关于Angular.js中数组操作的相关资料,话不多说了,来一起看看详细的介绍. 1:ng-click,ng-model,ng-bind,ng-class,ng-hide,ng-app 2:placeholder, 3:{}中加入代码":true|false",使用逗号隔开,可以

javascript数组操作(创建、元素删除、数组的拷贝)

1.数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以

js数组操作常用方法

在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像JSON数据是以数组的形式出现的,查阅了下相关JS中数组的操作一试果然很爽. 记录下来. 1.数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不

js 数组操作之pop,push,unshift,splice,shift

复制代码 代码如下: <script>    Array.prototype.pop=function(){         if(this.length!=0)this.length--;         return this;         } pop 方法   移除数组中的最后一个元素并返回该元素. arrayObj.pop( ) 必选的 arrayObj 引用是一个 Array 对象. 说明   如果该数组为空,那么将返回 undefined. 复制代码 代码如下: var a=[

JavaScript jQuery 中定义数组与操作及jquery数组操作

首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象 Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),所以数组可以通过相互嵌套实现类似多维数组的功能 1.1 定义数组 声明有10个元素的数组 复制代码 代码如下: var a = new Array(10); 此时为a已经开辟了内存空间,包含10个元素,用数组名称加 [下标] 来调用,例如

JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)

POP 删除最后一项 删除最后一项,并返回删除元素的值:如果数组为空则返回undefine var a = [1,2,3,4,5]; a.pop();//a:[1, 2, 3, 4] a.pop();//a:[1, 2, 3] a.pop();//a:[1, 2] shift 删除第一项 删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefine var a = [1,2,3,4,5]; a.shift(); //a:[2,3,4,5] a.shift(); //a:[3, 4,

Vue.js实现的表格增加删除demo示例

本文实例讲述了Vue.js实现的表格增加删除demo.分享给大家供大家参考,具体如下: Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 使用本站在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun,得到如下所示的运行效果: 具体代码如下: <!DOCTYP

详解JavaScript对数组操作(添加/删除/截取/排序/倒序)

js对数组对象的操作以及方法的使用 如何声明创建一个数组对象: var arr = new Array(); 或者 var arr = []; 如何移除所有数组中数据? arrayJson.dataList.splice(0,arr.length); 如何指定位置对数组对象的添加,如何将指定元素添加到数组中间位置? /** * 假设数组的长度值为偶数,如何将指定元素添加到数组中间位置. */ function array_middle_insert() { var arr = ['1','2',

Vue.js实现表格动态增加删除的方法(附源码下载)

Vue.js Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 先来看看实现的效果: 下面的例子会用到bootstrap.min.css以及vue.js,都可以从网上下载(文末有完整源码下载提供). 实例 源码 <!DOCTYPE html> <html lang="en"> <head&g

php 数组操作(增加,删除,查询,排序)等函数说明第1/2页

数据增加,删除,查询,排序详细说明 对数组的添加(首尾数据添加(不限定条数)以及中间任意位置添加数据操作) . 2-对数组的删除(首尾的数据删除(不限定条数)以及中间任意位置的数据删除操作,条件:对数组中间位置删除的,后面的值往前挪,接上以前的位置) . 3-对数据的排序操作(排序操作,要的是效率) . 4-对数组的查询(对数组中的某一数据进行查询,如果满足,则生成新的数组,这个新的数组就是满足查询条件的,条件:查询,并不是查询某一个值,还有查询某一个值满足某个条件,举个例子:查询数组中某个值大

PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】

本文实例分析了PHP数组操作.分享给大家供大家参考,具体如下: PHP的数组是很重要的一部分.操作示例如下: <?php function br() { echo '<br />===============================================<br />'; } $arr1 = array(); $arr1[] = 'x'; $arr1[] = 'a'; $arr1[] = 'e'; $arr1[] = 'c'; $arr1[] = 'h'; /

NumPy实现ndarray多维数组操作

简介 NumPy一个非常重要的作用就是可以进行多维数组的操作,多维数组对象也叫做ndarray.我们可以在ndarray的基础上进行一系列复杂的数学运算. 本文将会介绍一些基本常见的ndarray操作,大家可以在数据分析中使用. 创建ndarray 创建ndarray有很多种方法,我们可以使用np.random来随机生成数据: import numpy as np # Generate some random data data = np.random.randn(2, 3) data arra

python中ndarray数组的索引和切片的使用

索引和切片相当于是对数组中内容的读(read)或者查询(inquiry).是我们获取有用信息(demanded infomation)的重要方法. 对于索引 对于1维数组:在数组名的后面用中括号[]包括索引编号,括号中填写所查询数组的编码.比如:data[1] 对于n维数组:有两种方式 第一种:用列表表示所查询数的坐标值,如data_2dim[1,0] 第二种:把多维数组看成一位数组套娃,依次取值,如data_2dim[1][0] 对于切片 对于1维数组:在数组名后加上中括号[],在括号中填写切

Golang切片Slice功能操作详情

目录 一.概述 二.切片 2.1 切片的定义 2.2 切片的长度和容量 2.3 切片表达式 简单切片表达式 完整切片表达式 2.4 使用make()函数构造切片 2.5 for range循环迭代切片 2.6 切片的本质 2.7 判断切片是否为空 三.切片功能操作 3.1 切片不能直接比较 3.2 切片的赋值拷贝 3.3 使用copy()函数复制切片 3.4 append()方法为切片添加元素 3.5 从切片中删除元素 从开头位置删除 从中间位置删除 从尾部删除 3.6 切片的扩容策略 一.概述

js数组常用操作方法小结(增加,删除,合并,分割等)

本文实例总结了js数组常用操作方法.分享给大家供大家参考,具体如下: var arr = [1, 2, 3, 4, 5]; //删除并返回数组中第一个元素 var theFirst = arr.shift(); alert(theFirst);//返回1 number alert(arr);//2,3,4,5 object //删除并返回数组中最后一个元素 var theLast = arr.pop(); alert(theLast);//返回5 number alert(arr);//2,3,