30个数组方法/数组去重/数组置空/数组方法是否影响原数组

Array.length

Array.length方法用于检测数组长度或将数组置空

    let arr = ['a','b','c']
    console.log(arr.length)// 3
    arr.length = 0
    console.log(arr)// []

Array.from()

Array.from()用于将伪数组或可迭代对象(包括arguments Array,Map,Set,String…)转换成数组对象
语法:Array.from(arrayLike, mapFn, thisArg)

返回值:一个新的数组实例

参数说明:

arrayLike	mapFn (可选参数)	thisArg(可选参数)
想要转换成数组的伪数组对象或可迭代对象	一个map方法，如果指定了该参数,新数组中的每个元素会执行该回调函数	执行回调函数 mapFn 时 this 对象，map方法里面的this指向

// 将字符串转换为数组:  
let str = 'foo'
console.log(Array.from(str)) // ['f', 'o', 'o']


// 将对象转换为数组的条件比对:
let info1 = {
    0: 'tom',
    1: '65',
    2: '男',
    3: ['jane', 'john', 'Mary'],
    'length': 4
  }
  console.log(Array.from(info1)) // ['tom', '65', '男', Array(3)]
let info2 = {
    'name': 'tom',
    'age': '65',
    'sex': '男',
    'friends': ['jane', 'john', 'Mary'],
    length: 4
  }
  console.log(Array.from(info2)) // [undefined, undefined, undefined, undefined]


// 将Set结构的数据转换为真正的数组：  
let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(set) // Set(7) {12, 45, 97, 9797, 564,...}
console.log(Array.from(set))  // (7) [12, 45, 97, 9797, 564, 134, 45642]


// 第二个参数的作用:
let arr1 = [12,45,97,9797,564,134,45642]
let set1 = new Set(arr)
console.log(Array.from(set1,item => item + 1)) // (7) [13, 46, 98, 9798, 565, 135, 45643]


// 要转换的是一个数组，则会返回一个一模一样的新数组:
let arr2 = [12,45,97,9797,564,134,45642]
console.log(Array.from(arr2)) // [12, 45, 97, 9797, 564, 134, 45642]
console.log(Array.from(arr2) === arr2) // false


// 第三个参数的作用:
 let obj = {
    '0': 1,
    '1': 5,
    '2': 6,
    length: 3
  }
  let one = {
    number(n) {
      return n + 5
    }
  }
  console.log(Array.from(obj,
    function (x) {
      return this.number(x)
    },
    one//表示function方法的this指向外界的one
  )); // (3) [6, 10, 11]

注意:

        将一个类数组对象转换为一个真正的数组，必须具备以下条件：
　　1.该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。
　　2.该类数组对象的属性名必须为数值型或字符串型的数字
　　3.该类数组对象的属性名可以加引号，也可以不加引号

Array.isArray()

Array.isArray()用于判断传递的值是否是数组

console.log(Array.isArray([])) // true
console.log(Array.isArray({})) => false

Array.of()

Array.of()创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。
任意个参数,将按顺序成为返回数组中的元素。
返回值:新的 Array 实例。

console.log(Array.of(7)) // [7]
console.log(Array(7)) // [空 ã7]
console.log(Array.of(1, 2, 3)) // [1, 2, 3]
console.log(Array(1, 2, 3)) // [1, 2, 3]

Array.of()和Array的区别:
        Array.of(7)创建一个具有单个元素7的数组,而 Array(7)创建一个长度为7的空数组（注意:这是指一个有 7 个空位 (empty) 的数组,而不是由 7 个undefined组成的数组）,Array方法只有当参数个数不少于2个时，Array()才会返回由参数组成的新数组。参数个数只有一个时，实际上是指定数组的长度。

Array.concat()

 Array.concat()方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

//合并数组:  
let a1 = ['a', 'b', 'c']
let a2 = ['1', '2', '3']
let a3 = ['张三', '李四']
let a4 = a1.concat(a2, a3)
console.log(a4) // ['a', 'b', 'c', '1', '2', '3', '张三', '李四']

Array.copyWithin(target, start, end)

