常见数组操作(js)前端向

1. 数组插入、添加

参考链接：https://segmentfault.com/a/1190000016503330 部分方法说明参考该篇文章

1. push()

var arr = [1, 2, 3, 4, 5];
arr.push(6);
console.log(arr); // [1, 2, 3, 4, 5, 6];

2. unshift()

var arr = [1, 2, 3, 4, 5];
arr.unshift (6);
console.log(arr); // [6, 1, 2, 3, 4, 5];

3. arr[length]添加

var arr = [1, 2, 3, 4, 5];
arr[length] = 6;
console.log(arr); // [1, 2, 3, 4, 5, 6];

4. arr.splice(x, y, z)

var arr = [1, 2, 3, 4, 5];
arr.splice(5, 0, 6);
console.log(arr); // [1, 2, 3, 4, 5, 6];

5. concat()

var arr1 = [1, 2, 3, 4, 5];
var arr2 = [6,7,8,9]
var newArr = arr1.concat(arr2);
console.log(newArr); // [1, 2, 3, 4, 5, 6,7,8,9];

6. 使用 … 扩展运算符合并元素

var arr = [1, 2, 3, 4, 5];
arr = [...arr, 6];
console.log(arr); // [1, 2, 3, 4, 5, 6];
//es6的解构可以更简单的用于两个、多个数组的合并，添加插入

2. 数组删除、返回

1. length

 var arr = ["x", "y", "z"];
 arr.length = 2;
 console.log(arr[2]);  //undefined

2. delete

 var arr = [1, 2, 3, 4];
 delete arr[0]; 
 console.log(arr);   //[undefined, 2, 3, 4]
//  注意，此时虽然元素被删除，但是数组长度不变

3. pop()

var arr= ["x", "y", "z"];
var item = arr.pop();
console.log(item);      //"z"
console.log(arr.length);    //2

//  pop()直接将数组最后元素推出栈，此时数组长度有变化

4. shift()

 var arr= ["x", "y", "z"];
 var item = arr.shift();
 console.log(item);      //"red"
 console.log(colors.length);    //2

5. splice()

 var arr= ["x", "y", "z"];
 var item = arr.splice(0, 1);
 console.log(item);      //"x"
 console.log(arr);    //["y", "z"]

6. 迭代和过滤

//  两者本质一样，都是对数组进行条件操作，迭代可以对数组遍历从而对元素进行操作，过滤则也是如此
var arr= ["x", "y", "z"];
arr.forEach(function(item, index, arr) {
    if(item == "x") {
        arr.splice(index, 1);
    }
});
//["y", "z"]

arr2 = arr.filter(function(item) {
    return item != "z"
});
console.log(arr2);    //["x", "y"]

3. 其他数组操作

1. join()

var arr = [1,2,3];
console.log(arr.join());  //1,2,3
console.log(arr);  //[1, 2, 3]

2. slice 和 splice

slice

slice(start,end)：方法可从已有数组中返回选定的元素，返回一个新数组，包含从start到end（不包含该元素）的数组元素。

start参数：必须，规定从何处开始选取，如果为负数，规定从数组尾部算起的位置，-1是指最后一个元素。
end参数：可选（如果该参数没有指定，那么切分的数组包含从start倒数组结束的所有元素，如果这个参数为负数，那么规定是从数组尾部开始算起的元素）。

var arr = [1,2,3,4,5];
console.log(arr.slice(1));//[2,3,4,5]  选择序列号从1到最后的所有元素组成的新数组。
console.log(arr.slice(1,3))//[2,3]  不包含end，序列号为3的元素

slice(start,end)可以作用于字符串的切割

splice

splice()：该方法向或者从数组中添加或者删除项目，返回被删除的项目。（该方法会改变原数组）

index参数：必须，整数，规定添加或者删除的位置，使用负数，从数组尾部规定位置。
howmany参数：必须，要删除的数量，如果为0，则不删除项目。
tem1,...itemX参数：可选，向数组添加的新项目。

var arr = [1,2,3,4,5];
console.log(arr.splice(2,1,"hello"));//[3]  返回的新数组
console.log(arr);//[1, 2, "hello", 4, 5]  改变了原数组

slice 和splice区别在于一个不改变原数组(slice)一个改变了原数组(splice)
3. sort 排序

srot()如果不带参数，是将按字母顺序对数组中的元素进行排序，也就是是按照字符编码的顺序进行排序。

var arr1 = ['a', 'd', 'c', 'b'];
arr.sort();  //['a', 'b', 'c', 'd']
 
var arr2 = [10, 5, 40, 25, 100, 1];
arr2.sort(); //[1, 10 ,100, 25, 40, 5]

实现升序

arr.sort(function(a,b){
	return a - b;
})

实现降序

arr.sort(function(a,b){
	return b - a;
})

按照数组中对象的某一属性进行排序

var arr = [
    {name:'张三',age:18},
    {name:'李四',age:28},
    {name:'王五',age:38}
];
function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
    }
}
console.log(arr.sort(compare('age'))) 
//  对象年龄升序排序

还有比较不常用的乱序

arr.sort(function(a,b){
	return Math.random() - 0.5;
})

4. reverse()

reverse() 方法用于颠倒数组中元素的顺序。返回的是颠倒后的数组，会改变原数组。

var arr = [1，2,3];
console.log(arr.reverse()); //[3, 2，1]
console.log(arr);  //[3, 2，1]

5. indexOf 和 lastIndexOf

都接受两个参数：查找的值、查找起始位置
不存在，返回 -1 ；存在，返回位置。
indexOf 返回第一个匹配的index,lastIndexOf 返回最后一个

var arr = [1, 2, 3];
arr.indexOf(2); // 1
arr.indexOf(4); // -1

