js基础（一）：常用数组方法

 （0）Array.isArray()

Array.isArray() 用于确定传递的值是否是一个 数组

Array.isArray([1, 2, 3]);// true
Array.isArray({ foo: 123 });// false
Array.isArray("foobar");// false
Array.isArray(undefined);// false

 （1）map() 

map() 给原数组中的每个元素执行一次 callback 函数。每个元素执行后的返回值组合起来形成一个新数组。

• item：当前遍历到的元素
• index：当前遍历到的索引（可选）
• array：数组本身（可选）

let data = [
  { key: 1, value: 'a' },
  { key: 2, value: 'b' },
  { key: 3, value: 'c' }
]
let newArr = data.map((item, index, array) => {
  return item['value']
})
console.log(newArr);//["a", "b", "c"]
//或者简写
let newArr2 = data.map((item, index, array) => item['value'])
console.log(newArr2);//["a", "b", "c"]
// map不会改变原数组，但可以在callback执行时改变原数组
let newArr3 = data.map((item, index, array) => {
  item['key'] = item['key'] * 2
  return item
})
console.log(data)// [ {key: 2, value: "a"}, {key: 4, value: "b"},  {key: 6, value: "c"}]
console.log(newArr3)// [ {key: 2, value: "a"}, {key: 4, value: "b"},  {key: 6, value: "c"}]

（2）forEach() 

forEach()对数组的每个元素执行提供的函数，使用方法类似map()，但没有返回值。forEach方法类似于for...of语句，但无法使用break，return等结束循环。

• item：当前遍历到的元素
• index：当前遍历到的索引（可选）
• array：数组本身（可选）

let data = [
  { key: 1, value: 'a' },
  { key: 2, value: 'b' },
  { key: 3, value: 'c' }
]
let newArr = data.forEach((item, index, array) => {
  item['key'] = item['key'] * 2
})
console.log(data)//[{key: 2, value: "a"}, {key: 4, value: "b"},  {key: 6, value: "c"}]
console.log(newArr)//undefined
for (let item of data) {
  item['key'] = item['key'] * 3
  // break;
}
console.log(data);//[{key: 6, value: "a"}, {key: 12, value: "b"},  {key: 18, value: "c"}]

（3）find()

find() 方法返回数组中满足提供的第一个元素的值，否则返回 undefined，方法接收三个参数。

• item：当前遍历到的元素
• index：当前遍历到的索引（可选）
• array：数组本身（可选）

let data = [
  { key: 1, value: 'a' },
  { key: 2, value: 'b' },
  { key: 3, value: 'c' }
]
console.log(data.find(item => item['key'] == 1))// {key: 1, value: 'a'}

（4）findIndex()

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

• item：当前遍历到的元素
• index：当前遍历到的索引（可选）
• array：数组本身（可选）

let data = [
  { key: 1, value: 'a' },
  { key: 2, value: 'b' },
  { key: 3, value: 'c' }
]
console.log(data.findIndex(item => item['key'] == 1))// 0
console.log(data.findIndex(item => item['key'] == 10))// -1

 （5）filter()

 filter() 返回满足条件的新数组，否则返回空数组，方法接收三个参数。

• item：当前遍历到的元素
• index：当前遍历到的索引（可选）
• array：数组本身（可选）

let data = [
  { key: 1, value: 'a' },
  { key: 2, value: 'b' },
  { key: 3, value: 'c' }
]
console.log(data.filter(item => item['key'] > 1))// [{ 
console.log(data.filter(item => item['key'] == 0))// []

（6）some()

 some() 方法用于检测数组中的元素是否满足指定条件，如果找到符合条件的值，则立即返回true，若为空数组返回false，方法接收三个参数。

• item：当前遍历到的元素
• index：当前遍历到的索引（可选）
• array：数组本身（可选）

let data = [
  { key: 1, value: 'a' },
  { key: 2, value: 'b' },
  { key: 3, value: 'c' }
]
console.log(data.some(item => item['key'] >= 1))// true
console.log(data.some(item => item['key'] < 0))// false

（7）every()

 every() 方法用于检测数组中的元素是否全部符合指定条件，如果有任何不符合条件的值，则立即返回false，若为空数组返回true，方法接收三个参数。

• item：当前遍历到的元素
• index：当前遍历到的索引（可选）
• array：数组本身（可选）

let data = [
  { key: 1, value: 'a' },
  { key: 2, value: 'b' },
  { key: 3, value: 'c' }
]
console.log(data.every(item => item['key'] > 0))// true
console.log(data.every(item => item['key'] > 2))// false

