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则返回trueconst 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;}); // 返回10const 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()办法返回数组中合乎测试函数条件的第一个元素的索引值。否则返回-1const 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 3for (let i of arr.values()) { console.log(i);}// 111 222 333 444for (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],[]);}