创建数组的一些方法

1. 字面量方式创建

let arr = []
let arr1 = [20]
let arr2 = ['Lucy', 'Lily']

2. Array构造函数方式创建

let arr3 = new Array()
let arr4 = new Array(20) // 创建一个长度为20的数组
let arr5 = new Array('Lucy', 'Lily') // ['Lucy', 'Lily']

3. Array.of es6方法

let arr6 = Array.of(1, 2) // [1, 2]

4. Array.from es6方法
   将可迭代对象或者类数组转换为数组。
   接收三个参数：
   • arrayLike：想要转换成数组的类数组或者可迭代对象。
   • mapFn：函数，接收参数为当前要处理的元素以及索引。每个元素都会调用一次。
   • thisArg：执行mapFn时用作this的值。

function a(...args) {
    let arguments = Array.from(args)
}
console.log(a(11, 22, 'aa')) // [11, 22, 'aa']

function b(...args) {
    return Array.from(args, item => item + 1)
}
console.log(b(11, 22, 'aa')) // [12, 23, 'aa1']

const obj ={
    data: 1,
    handler(val){
        return val + this.data
    }
}
function transform(){
    return Array.from(arguments, obj.handler, obj)
}
let arr7 = transform(11, 23, 'aa') //  [12, 24, 'aa1']

判断数组的一些方法

1. instanceof

let arr1 = []
arr1 instanceof Array

2. Array.isArray

let arr2 = []
Array.isArray(arr2)

3. constructor

let arr3 = []
arr3.constructor === Array

4. Object.prototype.toString.cal()

let arr4 = []
Object.prototype.toString.call(arr4) === '[object Array]'

数组常用的一些方法

1. pop() 和 push()
   push()：向数组的末尾添加元素，可以时一项或多项，原数组改变，返回数组的长度。
   pop()：删除数组的最后一项，原数组改变，返回删除的那一项元素。当数组为空时，返回undefined。

let arr1 = ['Lucy', 'Lily', 'Tom']
let length = arr1.push('Jerry', 'Jack')
console.log(length) // 5
console.log(arr1) // ['Lucy', 'Lily', 'Tom', 'Jerry', 'Jack']

let arr2 = ['a', 'b', 'c']
let deleteItem = arr2.pop()
console.log(deleteItem) // 'c'
console.log(arr2) // ['a', 'b']

2. shift() 和 unshift()
   shift()：从数组中删除第一个元素，返回该元素的值，原数组改变。
   unshift()：将指定的元素添加到数组的开头，返回数组的新长度，原数组改变

let arr4 = ['Lucy', 'Lily', 'Tom']
let firstElement = arr4.shift()
console.log(firstElement) // 'Lucy'
console.log(arr4) // ['Lily', 'Tom']

let arr5 = ['a', 'b', 'c']
let length = arr5.unshift('e', 'f')
console.log(length) // 5
console.log(arr5) // ['e', 'f', 'a', 'b', 'c']

3. join()
   join()：将数组的所有元素以指定的拼接符连接成字符串，默认“ , ”，返回拼接后的字符串，原数组不变。

let arr6 = ['Lucy', 'Lily', 'Tom']
arr6.join() // 'Lucy,Lily,Tom'
arr6.join('') // 'LucyLilyTom'
arr6.join('-') // 'Lucy-Lily-Tom'
console.log(arr6) // ['Lucy', 'Lily', 'Tom']

       join()还可以实现创建重复字符串。

function repeatString(n, str){
    return new Array(n+1).join(str)
}
repeatString(3, 'abc') // 'abcabcabc'

4. slice()
   slice()：由起始位置到结束位置截取原数组的浅拷贝 [start， end) ，返回截取的新数组对象，原数组不变。

let arr7 = ['Lucy', 'Lily', 'Tom', 'Jack', 'Tim']
console.log(arr7.slice(2)) //  ['Tom', 'Jack', 'Tim']
console.log(arr7.slice(2, 4)) // ['Tom', 'Jack']
console.log(arr7.slice(1, -2)) // ['Lily', 'Tom']
console.log(arr7.slice(-4, -2)) // ['Lily', 'Tom']
console.log(arr7) // ['Lucy', 'Lily', 'Tom', 'Jack', 'Tim']

let animals = ['fff', {a: [1,2,3]}, 'gg', 'aaa']
let newAnimals = animals.slice(1, 2)
console.log(newAnimals) // [{a: [1,2,3]}]
newAnimals[0].a = '12'
console.log(newAnimals) // [{a: '12'}]
console.log(animals) // ['fff', {a: '12'}, 'gg', 'aaa']

