JavaScript中数组api的总结
JavaScript作为脚本语言，需要处理大量的数据，作为一个前端开发人员，接触到最多的数据结构非数组莫属了，本文将总结出日常开发中常用的数组API，希望对你的编码能力有所提升。
数组API（以是否会改变原数组作划分标准）。
| 会改变 | 不会改变 |
|---|---|
| push() | join() |
| pop() | concat() |
| shift() | toString() |
| unshift() | valueOf() |
| reverse() | indexOf() |
| sort() | lastIndexOf() |
| splice() | forEach() |
| _ | map() |
| _ | filter() |
| _ | every() |
| _ | some() |
| _ | reduce() |
下面我们就来详细的分析一下各个api的作用以及注意事项：
-
push()是在原数组的最后一位新增一个或多个数据，并返回新增数据后的数组长度。
其语法为：array.push(item1, item2, …, itemX)，不传参数则数组不变。let arr1 = [1,2,3,4,5]; let num1 = 6, num2 = 7; console.log(arr1.push(num1, num2)); //7 console.log(arr1); //[1,2,3,4,5,6,7] -
pop()是删除原数组的最后一个元素，并返回该元素。
其语法为：array.pop()。let arr = [1,2,3,4,5]; console.log(arr.pop()); //5 console.log(arr); //[1,2,3,4] -
shift()是删除原数组的第一位元素，并将其返回。
其语法为：array.shift()let arr = [1,2,3,4,5]; console.log(arr.shift()); //1 console.log(arr); //[2,3,4,5] -
unshift()是在原数组的第一位新增一个或多个元素，并返回新增元素后的数组长度。
其语法为：array.unshift(item1,item2, …, itemX)，不传参数则数组不变。let arr = [1,2,3,4,5]; console.log(arr.unshift(1,2,3)); //8 console.log(arr); //[1,2,3,1,2,3,4,5] -
reverse()是将原数组反转并返回反转后的结果。
其语法为：array.reverse()let arr = [1, 2, 3, 4, 5] let result = arr.reverse() console.log(arr); //[5, 4, 3, 2, 1] console.log(result); //[5, 4, 3, 2, 1] -
sort()是将原数组进行排序并将结果返回。
其语法为：array.sort(sortfunction)，sortfunction为可选参数，其类型必须是函数。
要注意的是在无参数时以数组元素第一位的ASCII码从小到大排列。// 无参数例子 let arr = [9, 311, 81, 1, 2, 8, 3, 4, 9, 2, 1, 6, 7] let result = arr.sort() console.log(arr) //直接修改原数组 console.log(result); //[1, 1, 2, 2, 3, 311, 4, 6, 7, 8, 81, 9, 9]// 有参数例子 let arr = [9, 311, 81, 1, 2, 8, 3, 4, 9, 2, 1, 6, 7] let result = arr.sort(function (a, b) { return a - b }) console.log(arr) //[1, 1, 2, 2, 3, 4, 6, 7, 8, 9, 9, 81, 311] console.log(result); //[1, 1, 2, 2, 3, 4, 6, 7, 8, 9, 9, 81, 311] result = arr.sort(function (a, b) { return b - a }) console.log(arr) //[311, 81, 9, 9, 8, 7, 6, 4, 3, 2, 2, 1, 1] console.log(result); //[311, 81, 9, 9, 8, 7, 6, 4, 3, 2, 2, 1, 1]// 随机打乱数组内元素顺序 let arr = [9, 311, 81, 1, 2, 8, 3, 4, 9, 2, 1, 6, 7] arr.sort(function () { undefined return Math.random() > .5 ? 1 : -1 }) console.log(arr); //[6, 81, 7, 2, 8, 4, 2, 1, 9, 311, 1, 3, 9] -
splice()可用于插入、删除、替换原数组中的元素并以数组的结构返回被删除的元素。
其语法为：array.splice(index,howmany,item1,…,itemX),其中index为必传参数，其含义为被删除元素的起始索引（包括index指向的元素）、howmany的含义为从index开始往后删除的元素个数、第三个参数则是在被删除的位置中替换上的元素。// 传入一个实参 let arr = [1, 2, 3, 4, 5] let result = arr.splice(1) console.log(arr); //[1] console.log(result); //[2, 3, 4, 5]// 传入两个实参 let arr = [1, 2, 3, 4, 5] let result = arr.splice(1, 2) console.log(arr); //[1, 4, 5] console.log(result); //[2, 3]// 传入三个实参 let arr = [1, 2, 3, 4, 5] let result = arr.splice(2, 1, 6) console.log(arr); // [1, 2, 6, 4, 5] console.log(result); //[3]// 传入三个实参时，可以实现插入操作 let arr = [1, 2, 3, 4, 5] let result = arr.splice(2, 0, 6) console.log(arr); // [1, 2, 6, 3, 4, 5] console.log(result); //[] -
join()能使用分隔符将数组转为字符串并返回。
其语法为：array.join(separator)，separator为数组元素之间的分隔符，当不传进时默认以’,'逗号分隔。// 不传参时 let arr = [1, 2, 3, 4, 5] let result = arr.join() console.log(arr); // [1, 2, 3, 4, 5] console.log(result); // 1,2,3,4,5// 传入空字符串时 let arr = [1, 2, 3, 4, 5] let result = arr.join("") console.log(arr); // [1, 2, 3, 4, 5] console.log(result); // 12345// 传入任意字符串时 let arr = [1, 2, 3, 4, 5] let result = arr.join("|") let result2 = arr.join(" and ") console.log(arr); // [1, 2, 3, 4, 5] console.log(result); // 1|2|3|4|5 console.log(result2); // 1 and 2 and 3 and 4 and 5 -
concat()合并数组并将合并后的新数组返回。
其语法为： array1.concat(array2,array3,…,arrayX)let arr = [1, 2, 3] let arr2 = [6, 7, 8, 9] let arr3 = [4, [5, [7, 8]]] let result = arr.concat(arr2) let result2 = arr.concat(4, 5) let result3 = arr.concat(arr3) console.log(result); //[1, 2, 3, 6, 7, 8, 9] console.log(result2); //[1, 2, 3, 4, 5] console.log(result3); //[1, 2, 3, 4, [ 5, [ 7, 8 ] ]] -
toString()将数组直接转为字符串并返回结果，但不会改变原来的数组。
其语法为：array.toString()let arr = [1, 2, 3, 4, 5] let result = arr.toString() console.log(arr); //[1, 2, 3, 4, 5] console.log(result); //1,2,3,4,5 -
valueOf()返回数组对象的原始值 不改变原数组,对于数组几乎不用。
其语法为：array.valueOf()let arr = [1, 2, 3, 4, 5] let result = arr.valueOf() console.log(arr); //[1, 2, 3, 4, 5] console.log(result); //[1, 2, 3, 4, 5] -
indexOf()查询并返回数据的索引,不改变数组本身。
其语法为：array.indexOf(item,start)，item为要查找的元素，是必传的。start是开始查询的起始索引，为可选参数，当不传入start是默认从0索引开始查找。let arr = [1, 2, 3, 4, 5] let result = arr.indexOf(5) let result2 = arr.indexOf(6) console.log(arr); //[1, 2, 3, 4, 5] console.log(result); //4 找到返回目标索引 console.log(result2); //-1 未找到返回-1 -
lastIndexOf()反向查询并返回数据的索引,不改变数组本身。
其语法为：array.lastIndexOf(item,start),参数含义与indexOf()相同。let arr = [1, 2, 3, 4, 5] let result = arr.lastIndexOf(5) let result2 = arr.indexOf(6) console.log(arr); //[1, 2, 3, 4, 5] console.log(result); //0 找到返回目标索引 console.log(result2); //-1 未找到返回-1 -
forEach()参数为回调函数，会遍历数组所有的项，回调函数接受三个参数，分别为value，index，self； forEach返回值undefind.
其语法为：array.forEach(function(currentValue, index, arr))，这里特别说明一下arr指向的是当前元素所属的数组对象let arr = [1, 2, 3, 4, 5] let result = arr.forEach((item, index, self) => { console.log(item, index, self) // 参数item: 数组中每一项的内容 // 参数index: 数组索引 // 参数a: 指的是数组本身 }) console.log(result); // undefined -
map()回调函数返回数据，组成新数组由map返回,不改变原数组.
其语法为：array.map(function(currentValue,index,arr))let arr = [1, 2, 3, 4, 5] let result = arr.map((item) => { return item + 1 }) console.log(result) // [2, 3, 4, 5, 6] console.log(arr) //原数组不变[1, 2, 3, 4, 5] -
filter()回调函数返回布尔值，为true的数据组成新数组由filter返回,不改变原数组。
其语法为：array.filter(function(currentValue,index,arr))let arr = [1, 2, 3, 4, 5] let result = arr.filter((item) => { return item > 2 //true的时候返回item,false不返回 }) console.log(result) // 返回筛选结果[3, 4, 5] console.log(arr) //原数组不变[1, 2, 3, 4, 5] -
every()回调函数返回布尔值，全部为true，由every返回true。
其语法为：array.every(function(currentValue,index,arr))// 全都满足 let arr = [1, 2, 3, 4, 5] let result = arr.every((item) => { return item >= 1 }) console.log(result) // 全部满足条件返回true console.log(arr) //原数组不变[1, 2, 3, 4, 5]// 某一元素不满足 let arr = [1, 2, 3, 4, 5] let result = arr.every((item) => { return item >= 2 }) console.log(result) // false console.log(arr) //原数组不变[1, 2, 3, 4, 5] -
some()回调函数返回布尔值，只要由一个为true，由some返回true,不会改变原数组。
其语法为：array.some(function(currentValue,index,arr))let arr = [1, 2, 3, 4, 5] let result = arr.some((item) => { return item >= 4 }) console.log(result);//true 当有item其中一项为true的时候就会返回true console.log(arr);//[1, 2, 3, 4, 5] -
reduce()reduce的第2个参数是可选的，也就是初始值是可选的。当不指定初始值时，它将使用数组的第一个元素作为初始值。函数里面的 index 是当前 value 在数组中的索引。当不传入初始值的时候，index 是从 1 开始的，总的循环次数比数组长度少1。当传入初始值的时候，index 是从 0 也就是第一个元素开始，数组有多长就会遍历几次。
其语法为：array.reduce(function(total, currentValue, currentIndex, arr))let arr = [1, 2, 3, 4, 5] let result = arr.reduce((total, value, index, arr) => { return total + value }, 0) console.log(result); //15 console.log(arr); //[1, 2, 3, 4, 5]
本次分享就到这里啦，欢迎大家踊跃的参与到讨论中来，又或者是又遗漏的地方欢迎提出。
扫一扫
1813
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