var arr2= [1, 2, 3, 4, 2];
arr2.lastIndexOf(2);     // 4
arr2.lastIndexOf(5);     // -1
arr2.lastIndexOf(2, 4);  // 3
arr2.lastIndexOf(2, 3);  // 0

6. every

对数组的每一项都运行给定的函数，每一项都返回 ture,则返回 true,与filter不一样的是every返回的是布尔值的结果，而filter返回的是满足给定函数条件的数组

function bigThanTen(element, index, array) {
  return element > 10;
}    
[12, 15, 18, 13, 14].every(bigThanTen);   // true

7. some

与every一样返回布尔值，两者为与或逻辑

function compare(element, index, array) {
  return element > 10;
}    
[2, 5, 8, 3, 4].some(compare);  // false
[12, 5, 8, 3, 4].some(compare); // true

8. map

map()会返回新数组
对数组的每一项都运行给定的函数

var arr = [1, 5, 10, 15];
var doubles = numbers.map(function(x) {
   return x * 2;
});
// doubles [2, 10, 20, 30]
// arr [1, 5, 10, 15]

9. forEach 数组遍历

遍历数组，对数组元素做处理

const arr = ['x', 'y', 'z'];
const copy = [];    
arr.forEach(function(item){
  copy.push(item)
});

10. find()

返回符合条件的元素
传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索。

const arr = [1, "2", 3, "2"]
console.log(arr.find(n => typeof n === "number")) // 1

11. findIndex()

返回符合条件下标
传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它的下标，终止搜索。

const arr = [1, "2", 3, "2"]
console.log(arr.findIndex(n => typeof n === "number")) // 0

12. fill()

用新元素替换掉数组内的元素，可以指定替换下标范围。
arr.fill(value, start, end)

var arr = [0, 1, 2, 3, 4, 5]
console.log(arr.fill(1, 3, 5)); //[0,1,2,1,1,5]

13. copyWithin()

选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制。也可以指定要复制的元素范围。该方法改变数组

arr.copyWithin(target, start, end)
const arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(3))
// [1,2,3,1,2] 从下标为3的元素开始，复制数组，所以4, 5被替换成1, 2

const arr2 = [1, 2, 3, 4, 5]
console.log(arr2.copyWithin(3, 0, 2)) 
//  [1,2,3,1,2]从下标3开始，替换0到2的元素，4、5被替换成1、2

注意，即使设置的元素范围大于起始位置到结束位置，依旧只会替换起始位置到最后一个元素那么多

14. from

将类似数组的对象（array-like object）和可遍历（iterable）的对象转为真正的数组

const a = ["a", "b", "c"];
Array.from(a);
// ["a", "b", "c"]

Array.from('like');
// ["l", "i", "k", "e"]

15. of

用于将一组值，转换为数组。这个方法的主要目的，是弥补数组构造函数 Array() 的不足。因为参数个数的不同，会导致 Array() 的行为有差异。

Array() // []
Array(3) // [, , ,]
Array.of(3) // [3]
Array(1, 11, 111) // [1, 11, 111]

16. entries() 返回迭代器：返回键值对

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.entries()) {
  console.log(v)
}
// [0, 'a'] [1, 'b'] [2, 'c']

//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.entries()) {
  console.log(v)
}
// ['a', 'a'] ['b', 'b'] ['c', 'c']
// new Set(['a', 'b', 'c']);为简写，key名与赋值同时可缩写为这个形式
//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.entries()) {
  console.log(v)
}
// ['a', 'a'] ['b', 'b']

17. values() 返回迭代器：返回键值对的value

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.values()) {
  console.log(v)
}
//'a' 'b' 'c'

//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.values()) {
  console.log(v)
}
// 'a' 'b' 'c'

//Map
const arr = new Map();
arr.set('a', 'A');
arr.set('b', 'B');
for(let v of arr.values()) {
  console.log(v)
}
// 'A' 'B'

18. keys() 返回迭代器：返回键值对的key

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.keys()) {
  console.log(v)
}
// 0 1 2

//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.keys()) {
  console.log(v)
}
// 'a' 'b' 'c'

//Map
const arr = new Map();
arr.set('A', 'a');
arr.set('B', 'b');
for(let v of arr.keys()) {
  console.log(v)
}
// 'A' 'B'

19. includes

判断数组中是否存在该元素，参数：查找的值、起始位置，可以替换 ES5 时代的 indexOf 判断方式。indexOf 判断元素是否为 NaN，会判断错误。

var a = [1, 2, 3, NaN];
a.includes(2); // true
a.includes(4); // false
console.log(a.indexOf(NaN))  // -1
console.log(a.includes(NaN))  // true

20. reduce

arr.reduce(callback,[initialValue])
/*
callback返回四个参数 ：
	1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）
initialValue ：为初始调用callback的值
*/

//如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

//数组求和
let  arr = [1, 2, 3, 4];
let sum = arr.reduce((x,y)=>x+y)
console.log( sum ); //求和，10

//计算乘积
let  arr = [1, 2, 3, 4];
let  mul = arr.reduce((x,y)=>x*y) 
console.log( mul ); //求乘积，24

//统计数组中出现相同元素次数
let arr= ['aa', 'bb', 'cc', 'dd', 'aa'];
 
let newArr= arr.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(arr); //{aa: 2, bb: 1, cc: 1, dd: 1}

//数组去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

//二维数组转化为一维数组
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

//多维数组转为一维数组
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

//对象里对象属性值操作求和
var person= [
    {
        name: '张三',
        age: 10
    },
    {
        name: '李四',
        age: 20
    },
    {
        name: '王五',
        age: 30
    }
];
 
var ageSum = person.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(ageSum ) //60