JavaScript中一些有关数组的API

一、length

let arr = [1, 2, 3, 4, 5, 6, 7]

　　1. 获取数组的长度

console.log(arr.length) // 7

　　2. 通过下标修改值

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

　　3. 通过length修改数组长度

arr.length = 2
console.log(arr) // [4, 2]

　　4. 清空数组

arr.length = 0
console.log(arr) // []

　　5. 增加length的长度

arr.length = 10
console.log(arr) // [1, 2, 3, 4, 5, 6, 7, empty × 3]

二、添加删除数组的API

　　1. push();  往数组后面添加数据，( )写要新增的数据

let arr  = [1, 2, 3]
arr.push(4)
console.log(arr) // [1, 2, 3, 4]

　　2. pop(); 删除数组的最后一个数据，( )里面不需要写任何内容，一次只能删一个，删除多个重复写

let arr = [1, 2, 3]
arr.pop();
console.log(arr) // [1, 2]

　　3. unshift(); 往数组前面添加数据

let arr = [1, 2, 3]
arr.unshfit(4);
console.log(arr) // [4, 1, 2, 3]

　　4. shift();  删除数组的第一个数据

let arr = [1, 2, 3]
arr.shift()
console.log(arr) // [2, 3]

　　5. splice();  方法向/从数组中添加/删除项目，然后返回被删除的项目。 注释：该方法会改变原始数组

• splice(index,howmany,item1,.....,itemX)
• index       　　         必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
• howmany                必需。要删除的项目数量。如果设置为 0，则不会删除项目。
• item1, ..., itemX      可选。向数组添加的新项目。

let arr = [1, 2, 3]
　　 arr.splice(1, 1, 4) // 删除下表为1 删除1个 替换为 4
console.log(arr) // [1, 4, 3]
　　 arr.splice(1, 0, 5) // 在下标为1 的地方新增5
console.log(arr) // [1, 5, 4, 3]

　　6. slice(); 从已有的数组中返回选定的元素

• 　arrayObject.slice(start,end)
• 　start     必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
•    end      可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规　　               定的是从数组尾部开始算起的元素。

　　说明：该方法并不会修改原始数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。

let arr = [1, 2, 3, 4, 5]
let arr1 = arr.slice(1, 2) // 返回元素为arr数组中下标为2的元素的新数组
let arr2 = arr.slice(-2)  // 从数组尾部获取两个元素 返回新的数组
console.log(arr1) // [2]  返回新的数组
console.log(arr2) //  [4, 5]
console.log(arr)  // [1, 2, 3, 4, 5] 不会改变原始数组

三、数组的遍历（判断、查找、筛选）、调序、分合

　　1. 判断是否为数组

let arr = [1, 2, 3, 4]
let flag = Array.isArray(arr)
console.log(flag) // true

　　2. Array.from() 从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例

let str = "ananiah"
let strArr = Array.from(str) // 将字符串转化为数组
console.log(strArr) // ['a', 'n', 'a', 'n', 'i', 'a', 'h']

　　3. concat(), split() 数组的分合

let arr = [1, 2, 3, 4]
let arr1 = arr.join('-')
console.log(arr1) // "1-2-3-4"
let arr4 = arr1.split("-")
console.log(arr4) // ["1", "2", "3", "4"]
let arr2 = [5, 6, 7]
let arr3 = arr.concat(arr2)
console.log(arr3) // [1, 2, 3, 4, 5, 6, 7]

　　4.  reverse()  sort() 数据的调序   注意：sort()会改变原始数组 

let arr = [1, 2, 3, 4]
let arr1 = arr.reverse() // 反转数组顺序
console.log(arr1) //[4, 3, 2, 1]

let arr2 = arr1.sort()  排序
console.log(arr2) // [1, 2, 3, 4]
// sort() 升序
arr.sort(function(a,b){return a-b});  // [1, 2, 3, 4]
// sort() 降序
arr.sort(function(a,b){return b-a});  // [4, 3, 2, 1]

　　5. 遍历

let arr = [1, 2, 3, 4]
// map
arr.map((item, i) => console.log(item, i))

// every,some,includes 判断  是否有满足条件的元素，返回boolean值

