Javascript数组常用方法

Array

1、new Set()
用来对数组进行去重。

const arr = [3,4,4,5,6,7];console.log(new Set(arr));//{3,4,5,6,7}const a = Array.from(new Set(arr)) // [3, 4, 5, 6, 7]

2、sort()
对数组元素进行排序（改变原数组）。

const arr = [3,4,4,5,6,7];console.log(arr.sort())//[3, 4, 4, 4, 5, 5, 6, 7]

3、reverse()
反转数组中的元素（改变原数组）。

const arr = [3,4,4,5,4,6,5,7];conosle.log(arr.reverse());  // [7, 6, 5, 5, 4, 4, 4, 3]

4、delete
删除一个数组成员，会形成空位，并不会影响length属性（改变原数组）,同样适用于对象。

//数组const arr = [3,4,4,5,4,6,5,7];delete arr[1];conosle.log(arr); // [3, empty, 4, 5, 4, 6, 5, 7]//对象const obj = {name: 'pboebe',age: '23',sex: '女'};delete obj.sex;console.log(obj); // {name: "pboebe", age: "23"}

5、shift（）
把数组的第一个元素从其中删除，并返回第一个元素的值（改变原数组）。

const arr = [3,4,4,5,4,6,5,7];const a = arr.shift(); // 3console.log(arr); // [empty, 4, 5, 4, 6, 5, 7]

6、unshift（）
向数组的起始处添加一个或多个元素,并返回新的长度（改变原数组）。

const arr = [3,4,4,5,4,6,5,7];const a = arr.unshift(8);console.log(a); // 9(a为返回的数组的新长度)console.log(arr); // [8, 3, 4, 4, 5, 4, 6, 5, 7]

7、push（）

在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度（改变原数组）。

const arr = [3,4,4,5,4,6,5,7];const a = arr.push(8,9);
console.log(a); // 
10(a为返回的数组的新长度)console.log(arr);
 // [3, 4, 4, 5, 4, 6, 5, 7, 8, 9]

8、valueOf（）
返回数组本身。

const arr = [3,4,4,5,4,6,5,7];console.log(arr.valueOf()); // [3,4,4,5,4,6,5,7]

9、toString（）
可把值转换成字符串。

const arr = [3,4,4,5,4,6,5,7];console.log(arr.toString()); // 3,4,4,5,4,6,5,7

10、concat（）
在原始数据尾部添加另外数据组成新数据（字符串适用）。

//数组const a = [1,2,3];const b = [4,5];const c = a.concat(b); // [1, 2, 3, 4, 5]//字符串const x = 'abc';const y = 'def';const z = x.concat(y); // abcdef

11、join（）
以参数作为分隔符，将所有参数组成一个字符串返回（一般默认逗号隔开）。

const arr = [3,4,4,5,4,6,5,7];console.log(arr.join('-')); // 3-4-4-5-4-6-5-7

12、slice（start, end）
用于提取原来数组的一部分，会返回一个提取的新数组，原数组不变（字符串适用,不包括end)。

//数组const arr = [3,4,4,5,4,6,5,7];const a = arr.slice(2, 5); // [4, 5, 4]//字符串const x = 'abcdefgh';const y = x.slice(3, 6); // def

13、splice（）
用于删除原数组的一部分，并且可以在删除的位置添加新的数组成员，返回值是被删除的数组元素。（改变原数组）

splice（t, v, s）t:被删除元素的起始位置；v：被删除元素个数；s:s以及后面的元素为被插入的新元素。

const arr = [3,4,4,5,4,6,5,7];const a = arr.splice(3, 2, 12); // [5, 4]console.log(arr); // [3, 4, 4, 12, 6, 5, 7]

14、map（）
依次遍历数组成员，根据遍历结果返回一个新数组。（map方法同样适用于字符串，但是不能直接调用，需要通过函数的call方法，间接使用，或者先将字符串川转为数组，再使用）（不会改变原始数组）。

const arr = [3,4,4,5,4,6,5,7];const a = arr.map(item => item*2;) // [6, 8, 8, 10, 8, 12, 10, 14]

15、forEach（）
跟map方法类似，遍历数组，区别是无返回值。

const arr = [3,4,4,5,4,6,5,7];arr.forEach(function(value,index,arr){console.log(value)}))

16、for in（）
跟 map 方法类似，遍历对象或者数组。

但值得注意的是 for in 循环返回的值都是数据结构的 键值名 。遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。

// 对象const obj = {a: 123, b: 12, c: 2 };for (let a in obj) {console.log(a)}// a   b   c//数组const arr = [3,4,4,5];for(let a in arr) {console.log(a)}// 0123

17、filter（）
一个过滤方法，参数是一个函数，所有的数组成员依次执行该函数，返回结果为 true 的成员组成一个新数组返回。（不会改变原始数组）。

const arr = [3,4,4,5,4,6,5,7];const a = arr.filter(item => item % 3 > 1);console.log(a); // [5, 5]

18、some（）& every（）
这两个方法类似于“断言”（ assert ），用来判断数组成员是否符合某种条件。

