js 数组基本知识及常见操作

开发中对于数组的操作有很多，今天就说说一些常用的对数组的操作。

数组是指有序的集合，里面的每个值叫做元素，每个元素在数组中都会有自己的脚标(index)。js中的数组是弱类型，数组中的元素可以是不同的类型，甚至可以是对象和其他的数组。

数组的创建

数组的创建可以有以下几种方式：

var arr_1 = [];
var arr_2 = new Array();
var arr_3 = new Array(length);
var arr_4 = new Array([ele0 [,ele1 [,ele2 [, ...[, eleN]]]]]);

被创建的 arr_1 和 arr_2 都是长度为0的数组；arr_3 创建时传入了长度length，所以长度就是length；arr_4 的长度取决于创建时传入的参数个数。

这里特别说一下 arr_3 的创建，arr_3 还可以被叫做稀疏数组，稀疏数组指的是并不含有从0开始连续索引的数组，其长度 length 一般都比数组的元素个数大。

举个例子：

var arr = new Array(1); // arr 并不存在下标为0的元素。
console.log(arr[0]); // undefined

// 稀疏数组还可以动态改变数组的长度 length
arr.length = 2; // 但并不存在 0 ~ 1 de 索引
console.log(arr.length); // 2

// 给数组赋值，但这里又有两种情况，赋值的脚标 index 小于等于 length-1 和大于 length-1
arr[0] = 1; // 脚标 index 小于等于 length-1
console.log("arr 长度：" + arr.length); // arr 长度：2

arr[4] = 2; // 脚标 index 大于 length-1
console.log("arr 长度：" + arr.length); // arr 长度：5
// 所以当脚标 index 大于 length-1 时，数组的长度 length 也会被重新改变，即 length = index + 1

// 遍历稀疏数组用 for...in ，只输出赋值了元素，不会输出所有元素
for(var i in arr){
console.log(arr[i]); // 1 2
}

// 如果用 for 循环，没有被赋值的元素会输出 undefined
for(var = 0; i< arr.length; i++){
console.log(i); // 1 undefined undefined undefined 2
}

// 顺便提一下，用 (,) 留空的方式创建的数组也是稀疏数组

总结一下上面提到的：
1、稀疏数组的长度 length 一般都会比数组的元素个数大，并且数组的长度 length 可以动态改变；
2、给指定脚标 index 赋值时，当脚标 index 小于等于数组长度 length-1 时，数组长度不会改变；当脚标 index 大于数组长度 length 时，数组的长度 length 会改变，即 length = index + 1;
3、稀疏数组遍历一般用 in 操作符，只会输出被赋值了的元素

数组的操作
首先说一下原生js的数组操作，主要有以下一些：

1、push([ele0 [,ele1 [,...[,eleN]]]]) 在数组的末尾添加一个或多个元素，并返回新数组的长度；
2、unshift([ele0 [,ele1 [,...[,eleN]]]]) 在数组的前面添加一个或多个元素，并返回新数组的长度；
3、pop() 删除数组最后一个元素，并返回被删除的元素；
4、shift() 删除数组第一个元素，并返回被删除的元素；
5、slice(startIndex, [endIndex]) 以脚标 startIndex 开始，endIndex 结束，复制原数组中的元素，但不包括 endIndex 对应的元素；如果无 endIndex，则复制 startIndex 以后的所有元素，并返回一个新数组；
6、concat([item0 [,item1 [,... [, itemN]]]]) 将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新数组；如果没有参数，就返回一个与原数组一样元素的新数组
7、splice(startIndex, deleteNum, [insertItem0 [,insertItem1 [,... [, insertItemN]]]]) 从脚标 startIndex（包括startIndex）开始，删除 deleteNum 个元素，并将一个或者多个 insertItem（insertItem 可以是字符串，或者是数组和字符串的混合）插入 startIndex 的位置；以数组的形式返回被删除的元素
8、sort(function(a, b){ return a - b}) 将数组进行排序，传入的函数为排序函数，a-b 为升序排列，b-a 为降序排列，返回一个排序后的新数组
9、reverse() 将数组元素反转，并返回一个新的数组
10、join(item) 将数组转换成字符串，没有元素之间被 item 隔开

例子：
1、在元素的末尾/首位添加若干元素，且原数组保持不变
function insertToArr(arr){
if(!(arr instanceof Array)){
/* 传入的不是数组对象 */
return;
}
// var arr_1 = arr.slice(0); // 浅复制原数组
var arr_1 = arr.concat(); // 浅复制原数组
arr_1.unshift("aa", "bb"); // 在首位添加 "aa" "bb"
arr_1.push("a", "b"); // 在末尾添加 "a" "b"
return arr_1;
}