/**
* every() 方法用于检测数组所有元素是否都符合指定条件 
* 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余* 的元素不会再进行检测。
* 如果所有元素都满足条件，则返回 true。
*/
let a = arr.every(x=>x>3); // false 

/**
* some() 方法用于检测数组中的元素是否满足指定条件
* 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检* 测。
* 如果没有满足条件的元素，则返回false
*/
let a = arr.some(x=>x>3);  // true

/**
* includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 * * true，否则false
*
*/
let a = arr.includes(2)    // true

// filter 筛选 返回满足条件的所有元素组成的一个新数组
let a = arr.filter(x=> x > 3) // [4]

// find  查找 返回通过满足条件的第一个元素的值
let a =  arr.find(x=> x > 3);   // 4

// indexOf 查找，该方法既可操作数组，也可操作字符串
//返回-1时代表没有此项;  返回非负数时 代表当前元素(或元素首位)在原数组(或原字符串)中所处的位数
let a = arr.indexOf(2); // 1
if(a > -1) {
    // do something
}

会改变原数组的：  reverse,  sort,  splice

不会改变原数组的: slice,  indexOf,  join,  concat, every,  some,includes,  filter,  find,    fill,  reduce, forEach,map

 四、数组的扁平化 将一个多维数组变为一个一维数组

　　 1. 使用flat()

const arr = [1, 2, 3, [4, [5, 6, [7, 8]]],9];
// 方法一  使用flat()
console.log(arr.flat(Infinity)) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

　　2. 正则

let arr1 = JSON.stringify(arr).replace(/[|]/g, '').split(',')
console.log(arr1) // ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
// 改良
let arr2 = JSON.parse('[' + JSON.stringify(arr).replace(/[|]/g, '') + ']')
console.log(arr2) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

　　3. 使用reduce

const arr3 = arr => {
      return arr.reduce((pre, cur) => {
          return pre.concat(Array.isArray(cur) ? arr3(cur) : cur)
      }, [])
    }
console.log(arr3(arr)) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

　　4.  函数递归

const arr4 = []
const Fn = arr => {
    for(let i = 0; i < arr.length; i++){
        if(Array.isArray(arr[i])){
            Fn(arr[i])
        }else{
            arr4.push(arr[i])
        }
    }
}
Fn(arr)
console.log(arr4) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

 五、数组去重

　　 1. 利用Set

// 数组去重
const numArr = [1, 2, 1, 3, 4, 4, false, true, false, 'true', {}, {}, []]

// 使用数组的Set方法
console.log(Array.from(new Set(numArr))) // [1, 2, 3, 4, false, true, "true", {…}, {…}, Array(0)]

　　 2. 两层for循环+splice

// 两层for循环+splice
    const unique1 = 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);
                    // 每删除一个树，j--保证j的值经过自加后不变。同时，len--，减少循环次数提升性能
                    len--;
                    j--;
                }
            }
        }
        return arr;
    }
    console.log(unique1(numArr)) // [1, 2, 3, 4, false, true, "true", {…}, {…}, Array(0)]

　　 3.  利用indexOf

const unique2 = arr => {
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (res.indexOf(arr[i]) === -1) res.push(arr[i]);
  }
  return res;
}

　　 4.  利用include

const unique3 = arr => {
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (!res.includes(arr[i])) res.push(arr[i]);
  }
  return res;
}

　　5.  利用filter

const unique4 = arr => {
  return arr.filter((item, index) => {
    return arr.indexOf(item) === index;
  });
}

　　6.  利用Map

const unique5 = arr => {
  const map = new Map();
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (!map.has(arr[i])) {
      map.set(arr[i], true)
      res.push(arr[i]);
    }
  }
  return res;
}

 六、类数组转化为数组

　　类数组是具有length属性，但不具有数组原型上的方法。常见的类数组有arguments、DOM操作方法返回的结果。

　　1.  Array.from

Array.from(document.querySelectorAll('div'))

　　2.  Array.prototype.slice.call()

Array.prototype.slice.call(document.querySelectorAll('div'))

　　3.  扩展运算符

[...document.querySelectorAll('div')]

　　4. 利用concat

Array.prototype.concat.apply([], document.querySelectorAll('div'));

参考大佬博客： https://juejin.cn/post/6875152247714480136#heading-13