Array.copyWithin(target, start, end)浅复制数组的一部分到同一数组中的另一个位置,但复制后得到的数组不会超出原数组的长度
复制后，会替换掉你所书写的第一个参数的索引位置的数据，并往后延续，不改变数组长度的情况下，超出的部分将被截取
let arr = [1,2,3,4,5,6,7,8,9,10,11,12]
arr.copyWithin(8,2,5)会截取数组索引为2到4的数据替换掉数组arr[8]到arr[10]的数据
=> arr变为[1, 2, 3, 4, 5, 6, 7, 8, 3, 4, 5, 12]

参数说明:

target必需	start可选	end可选
复制到指定目标索引位置	元素复制的起始位置	停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。注：不包含最后一个索引元素

let arr = ['a','b','c','d','e']
console.log(arr.copyWithin(2,0,4)) // ['a', 'b', 'a', 'b', 'c']
// 会改变原数组
let arr = ['1','2','3','4','5']
console.log(arr.copyWithin(1,3,4)) // ['1', '4', '3', '4', '5']
console.log(arr.copyWithin(0,3,4)) // ['4', '4', '3', '4', '5']

Array.every(function(currentValue,index,arr), thisValue)

Array.every()方法用于检测数组中的所有元素是否都满足指定条件（该条件为一个函数）。
Array.every()方法会遍历数组的每一项，如果有有一项不满足条件，则表达式返回false,剩余的项将不会再执行检测；如果遍历完数组后，每一项都符合条，则返回true。

function参数说明:

        第一个参数为一个回调函数，必传，数组中的每一项都会遍历执行该函数

currentValue必需	index可选	arr可选
当前项的值	当前项的索引值	当前项所属的数组对象

        第二个参数thisValue为可选参数，回调函数中的this会指向该参数对象。

let a1 = ['30', '40', '50']
let a2 = ['32', '40', '50']
console.log(a1.every(item => item % 10 == 0)) // true
console.log(a2.every(item => item % 10 == 0)) // false
//是完全的写法的时候要写return  
let a3 = [30, 40, 50]
let a4 = ['32', '40', '50']
let res1 = a3.every(function(item,index,arr) {
  return item % 10 == 0
})
let res2 = a4.every((item,index,arr) => {
  return item % 10 == 0
})

注意：

        1.Array.every() 不会对空数组进行检测
        2.Array.every() 不会改变原始数组

Array.fill(value,start,end)

Array.fill() 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素,不包含结束索引

 返回值:数组,改变后的数组，会改变原数组

参数说明:

        

value必需	start可选	end可选
用于填充数组的值	开始填充数组的索引（默认为 0）	停止填充数组的索引（默认为 array.length）

var numbers = [1, 2, 3]
console.log(numbers.fill(1)) // [1, 1, 1]
console.log(numbers.fill(2, 0, 2)) // [2, 2, 1]
var numbers = [1, 2, 3]
console.log(numbers.fill(2, 0, 2)) // [2, 2, 3]

Array.filter(function(currentValue,index,arr), thisValue)

Array.filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意:

        1.Array.filter() 不会对空数组进行检测。
        2.Array.filter() 不会改变原始数组。

var arr = [1, 10, 20, 30]
var brr = arr.filter((item) => {
   return item > 10;
})
console.log(brr) // [20, 30]

Array.find()

Array.find()返回数组中满足提供的测试函数的第一个元素的值

let arr = [14, 23, 35, 56, 78, 97, 38]
let result = arr.find(item => item > 78)
console.log(result) // 97
function fn(element) {
  return element >= 15;
}
console.log([12, 5, 8, 130, 44].find(fn)) // 130

Array.findIndex()

Array.findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

  function fn(element) {
    return element >= 555;
  }
  console.log([12, 5, 8, 130, 44].findIndex(fn)) // -1
  let arr = [32, 34, 54, 65, 87]
  console.log(arr.findIndex(item => item > 44)) // 2

Array.forEach(currentValue,index,arr), thisValue)

Array.forEach()方法对数组的每个元素执行一次提供的函数

 var items = ['item1', 'item2', 'item3'];
 var copy = [];
 items.forEach(function (item) {
   copy.push(item)
 });
 console.log(copy) // ['item1', 'item2', 'item3']