（8）includes()

 includes() 方法用来判断一个数组是否包含一个指定的值，，如果是返回 true，否则false。方法接收二个参数。

• value：要查找的值，区分大小写
• fromIndex：（可选）从该索引处开始查找。如果fromIndex大于等于数组长度，则不查找，返回-1。若索引为负值，则从倒数位置开始升序查找，即-1从最后一个元素往后查找，-2从倒数第二个往后查找，依次类推。默认值为0.

let arr = ['a', 'b', 'c']
console.log(arr.includes('b'))// true
console.log(arr.includes('b', 5))// false
console.log(arr.includes('s'))// false

 

（9）indexOf()

 indexOf() 返回元素在数组中第一次出现时的索引，如果不存在，则返回-1。方法接收二个参数。

• value：要查找的值，区分大小写
• fromIndex：（可选）从该索引处开始查找。如果fromIndex大于等于数组长度，则不查找，返回-1。若索引为负值，则从倒数位置开始升序查找，即-1从最后一个元素往后查找，-2从倒数第二个往后查找，依次类推。默认值为0.

let arr = ['a', 'b', 'c']
console.log(arr.indexOf('b'))// 1
console.log(arr.indexOf('b', 5))// -1

（10）lastIndexOf()

 lastIndexOf() 返回元素在数组中最后一次出现时的索引，如果不存在，则返回-1。方法接收二个参数。

• value：要查找的值，区分大小写
• fromIndex：（可选）从该索引处开始往前查找。如果fromIndex大于等于数组长度，则查找全部。若索引为负值，则从倒数位置开始降序查找，即-1从最后一个元素往前查找，-2从倒数第二个往前查找，依次类推。默认值为数组长度减1

let arr = ['a', 'b', 'c']
console.log(arr.lastIndexOf('c'))// 2
console.log(arr.lastIndexOf('c', 1))// -1

（11）pop()

 pop() 从数组中删除最后一个元素，并返回该元素的值。

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

（12）push()

 push() 将一个或多个元素添加到数组的末尾，并返回该数组的新长度

let arr = ['a', 'b', 'c']
console.log(arr.push('e', 'f', 'g'))// 6
console.log(arr)// ["a", "b", "c", "e", "f", "g"]

（13）shift()

 shift() 从数组中删除第一个元素，并返回该元素的值。

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

（14）unshift()

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

let arr = ['a', 'b', 'c']
console.log(arr.unshift('1', '2', '3'))// 6
console.log(arr)// ["1", "2", "3", "a", "b", "c"]

（15）slice()

 slice() 从已有的数组中返回选定的元素，方法不改变原数组。方法可接收两个参数。

• start：选取的开始位置，负数则表示从尾部开始的位置，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
• end：选取的结束位置，如果没有指定此参数，则选取start到数组结尾的所有元素。负数则表示从尾部开始的位置，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

let arr = ['a', 'b', 'c']
console.log(arr.slice(1, 2))// ["b"]

（16）splice()

 splice() 从数组中添加/删除项目，然后返回被删除的项目。方法可接收三个参数。

• start：修改的开始位置，负数则表示从尾部开始的位置，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
• deleteCount ：要移除的数组元素的个数，如果deleteCount未指定，或者deleteCount大于等于array.length - start，则删除start之后的所有元素。如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
• item1, item2：可选，要添加进数组的元素。

let arr = ['a', 'b', 'c']
console.log(arr.splice(1, 1))// ["b"]   arr=["a", "c"]
console.log(arr.splice(1, 0, 'e'))// []   arr=["a", "e", "c"]

（17）concat()

 concat() 用于合并两个或多个数组，并返回合并后的数组。此方法不改变原数组。

let arr1 = ['a', 'b', 'c']
let arr2 = [1, 2, 3]
let arr3 = [4, 5, 6]
console.log(arr1.concat(arr2, arr3))// ["a", "b", "c", 1, 2, 3, 4, 5, 6]

（18）copyWithin()

 copyWithin() 在当前数组内部，将指定位置元素覆盖到数组的另一个位置中，并返回当前数组。方法可接收三个参数。

• target：复制元素到该位置。负数则表示从尾部开始的位置，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
• start：可选，复制元素的起始位置，如果是负数，start 将从末尾开始计算。默认值为从0开始复制
• end：可选，复制元素的结束位置（但不包括当前元素），如果为负值，表示倒数。默认值为数组长度。

let arr = ['a', 'b', 'c', 'd', 'e']
console.log(arr.copyWithin(-2))// 复制['a', 'b', 'c', 'd', 'e']到 d 位
let arr2 = [1, 2, 3]
console.log(arr2.copyWithin(0, 1, 2))// 复制[2]到 1位置 arr2=[2, 2, 3]