const arr = [3,4,4,5,4,6,5,7];
console.log( arr.some( function( item, index, array ){
console.log( 'item=' + item + ',index='+index+',array='+array );
return item > 3;}));
// item=3,index=0,array=3,4,4,5,4,6,5,7
// item=4,index=1,array=3,4,4,5,4,6,5,7
// trueconsole.log( arr.every( function( item, index, array ){
console.log( 'item=' + item + ',index='+index+',array='+array );return item > 3;}));
// item=3,index=0,array=3,4,4,5,4,6,5,7//false

some方法是只要有一个数组成员的返回值为true，则返回true，否则false；
every方法是需要每一个返回值为true，才能返回true，否则为false;

19、reduce（）
依次处理数组的每个成员，最终累计成一个值。

格式：

reduce（a, b, x, y）

a:必填，累计变量；b：必填，当前变量；x: 可选，当前位置；y:可选，原数组。

//简单用法
const arr = [3,4,4,5,4,6,5,7];
const a = arr.reduce((pre, cur) => {return pre+cur})
// 逗号写法const a = arr.reduce((pre, cur) => (sum= pre+cur, sum))console.log（a） // 38
//高级用法
（举个数组去重和数组扁平化栗子）const b = arr.reduce((pre, cur) => {if(!pre.includes(cur)) {return pre.concat(cur)    } 
else {return pre    }}, [])
// [3, 4, 5, 6, 7]const arrs = [[2,3,2], [3,4,5]]const c = arr.reduce((pre, cur) => {return pre.concat(cur)}, [])
// [2, 3, 2, 3, 4, 5]

reduce 的用法还有很多，剋各种尝试。

20、reduceRight（）
与 reduce 方法使用方式相同，区别在于 reduceRight 方法从右到左执行（例子略过）。

21、indexOf（）
返回给定元素在数组中的第一次出现的位置，如果没有则返回-1(同样适用于字符串)。

//数组const arr = [3,4,4,5,4,6,5,7];console.log(arr.indexOf(4))
 // 1console.log(arr.indexOf('4'))  // -1
 //字符串conststring = 'asdfghj';console.log(string.indexOf('a')) // 0

22、lastIndexOf（）
返回给定元素在数组中最后一次出现的位置，没有返回-1(同样适用于字符串)。

const arr = [3,4,4,5,4,6,5,7];
console.log(arr.lastIndexOf(4))// 4
(从左到右数最后出现的位置，字符串同理)

23、groupBy（）
把集合的元素按照key归类，key由传入的参数返回。

const arr = [      
{name: '小孙', age: 18, score: 60, weight: 60},         
{name: '小王', age: 19, score: 70, weight: 55},                {name: '小李', age: 18, score: 60, weight: 70},         
{name: '小刘', age: 20, score: 70, weight: 65},               
{name: '小赵', age: 18, score: 60, weight: 60},               
{name: '小钱', age: 19, score: 70, weight: 55},              
{name: '小周', age: 20, score: 60, weight: 50},        ];
 const example = (data, key) => {
 return data.reduce(function(prev, cur) { 
 (prev[cur[key]] = prev[cur[key]] || []).push(cur);
  return prev;            }, {});        };
  console.log(example(arr, 'age'));
  // object: {18: Array(3), 19: Array(2), 20: Array(2)}18:
Array(3)0: {name: "小孙", age: 18, score: 60, weight: 60}1:
 {name: "小李", age: 18, score: 60, weight: 70}2: 
 {name: "小赵", age: 18, score: 60, weight: 60}19: 
Array(2)0: {name: "小王", age: 19, score: 70, weight: 55}1: {name: "小钱", age: 19, score: 70, weight: 55}20: Array(2)0: {name: "小刘", age: 20, score: 70, weight: 65}1: 
   {name: "小周", age: 20, score: 60, weight: 50}

24、shuffle（）
用洗牌算法随机打乱一个集合。

const arr = [1,2,3,4,5,6,7,8,9,10];
const shuffle = ([...arr]) => {  let m = arr.length;  while (m) {    const i = Math.floor(Math.random() * m--);  
[arr[m], arr[i]] = [arr[i], arr[m]];  }  return arr;};console.log(shuffle(arr))// [10, 9, 7, 5, 6, 4, 1, 2, 8, 3]

25、flatten（）
简写为flat（），接收一个数组，无论这个数组里嵌套了多少个数组，flatten最后都会把其变成一个一维数组(扁平化)。

const arr = [[1,2,3],[4,5,[6,7]]];
const a = arr.flatten(3);console.log(a); // [1, 2, 3, 4, 5, 6, 7]

26、Array.isArray（）
用来判断是不是数据是不是一个数组，返回值为true或false。

const arr = [3,4,4,5,4,6,5,7];
console.log(Array.isArray(arr)) // true

27、copyWithin（）
从数组的指定位置拷贝元素到数组的另一个指定位置中。
格式：

array.copyWithin(target, start, end)const arr = [3,4,4,5,4,6,5,7];
console.log(arr.copyWithin(4,2)) // [3, 4, 4, 5, 4, 5, 4, 6]

28、find（）

返回符合传入测试（函数）条件的数组元素。

const arr = [3,4,4,5,4,6,5,7];
const a = test.find(item => item > 3);
console.log(a); //4
(find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。)
const b = test.find(item => item == 0);console.log(b); 
//undefined(如果没有符合条件的元素返回 undefined)