Array方法

• 改变原数组
  • 基础修改
    • shift — 删除第一个元素，返回该元素
    • pop — 删除最后一个元素，返回该元素
    • push — 向数组末添加新元素，返回长度
    • unshift — 向数组开头添加新元素，返回长度
  • 其他操作
    • copyWithin — 将数组元素复制到数组的另一个位置，覆盖现有值
    • fill — 用特定的值填充数组
    • reverse — 反转数组
    • sort — 排序数组
    • splice — 数组 删除/添加项目，并返回删除的项目
    • isArray — 判断对象是数组，返回 true 或 false
    • slice — 截取数组并返回，不改变原数组
  • 处理数组 - 不改变原数组
    • concat — 连接多个数组/元素，返回处理之后的新数组
    • slice — 切割数组，返回切割的部分
    • join — 将数组作为字符串返回，返回处理之后的字符串
    • flat — 数组扁平化
• 不改变原数组
  • 遍历数组
    • 基本遍历
      • forEach — 最单纯的遍历
      • map — 返回 return结果 组成的一个新数组
    • 查询遍历 — 不会停止
      • every — 所有 return 都为 true 就返回 true，否则返回 flase
      • filter — 返回 return 为 true 的数组
    • 查询遍历 — 返回 true 就停止
      • find — 返回第一个 reutrn 为 true 的元素
      • some — 有一个 return 结果为 true 就返回 true，否则返回 false
      • findIndex — 有一个 return 结果为 true 就返回 索引值，否则返回 -1
    • 查询数组
      • includes — 判断数组是否含有一个指定的值，返回 true 或 false
      • indexOf — 查询数组是否含有指定项目，返回其位置 或 -1
      • lastIndexOf — 从数组尾部查询数组是否含有指定项目，返回其位置 或 -1
      • reduce — 累加器，大作用

        改变原数组

        基础修改

        shift

        定义与作用：

        shift() 方法删除数组的第一个元素，并返回该元素。。 注释：shift方法会改变原数组 ，方法的返回值是被移除的项目。 注释：shift() 方法会改变原始数组。 提示：如需删除数组的最后一项，请使用 pop() 方法。

语法：array.shift()
演示代码：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const data = fruits.shift();   // Returns "Banana"
console.log(data) // 输出 Banana
console.log(fruits) // 输出  ['Orange', 'Apple', 'Mango']

pop

定义与作用：

pop() 方法移除数组的最后一个元素，并返回该元素。 注释：pop() 方法会改变数组的长度。 提示：如需删除数组的第一个元素，请使用 shift() 方法。 提示： 改变原数组

语法：array.pop()
演示代码：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const data = fruits.pop();   // Returns "Mango"
console.log(data) // 输出 Mango
console.log(fruits) // 输出  ['Banana', 'Orange', 'Apple']

push

定义与作用：

push() 方法向数组末尾添加新项目，并返回新长度。 提示：新的项目将被添加到数组的末尾。 注释：push() 方法会改变原数组 ， 返回值是改变之后数组的长度。 提示：如需在数组的开头添加项目，请使用 unshift() 方法。

语法：array.push(item1, item2, …, itemX)
参数说明：

演示代码：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
const number = fruits.push("Kiwi", "Lemon", "Pineapple");
console.log(number) // 输出 7
console.log(fruits) // 输出 ['anana', 'Orange', 'Apple', 'Mango', 'Kiwi', 'Lemon', 'Pineapple']

unshift

定于与作用：

unshift() 方法将新项添加到数组的开头，并返回新的长度。 注释：unshift() 方法会改变原数组，返回值是改变之后数组的长度。 提示：如需在数组末尾添加新项，请使用 push() 方法。

语法：array.unshift(item1, item2, …, itemX)
参数说明：

演示代码：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
const number = fruits.unshift("Kiwi", "Lemon", "Pineapple");
console.log(number) // 输出 7
console.log(fruits) // 输出 ['Kiwi', 'Lemon', 'Pineapple', 'Banana', 'Orange', 'Apple', 'Mango']

其它操作

copyWithin

定义与作用：

copyWithin() 方法将数组元素复制到数组中的另一个位置，覆盖现有值。 copyWithin() 方法永远不会向数组添加更多项。 提示：copyWithin() 方法会改变覆盖原数组。

语法：array.copyWithin(target, start, end)
参数说明：

演示代码：

let arr = [1, 2, 3, 4, 5];
arr.copyWithin(3); // 从数组复制到原数组的第三位
console.log(arr); // 输出 [1,2,3,1,2]
/*-----------------------------------------------*/
 let arr2 = [1,2,3,4,5,6,7,8];
 arr2.copyWithin(2,5); // 从数组的第五位开始 取[6,7,8] 复制到数组的第二位
 console.log(arr2); // 输出 [1, 2, 6, 7, 8, 6, 7, 8]