5. splice()
   splice()：删除或者替换原来数组元素，从索引开始，删除几个，替换的数组三个参数，返回删除的数组，原数组改变。

let arr8 = ['Lucy', 'Lily', 'Tom', 'Jack', 'Tim']
let deleteElement = arr8.splice(2, 1, 'Magic')
console.log(deleteElement) // ['Tom']
console.log(arr8) // ['Lucy', 'Lily', 'Magic', 'Jack', 'Tim']

let arr9 = ['Lucy', 'Lily', 'Tom', 'Jack', 'Tim']
console.log(arr9.splice(0, 3)) // ['Lucy', 'Lily', 'Tom']
console.log(arr9) // ['Jack', 'Tim']

let arr10 = ['Lucy', 'Lily', 'Tom', 'Jack', 'Tim']
console.log(arr10.splice(1, 0, 'Magic', 'Berry')) // []
console.log(arr10) //  ['Lucy', 'Magic', 'Berry', 'Lily', 'Tom', 'Jack', 'Tim']

6. concat()
   concat()：合并两个或多个数组，返回合并后的新数组，其中包含的原数组为浅拷贝，原数组不变。

let arr11 = ['a', 'b', 'c']
console.log(arr11.concat(['d'])) // ['a', 'b', 'c', 'd']
console.log(arr11.concat(['f'], ['e'])) // ['a', 'b', 'c', 'f', 'e']

7. reverse()
   reverse()：就地反转数组中的元素，返回同一数组的引用，原数组改变。

let arr12 = ['a', 'b', 'c']
console.log(arr12.reverse()) // ['c', 'b', 'a']
console.log(arr12) // ['c', 'b', 'a']

let numbers = [1, 2, 3, 4, 5]
let reversed = numbers.reverse() //  [5, 4, 3, 2, 1]
reversed[0] = 'a' // 'a'
console.log(numbers[0]) 'a'

let numbers = [1, 2, 3, 4, 5]
let reversed = [...numbers].reverse() // [5, 4, 3, 2, 1]
reversed[0] = 'a' // 'a'
console.log(numbers[0]) // 1
console.log(reversed) // ['a', 4, 3, 2, 1]
console.log(numbers) // [1, 2, 3, 4, 5] 

8. sort()
   sort()：就地对数组的元素进行排序，返回相同数组的引用，原数组改变。

let arr13 = [1, 30, 40, 21, 10000]
console.log(arr13.sort()) // [1, 10000, 21, 30, 40]
console.log(arr13) // [1, 10000, 21, 30, 40]
console.log(arr13.sort((a, b) => a - b)) // [1, 21, 30, 40, 10000]
console.log(arr13.sort((a, b) => b - a)) // [10000, 40, 30, 21, 1]

9. indexOf() 和 lastIndexOf()
   indexOf()：返回数组中第一次出现给定元素的下标，参数：要查找的元素和开始搜索的索引，如果不存在返回-1。
   lastIndexOf()：返回数组中给定元素最后一次出现的索引，参数：要查找的元素和开始搜索的索引，如果不存在返回-1。

let arr14 = ['a', 'b', 'c', 'b', 'e', 'b']
console.log(arr14.indexOf('b')) // 1
console.log(arr14.indexOf('b', 2)) // 3
console.log(arr14.lastIndexOf('b')) // 5
console.log(arr14.lastIndexOf('b', 2)) // 1

10. toLocalString() 和 toString()
    toLocalString()：返回一个字符串，表示数组中的所有元素。第一个参数表示 带有 BCP 47 语言标签的字符串，第二个参数 一个具有配置属性的对象。
    toString()：返回一个字符串，表示指定的数组及其元素。

let arr15 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')]
let localeString = array1.toLocaleString('en', { timeZone: 'UTC' })
console.log(localeString) // "1,a,12/21/1997, 2:12:00 PM"
console.log(arr15); // [1, "a", Sun Dec 21 1997 22:12:00 GMT+0800 (中国标准时间)]

const prices = ["￥7", 500, 8123, 12];
prices.toLocaleString("ja-JP", { style: "currency", currency: "JPY" }); // '￥7,￥500,￥8,123,￥12'
console.log(prices) // ["￥7", 500, 8123, 12]

let arr16 = [22, 1, 'a', 'b']
arr16.toString() // '22,1,a,b'
console.log(arr16) // [22, 1, 'a', 'b']

11. map()
    map()：创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
    参数：回调函数（当前元素，索引，数组），以及执行callbackFn时用作this的值。