Array.includes(查找内容)

Array.includes()用来判断一个数组是否包含一个指定的值
返回值:true/false

let a = [1, 2, 3];
console.log(a.includes(2)) // true
console.log(a.includes(4)) // false

Array.indexOf(查找内容)

Array.indexOf()返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1

let a = [2, 9, 7, 8, 9]; 
a.indexOf(2);  // 0 
a.indexOf(6);  // -1
a.indexOf(7);  // 2
a.indexOf(8);  // 3
a.indexOf(9);  // 1

Array.lastIndexOf(查找内容)

Array.lastIndexOf()返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找

let a = [1, 2, 3];
console.log(a.lastIndexOf(1)) // 0
console.log(a.lastIndexOf(4)) // -1

Array.pop()

Array.pop()从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度

let a = [1, 2, 3, 7];
console.log(a.length) // 4
console.log(a.pop()) // 7
console.log(a.length) // 3
console.log(a) // [1, 2, 3]

Array.push()

Array.push()将一个或多个元素添加到数组的末尾

let a = [1, 2, 3];
console.log(a.length) // 3
a.push(7)
console.log(a.length) // 4
console.log(a) //  [1, 2, 3, 7]

Array.shift()

Array.shift()从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度

let a = [1, 2, 3, 7];
console.log(a.length) // 4
console.log(a.shift()) // 1
console.log(a.length) // 3
console.log(a) // [2, 3, 7]

Array.unshift()

Array.unshift()将一个或多个元素添加到数组的开头,并返回新数组的长度

let a = [1, 2, 3, 7];
console.log(a.length) // 4
console.log(a.unshift(3)) // 5
console.log(a.length) // 5
console.log(a) // [3, 1, 2, 3, 7]

Array.toString()

Array.toString()返回一个字符串,表示指定的数组及其元素

let a = [1, 2, 3, 7];
console.log(a.length) // 4 
console.log(a.toString()) // 1,2,3,7

Array.join()

Array.join()将数组(或一个类数组对象)的所有元素连接到一个字符串中,  默认为 ","
返回值:一个由你的参数拼接好的字符串，不改变原数组

let a = ['Wind', 'Rain', 'Fire'];
a.join();
console.log(a) // 'Wind,Rain,Fire'

Array.reverse()

Array.reverse()方法将数组中元素的位置颠倒。
返回值:会改变原数组，返回一个颠倒顺序的数组

let a = [1, 2, 3, 7];
console.log(a.reverse()) // [7, 3, 2, 1]

Array.slice(start,end)

Array.slice(start,end)返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象，不会改变原数组，会生成一个新数组

let a = [1, 2, 3, 4, 5, 6, 7];
console.log(a.slice(0)) // [1, 2, 3, 4, 5, 6, 7]
console.log(a.slice(0,2)) //  [1, 2]

Array.some(function(currentValue,index,arr), thisValue)

Array.some(function(currentValue,index,arr), thisValue)测试数组中的某些元素是否通过由提供的函数实现的测试。返回值:true/false

const isBiggerThan10 = (element, index, array) => {
    return element > 10;
}
console.log([2, 5, 8, 1, 4].some(isBiggerThan10)) // false
let arr = [1,2,3,4,5,6]
console.log(arr.some(item => item > 5)) // true

let arr = [1,2,3,4,5,6]
console.log(arr.some((item,index,arr) => {
  return item > 4
})) // true

Array.sort()

Array.sort()对数组的元素进行排序,并返回数组。
会改变原数组

let arr = [1,2,7,4,9,5,6]
console.log(arr.sort()) // [1, 2, 4, 5, 6, 7, 9]

Array.splice(start,length,新增数据)

Array.splice(start,length,新增数据)通过删除现有元素和/或添加新元素来更改一个数组的内容
会改变原数组

let arr = [1,2,7,4,9,5,6]
console.log(arr.splice(0)) // [1, 2, 7, 4, 9, 5, 6]

let arr = [1,2,7,4,9,5,6]
console.log(arr.splice(1,5)) // [2, 7, 4, 9, 5]

let arr = [1,2,7,4,9,5,6]
console.log(arr.splice(4,1,'6')) // [9]
console.log(arr) // [1, 2, 7, 4, "6", 5, 6]