2、删除数组的第一个元素/最后一个元素，且原数组保持不变
function deleteForArr(arr){
if(!(arr instanceof Array)){
/* 传入的不是数组对象 */
return;
}
// var arr_1 = arr.slice(0); // 浅复制原数组
var arr_1 = arr.concat(); // 浅复制原数组
arr_1.pop(); // 删除数组的最后一个元素
arr_1.shift(); // 删除数组的第一个元素
return arr_1;
}
3、删除数组指定位子指定个数的元素，并添加新的元素进去，且原数组保持不变
function updateForArr(arr){
if(!(arr instanceof Array)){
/* 传入的不是数组对象 */
return;
}
// var arr_1 = arr.slice(0); // 浅复制原数组
var arr_1 = arr.concat(); // 浅复制原数组
//arr_1.splice(1, 1); // 从脚标1开始(包括脚标1)，删除一个元素
//arr_1.splice(1, 1, "a"); // 从脚标1开始(包括脚标1)，删除一个元素，并将元素 "a" 添加到脚标1位子
arr_1.splice(1, 1, "a", "b"); // 从脚标1开始(包括脚标1)，删除一个元素，并将元素 "a" 和 "b" 依次添加到脚标1位子
return arr_1;
}

4、将数组升序排列/降序排列，且原数组保持不变
// 升序排列
function ascendForArr(arr){
if(!(arr instanceof Array)){
/* 传入的不是数组对象 */
return;
}
// var arr_1 = arr.slice(0); // 浅复制原数组
var arr_1 = arr.concat(); // 浅复制原数组
// 升序排列
arr_1.sort(function(item1, item2){
return item1 - item2;
})
return arr_1;
}
// 降序排列
function ascendForArr(arr){
if(!(arr instanceof Array)){
/* 传入的不是数组对象 */
return;
}
// var arr_1 = arr.slice(0); // 浅复制原数组
var arr_1 = arr.concat(); // 浅复制原数组
// 降序排列
arr_1.sort(function(item1, item2){
return item2 - item1;
})
return arr_1;
}

jquery 中对数组的一些常用操作：
1、$.esch(arr, function(index, value){}) 遍历数组；回调函数的第一个参数为索引，第二个参数为元素值；若需要结束遍历，在回调函数中调用 return false；
2、$.grep(arr, function(value, index, [boolean]){}) 过滤数组；回调函数的第一个参数为元素值，第二个参数为元素索引；函数第三个参数为 boolean 值，false 就返回满足回调函数表达式的值，true 就取反满足回调函数表达式的值；并返回一个新的数组；
3、$.map(arr, function(value){}) 按给定条件转换数组；回调函数的第一个参数为元素值；它可以根据特定条件，更新数组元素值，或根据原值扩展一个新的副本元素；并返回一个新的数组；
4、$.inArray(val, arr) 判断 val 是否存在 arr 中；如果在，则返回在数组中的索引值；如果不在，则返回 -1；
5、$.isArray(arr) 判断 arr 是不是一个数组；是则返回 true ，不是则返回 false；
6、$.merge(arr1, arr2) 将数组 arr1 与数组 arr2 合并，并返回一个新的数组
7、$.unique(arr) 过滤数组中重复元素，并返回一个新的数组

例子：
1、遍历数组，当 index === 2 时结束遍历
function ergodicArr(arr){
// 判断 arr 是否为一个数组
if(!$.isArray(arr)){
/* 传入的不是数组对象 */
return;
}
$.each(arr, function(i, v){
console.log("index=" + i,"value=" + v);
if(i === 2){
return false;
}
});
}

2、操作 arr 数组，返回一个满足 index > 2 的新数组 / 返回一个除去满足 index > 2 的新数组
function operationArr(arr){
// 判断 arr 是否为一个数组
if(!$.isArray(arr)){
/* 传入的不是数组对象 */
return;
}
// 满足 index > 2
var arr_ 1 = $.grep(arr, function(v, i){
return i > 2;
}, false);
// 除去满足 index > 2 剩下的元素组成的数组
var arr_ 2 = $.grep(arr, function(v, i){
return i > 2;
}, true);
}

3、合并数组 arr_1 和 arr_2，并返回一个新的数组
function mergeArr(arr_1, arr_2){
for(var i in arguments){
if(!$.isArray(arguments[i])){
/* "传入的第" + (parseInt(i) + 1) + "参数不是数组" */
return;
}
}
var newArr = $.merge(arr_1, arr_2);
return newArr;
}

4、过滤数组中的重复元素
function filterDb(arr){
if(!$.isArray(arr)){
/* 传入的不是数组对象 */
return;
}
var arr_1 = $.unique(arr);
return arr_1;
}