/*-----------------------------------------------*/
let arr2 = [1,2,3,4,5,6,7,8];
    arr2.copyWithin(2,4,6); // 从数组的第四位开始 截取到 第六位 得到[5,6] 复制到数组的第二位
    console.log(arr2); // 输出 2, 5, 6, 5, 6, 7, 8]
//  默认情况下，copyWithin()方法总是会一直复制到数组末尾，不过你还可以提供一个可选参数来限制到底有多少元素会被覆盖。这第三个参数指定了复制停止的位置（不包含该位置本身）。

fill

定义与作用：

fill() 方法用能使用特定值填充数组中的一个或多个元素。 您可以指定开始和结束填充的位置。当只是用一个参数时，该方法会用该参数的值填充整个数组。 注释：fill() 会覆盖原始数组。

语法：array.fill(value, start, end)
参数说明：

演示代码：

let arr = [1,2,3,4,5];
    arr.fill('a')
    console.log(arr) // 输出 ['a', 'a', 'a', 'a', 'a']
\*---------------------------------------------------*\
let arr = [1,2,3,4,5];
    arr.fill('a',2)
    console.log(arr) // 输出 [1, 2, 'a', 'a', 'a']
\*----------------------------------------------------*\
   let arr = [1,2,3,4,5];
   arr.fill('a',2,4)
   console.log(arr) // 输出 [1, 2, 'a', 'a', 5]

reverse

定义与作用：

reverse() 方法反转数组中元素的顺序。 注释：reverse() 方法将改变原始数组。

语法：array.reverse()
演示代码：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
console.log(fruits) // 输出 ['Mango', 'Apple', 'Orange', 'Banana']

sort

定义与作用：

sort() 方法对数组的项目进行排序。 排序顺序可以是按字母或数字，也可以是升序（向上）或降序（向下）。

默认情况下，sort() 方法将按字母和升序将值作为字符串进行排序。 这适用于字符串（”Apple” 出现在 “Banana” 之前）。但是，如果数字按字符串排序，则 “25” 大于 “100” ，因为 “2” 大于 “1”。 正因为如此，sort() 方法在对数字进行排序时会产生不正确的结果。 注释：sort() 方法会改变原始数组。

语法：array.sort(compareFunction)
参数说明:

演示代码：

let number = [23,45,62,53,32]
number.sort((a,b) => { // 数字数组 升序
    return a - b
})
console.log(number) // 输出 [23, 32, 45, 53, 62]
number.sort((a,b) =>b - a) // 数字数组 降序
console.log(number) // 输出 [62, 53, 45, 32, 23]
\*---------------------------------*\
 //按字母顺序对数组进行排序，然后反转排序项的顺序（降序）： 
 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 fruits.sort();
 console.log(fruits) // 输出 ['Apple', 'Banana', 'Mango', 'Orange']
// 降序操作 (翻转)
 fruits.reverse();
 console.log(fruits) // 输出 ['Orange', 'Mango', 'Banana', 'Apple']

splice

定义与作用

splice() 方法向/从数组添加/删除项目，并返回删除的项目。 注释：splice() 方法会改变原始数组。

语法：rray.splice(index, howmany, item1, ….., itemX)
参数说明:

演示代码：

 let number = [1,2,3,4,5,6,7,8]
 const result = number.splice(2) // 从第2个位置开始,往后删除
 console.log(number) // 输出 [1, 2]
 console.log(result) // 输出 [3, 4, 5, 6, 7, 8]
\*---------------------------------*\
 let number = [1,2,3,4,5,6,7,8]
 const result = number.splice(2,2) // 从第2个位置开始,删除两个元素
 console.log(number) // 输出 [1, 2, 5, 6, 7, 8]
 console.log(result) // 输出 [4, 5, 6, 7, 8]
\*---------------------------------*\
let number = [1,2,3,4,5,6,7,8]
const result = number.splice(2,2,520,1314,1212) // 从第2个位置开始,删除两个元素,并从第二个元素插入520,1314,1212三个元素
console.log(number) // 输出 [1, 2, 520, 1314, 1212, 5, 6, 7, 8]
console.log(result) // 输出 [3, 4]

isArray

定义与作用：

isArray() 方法确定对象是否为数组。 如果对象是数组，则此函数返回 true，否则返回 false。

语法：Array.isArray(obj)
参数说明：

是否改变原数组： 不改变原数组
演示代码：