let arr = [1,2,7,4,9,5,6]
console.log(arr.splice(4,1,[1,2,3])) // [9]
console.log(arr) // [1, 2, 7, 4, Array(3), 5, 6]

Array.toLocaleString()

Array.toLocaleString()返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号",")隔开

let arr = [1, 2, 7, 4, 9, 5, 6]
var number = 1337;
var myArr = [number, arr, "foo"];
var str = myArr.toLocaleString();
console.log(str) // 1,337,1,2,7,4,9,5,6,foo
console.log(number.toLocaleString()) // 1,337

Array.map(function(currentValue,index,arr), thisValue)

Array.map(function(currentValue,index,arr), thisValue)创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

var arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
var str1 = arr.map(item => item+1)
console.log(str1) // [2, 3, 2, 3, 4, 6, 5, 6, 4, 5, 5, 5, 5]
var str2 = arr.forEach(item => item+1)
console.log(str2) // undefined

forEach和map的区别:
        1.map方法会返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
        2.forEach方法返回值则永远是undefined。
        3.forEach()执行的速度相比map慢了70%。

Array.reduce(function(currentValue,index,arr), thisValue)

Array.reduce(function(currentValue,index,arr), thisValue)累加器和数组中的每个元素(从左到右)应用一个函数
第一个参数是一个callback，用于针对数组项的操作；第二个参数则是传入的初始值

//累加:
var total = [0, 1, 2, 3].reduce(function (sum, value) {
    return sum + value;
}, 0);
console.log(total) // 6

//将二维数组转换成一维：
var a= [[0,1],[2,3],[4,5],[6,7],[8,9]];
var str = a.reduce(function(prev,cur){
	return prev.concat(cur)
})
console.log(str) // [0,1, 2, 3, 4, 5, 6, 7, 8, 9]

//数组去重:
var arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
var str = arr.sort().reduce((prev, cur)=>{
    if(prev.length===0 || prev[prev.length-1]!==cur){
        prev.push(cur);
    }
    return prev;
}, []);
console.log(str) // [1, 2, 3, 4, 5]

Array.reduceRight()

Array.reduceRight()累加器和数组中的每个元素(从右到左)应用一个函数
第一个参数是一个callback，用于针对数组项的操作；第二个参数则是传入的初始值

//累加:
var total = [0, 1, 2, 3].reduceRight(function (sum, value) {
    return sum + value;
}, 0);
console.log(total) // 6

//二维数组转换为一维数组:  
let num = [
    [0, 1], 
    [2, 3],
    [4, 5]
].reduceRight((a, b) => {
    return a.concat(b);
}, []);
console.log(num) // [4, 5, 2, 3, 0, 1]

//数组去重:
var arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
var str = arr.sort().reduceRight((prev, cur) => {
   if (prev.length === 0 || prev[prev.length - 1] !== cur) {
      prev.push(cur);
   }
   return prev;
}, []);
console.log(str) // [5, 4, 3, 2, 1]

不改变原数组的方法

• Array.every()
• Array.filter()
• Array.forEach()
• Array.indexOf()
• Array.join()
• Array.lastIndexOf()
• Array.map()
• Array.slice()
• Array.some()
• Array.reduce()
• Array.reduceRight()
• Array.concat()
• Array.toString()
• Array.toLocaleString()
• Array.isArray()
• Array.from()
• Array.of()
• Array.find()
• Array.findIndex()
• Array.includes()

改变原数组的方法

•     Array.splice()
•     Array.reverse()
•     Array.fill()
•     Array.shift()
•     Array.pop()
•     Array.push()
•     Array.unshift()
•     Array.copyWithin()
•     Array.sort()
•     Array.length()

数组去重

一、set+Array.from()
Set对象：是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即Set中的元素是唯一的。
Array.from() 方法：对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefined, undefined, NaN, NaN]
console.log(new Set(arr)) => Set(7) {1, 2, 'abc', true, false, …}
console.log(Array.from(new Set(arr))) // (7) [1, 2, 'abc', true, false, undefined, NaN]

