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 相关文章推荐
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
js使用心得分享
Jan 13 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
Vue声明式渲染详解
May 17 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 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
main.php
2006/12/09 PHP
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
php获取汉字首字母的函数
2013/11/07 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
javascript读写json示例
2014/04/11 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
使用Python设置tmpfs来加速项目的教程
2015/04/17 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
简单介绍Python中的几种数据类型
2016/01/02 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
超市营业员求职简历的自我评价
2013/10/17 职场文书
年度考核自我评价
2014/01/25 职场文书
室内拓展活动方案
2014/02/13 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
领导班子四风表现材料
2014/08/23 职场文书
大学生自荐信范文
2015/03/05 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
安全教育培训制度
2015/08/06 职场文书
2016银行求职自荐信
2016/01/28 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript
PHP 时间处理类Carbon
2022/05/20 PHP