【JavaScript】引用类型Array数组相关方法

Array数组

长度arr.length

数组解构...arr

是不是数组Array.isArray()

转换字符串

arr.toString()

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();
// Banana,Orange,Apple,Mango

另外innerHTML = fruits.toString();和
.innerHTML = fruits;是一样的效果
JavaScript 会自动将数组转换为逗号分隔的字符串

arr.join(分隔符)

arr.join() 或者 arr.join(',') 
// Banana,Orange,Apple,Mango
arr.join('') 
// Banana,Orange,Apple,Mango
arr.join('*')
// Banana*Orange*Apple*Mango

查找数组某个位置的元素

arr.at(下标)或者arr[下标]

查找数组元素的位置

.indexOf('Apple')

.lastIndexOf('Apple')

对数组进行增删

改变原数组

​ .pop() 删除数组中最后一个元素，并返回最后一个元素，数组为空，返回undefined

​ .push(element1,...) 在数组的结尾处插入一个或者多个元素，返回最新的length

​ .shift() 删除数组中第一个元素，并返回该元素，数组为空，则返回undefined

​ .unshift(element1,...) 在数组的开头插入一个或者多个元素,返回最新的length

​ arr.splice(下标，删除个数，插入元素)可以缺省三参，可以删可以加，返回删除的数组

不改变原数组

​ .cancat(element1,...) 参数1必填，可以是数组也可以是数组元素 ,返回新的数组

​ arr.toSpliced()返回更改完的数组

对数组进行更改操作

arr.with(2,'Mar') 更改元素，不改原数组

arr.fill(value，start，end) 三参，改变原数组

只写一个参数的时候，默认全部更新

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Kiwi", 2, 4);
// ["Banana", "Orange", "Kiwi", "Kiwi"]

改变原数组，返回新的数组,不会改变数组的长度

.copyWithin(2, 0) 从下标2的位置开始更换,从原数组的下标0开始copy到2的位置，直到换完

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.copyWithin(2,0);
//   ['Banana', 'Orange', 'Banana', 'Orange']

.copyWithin(2, 0, 2)从下标2的位置开始更换，copy下标0-2的数据，不包括2

const fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
fruits.copyWithin(2, 0, 2);
// ['Banana', 'Orange', 'Banana', 'Orange']

• arr.flat() 返回新的数组，不改变原数组

 二维数组改为一维数组
const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();
// [1, 2, 3, 4, 5, 6]

​ arr.flatMap(x=> [x,x*10]) 映射，创建新数组可自行设置格式元素

一维数组进行扩展
const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap(x => [x, x * 10]);
// [1, 10, 2, 20, 3, 30, 4, 40, 5, 50, 6, 60]

对数组进行截取

arr.slice(start,end?) 不改变原数组，返回截取的数组（不包括end）

数组判断是否存在

.includes('Apple')返回布尔值

注意：可以检查NaN值，与indexOf不同

arr.find(function) 返回找到的第一个满足的元素

const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

log(first)

// 25

arr.findIndex(function) 返回第一个满足条件的下标

arr.findLast(x => x>40) 从末尾开始，返回第一个满足的元素

arr.findLastIndex(同上) 从末尾开始，返回第一个满足元素的下标

every(fun)判断是否所有元素都满足条件 返回布尔值

some(fun)是否存在满足条件的

数组排序方法

• 改变原数组

  .sort(function?) 返回更改完的数组

  ​ 没有参数的时候，默认按照字母和第一个数字进行排序

  ​ 使用回调函数作为参数，对数字进行排序，.sort((a,b)=> a-b)升序，b-a降序

  ​ a传入的值为第二个数，如果为负数，则a排序在b之前，可以进行扩展操作

  ​ 进行随机排序.sort(function(){return 0.5 - Math.random()})

  ​ .reverse() 对数组进行反转，返回更改完的数组

• 不改变原数组

  .toSorted()

  toReversed()

数组对象的排序

比较对象属性中的数字
const cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}
];
    const first = cars.sort((a, b) => {
      console.log(a, b);

      return a.year - b.year;
    })
    
比较对象属性中的字符串
cars.sort(function(a, b){
  let x = a.type.toLowerCase();
  let y = b.type.toLowerCase();
  if (x < y) {return -1;}
  if (x > y) {return 1;}
  return 0;
});

数组最值

借用Math.min 和Math.max 求最值，然后借用apply改变this指向的可支持数组

Math.min.apply(null,arr)

数组迭代（遍历）方法（不改变原数组）

.forEach(function) 三参，value，index，array，没有返回值

.map(function) 返回新的数组

.filter(function) 筛选，返回新的数组

.reduce(function，初始值)四参 total（初始值/之前返回的值） value index itself 计算总和

.reduceRight()从右到左

.every(fun)判断是否所有元素都满足条件 返回布尔值

.some(fun)是否存在满足条件的

Array.from('AFD') 将可迭代对象（伪数组）转换为真数组
生成随机数组

let a = Array.from({ length: 3 }, () => Math.floor(Math.random() * 256))
    console.log(a)
//  [162, 177, 14] 随机数组

.keys()返回一个包含数组的键（索引）的迭代对象

entries() 返回二维数组，包括键值

const fruits = ["Banana", "Orange", "Apple", "Mango"];
const f = fruits.entries();

[[0, 'Banana'][1, 'Orange'] [2, 'Apple'] [3, 'Mango']]

arr.with(2,'Mar') 更改元素，不改原数组

arr.fill(value，start，end) 三参

只写一个参数的时候，默认全部更新

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Kiwi", 2, 4);
// ["Banana", "Orange", "Kiwi", "Kiwi"]