Array 数组的使用方法 -- Javascript

i小杨

已于 2024-07-26 11:40:52 修改

阅读量426

点赞数

文章标签： javascript 前端 typescript

于 2022-09-13 17:45:18 首次发布

本文链接：https://blog.csdn.net/i_Satan/article/details/126838235

版权

Array 数组的使用方法 --Javascript

参考文章@wayne丶

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

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

2. Array.of() 返回一个由参数组成的数组

let arr4 = Array.of(1, 2, 3) //123

3. Array.from() 将数组对象转换为数组不改变原对象 ``返回新数组`

let a = { 0: '1', 1: '2', 2: '3', length: 3 } //对象
let arr5 = Array.from(a)
console.log(arr5)

let b = Array.from('hello') //字符串
console.log(b)

let arrset = Array.from(new Set('func'))
console.log(arrset)

let arrMap = Array.from(new Map().set([1, 2], [3, 4], [5, 6]))
console.log(arrMap)
//类似map方法
let thearr = Array.from([1, 2, 3], (x) => x * 2)
console.log(thearr)

4. pop() 删除数组最后一个元素（`改变原数组`）返回被删除的元素

5. shift() 删除数组的第一个元素 (`改变原数组`) 返回被删除的元素

6. push() 向末尾添加元素（`改变原数组`）返回添加后的 length

7. unshift() 向数组开头添加元素（`改变原数组`）返回添加后数组的 length

8. reverse() 反转数组 `改变原数组`

9. splice(index, num, item1, item2, …) 添加/删除/替换 `改变原数组`

> - 会将截取的数组元素,转化为一个新数组返回.

//删除元素
let arrsplice = [1, 2, 3, 4, 5, 6]
let before = arrsplice.splice(0, 3) // 删除 arrsplice 的前三个元素
console.log(before)
console.log(arrsplice) //删除后arraplice 为删除后的样子
let after = arrsplice.splice(-1, 1) //删除最后一位
console.log(after)

//添加元素
{
  let arr = [1, 2, 3, 4, 5]
  let addFromStart = arr.splice(0, 0, 7) //没有删除 并向第一位添加一个数值
  console.log(arr) //712345
  console.log(addFromStart) //[]

  let addFromEnd = arr.splice(-1, 0, 6) //从最后以为开始向前添加元素，
  console.log(arr) //7123465
  console.log(addFromEnd) //[]
}

//删除并添加 /替换
{
  let arr = [1, 2, 3, 4, 5, 6, 7]
  let addAndeDelete = arr.splice(0, 1, 100) //[1]
  console.log(arr) //[100,2,3,4,5,6,7]
}

10. sort() 数组排序 (`改变原数组`) 参数为规定排序的比较函数(非必填)

返回值是个负数(-1),从小到大排序。
返回值是个正数(1),从大到小排序。

{
  // 默认情况下，不传参数的话，默认按字母升序，若为非字符串,则先调用toString()将元素转化为字符串的 Unicode ,再进行字符串比较
  let arr = ['A', 'C', 'B', 'E', 'D']
  arr.sort()
  console.log(arr) //["A","B","C","E","D"]
}
{
  //数组的升序与降序排序
  let arr = [1, 0, 5, 4, 9, 45, 78, 6, 14, 2]
  arr.sort((a, b) => a - b)
  console.log(arr) //[0, 1, 2, 4, 5, 6, 9, 14, 45, 78]
}
{
  //按年龄排序，若年龄相同，就女士(sex属性为0) 排在男士(sex属性为1)之前
  let arr = [
    { age: 18, sex: 0 },
    { age: 19, sex: 0 },
    { age: 20, sex: 0 },
    { age: 18, sex: 1 },
    { age: 19, sex: 1 },
  ]
  arr.sort((a, b) => {
    if (a.age === b.age) {
      //若年龄相同就按性别排，女士优先
      return a.sex - b.sex
    } else {
      //年龄不相同就默认按年龄排升序
      return a.age - b.age
    }
  })
  console.log(arr)
}

11. copyWithin() 数组的指定位置复制`改变原数组`

语法：arr.copyWithin(index, start, end)
第一个参数：复制到指定目标索引位置。
第二个参数：元素复制的起始位置 (可选)
第三个参数：停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。(可选)

{
  let arr = [1, 2, 3, 4, 5, 6]
  let a = arr.copyWithin(2, 0, 3)
  console.log(arr) // [1, 2, 1, 2, 3, 6]
}

12. fill()数组的填充 `改变原数组`

语法：arr.fill(value, start, end)
value 必需。填充的值。
start 可选。开始填充位置。
end 可选。停止填充位置 (默认为 array.length)

let fillarr = Array(5).fill(9);
console.log(fillarr); // [ 9, 9, 9, 9, 9 ]
let fillarr2 = Array(6).fill("");
console.log(fillarr2); // [ '', '', '', '', '', '' ]

13. slice() 拷贝数组元素 `不改变原数组`

14. join()将数组转换为字符串`不改变原数组`

15. concat() 连接合并多个数组，返回新数组。`不改变原数组`

16. toString() 方法可把数组转换为字符串，并返回结果。`不改变原数组`

17. indexOf(`item,start(非必填)`) 查找数组中某元素的第一个索引值。`不改变原数组` 如果没有就返回-1

属于严格类型查找, 如果查找的数据类型不同, 会返回 -1

1. indexOf 查询对象在数组中的索引

如果查询的对象是数组中的对象，则返回该对象在数组中的索引索引

用字面量方式声明了一个和数组中一样的对象,则返回 -1 (可以了解一下相关引用数据类型和基本数据类型的区别 或 栈内存和堆内存相关知识)

// indexOf 查询对象在数组中的索引
let arr = [{ name: "coco" }, { name: "jack" }, { name: "iike" }];

// 情景一: 用下标获取数组中的对象,使用 indexOf 可以查到该对象在数组中的索引
let obj = arr[1];
console.log(obj);

console.log(arr.indexOf(obj)); // 1

let obj2 = arr.find((item) => item.name === "iike");
console.log(arr.indexOf(obj2)); // 2

// 情景三: 查询的 obj3 是数组中对象,但是用字面量方式声明了一个和数组中一样的对象,等于开辟了一个新的内存,则返回 -1
let obj3 = { name: "coco" };
console.log(arr.indexOf(obj3)); // -1

18. lastIndexOf(`item,start(非必填)`) 逆向查找指定元素在数组中的第一个位置。`不改变原数组`

19. includes(`item,start(非必填)`) 查找数组是否包含某个元素。`不改变原数组`,返回值是 true 或 false

20. at(index) 返回指定位置的元素

array.at(index)访问 index 参数处的元素。

index 参数是一个正整数>= 0，该方法返回该索引处的项目。
index 参数大于或等于数组长度，则与常规访问器一样，该方法返回 undefined：
index 参数是复数时，将从数组的末尾访问元素并返回。

let nameList = ["coco", "jack", "iike", "元子啊", "圆咂"];

console.log(nameList.at(0)); // coco
console.log(nameList.at(1)); // jack
console.log(nameList.at(-1)); // '圆咂'

数组的遍历方法

1. forEach(`(item,index,arr)=>{},this`) 按升序依次遍历数组中的值`(不改变原数组)`

第一个参数为回调函数,

item:数组的每一个元素

index: 每一个元素在数组中的下标.

arr: 数组本身.
第二个参数:可以修改该数组的this指向.

2. some(`(item,index,arr)=>{},this`)检测数组中是否存在满足条件的元素

返回值为 true 或 false
只要有一个元素满足条件,就会返回 true

3. every(`(item,index,arr)=>{},this`)检测数组中的元素是否全部满足条件

返回值为 true 或 false
全部满足条件,才会返回 true.

4. filter(`(item,index,arr)=>{},this`)过滤原数组，返回新数组

过滤出满足条件的元素,返回一个新数组.

- filter 过滤数组中的空值(`过滤空值`)

方法一: 使用 filter 时,回调函数传入 Boolean 实体,则返回的数组中将会将空值过滤掉.
方法二: 使用 filter 时,回调函数传入 (item) => item,则返回的数组中将会将空值过滤掉.

注: 过滤空值时,如果有 0 的情况下,同样也会被过滤掉,可以用第二种方式,添加筛选条件

// filter 过滤空值

let arr1 = [1, "", false, 2, undefined, null, 3];

console.log(arr1); // [ 1, '', false, 2, undefined, null, 3 ]

// 方法一
console.log(arr1.filter(Boolean)); // [ 1, 2, 3 ]
// 方法二
console.log(arr1.filter((item) => item)); // [ 1, 2, 3 ]

- filter 找出两个数组中的`交集`（判断数组 A 中是否包含数组 B 中的某个元素）

思路: 使用 filter 过滤数组 A ，返回数组 B 中包含(includes)的元素

// 判断 数组A 中是否包含 数组B 中的某个元素 （找出两个数组中的交际）

let ArrayA = [1, 2, 3];

let ArrayB = [6, 1];

console.log(ArrayA.filter((fItem) => ArrayB.includes(fItem))); // [1]
console.log(ArrayB.filter((fItem) => ArrayA.includes(fItem))); // [1]

- filter 找两个数组中的`差集` (找出数组 d 中数组 c 不包含的元素)

// 找两个数组的差集
let ArrayC = [1, 2, 3];

let ArrayD = [6, 1, 44, 55];

// 找出 d 中 c 不包含的元素, (c - d 的差集)
console.log(ArrayC.filter((fItem) => !ArrayD.includes(fItem))); // [ 2, 3 ]
// 找出 c 中 d 不包含的元素, (d - c 的差集)
console.log(ArrayD.filter((fItem) => !ArrayC.includes(fItem))); // [ 6, 44, 55 ]

- filter 找出两个数组中的交集`(相同的)对象`

思路: 利用 filter 找出两个数组中相同的元素, 然后利用 some 判断是否包含相同的对象

// 找出两个对象中某个属性相同的对象
let ArrayAO = [
  { name: "coco" },
  { name: "jack" },
  { name: "萍乡" },
  { name: "泰山" },
];
let ArrayBO = [
  { name: "jack" },
  { name: "iike" },
  { name: "萍乡" },
  { name: "黄山" },
];

console.log(
  ArrayAO.filter((fItem) => ArrayBO.some((bItem) => bItem.name === fItem.name))
); // [ { name: 'jack' }, { name: '萍乡' } ]

- filter 找出两个数组中的差集`(不同)的对象`

相关方法 - 参考文章@Koreyoshi·

let ArrayAO = [
  { name: "coco" },
  { name: "jack" },
  { name: "萍乡" },
  { name: "泰山" },
];
let ArrayBO = [
  { name: "jack" },
  { name: "iike" },
  { name: "萍乡" },
  { name: "黄山" },
];

// 在a中找出 ,b没有的对象

console.log(
  ArrayAO.filter((fItem) => !ArrayBO.some((bItem) => bItem.name === fItem.name))
); //   [ { name: 'coco' }, { name: '泰山' } ]

// 在b中找出 ,a没有的对象

console.log(
  ArrayBO.filter((fItem) => !ArrayAO.some((bItem) => bItem.name === fItem.name))
); // [ { name: 'iike' }, { name: '黄山' } ]

5. map(`(item,index,arr)=>{},this`) 对数组中的每一个元素都进行处理，返回新的数组`(不改变原数组)`

对数组中的每一个元素进行处理.

- map 返回的数组中包含 undefined 类型.

当我们想要获取某个数组中的某个属性时, 直接使用 map 方法,
如果某个对象中不包含该属性,则会返回 undefined 类型.

解决办法: 我们可以通过 filter 方法, 过滤掉 undefined 类型.

let aaa = [
  {
    name: "coco",
    age: 18,
  },
  {
    name: "jack",
    age: 19,
  },
  {
    address: "北京",
    name: "tom",
  },
];

console.log(aaa.map((item) => item.name)); // [ 'coco', 'jack', 'tom' ]
console.log(aaa.map((item) => item.age)); // [ 18, 19, undefined ]

// 解决办法

//  遍历aaa数组, 获取到 age 属性 (解决办法)

console.log(aaa.map((item) => item.age).filter((item) => item)); // [ 18, 19 ]

- map 将数组中 `字符串类型`的数字转换`数字类型`的数字

使用 map 时,回调函数传入 Number 实体,则返回的数组中元素都是数字类型.

// 数组元素 字符串类型转换数字类型

let stringArr = ["1", "2", "3"];

console.log(stringArr); // [ '1', '2', '3' ]
console.log(stringArr.map(Number)); // [ 1, 2, 3 ]

6. keys() 遍历键名 / values() 遍历键值/ entries() 遍历键值对

   {
        for(let i of ['a','b','c'].keys()){
            console.log(i)//keys()遍历下标 0 1 2
        }
        for(let item of ['a','b','c'].values()){
            console.log(item)//values()遍历值 a b c
        }
        for (let [i,item] of ['a','b','c'].entries()){
            console.log(i,item)//entries()遍历下标以及内容 
        }
    }

7. reduce(`(total, value, index, arr), init`)数组的累加器，合并成为一个值。

total(必须)：初始值，之后为上一次回调的返回值。
value(必须): 数组元素的值。
index(可选): 索引值。
arr(可选): 数组对象。
init(可选): 初始值。
返回值：累加后的值

当 reduce() 函数有第二个参数start 的时候, pre 就是这个初始值 , value 就是数组中的第一个元素.
当 reduce() 函数没有第二个参数start的时候, pre 就是数组中的第一个元素,value 就是数组中的第二个元素.

{
        let arr = [1,2,3,4,5]
        let sum = arr.reduce((total,value)=>total +value)
        console.log(sum)//15
}

// reduce 参数
reduce((pre, value, index, arr) => {}, start)
案例一：// 判断数组中一个元素出现的次数
const arr = [1, 2, 1, 1, 2, 4, 5, 7, 1]

const total = arr.reduce((total, cur) => {
  // reduce 设置了第二个参数初始值(start),所以 total 第一次就是0,之后是reduce的返回值;value 第一次就是数组中的第一个元素
  // return (total = total + (cur == target ? 1 : 0));
  return (total += cur == 1 ? 1 : 0)
}, 0)
console.log(total)

案例二：// 找出数组中最大的数
const arr2 = [1, 2, 5, 4, 8, 11, 512, 1, 54]

const max = arr2.reduce((pre, val) => {
  // reduce 没有设置 第二个参数初始值(start),所以pre就是数组中的第一个元素,val就是数组中的第二个元素
  return pre > val ? pre : val
})
console.log(max)

8. find(`(item,index,arr)=>{},this`) / findIndex(`(item,index,arr)=>{},this`) 根据条件找到数组成员

find() 在数组中找到第一个符合条件的成员(对象),并返回.(只返回一个),若不存在返回undefined;
findIndex() 在数组中找到第一个符合条件的成员(对象)的下标,并返回.(只返回一个),若不存在返回undefined;

{
        let arr= [1,2,3,4,5]
        let result = arr.find(item=>item>3)
        console.log(result)//4 第一个值
        let result1 = arr.findIndex(item=>item>3)
        console.log(result1)//3 第一个值的下标
}

9. flat(`depth`)深度遍历展开数组

depth:数组嵌套层级
可以直接传入 Infinity ,就可全部展开

{
        let arr = [1,2,[3,[4,[5]]],6]
        let one = arr.flat()
        console.log(one)//[1, 2, 3, Array(2), 6]
 
        let inf = arr.flat(Infinity)
        console.log(inf)//[1, 2, 3, 4, 5, 6]
}

– 循环跳出机制

序号	方法	break	continue	return	return true	return false	结论
1	`for循环`	成功	跳出本次循环	不合法	不合法	不合法	√
2	`Array.forEach()`	不合法	不合法	跳出本次循环	跳出本次循环	跳出本次循环	×
3	`for...in`	成功	跳出本次循环	不合法	不合法	不合法	√
4	`Array.map()`	不合法	不合法	跳出本次循环	跳出本次循环	跳出本次循环	×
5	`Array.some()`	不合法	不合法	跳出本次循环	成功	跳出本次循环	√
6	`Array.every()`	不合法	不合法	成功	跳出本次循环	成功	√
7	`Array.filter()`	不合法	不合法	跳出本次循环	跳出本次循环	跳出本次循环	×

使用 every,some 跳出循环时,需注意:

every 返回 false 时,跳出循环 (必须加 return true) 否则会出现其他问题
some 返回 true 时,跳出循环 (必须加 return false) 否则会出现其他问题

参考文章@游客17846
参考文章@想要简单的爱情想要简约的生活

// -----------------------   使用 map 方法 无法跳出循环 (只能跳出本次循环)------------------
let arrM = [1, 2, 3, 4, 5, 6];

let selectedM = [];

// 正常使用 map 无法跳出循环 (只能跳出本次循环)
arrM.map((num) => {
  if (num === 3) return false;
  selectedM.push(num);
});

console.log(selectedM); // [1, 2, 4, 5, 6]

// -----------------------   使用 forEach 方法 无法跳出循环 (只能跳出本次循环)------------------

let arrF = [1, 2, 3, 4, 5, 6];
let selectedF = [];

arrF.forEach((num) => {
  if (num === 3) return false;
  selectedF.push(num);
});

console.log(selectedF); // [1, 2, 4, 5, 6]

// -----------------------   使用 every 方法 跳出循环 ------------------

let arrE = [1, 2, 3, 4, 5, 6];

let selectedE = [];

arrE.every((num, index) => {
  if (num === 4) return false;
  selectedE.push(num);
  return true; // 注意: 一定要加 `return true`  否侧会出现bug
});

console.log(selectedE); // [1, 2, 3]
// -----------------------   使用 some 方法 无法跳出循环 ------------------
let arrS = [1, 2, 3, 4, 5, 6];

let selectedS = [];

arrS.some((num) => {
  if (num === 3) return true;
  selectedS.push(num);
  return false;
});

console.log(selectedS); // [1,2]

// -----------------------   使用 filter 方法 无法跳出循环 (只能跳出本次循环) ------------------
let arrFilter = [1, 2, 3, 4, 5, 6];

let selectedFilter = [];

arrFilter.filter((fNum) => {
  if (fNum === 3) return false;
  selectedFilter.push(fNum);
  return true;
});

console.log(selectedFilter); // [ 1, 2, 4, 5, 6 ]