共计 7021 个字符，预计需要花费 18 分钟才能阅读完成。
JavaScript 数组办法
一、操作数组的办法
-
把数组转换为字符串 Array.join(str)
join()办法行为相似 toString(), 将数组转换为字符串，然而 join 办法能够应用参数 str 自定义宰割符
['wfewfe', '123123'].toString() // "wfewfe,123123" ['wang', 'shao', 'jie'].join('-') // "wang-shao-jie" -
删除数组中最初一个元素 pop(), 返回值为被删除的值
var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.pop(); // x 的值是 "Mango" - 向数组中增加数据，push()办法向数组开端处增加一个元素；unshift()办法向数组头部处增加一个元素，返回新数组的长度
- 从数组中删除数据，shift()办法删除数组第一个元素，返回被删除元素值；<u>留神：</u> 应用 delete 删除数组中元素会把删除地位的元素置为undefined，
-
splice()办法既能删除元素也能增加元素，Array.splice(index, howmany, item1,…., itemX), 该办法返回值为被删除元素组成的数组。在不传递 item1…i,temX 参数的时候意为删除数组 index 地位开始 howmany 个元素。
参数 形容 index 必须。整数，规定增加 / 删除我的项目的地位，应用正数可从数组结尾处规定地位。 howmany 必须。要删除的我的项目数量。如果设置为 0，则不会删除我的项目。 item1, …, itemX 可选。向数组增加的新我的项目。 -
concat()办法通过合并（连贯）现有数组来创立一个新数组，Array.concat(arr1,…,arrX), 该办法参数能够为任意个数组也能够是具体的值
[1,2,3,4,5,6].concat([1,2,3,4,5]) // 返回 [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5] [1,2,3,4].concat(11,22) // 返回 [1, 2, 3, 4, 11, 22] -
reverse()数组反转，用于将数组的元素程序反转
const arr = [111, 222, 333, 444] console.log(arr.reverse()); // [444, 333, 222, 111] -
sort()办法用于对数组元素进行排序，应用模式为 Array.sort(sortby)，参数 sortby 可选，它规定排序程序，必须为函数。须要留神的是：当对数值数组进行排序时，sortby 参数必须为一个排序函数：
const arr = [111, 222, 333, 444, 123, 435, 42] // console.log(arr.sort()); // [111, 123, 222, 333, 42, 435, 444] // console.log(arr.sort((a, b) => a - b)); // [42, 111, 123, 222, 333, 435, 444] console.log(arr.sort((a, b) => b - a)); // [444, 435, 333, 222, 123, 111, 42] - includes()办法用于检测数组中是否存在某值，用法 Array.includes(value)，如果 value 存在与数组中返回 true，否则返回 false
-
from()办法用于将类数组对象转化为真正的数组，最根本的要求是具备 length 属性的对象
const arrayLike = { 0: 'tom', 1: '65', 2: '男', 3: ['jane','john','Mary'], 'length': 4 } let arr = Array.from(arrayLike) console.log(arr) // ['tom','65','男',['jane','john','Mary']] -------------------------------------------------------------------------------- // 属性名不是数值时转化失败 let arrayLike = { 'name': 'tom', 'age': '65', 'sex': '男', 'friends': ['jane','john','Mary'], length: 4 } let arr = Array.from(arrayLike) console.log(arr) // [undefined, undefined, undefined, undefined]
from 能够将 Set 构造的数据转化为真正的数组
二、遍历数组的办法
（1）for
const array = [1,2,3,4]
for(i = 0; i < array.length; i++) {console.log(array[i]) // 顺次打印 array 中元素
}（2）forEach
// 遍历数组中的每一项，没有返回值，对原数组没有影响，不反对 IE
[1,2,3,4,5].forEach(item, index, array) => {// item 为遍历数组的以后项，index 为以后索引值，array 为原始数组}（3）map
// 遍历数组，有返回值，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项扭转了）；const arr = ['wang', 'shao']
const arr2 = arr.map(item => {return item += '1'})
console.log(arr); // ['wang', 'shao']
console.log(arr2); // ['wang1', 'shao1']（4）for of
const arr = [1,2,3,4,5,6]
for (const value of arr) {console.log(value); // 顺次打印数组中每个元素
}（5）filter
// 不会扭转原始数组，返回新数组，filter 译为过滤，应用指定条件挑选出符合条件的元素组成数组
const arr = [{ id: 1, text: 'aa', done: true},
{id: 2, text: 'bb', done: false},
{id: 2, text: 'bb', done: true},
{id: 2, text: 'bb', done: true},
]
console.log(arr.filter(item => item.done))
// 0: {id: 1, text: "aa", done: true}
// 1: {id: 2, text: "bb", done: true}
// 2: {id: 2, text: "bb", done: true}
（6）every
// 遍历数组，对每一个元素运行指定函数，如果该函数对每一项都返回 true 则返回 true
const arr = [1, 2, 3, 4, 5, 6];
console.log(arr.every( function( item, index, array){return item > 3;}));
// false（7）some
// some()是对数组中每一项运行指定函数，如果该函数对任一项返回 true，则返回 true。const arr = [1, 2, 3, 4, 5, 6];
console.log(arr.every( function( item, index, array){return item > 3;}));
// true（8）reduce
// reduce() 办法接管一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){return previousValue + currentValue;}); // 返回 10
const arr = [{ id: 1, text: 'aa', done: true, num: 11},
{id: 2, text: 'bb', done: false, num: 22},
{id: 3, text: 'bb', done: true, num: 33},
{id: 4, text: 'bb', done: true, num: 44}
]
const temp = arr.reduce((previousValue, currentValue) => {return previousValue + currentValue.num}, 0) // 返回 110reduce 高级用法
1. 累加累乘
function Accumulation(...vals) {return vals.reduce((t, v) => t + v, 0);
}
function Multiplication(...vals) {return vals.reduce((t, v) => t * v, 1);
}
Accumulation(1, 2, 3, 4, 5); // 15
Multiplication(1, 2, 3, 4, 5); // 120 2. 权重求和
const scores = [{ score: 90, subject: "chinese", weight: 0.5},
{score: 95, subject: "math", weight: 0.3},
{score: 85, subject: "english", weight: 0.2}
];
const result = scores.reduce((t, v) => t + v.score * v.weight, 0); // 90.5 3. 代替 reverse
function Reverse(arr = []) {return arr.reduceRight((t, v) => (t.push(v), t), []);
}
Reverse([1, 2, 3, 4, 5]); // [5, 4, 3, 2, 1] 4. 代替 map 和 filter
const arr = [0, 1, 2, 3];
// 代替 map：[0, 2, 4, 6]
const a = arr.map(v => v * 2);
const b = arr.reduce((t, v) => [...t, v * 2], []);
// 代替 filter：[2, 3]
const c = arr.filter(v => v > 1);
const d = arr.reduce((t, v) => v > 1 ? [...t, v] : t, []);
// 代替 map 和 filter：[4, 6]
const e = arr.map(v => v * 2).filter(v => v > 2);
const f = arr.reduce((t, v) => v * 2 > 2 ? [...t, v * 2] : t, []); 5. 代替 some 和 every
const scores = [{ score: 45, subject: "chinese"},
{score: 90, subject: "math"},
{score: 60, subject: "english"}
];
// 代替 some：至多一门合格
const isAtLeastOneQualified = scores.reduce((t, v) => v.score >= 60, false); // true
// 代替 every：全副合格
const isAllQualified = scores.reduce((t, v) => t && v.score >= 60, true); // false 6. 数组过滤
function Difference(arr = [], oarr = []) {return arr.reduce((t, v) => (!oarr.includes(v) && t.push(v), t), []);
}
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [2, 3, 6]
Difference(arr1, arr2); // [1, 4, 5] 7. 数组成员个性分组
function Group(arr = [], key) {return key ? arr.reduce((t, v) => (!t[v[key]] && (t[v[key]] = []), t[v[key]].push(v), t), {}) : {};}
const arr = [{ area: "GZ", name: "YZW", age: 27},
{area: "GZ", name: "TYJ", age: 25},
{area: "SZ", name: "AAA", age: 23},
{area: "FS", name: "BBB", age: 21},
{area: "SZ", name: "CCC", age: 19}
]; // 以地区 area 作为分组根据
Group(arr, "area"); // {GZ: Array(2), SZ: Array(2), FS: Array(1) } 8.url 参数序列化
function StringifyUrlSearch(search = {}) {return Object.entries(search).reduce((t, v) => `${t}${v[0]}=${encodeURIComponent(v[1])}&`,
Object.keys(search).length ? "?" : "").replace(/&$/,"");
}
StringifyUrlSearch({age: 27, name: "YZW"}); // "?age=27&name=YZW" （9）reduceRight
//reduceRight 性能与 reduce 基本相同，不同的是 reduceRight 是从开端开始操作数组（10）find
//find()办法返回数组中合乎测试函数条件的第一个元素。否则返回 undefined
const arr = [1, 2, 3, 4, 5, 6, 7]
const result = arr.find(item => item>4)
console.log(result); // 5
（11）findIndex
//find()办法返回数组中合乎测试函数条件的第一个元素的索引值。否则返回 -1
const arr = [1, 2, 3, 4, 5, 6, 7]
const result = arr.findIndex(item => item>10)
console.log(result); // -1（12）keys, values, entries
//Array.keys() 顺次取出数组的索引值
//Array.values() 顺次取出数组的元素值
//Array.entried() 顺次取出数组的索引值和元素值
const arr = [111, 222, 333, 444]
for (let i of arr.keys()) {console.log(i);
}
// 0 1 2 3
for (let i of arr.values()) {console.log(i);
}
// 111 222 333 444
for (let [i, v] of arr.entries()) {console.log(i, v);
}
// 0 111 1 222 2 333 3 444三、数组去重
1.ES6 Set 去重
function unique (arr) {return Array.from(new Set(arr))
}2. 双循环数组切割去重
function unique(arr){for(var i=0; i<arr.length; i++){for(var j=i+1; j<arr.length; j++){if(arr[i]==arr[j]){ // 第一个等同于第二个，splice 办法删除第二个
arr.splice(j,1);
j--;
}
}
}
return arr;
}3. 利用 indexOf 去重
新建一个空的后果数组，for 循环原数组，判断后果数组是否存在以后元素，如果有雷同的值则跳过，不雷同则 push 进数组。
function unique(arr) {if (!Array.isArray(arr)) {console.log('type error!')
return
}
var array = [];
for (var i = 0; i < arr.length; i++) {if (array .indexOf(arr[i]) === -1) {array .push(arr[i])
}
}
return array;
}4. 利用 sort()
利用 sort()排序办法，而后依据排序后的后果进行遍历及相邻元素比对。
function unique(arr) {if (!Array.isArray(arr)) {console.log('type error!')
return;
}
arr = arr.sort()
var arrry= [arr[0]];
for (var i = 1; i < arr.length; i++) {if (arr[i] !== arr[i-1]) {arrry.push(arr[i]);
}
}
return arrry;
}5. 利用 includes()
function unique(arr) {if (!Array.isArray(arr)) {console.log('type error!')
return
}
var array =[];
for(var i = 0; i < arr.length; i++) {if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
array.push(arr[i]);
}
}
return array
}6. 利用 reduce+includes
includes 判断 reduce 中的前一个数组是否存在下一个元素
function unique(arr){return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}正文完