JavaScript中数组常见操作技巧


Posted in Javascript onSeptember 01, 2017

效果图如下所示:

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中数组常见操作技巧,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 处理表单元素的代码
Feb 15 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 #Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 #Javascript
关于Promise 异步编程的实例讲解
Sep 01 #Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 #Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 #jQuery
详解使用angular的HttpClient搭配rxjs
Sep 01 #Javascript
JS中关于正则的巧妙操作
Aug 31 #Javascript
You might like
PHP生成HTML静态页面实例代码
2008/08/31 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
Python 的 with 语句详解
2014/06/13 Python
python交互式图形编程实例(三)
2017/11/17 Python
python机器学习之神经网络(三)
2017/12/20 Python
PyQt5每天必学之布局管理
2018/04/19 Python
在Python中定义一个常量的方法
2018/11/10 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
如何进行Linux分区优化
2016/09/13 面试题
初中地理教学反思
2014/01/11 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
服务口号大全
2014/06/11 职场文书
迎国庆演讲稿
2014/09/15 职场文书
运动会表扬稿范文
2015/05/05 职场文书
西柏坡观后感
2015/06/08 职场文书
退货证明模板
2015/06/23 职场文书
投诉信格式范文
2015/07/02 职场文书