（19）fill()

 fill() 方法用固定值填充数组指定范围内的元素，并返回数组，方法可接收三个参数。

• value：用来填充数组元素的值。
• start：可选，开始索引，默认值为0。
• end：可选，终止索引，默认值为数组长度。

let arr = [1, 2, 3]
console.log(arr.fill(4))// [4, 4, 4]
let data = [
  { key: 1, value: 'a' },
  { key: 2, value: 'b' },
  { key: 3, value: 'c' }
]
console.log(data.fill(1, 1, 2))// [{ key: 1, value: 'a' },1, { key: 3, value: 'c' }]

（20）join()

 join() 将数组所有元素转成字符串，再连接成一个字符串

• separator：连接字符串的分隔符，默认为","。如果为空字符串，则元素之间没有任何字符

let arr = [1, 2, 3]
console.log(arr.join('~')) // 1~2~3
let arr2 = [{ 'a': 1 }, { 'b': 2 }, { 'c': 3 }]
console.log(arr2.join('~')) // [object Object]~[object Object]~[object Object]

（21）reduce()

 reduce()  为数组中的每一个元素依次执行回调函数（升序执行），返回一个具体的结果。

• function(total, currentValue, currentIndex, arr):

• 　total：初始值，或者累计器回调的返回值

• currentValue：正在处理的元素

• currentIndex：正在处理元素的索引

• arr：数组本身

• initialValue：可选，传递给函数的初始值

// 求数组的和
let arr = [1, 2, 3, 4, 5]
let res = arr.reduce((total, current, currentIndex, arr) => {
  return total + current
})
console.log(res)// 15
// 求字符串中每个字符出现的次数
let str = 'aabbccdddd'
let obj = str.split('').reduce((res, current) => {
  res[current] = res[current] ? ++res[current] : 1
  return res
}, {})
console.log(obj)// {a: 2, b: 2, c: 2, d: 4}

（22）reduceRight()

 reduceRight()  为数组中的每一个元素依次执行回调函数（降序执行），返回一个具体的结果。方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

（23）reverse()

 reverse()  方法将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组。

var sourceArray = ['a', 'b', 'c']
var reverseArray = sourceArray.reverse()
console.log(sourceArray)// ["c", "b", "a"]
console.log(reverseArray)// ["c", "b", "a"]

（24）sort()

 sort()  方法用于对数组的元素进行排序。默认排序顺序是根据字符串Unicode排序。

• sortby(a,b)：可选，必须是函数。比较函数应该具有两个值，a：第一个用于比较的元素，b：第二个用于比较的元素。
  • 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
  • 若 a 等于 b，则返回 0。
  • 若 a 大于 b，则返回一个大于 0 的值

var arr = [1, 4, 3]
console.log(arr.sort())// [1, 3, 4]
let arr2 = [
  {'name': 'a', 'value': 1},
  {'name': 'b', 'value': 3},
  {'name': 'c', 'value': 4},
  {'name': 'c', 'value': 3}
]
// a-b则为升序排序 [{name: "a", value: 1},{name: "b", value: 3},{name: "c", value: 3},{name: "c", value: 4}]
console.log(arr2.sort((a, b) => { return a['value'] - b['value'] }))
// b-a则为降序排序 [{name: "c", value: 4},{name: "c", value: 3},{name: "b", value: 3},{name: "a", value: 1}]
console.log(arr2.sort((a, b) => { return b['value'] - a['value'] }))

（23）flat()

 flat()  按照一个指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

• depth ：可选，要遍历的结构深度，默认值为1

let arr = [1, 2, [3, 4]];
console.log(arr.flat())//[1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
console.log(arr2.flat())// [1, 2, 3, 4, [5, 6]]
console.log(arr2.flat(2))// [1, 2, 3, 4, 5, 6]
var arr3 = [1, 2, [3, 4, [5, 6, [7, 8]]]];
console.log(arr3.flat(Infinity))// [1, 2, 3, 4, 5, 6, 7, 8]  Infinity表示展开任意深度的嵌套数组

（24）flatMap()

 flatMap()  方法对原数组的每个成员执行一个函数，返回一个新的数组。相当于执行map()方法，然后对返回值flat()。

let arr1 = [1, 2, 3, 4];
console.log(arr1.map(x => [x * 2]))//压缩成新数组 [[2], [4], [6], [8]]
console.log(arr1.map(x => [x * 2]).flat())// [2, 4, 6, 8]
console.log(arr1.flatMap(x => [x * 2]))// [2, 4, 6, 8]