let arr17 = [1, 2, 3, 4]
const map1 = arr17.map(item => item + 1)
console.log(map1) // [2, 3, 4, 5]
console.log(arr17) //  [1, 2, 3, 4]

const kvArray = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
  { key: 3, value: 30 },
];
const reformattedArray = kvArray.map(({ key, value }) => ({ [key]: value }));
console.log(reformattedArray) // [{ 1: 10 }, { 2: 20 }, { 3: 30 }]
console.log(kvArray)  // [{ key: 1, value: 10 },{ key: 2, value: 20 },{ key: 3, value: 30 }]

12. forEach()
    forEach()：数组的每个元素执行一次给定的函数。
    参数：回调函数（当前元素，索引，数组），以及执行callbackFn时用作this的值。

let arr18 = ['a', 'b', 'c']
arr18.forEach((element) => console.log(element)) // 'a'  'b'  'c'

13. filter()
    filter()：通过方法过滤一部分元素的浅拷贝。
    参数：回调函数（当前元素，索引，数组），以及执行callbackFn时用作this的值。

let arr19 = [1, 2, 3, 4, 5, 6, 7]
let filterArray = arr19.filter(item => item > 5)
console.log(filterArray) //  [6, 7]
console.log(arr19) // [1, 2, 3, 4, 5, 6, 7]

14. reduce() 和 reduceRight()
    这两个方法都是迭代数组的每一项，最后将结果汇总为单个返回值。
    参数：回调函数（前一个值，当前值，索引，数组），以及一个初始值。
    不同的是：reduce() 从左到右遍历，reduceRight() 从右到左遍历

let arr20 = [
    [0, 1],
    [2, 3],
    [4, 5]
]
let result = arr20.reduceRight((pre, current) => pre.concat(current), ['初始值'])
console.log(result) // ['初始值', 4, 5, 2, 3, 0, 1]
let result2 = arr20.reduce((pre, current) => pre.concat(current), ['初始值'])
console.log(result2) //  ['初始值', 0, 1, 2, 3, 4, 5]

15. find() 和 findIndex()
    find()返回数组中满足方法中的第一个元素，findIndex()返回的是索引。
    参数：回调函数（当前元素，索引，数组）以及调用方法的数组。

let arr21 = [1, 2, 3, 4, 5, 6, 7]
let result = arr21.find((item, index) => {
    return item > 4
})
let result1 = arr21.findIndex((item, index) => {
    return item > 4
})
console.log(result) // 5
console.log(result1) // 4

16. includes()
    includes()：判断一个数组是否包含指定元素，包含返回true，不包含返回false。
    参数：需要查找的值，开始搜索的索引

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

17. fill()
    fill()：用固定的值从指定的位置到结束位置填充数组。返回修改后的数组，原数组改变。
    参数：填充固定值，起始位置，结束位置

let arr23 = [0, 1, 2]
console.log(arr23.fill(1)) // [1, 1, 1]
console.log(arr23.fill(2, 1, 3)) // [1, 2, 2]
console.log(arr23.fill(4, -3, -2)) // [4, 2, 2]
console.log(arr23) // [4, 2, 2]

18. every()
    every()：判断数组内所有元素是否都满足条件，返回布尔值。
    参数：回调函数（当前元素，索引，数组），以及当前调用方法的数组。

let arr23 = [1, 2, 3, 4]
let result = arr23.every((item) => {
    return item < 6
})
let result2 = arr23.every((item) => {
    return item < 3
})
console.log(result) // true
console.log(result2) // false

19. some()
    some()：判断数组内是否至少有一个满足条件，返回布尔值。
    参数：回调函数（当前元素，索引，数组），以及当前调用方法的数组。

let arr24 = [1, 2, 3, 4]
let result = arr24.some(item => {
    return item < 3
})
let result2 = arr24.some(item => {
    return item < 1
})
console.log(result) // true
console.log(result2) // false

20. flat()和flatMap()
    flat()：按照递归的深度打平数组。原数组不变， 参数：深度
    flatMap()：相当于先调用map()方法，再调用深度为1的flat()。原数组不变，参数：回调函数（当前元素，索引，数组），以及当前调用方法的数组。

let arr25 = [1, [2, [3, [4, 5]]]]
console.log(arr25.flat()) // [1, 2, [3, [4, 5]]]
console.log(arr25.flat(3)) // [1, 2, 3, 4, 5]
console.log(arr25.flat(Infinity)) // [1, 2, 3, 4, 5]

let arr26 = [1, 2, 3]
let result = arr26.flatMap(item => [item, item * 2])
console.log(result) // [1, 2, 2, 4, 3, 6]