转换方法
所有对象都具有 toLocaleString()、toString()和 valueOf()方法。
栈方法
array.push, array.pop
队列方法
array.shift, array.push
重排方法
array.reverse, array.sort
reverse()和 sort()方法的返回值是经过排序之后的数组。
操作方法
array.concat, array.slice
位置方法
array.indexOf, array.lastIndexOf
迭代方法
array.every, array.filter, array.forEach, array.map, array.some
every(): 对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回 true。
filter(): 对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组。
forEach(): 对数组中的每一项运行给定函数。这个方法没有返回值。
map(): 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
some(): 对数组中的每一项运行给定函数,如果该函数对任一项返回 true,则返回 true。以上方法都不会修改数组中的包含的值。
归并方法
array.reduce, array.reduceRight (ECMAScript 5 新增)
reduce()方法从数组的第一项开始,逐个遍历 到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。
这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。
var values = [1,2,3,4,5]; var sum = values.reduce(function(prev, cur, index, array){ return prev + cur; }); alert(sum); //15
ES6 方法
array.fill, Array.from
扁平化 n 维数组
[1, [2, 3]].flat(2); // [1, 2, 3] [1, [2, 3, [4, 5]]].flat(3); // [1, 2, 3, 4, 5]
Array.flat(n) 是 ES10 扁平化数组的 api, n 表示维度, n 值为 Infiniti 时维度为无限大。
js 实现:利用递归和数组合并方法 concat 实现扁平。
function flatten(arr) { while(arr.some(item => Array.isArray(item))) { arr = [].concat(...arr); } return arr; } flatten([1, [2, 3]]); // [1, 2, 3]
数组去重
Array.from(new Set([1, 2, 3, 2, 4])); // [1, 2, 3, 4] [...new Set([1, 2, 3, 3, 4, 4])]; // [1, 2, 3, 4]
- Set 是 ES6 新出来的一种定义不重复数组的数据类型。
- Array.from 是将类数组转化为数组。
- … 是扩展运算符,将 set 里面的值转化为字符串。
js 实现:可以根据双层循环过滤掉重复项。
Array.prototype.distinct = function () { let arr = this, result = [], i, j, len = arr.length; for (i = 0; i < len; i++) { for (j = i + 1; j < len; j++) { if (arr[i] === arr[j]) { j = ++i } } result.push(arr[i]) } return result; }
数组排序
[1, 2, 3, 4].sort(); // [1, 2, 3, 4] 默认是升序 [1, 2, 3, 4].sort((a, b) => b - a); // [4, 3, 2, 1]
sort 是 js 内置的排序方法,参数为一个函数
js 实现:冒泡排序
Array.prototype.bubleSort = function () { let arr = this, len = arr.length; for (let i = 0; i < len; i++) { for (let j = i + 1; j < len; j++) { if (arr[j - 1] > arr[j]) { [arr[j - 1], arr[j]] = [arr[j], arr[j - 1]] } } } return arr; }
js 实现:选择排序
Array.prototype.selectSort = function () { let arr = this, len = arr.length; for (let i = 0; i < len; i++) { for (let j = i; j < len; j++) { if (arr[i] > arr[j]) { [arr[i], arr[j]] = [arr[j], arr[i]]; } } } return arr; }
数组中的最大值
Math.max(...[1, 2, 3, 4]); // 4 Math.max.apply(this, [1, 2, 3, 4]); // 4 [1, 2, 3, 4].reduce((prev, cur, curIndex, arr) => { return Math.max(prev, cur); }); // 4
数组求和
[1, 2, 3, 4].reduce((prev, cur, curIndex, arr) => { return prev + cur; }, 0); // 10
数组合并
var a = [1, 2, 3, 4]; var b = [5, 6]; a.concat(b); // [1, 2, 3, 4, 5, 6] [...a, ...b]; // [1, 2, 3, 4, 5, 6] [].push.apply(a, b); // [1, 2, 3, 4, 5, 6] b.map(item => { a.push(item); }); // [1, 2, 3, 4, 5, 6]
判断数组中是否包含
// includes(), find(), findIndex() 是 ES6 的 api。 [1, 2, 3].includes(4); // false [1, 2, 3].indexOf(4); // -1 表示没有 [1, 2, 3].find(item => item === 3); // 3 如果没有返回 undefined [1, 2, 3].findIndex(item => item === 3); // 2 如果没有则返回 -1
类数组转换
类数组:表示有 length 属性,但是不具备数组的方法
Array.prototype.slice.call(arguments); // arguments 是类数组(伪数组) Array.prototype.slice.apply(arguments); Array.from(arguments); [...arguments]; // 可运行示例 function a () { return [...arguments]; } a(1, 2); // array Array.from({ length: 9 }, () => 0); // [0, 0, 0, 0, 0, 0, 0, 0, 0] // document.querySelectorAll('.color'); 返回的也是类数组 var targets = document.querySelectorAll('.color'); [].forEach.apply(targets, function(item){ // do something. }); // slice 实现 Array.prototype.slice = function(start, end) { var result = new Array(); start = start || 0; end = end || this.length; for(var i = start; i < end; i ++){ result.push(this[i]); } return result; }
- call、apply:改变 slice 里面的 this 指向 arguments, 所以 arguments 也可以调用数组的方法。
- Array.from: 将类数组或可迭代对象创建为数组。
- … 将数组扩展为字符串,再定义为数组。
为数组的每项设置值
// fill 是 ES6 的方法。 [1, 2, 3].fill(false); // [false, false, false] Array.from({ length: 9 }, () => 0); // [0, 0, 0, 0, 0, 0, 0, 0, 0]
处理数组的单项数据
// every 每项都满足返回 true [1, 2, 3].every(item => { return item > 2 }); // false // 有一项满足返回 true [1, 2, 3].some(item => { return item > 2 }); // true // 数组过滤 [1, 2, 3].filter(item => { return item > 2 }); // [3]
some、every、filter 是 ES5 的 api。
对象数组间转化
Object.keys({name: 'zhangsan', age: 14}); // ["name", "age"] Object.values({name: 'zhangsan', age: 14}); // ["zhangsan", 14] Object.entries(["zhangsan", 14]); // [["name", "zhangsan"], ["age", 14]] Object.fromEntries(["name", "zhangsan"], ["age", 14]); // ES10 的 api,Chrome 不支持,firebox 输出 { "name": "张三", "age": 14 }