二、利用两层循环+数组的splice方法
通过两层循环对数组元素进行逐一比较，然后通过splice方法来删除重复的元素。此方法对NaN是无法进行去重的，因为进行比较时NaN !== NaN。

function removeDuplicate(arr) {
  let len = arr.length
  for (let i = 0; i < len; i++) {
    for (let j = i + 1; j < len; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1)
        len-- // 减少循环次数提高性能
        j-- // 保证j的值自加后不变
      }
    }
  }
  return arr
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]

三、利用数组的indexOf方法
新建一个空数组，遍历需要去重的数组，将数组元素存入新数组中，存放前判断数组中是否已经含有当前元素，没有则存入。此方法也无法对NaN去重。

indexOf() 方法：返回调用它的String对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1。

function removeDuplicate(arr) {
  const newArr = []
  arr.forEach(item => {
    if (newArr.indexOf(item) === -1) {
      newArr.push(item)
    }
  })
  return newArr // 返回一个新数组
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN, NaN ]

四、利用数组的includes方法
此方法逻辑与indexOf方法去重异曲同工，只是用includes方法来判断是否包含重复元素。
includes()方法：用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。
注意：为什么includes能够检测到数组中包含NaN，其涉及到includes底层的实现。如下图为includes实现的部分代码，在进行判断是否包含某元素时会调用sameValueZero方法进行比较，如果为NaN，则会使用isNaN()进行转化。

function removeDuplicate(arr) {
  const newArr = []
  arr.forEach(item => {
    if (!newArr.includes(item)) {
      newArr.push(item)
    }
  })
  return newArr
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

五、利用数组的filter()+indexOf()
filter方法会对满足条件的元素存放到一个新数组中，结合indexOf方法进行判断。
filter() 方法：会创建一个新数组，其包含通过所提供函数实现的测试的所有元素。
这里的输出结果中不包含NaN，是因为indexOf()无法对NaN进行判断，即arr.indexOf(item) === index返回结果为false。

function removeDuplicate(arr) {
  return arr.filter((item, index) => {
    return arr.indexOf(item) === index
  })
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined ]
const testArr = [1, 'a', NaN]
console.log(testArr.indexOf(NaN)) // -1

六、利用Map()
Map对象是JavaScript提供的一种数据结构，结构为键值对形式，将数组元素作为map的键存入，然后结合has()和set()方法判断键是否重复。

Map 对象：用于保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者原始值）都可以作为一个键或一个值。
注意：使用Map()也可对NaN去重，原因是Map进行判断时认为NaN是与NaN相等的，剩下所有其它的值是根据 === 运算符的结果判断是否相等。

function removeDuplicate(arr) {
  const map = new Map()
  const newArr = []

  arr.forEach(item => {
    if (!map.has(item)) { // has()用于判断map是否包为item的属性值
      map.set(item, true) // 使用set()将item设置到map中，并设置其属性值为true
      newArr.push(item)
    }
  })
  return newArr
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

七、利用对象
其实现思想和Map()是差不多的，主要是利用了对象的属性名不可重复这一特性。

function removeDuplicate(arr) {
  const newArr = []
  const obj = {}

  arr.forEach(item => {
    if (!obj[item]) {
      newArr.push(item)
      obj[item] = true
    }
  })
  return newArr
}

const result = removeDuplicate(arr)
console.log(result) // [ 1, 2, 'abc', true, false, undefined, NaN ]

八、利用Array.reduce()方法

var arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
var str = arr.sort().reduce((prev, cur)=>{
    if(prev.length===0 || prev[prev.length-1]!==cur){
        prev.push(cur);
    }
    return prev;
}, []);
console.log(str) // [1, 2, 3, 4, 5]

九、利用Array.reduceRight()方法

var arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
var str = arr.sort().reduceRight((prev, cur) => {
   if (prev.length === 0 || prev[prev.length - 1] !== cur) {
      prev.push(cur);
   }
   return prev;
}, []);
console.log(str) // [5, 4, 3, 2, 1]

数组置空

var arr = new Array(1,2,3);
arr.length = 0;
var arr = new Array(1,2,3);
arr.splice(0, arr.length);
var arr = new Array(1,2,3);
arr = [];