let arr = ['a','b','c','d','e','f']
let str = '123'
let obj = {name:'张三'}
const result = Array.isArray(arr)
console.log(result);  // 输出 true
const result1 = Array.isArray(str)
console.log(result1);  // 输出 false
const result2 = Array.isArray(obj)
console.log(result2);  // 输出 false

处理数组

concat

定义与作用：

concat() 方法用于连接两个或多个数组。 提示：concat() 方法不会更改原数组，而是返回一个新数组，其中包含已连接数组的值。

语法：array1.concat(array2, array3, …, arrayX
参数说明：

演示代码：

const array1 = [22, 3, 31, 12];
const array2 = [19, 33, 20];
const newArray = array1.concat(10, array2, 9);
console.log(array1); // [22, 3, 31, 12]
console.log(newArray); // [22, 3, 31, 12, 10, 19, 33, 20, 9]

slice

定义与作用：

slice() 方法以新的数组对象，返回数组中被选中的元素。 slice() 方法选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括end。 注释：slice() 方法不会改变原始数组。

语法：array.slice(start, end
参数说明：

演示代码：

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var myBest = fruits.slice(0,2);
    console.log(myBest) //输出['Banana','Orange']
myBest = fruits.slice(-3,-1);
   console.log(myBest) //输出['lemon','apple']

join

方法作用：

join() 方法将数组作为字符串返回。 元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。 注释：join() 方法不会改变原始数组，返回处理之后的字符串。

语法：array.join(separator)
参数说明：

演示代码：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var arr = fruits.join();
console.log(arr) // 输出 Banana,Orange,Apple,Mango
var arr1 = fruits.join(' and ');
console.log(arr1) // 输出 Banana and Orange and Apple and Mango

flat

方法作用：

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。 注释：flat() 方法不会改变原始数组。

更多方法:
语法：var newArray = arr.flat([depth])

参数说明：

演示代码：

// 1.扁平化数组，不传递参数的时候默认为一层
let arr = [1,2,[3,[4,[5]]]]
const reasut = arr.flat()
console.log(reasut)
// [1, 2, 3, [4,[5]]]
// 2.设置扁平化的深度
let arr = [1,2,[3,[4,[5]]]]
const reasut2 = arr.flat(3)
console.log(reasut2)
// [1, 2, 3, 4, 5]
// 3.当传入Infinity时，相当于扁平化最深层次的数组
let arr = [1,2,[3,[4,[5]]]]
const reasut3 = arr.flat(Infinity)
console.log(reasut3)
// [1, 2, 3, 4, 5]
// 4.当数组里面有空项的时候，会过滤掉空值
const arr2 = [1, , 2, [3]]
const reasut4 = arr2.flat()
console.log(reasut4)
// [1, 2, 3]

不改变原数组

遍历数组

forEach

定义与作用：

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。 注释：forEach() 方法不改变原数组。

语法：array.forEach(function(currentValue, index, arr), thisValue)
参数说明：

演示代码：

let sum = 0;
const array1 = [22, 3, 31, 12];
array1.forEach((v, i, a) => {
  sum += v;
});
console.log(sum); // 68

map

定义与作用：

map() 方法使用为每个数组元素调用函数的结果创建新数组。 map() 方法按顺序为数组中的每个元素调用一次提供的函数。 注释：map() 对没有值的数组元素不执行函数。 注释：map() 不会改变原始数组，返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

语法：array.map(function(currentValue, index, arr), thisValue)
参数说明：

演示代码：

function myFunction(num) {
  return num * 10;
}
var numbers = [65, 44, 12, 4];
var newArr = numbers.map(myFunction)
console.log(newArr) // 输出 [650, 440, 120, 40] 返回一个新数组

every

定义与作用：

every() 方法检查数组中的所有元素是否都通过了测试（被作为函数提供）。 every() 方法对数组中存在的每个元素执行一次函数：

• 如果找到函数返回 false 值的数组元素，every() 返回 false（并且不检查剩余值）
• 如果没有出现 false，every() 返回 true

注释：every() 不改变原始数组。

语法：array.every(function(currentValue, index, arr), thisValue)
参数说明：

演示代码：

检查 arr2 数组中的所有值是否为或超过特定数字：
let arr2 = [1,2,3,4,5,6,7,8];
const result = arr2.every((data,index,arr)=>{
    return data < 10
})
console.log(result) // 输出 true
/*----------------------------------------*/
let arr = [1,2,3,4,5,6,7,8];
function checkArr(arr){
    if(arr<10){
        return true
    }
}
const result = arr.every(checkArr)
console.log(result) // 输出 true

filter

定义与作用：

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 注释：filter() 不会改变原始数组，返回符合条件的元素数组

语法：array.filter(function(currentValue, index, arr), thisValue)
参数说明：

演示代码：

let arr = [1,2,3,4,5,6];
const arr2 = arr.filter((data,index,arr)=>{
    return data > 3
})
console.log(arr2) // 输出 [4, 5, 6]

find

定义与作用：返回数组中第一个通过测试的元素的值

find() 方法返回数组中第一个通过测试的元素的值（作为函数提供）。 find() 方法对数组中存在的每个元素执行一次函数：

• 如果找到函数返回 true 值的数组元素，则 find() 返回该数组元素的值（并且不检查剩余值）
• 否则返回 undefined

注释：find() 不会改变原始数组，返回符合条件条件的元素的值。

语法：array.find(function(currentValue, index, arr), thisValue)
参数说明：

演示代码：

let arr = [1,2,3,4,5,6];
const data = arr.find((data,index,arr)=>{
    return data > 3
})
console.log(data) // 输出 4

some

定义与作用：

some() 方法检查数组中的任何元素是否通过测试（作为函数提供）。 some() 方法对数组中存在的每个元素执行一次函数：

• 如果找到函数返回真值的数组元素，some() 返回真（并且不检查剩余值）
• 否则返回 false

注释：some() 不改变原始数组。

语法：array.some(function(currentValue, index, arr), thisValue)
参数说明:

演示代码

let arr = [23,45,62,53]
let result = arr.some((data,index)=>{
    if(data > 60){
        console.log(index) // 首个通过条件的元素的位置 2
        return true
    }
})
console.log(result) // 输出 true
let result2 = arr.some(data=>data < 20)
console.log(result2) // 输出 false

findIndex

定义与作用：返回数组中第一个通过测试的元素的索引

findIndex() 方法返回数组中通过测试的第一个元素的索引（作为函数提供）。 findIndex() 方法对数组中存在的每个元素执行一次函数：

• 如果找到函数返回 true 值的数组元素，则 findIndex() 返回该数组元素的索引（并且不检查剩余值）
• 否则返回 -1

注释：findIndex() 不会改变原始数组，返回符合条件条件的元素的索引值。

语法：array.findIndex(function(currentValue, index, arr), thisValue)
参数说明：

演示代码：

let arr = [1,2,3,4,5,6];
const data = arr.find((data,index,arr)=>{
    return data > 3
})
console.log(data) // 输出 3 (数组中元素 4 的索引值)

查询数组

includes

定义与作用：

includes() 方法用来判断一个数组是否包含一个指定的值。 如果数组包含元素，则此方法返回 true，否则返回 false。 注释：includes()不改变原数组 ， includes() 方法区分大小写。

语法：array.includes(element, start)
参数说明：

演示代码：

let arr = ['a','b','c','d']
const result = arr.includes('c')
console.log(result);  // 输出 true
\*-----------------------------*\
let arr = ['a','b','c','d']
const result = arr.includes('a',2)
console.log(result);  // 输出 false

indexOf

定义与作用：在数组中搜索指定项目，并返回其位置。 若查无项目 返回 -1
语法：array.indexOf(item, start)
定义和用法：

indexOf() 方法在数组中搜索指定项目，并返回其位置。 搜索将从指定位置开始，如果未指定开始位置，则从头开始，并在数组末尾结束搜索。 如果未找到该项目，则 indexOf() 返回 -1。 如果该项目出现多次，则 indexOf() 方法返回第一次出现的位置。 注释：第一项的位置为 0，第二项的位置为 1，依此类推。 提示： index0F()方法不改变原数组 提示：如果您想从尾到头搜索，请使用 lastIndexOf() 方法

参数说明：

演示代码：

let arr = ['a','b','c','d']
const result = arr.indexOf('c')
console.log(result);  // 输出 2
\*-----------------------------*\
let arr = ['a','b','c','d','e','f']
const result = arr.indexOf('c',2)
console.log(result);  // 输出 2
const result1= arr.indexOf('c',-2)
console.log(result1) // 输出 -1
const result2= arr.indexOf('c',-4)
console.log(result2) // 输出 2

lastIndexOf

定义与作用：方法在数组中搜索指定项目，并返回其位置。

lastIndexOf() 方法在数组中搜索指定项目，并返回其位置。 搜索将从指定位置开始，如果未指定开始位置，则从末尾开始，并在数组的开头结束搜索。 如果未找到该项目，则 lastIndexOf() 方法返回 -1。 如果要搜索的项目不止一次出现，lastIndexOf() 方法将返回最后一次出现的位置。 提示：不改变原数组 ，返回元素的位置 提示：如果要从头到尾搜索，使用 indexOf() 方法。

语法：array.lastIndexOf(item, start)
参数说明：

演示代码：

let arr = ['1','2','3','4','2']
let key = arr.lastIndexOf('2')
console.log(key)  // 输出 4
let key2  = arr.lastIndexOf('3',1)
console.log(key2) // 输出 -1

reduce

方法作用：

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 reduce() 方法将数组缩减为单个值。 reduce() 方法为数组的每个值（从左到右）执行提供的函数。 函数的返回值存储在累加器中（结果/总计）。 注释：reduce() 方法不会改变原始数组。

语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数说明：

演示代码：
1.数组求和

  // 1.数组求和
  var arr = [1,5,8,6,15,78,65,25,48,55]
  var sum = arr.reduce(function(total,currentValue){
    return total+currentValue;
  });
  console.log(sum);//306
  var eachSum = 0;
  arr.forEach(function(currentValue){
    eachSum += currentValue;
  })
  console.log(eachSum);//306

2.合并二维数组

  //2.合并二维数组
  var twoArr = [['mu','zi'],['dig','big'],['lucky','jiji']];
  var oneArr = twoArr.reduce(function(total,currentValue){
    // console.log(total)
    return total.concat(currentValue);
  })
  console.log(oneArr);//["mu", "zi", "dig", "big", "lucky", "jiji"]

3.统计一个数组中有多少个不重复的单词：

  //3.统计一个数组中有多少个不重复的单词：
  // 不用reduce时： 
  var arr = ["apple","orange","apple","orange","pear","orange"]; 
  function getWordCnt(){ 
    var obj = {}; 
    for(var i= 0, l = arr.length; i< l; i++){ 
      var item = arr[i]; 
      obj[item] = (obj[item] +1 ) || 1; 
    } 
    return obj; 
  }
  console.log(getWordCnt());//{apple: 2, orange: 3, pear: 1}
  // 用reduce时： 
  var arr = ["apple","orange","apple","orange","pear","orange"]; 
  function getWordCnt(){ 
    return arr.reduce(function(prev,next){ 
      prev[next] = (prev[next] + 1) || 1; 
      return prev; 
    },{}); 
  } 
  console.log(getWordCnt());//{apple: 2, orange: 3, pear: 1}

4. 对数组里的数据进行分类整理

let result = data.reduce((prev,next)=>{
                if(prev.hasOwnProperty(next.M_class)){ //存在这个属性
                    prev[next.M_class].push(next)
                }else{ // 不存在这个属性
                    prev[next.M_class] = []
                    prev[next.M_class].push(next)
                }
                return prev
            },{})
            return result

• data数据:

• result数据

N.对reduce的理解：
reduce(callback,initiaValue)会传入两个变量，回调函数(callback)和初始值(initiaValue)。
假设函数有个传入参数，prev和next，index和array。 Prev和next是你必须要了解的。
当没有传入初始值时，prev是从数组中第一个元素开始的，next是第二个函数。
但是当传入初始值（initiaValue）后,第一个prev将是initivalValue，next将是数组中的第一个元素。
比如：

  // 4.对reduce的理解：
  var arr = ["apple","orange"]; 
  function noPassValue(){ 
    return arr.reduce(function(prev,next){ 
      console.log("prev:",prev); 
      console.log("next:",next); 
      return prev; 
    }); 
  } 
  function passValue(){ 
    return arr.reduce(function(prev,next){ 
      console.log("prev:",prev); 
      console.log("next:",next); 
      prev[next] = 1; 
      return prev; 
    },{});
  } 
  console.log("No Additional parameter:",noPassValue()); 
  console.log("----------------"); 
  console.log("With {} as an additional parameter:",passValue()); 
  /*
  VM415673:4 prev: apple 
  VM415673:5 next: orange 
  VM415673:4 prev: apple 
  VM415673:5 next: orange 
  VM415673:19 No Additional parameter: apple 
  VM415673:20 ---------------- 
  VM415673:13 prev: {} 
  VM415673:14 next: apple 
  VM415673:13 prev: {apple: 1} 
  VM415673:14 next: orange 
  VM415673:21 With {} as an additional parameter: {apple: 1, orange: 1}
  */

其它方法

toString

定义与作用：

toString() 方法返回包含所有数组 值的字符串，以逗号分隔。

语法：array.toString()
是否改变原数组： 不改变原数组
演示代码：

let number = [1,2,3,4,5,6,7,8]
const result = number.toString()
console.log(result) // 输出1,2,3,4,5,6,7,8