es6 中对数组的一些常用操作：
1、indexOf(searchVal, startIndex) 从 startIndex 位置开始检索数组中是否存在 searchVal，有则返回相应脚标，没有则返回 -1；
2、lastIndexOf(searchVal, lastStartIndex) 从 lastStartIndex 位置往回开始检索数组中是否存在 searchVal，有则返回相应脚标，没有则返回 -1；与indexOf(searchVal, startIndex) 相反；
3、includes(searchElement, fromIndex) 判断一个数组是否包含一个指定的值，返回 true 或 false。searchElement：要查找的元素；fromIndex：开始查找的索引位置；
4、map(function(v, i, arr){}) 按给定条件转换数组，且必须有返回值，如果没有，就返回 undefined；
5、filter(function(v){}) 过滤筛选；按照给定条件筛选出数据，必须有返回值，否则返回空；
6、reduce(function(first, second){}) 对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供；
7、Array.isArray(arr) 判断 arr 是否为一个数组，返回 true 或 false
8、Array.prototype.slice.call 将类似数组的对象(比如arguments)转换为真实的数组

例子：
1、查找每个元素是都在数组中
function seekData(arr){
if(!Array.isArray(arr)){
/* 传入的不是数组对象 */
return;
}
var index = arr.indexOf(1); // 判断数字1是都存在于数组 arr 中
return index > -1 ? "数字1在arr的第" + (index + 1) + "位" : "数字1不在arr中";
}
2、只返回数组中是数字的元素
function filterNum(arr){
if(!Array.isArray(arr)){
/* 传入的不是数组对象 */
return;
}
var arr_1 = arr.filter(function(v){
return typeof v === "number";
});
return arr_1;
}

3、返回数组中数字的总和
function sumForArr(arr){
if(!Array.isArray(arr)){
/* 传入的不是数组对象 */
return;
}
// 过滤数字
var arr_1 = arr.filter(function(v){
return typeof v === "number";
});
// 求和
var sum = arr_1.reduce(function(v1, v2){
return v1 + v2;
});
return sum;
}

好了，这里就不再继续赘述，以上就是一些数组常见的操作，当然还有一些没有提到，有兴趣的童鞋可以自己再去深入地学习一下。
说了这么多，希望对大家有用。

js 数组基本知识及常见操作相关推荐

PHP | 数组中的一些常见操作
一.统计数组中元素的个数 <?php $arr=array('name'=>'zyd','age'=>'19','sex'=>'female',);function sum($ ...
python基础--列表知识和常见操作
列表的格式变量A的类型为列表 namesList = ['xiaoWang','xiaoZhang','xiaoHua'] 比C语言的数组强大的地方在于列表中的元素可以是不同类型的 testList ...
android 接收js对象数组,java怎么接收js 数组对象数组对象
java怎么接收js 数组对象数组对象 [2021-02-04 22:25:34] 简介: php数组转js数组对象的方法:首先获取[$arr]数组:然后使用函数[json_encode()]将数组 ...
js数组获取index_通过事例重温一下 JS 中常见的15 种数组操作(备忘清单)，收藏...
数组是 JS 中广泛使用的数据结构.数组对象提供了大量有用的方法,如array. forEach().array.map()等来操作数组. 在实战中,我经常对数组可能的操作和相应采用哪个更好的方法不知 ...
js数组获取index_通过事例重温一下常见的 JS 中 15 种数组操作(备忘清单)
作者:Dmitri Pavlutin 译者:前端小智来源:dmitripavlutin.com 最近几天,公众号无套路抽奖现金 200,参与方式如下: 存而不论是一种对舆论场合的改善?(每月一次抽大 ...
js map 排序_数组方法写给女友的一系列 JS 数组操作（建议收藏 | 内附思维导图）...
前言最近和女友,咳咳...(说出来可能会被打s)学习JS数组方法,用几个字形容的话就是听说过,实际使用.遇到的时候就分不清具体方法会得到怎样的结果. 今天我将通过这篇文章好好整理一下关于JS数组的方 ...
html怎么创建数组,js创建数组的三种方法 JS数组去重的几种常见方法
JS数组有哪几种定义方式? js 里创建一个数组那几种方式有什么区别吗?a = new Array(); b = []; 性能问题吗?? function clear(arr) { // 1 如何获 ...
「数组方法」写给女友的一系列 JS 数组操作（建议收藏 | 内附思维导图）
前言最近和女友,咳咳-(说出来可能会被打s)学习JS数组方法,用几个字形容的话就是听说过,实际使用.遇到的时候就分不清具体方法会得到怎样的结果. 今天我将通过这篇文章好好整理一下关于JS数组的方法, ...
总结Vue第一天~简单介绍、基本知识、辅助函数和js数组的高阶函数
目录 vue中文官网一.简单介绍: (1)vue.js :本质就是一个js 核心类库[跟咱使用的其他组件插件而安装他们]: ■ 安装方式: (2)小demo了解一下vue.js: (3)响应式: 二 ...

js 数组基本知识及常见操作

js 数组基本知识及常见操作相关推荐

最新文章

热门文章