【JS】数组详解

最新推荐文章于 2024-06-12 11:59:04 发布
最新推荐文章于 2024-06-12 11:59:04 发布
阅读量896 收藏 22
点赞数 19
分类专栏： 面试题 JavaScript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/owo_ovo/article/details/136947646
版权

前言

数组是js中最常用到的数据集合，它是引用数据类型的一种（其他二者为Object和Function），但其本质是Object。

一、数组的组成

数组由三部分组成，分别是索引、元素和length。

索引：用于标识元素，默认从0开始依次递增，也叫下标。

元素：存储数据的值，可以为任意数据类型，如果元素也为数组，就称为多维数组，嵌套了几层数组就是几维数组。

length：数组的长度（元素个数，即最大索引+1），当Object也定义了length且按序存储，此时这个Object就成为了可迭代对象（也叫伪数组），伪数组只是结构与数组相似，但是无法直接使用数组的方法。

二、创建数组

字面量方式（推荐）

语法： 声明变量关键字 变量名 = [元素1，元素2…]

let arr = [1,2,3]

构造函数方式

语法： 通过new关键字，实例化Array对象。

let arr = new Array(1,2,3)

注意: 如果实例化时只传入一个数字n，会创建一个长度为n的数组，该数组包含了n个empty，该数组又称为稀疏数组，即length比实际元素个数要大。

let arr = new Array(3)
console.log(arr)  // [empty × 3]

创建元素为empty的数组有什么用呢？

适用于确定数组长度的场景下，如果返回的数据长度过长，会自动忽略，若不足剩余位置仍为empty。

ES6方式

  1. Array.of()方法

    不限制参数类型，只传一个Number类型参数n时，将其看做一个数据并不会像构造函数一样创建长度为n的空数组。

    let arr1 = Array.of(1,2,3)
console.log(arr1)  // [1,2,3]

// 只传一个Number类型参数
let arr2 = Array.of(3)
console.log(arr2)  // [3]

  2. Array.from()方法

    该方法主要是将可迭代对象（伪数组）转成一个真正的数组。

    const fn = (...args) => {
  return Array.from(...args)
}
console.log(fn(1,"name"))  // [1,2]

对比几种方式

ES6的两种方式不常用，Array.of()适合将一组数据转成数组，Array.from()适合将可迭代对象（类数组、伪数组)转换为真数组。

前两种创建方式效果一致，但字面量方式书写更为方便，也是开发时最常用的。

构造函数方式可以在实例化时指定数组的长度,而字面量方式若想创建元素为empty的数组，还需创建空数组后再对数组的length进行赋值。

const arr = new Array(3)  
console.log(arr)  // [empty x 3]
      
const arr1 = []
arr1.length = 3 
console.log(arr1)  // [empty x 3]

三、稀疏数组

什么叫稀疏数组？

例如：[1,2,3,empty x 2]

定义： 如果数组的length大于实际存储的元素个数（其余元素为empty），那么该数组就为稀疏数组。

稀疏数组的作用及使用场景

作用： 初始化时固定数组长度

使用场景： 适用于确定数组长度的场景下，如果返回的数据长度过长，会自动忽略，若不足剩余位置仍为empty。

四、数组方法及分类

ES6以下

  1. concat() 合并两个数组

    返回： 合并后的数据

    不会改变原数据

    参数： 可以是数组也可以是1,2这种以,分割的形式，但建议写成数组

    注意： ES6可使用解构赋值进行拼接，故concat使用较少。

    let arr1 = [1,2,3]
let arr2 = [3,4,5]
console.log(arr1.concat(arr2))  // [1,2,3,3,4,5]
console.log(arr1.concat(1,2))  // [1,2,3,1,2]
console.log(arr1)  // [1,2,3]
console.log(arr2)  // [3,4,5]

  2. join() 将数组用分隔符拼接为字符串

    返回： 拼接后的字符串

    不会改变原数据

    参数: 用于拼接的符号，不传参默认为逗号

    若想将字符串转为数组，需使用split()

    let arr = [1,2,3]
console.log(arr.join(","))  // "1,2,3"
console.log(arr)  // [1,2,3]

  3. pop() 删除最后一位元素

    返回: 删除的元素

    会改变原数据

    let arr = [1,2,3]
console.log(arr.pop())  // 3
console.log(arr)  // [1,2]

  4. shift() 删除第一位元素

    返回： 删除的元素

    会改变原数据

    let arr = [1,2,3]
console.log(arr.shift())  // 3
console.log(arr)  // [2,3]

  5. push() 添加元素到最后一位

    返回： 操作后的数组的长度

    会改变原数据

    参数： 任意数据类型的数据

    let arr = [1,2,3]
console.log(arr.push(1))  // 4
console.log(arr)  // [1,2,3,1]

  6. unshift() 添加元素到第一位

    返回： 操作后的数组的长度

    会改变原数据

    let arr = [1,2,3]
console.log(arr.unshift(1))  // 4
console.log(arr)  // [1,1,2,3]

  7. reverse() 翻转数组

    返回： 翻转后的数组

    会改变原数据

    let arr = [1,2,3]
console.log(arr.reverse())  // [3,2,1]
console.log(arr)  // [3,2,1]

  8. sort() 数组排序

    返回： 排序后的数组

    会改变原数据

    参数： 不传参按照默认排序(Number类型按从小到大，字母符号按ASCII码排序)

    无参数：

    （1）Number类型排序

    let arr = [3,6,2]
console.log(arr.sort())  // [2,3,6]
console.log(arr)  // [2,3,6]

    （2）非Number类型排序

    • 对于非Number类型数据，会先试图将元素转为String以便比较

      let arr = ["3","6","2"]
console.log(arr.sort())  // ["2","3","6"]
console.log(arr)  // ["2","3","6"]

arr = ["!","b","%","A","a"]
console.log(arr.sort())  //  ['!', '%', 'A', 'a', 'b']
console.log(arr)  //  ['!', '%', 'A', 'a', 'b']

    • 当元素为字母时，会逐位比较，而不是根据字符串长度排序

      let arr = ["ac","abc","acb"]  
console.log(arr.sort())  // ['abc', 'ac', 'acb']
console.log(arr);  // ['abc', 'ac', 'acb']

    （3）当元素有undefined时，会将所有undefined排到最后

    let arr = [3,undefined,6,2]
console.log(arr.sort())  // [2, 3, 6, undefined]
console.log(arr)  // [2, 3, 6, undefined]

    有参数：

    ​ sort() 方法不仅按String顺序进行排序，还可以根据其他顺序执行操作。这时就必须为方法提供一个函数参数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。排序函数应该具有两个参数 a 和 b，其返回值如下。

    • 如果根据自定义评判标准，a 小于 b，在排序后的数组中 a 应该出现在 b 之前，就返回一个小于 0 的值。
    • 如果 a 等于 b，就返回 0。
    • 如果 a 大于 b，就返回一个大于 0 的值。

    (1) 从小到大排序

    function f(a,b) {  //排序函数
    return (a - b)  //返回比较参数
}
let arr = [3,1,2,4,5,7,6,8,0,9]  
arr.sort(f)  
console.log(arr)  // [0,1,2,3,4,5,6,4,7,8,9]

    (2) 从大到小排序

    function f(a,b) {  //排序函数
    return (b - a)  //返回比较参数
}
let arr = [3,1,2,4,5,7,6,8,0,9]  
arr.sort(f)  
console.log(arr)  // [9,8,7,6,5,4,3,2,1,0]

    (3) 根据奇偶数排序

    function f(a,b) {  //排序函数
    let a = a % 2  //获取参数a的奇偶性
    let b = b % 2  //获取参数b的奇偶性
    if (a == 0) return 1  //如果参数a为偶数，则排在左边
    if (b == 0) return -1  //如果参数b为偶数，则排在右边
}
let arr = [3,1,2,4,5,7,6,8,0,9]  
arr.sort(f)  
console.log(arr)  // [3,1,5,7,9,0,8,6,4,2]

    (4) 字母排序

    • 默认是区分大小写的，大写字母在ASCII码中顺序优先于小写，故排序在前。

      let arr = ["aB", "Ab", "Ba", "bA"]
arr.sort()
console.log(arr)  // ["Ab", "Ba", "aB", "bA"]

    • 大写字母总在左侧

      function f(a,b) {
    return (a < b)
}
let arr = ["aB", "Ab", "Ba", "bA"]
arr.sort()
console.log(arr)  // ["Ab", "Ba", "aB", "bA"]

    • 不区分大小写

      function f(a, b) {
    let a = a.toLowerCase
    let b = b.toLowerCase
    if (a < b) {
        return 1    // 如需调整大小写位置，返回值取反即可
    }
    else {
        return -1
    }
}
let arr = ["aB", "Ab", "Ba", "bA"]
arr.sort()
console.log(arr);  //返回数组["aB", "Ab", "Ba", "bA"]

    (5) 把浮点数和整数分开显示

    // 如需调整左右位置，返回值取反即可
function f(a, b) { 
    if (a > Math.floor(a)) return 1  //如果a是浮点数，则调换位置
    if (b > Math.floor(b)) return -1  //如果b是浮点数，则调换位置
}
let arr = [4.123, 1.23, 3, 8, 2.87, 5, 3, 7]
arr.sort(f)
console.log(arr)  // [3, 8, 5, 3, 7, 4.123, 1.23, 2.87]

  9. slice() 截取指定位置的数组

    返回： 截取到的数组

    不会改变原数据

    参数： (startIndex,endIndex) 为开始/结束处索引，startIndex必传，表示从哪个元素开始截取。

    注意： 参数可为负数，表示从最后排序的第几位

    (1) 若不传endIndex，默认会截取到最后一个元素

    let arr = [1,2,3,4,5,2,4,1]
console.log(arr.slice(3))  // [4, 5, 2, 4, 1]
console.log(arr)  // [1,2,3,4,5,2,4,1]

    (2) 正常两个参数

    let arr = [1,2,3,4,5,2,4,1]
console.log(arr.slice(0,3))  // [1, 2, 3]
console.log(arr)  // [1,2,3,4,5,2,4,1]

    (3) 当参数为负数

    let arr = [1,2,3,4,5,2,4,1]
console.log(arr.slice(-1))  // [1]
console.log(arr)  // [1,2,3,4,5,2,4,1]

// 第四个到倒数第二个
console.log(arr.slice(3,-1))  // [4, 5, 2, 4]
console.log(arr)  // [1,2,3,4,5,2,4,1]

  10. splice() 替换数组中的元素，也可以删除、添加

    返回： 删除元素组成的数组

    不一定会改变原数据，若替换数据与原先一致，数组不变。

    参数： (startIndex,num,data1,data2,…)

    ​ startIndex：索引（可为负数）

    ​ num：删除的长度

    data：可为任意数据类型

    (1) 替换

    // 变成1~8

let arr = [1,2,3,4,5,2,4,1]
// 从索引5开始删除三个元素，替换为6,7,8
console.log(arr.splice(5,3,6,7,8))  // [2, 4, 1]
console.log(arr)  // [1, 2, 3, 4, 5, 6, 7, 8]

    (2) 删除 不传data

    // 变成1~5

let arr = [1,2,3,4,5,2,4,1]
// 从索引5开始删除三个元素
console.log(arr.splice(5,3))  // [2, 4, 1]
console.log(arr)  // [1, 2, 3, 4, 5]

    (3) 添加 num为0

    // 5后面添加一个5

let arr = [1,2,3,4,5,2,4,1]
// 从索引5开始删除三个元素，替换为6,7,8
console.log(arr.splice(5,0,5))  // []
console.log(arr)  // [1, 2, 3, 4, 5, 5, 6, 7, 8]

  11. indexOf() 从索引0开始向后依次查找数组中指定元素所在的索引

    返回： 若数组中存在此元素，返回所在索引。若不存在返回-1。

    不会改变原数据

    参数： 可为任意类型

    注意： 在对比参数与数组元素时，使用的是全等操作符判断。

    let arr = [1,2,3,4,5,6]

console.log(arr.indexOf(3))  // 2
console.log(arr.indexOf(9))  // -1
console.log(arr)  // [1,2,3,4,5,6]

  12. lastIndexOf() 从索引最后一位开始向前依次查找数组中指定元素所在的索引

    返回： 若数组中存在此元素，返回所在索引。若不存在返回-1。

    不会改变原数据

    参数： 可为任意类型

    注意： 在对比参数与数组元素时，使用的是全等操作符判断。

    let arr = [1,2,3,4,5,6]

console.log(arr.lastIndexOf(3))  // 2
console.log(arr.indexOf(9))  // -1

  13. forEach() 循环遍历数组，对每一项运行给定函数

    返回： 无

    会改变原数据

    参数： 一个函数，这个函数中有三个参数，分别为item、index、arr

    ​ item: 数组中每个元素

    ​ index：索引

    ​ arr：原数组

    注意： 当item为非对象(Object,Array)时，修改不会生效

    let arr = [1,2,3,4,5,6]

arr.forEach((item,index,arr) => {
  item += 1
  console.log(index)  // 0,1,2...5
  console.log(arr)  // [1,2,3,4,5,6]
})
console.log(arr)  // [1,2,3,4,5,6]


let arr = [{id:1,name:"ts"},{id:2,name:"aa"},{id:3,name:"bb"}]

arr.forEach((item,index,arr) => {
  item.name = "田本初"
  console.log(index)  // 0,1,2
  console.log(arr)  // [1,2,3,4,5,6]
})
console.log(arr)  //

ES6+

  1. map() 遍历数组的每个元素，并对每个元素执行指定的回调函数，然后返回一个新数组，该数组包含每个回调函数的返回值。

    返回： 包含每个回调函数的返回值的新数组。

    不会改变原数据

    参数： (callback(currentValue, index, array), thisArg)

    • callback 是一个回调函数，用于处理数组的每个元素。它可以接收三个参数：
      • currentValue：当前正在处理的元素。
      • index：当前正在处理的元素的索引。
      • array：调用 map 方法的数组本身。
    • thisArg 是可选的参数，用于指定回调函数内部 this 关键字的值。
    const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map(function(num) {
  return num * num;
});

console.log(squaredNumbers); // [1, 4, 9, 16, 25]

  2. filter() 过滤数组中满足指定条件的元素并返回一个新的数组，其中包含满足条件的元素。

    返回： 符合条件的元素集合。

    不会改变原数据

    参数： (callback(element, index, array), thisArg)

    • callback：用于测试每个元素的函数，它接受三个参数：
      • element：当前正在处理的元素。
      • index（可选）：当前正在处理的元素的索引。
      • array（可选）：调用 filter() 方法的数组。
    • thisArg（可选）：执行回调函数时使用的 this 值。
    const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});

console.log(evenNumbers); // 输出 [2, 4, 6, 8, 10]

  3. reduce() 对数组中的每个元素执行指定的回调函数（称为 reducer），并将结果汇总为单个值。该方法可以用于各种累积计算，如求和、求积、拼接字符串等。

    返回： 计算结果

    不会改变原数据

    参数： (callback(accumulator, currentValue, currentIndex, array), initialValue)

    • callback：回调函数，用于每个元素执行的逻辑。它接受四个参数：
      • accumulator：累加器，累积计算的结果。
      • currentValue：当前正在处理的元素。
      • currentIndex（可选）：当前正在处理的元素的索引。
      • array（可选）：调用 reduce() 方法的数组。
    • initialValue（可选）：初始值，作为第一次调用回调函数时的累加器的初始值。如果未提供初始值，则将使用数组的第一个元素作为初始值，并且从数组的第二个元素开始调用回调函数。
    const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 输出 15

  4. every() 检测数组中的所有元素是否满足指定条件。

    返回： 如果所有元素都满足条件，则返回 true；否则返回 false。

    不会改变原数据

    参数： (callback(currentValue, index, array), thisArg)

    • callback：用于测试每个元素的函数，它接受三个参数：
      • currentValue：当前正在处理的元素。
      • index（可选）：当前正在处理的元素的索引。
      • array（可选）：调用 every() 方法的数组。
    • thisArg（可选）：执行回调函数时使用的 this 值。

    注意：

    • every() 方法遍历数组中的每个元素，并对每个元素调用回调函数进行测试。如果所有元素都通过测试（即回调函数返回 true），则 every() 方法返回 true；如果有一个元素未通过测试（即回调函数返回 false），则 every() 方法立即返回 false。
    • 如果数组为空，则 every() 方法始终返回 true。
    const numbers = [2, 4, 6, 8, 10];

const allEven = numbers.every(function(num) {
  return num % 2 === 0;
});

console.log(allEven); // 输出 true

  5. some() 检查数组中是否至少有一个元素满足指定的条件

    返回： 当数组中至少有一个元素满足条件时，才返回 true，否则返回 false。

    不会改变原数据

    参数： (callback(currentValue, index, array), thisArg)

    • callback：用于测试每个元素的函数，它接受三个参数：
      • currentValue：当前正在处理的元素。
      • index（可选）：当前正在处理的元素的索引。
      • array（可选）：调用 every() 方法的数组。
    • thisArg（可选）：执行回调函数时使用的 this 值。

    注意： 如果数组为空，则 some() 方法始终返回 false。

    const numbers = [1, 2, 3, 4, 5];

const hasEven = numbers.some(function(num) {
  return num % 2 === 0;
});

console.log(hasEven); // 输出 true，因为至少有一个元素是偶数

  6. find() 查找数组中满足指定条件的第一个元素

    返回： 它接受一个回调函数作为参数，用于定义查找条件，并返回满足条件的第一个元素，如果未找到满足条件的元素，则返回 undefined。

    不会改变原数据

    参数： (callback(element, index, array), thisArg)

    • callback：回调函数，用于测试数组中的每个元素。它接受三个参数：
      • element：当前正在处理的元素。
      • index（可选）：当前正在处理的元素的索引。
      • array（可选）：调用 find() 方法的数组。
    • thisArg（可选）：执行回调函数时使用的 this 值。

    注意： find() 方法会在数组的每个元素上调用回调函数，直到找到满足条件的元素为止。一旦找到满足条件的元素，find() 方法将立即返回该元素，并且不再继续搜索数组的剩余部分。

    const numbers = [1, 3, 5, 7, 8, 9, 10];

const firstEven = numbers.find(function(num) {
  return num % 2 === 0;
});

console.log(firstEven); // 输出 8，因为 8 是数组中的第一个偶数

  7. findIndex() 查找数组中满足指定条件的第一个元素索引

    返回： 返回满足条件的元素的索引。如果未找到满足条件的元素，则返回 -1。

    不会改变原数据

    参数： (callback(element, index, array), thisArg)

    • callback：回调函数，用于测试数组中的每个元素。它接受三个参数：
      • element：当前正在处理的元素。
      • index（可选）：当前正在处理的元素的索引。
      • array（可选）：调用 findIndex() 方法的数组。
    • thisArg（可选）：执行回调函数时使用的 this 值。

    注意： findIndex() 方法会在数组的每个元素上调用回调函数，直到找到满足条件的元素为止。一旦找到满足条件的元素，findIndex() 方法将立即返回该元素的索引，并且不再继续搜索数组的剩余部分。

    const numbers = [1, 3, 5, 7, 8, 9, 10];

const firstEvenIndex = numbers.findIndex(function(num) {
  return num % 2 === 0;
});

console.log(firstEvenIndex); // 输出 4，因为 8 是数组中的第一个偶数，索引为 4

  8. fill() 填充数组元素

    返回： 修改后的数组

    不会改变原数据

    参数： (value, start, end)

    • value：要用来填充数组的值。
    • start（可选）：起始索引（包括）。默认为 0。
    • end（可选）：结束索引（不包括）。默认为数组的长度。

    注意： 如果省略 start 和 end 参数，则 fill() 方法会用 value 填充整个数组。

    const array = [1, 2, 3, 4, 5];

// 将数组中索引为 2 到索引为 4（不包括）的元素替换为 0
array.fill(0, 2, 4);

console.log(array); // 输出 [1, 2, 0, 0, 5]

  9. keys()、 values()、 entries() 遍历数组中的索引、值或者键值对

    返回： 迭代器对象

    不会改变原数据

    三者唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

    keys()

    const array = ['a', 'b', 'c'];
const iterator = array.keys();

for (const key of iterator) {
  console.log(key); // 输出 0, 1, 2
}

    values()

    const array = ['a', 'b', 'c'];
const iterator = array.values();

for (const value of iterator) {
  console.log(value); // 输出 'a', 'b', 'c'
}

    entries()

    const array = ['a', 'b', 'c'];
const iterator = array.entries();

for (const [index, value] of iterator) {
  console.log(index, value); // 输出 0 'a', 1 'b', 2 'c'
}

静态方法

  1. Array.isArray(obj)：判断指定对象是否为数组

    返回： 布尔值

    不会改变原数据

    console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray("hello")); // false

  2. Array.from(arrayLike[, mapFn[, thisArg]])：从类数组对象或可迭代对象中创建一个新的数组实例。可选参数 mapFn 可以用于对每个元素进行映射操作。

    返回： 新数组实例

    不会改变原数据

    const str = "hello";
const arr = Array.from(str, char => char.toUpperCase());
console.log(arr); // ["H", "E", "L", "L", "O"]

  3. Array.of(element1[, element2[, …[, elementN]]])：创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

    返回： 新数组实例

    不会改变原数据

    const arr = Array.of(1, 2, 3);
console.log(arr); // [1, 2, 3]

数组方法的总结

改变原数组

pop 、 push 、 unshift 、 shift 、 splice 、 sort 、 reverse

可遍历的方法

forEach、 map、 filter、 reduce、 ervery、 some

返回新数组

concat、 slice、 map、 filter

数组相关场景

一、多维数组降维（数组扁平化）

function flattenArray(arr) {
  return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenArray(val)) : acc.concat(val), []);
}

const arr = [1, [2, 3], [[4, 5], 6]];
const res = flattenArray(arr);
console.log(res); // 输出 [1, 2, 3, 4, 5, 6]

二、数组去重

方法一：reduce（ES6）

const array = [1, 2, 2, 3, 3, 3];
const uniqueArray = array.reduce((acc, cur) => acc.includes(cur) ? acc : [...acc, cur], []);
console.log(uniqueArray); // 输出 [1, 2, 3]

方法二：filter（ES6）

const array = [1, 2, 2, 3, 3, 3];
const uniqueArray = array.filter((item, index, arr) => arr.indexOf(item) === index);
console.log(uniqueArray); // 输出 [1, 2, 3]

方法三：Set（ES6）

const array = [1, 2, 2, 3, 3, 3];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 输出 [1, 2, 3]

方法四：forEach

const array = [1, 2, 2, 3, 3, 3];
const uniqueArray = [];
array.forEach(item => {
  if (!uniqueArray.includes(item)) {
    uniqueArray.push(item);
  }
});
console.log(uniqueArray); // 输出 [1, 2, 3]

三、数组排序

sort()

四、解构赋值

可以将一个数组中的元素解构到多个变量中。

const array = [1, 2, 3];
const [a, b, c] = array;

console.log(a); // 输出 1
console.log(b); // 输出 2
console.log(c); // 输出 3

忽略某些元素：使用逗号 , 可以忽略数组中的某些元素。

const array = [1, 2, 3];
const [a, , c] = array;

console.log(a); // 输出 1
console.log(c); // 输出 3

剩余元素：使用剩余运算符 … 可以将数组中剩余的元素赋值给一个新的数组。

const array = [1, 2, 3, 4, 5];
const [a, b, ...rest] = array;

console.log(a); // 输出 1
console.log(b); // 输出 2
console.log(rest); // 输出 [3, 4, 5]

默认值：可以为解构赋值的变量设置默认值。

const array = [1];
const [a, b = 2] = array;

console.log(a); // 输出 1
console.log(b); // 输出 2，因为数组中没有第二个元素，所以使用了默认值

嵌套解构：可以对嵌套的数组进行解构赋值。

const array = [1, [2, 3], 4];
const [a, [b, c], d] = array;

console.log(a); // 输出 1
console.log(b); // 输出 2
console.log(c); // 输出 3
console.log(d); // 输出 4

五、清空数组

方法一：赋值空数组，将数组赋值为空数组 []。

let array = [1, 2, 3];
array = [];
console.log(array); // 输出 []

方法二：使用 length 属性，将数组的 length 属性设置为 0。

let array = [1, 2, 3];
array.length = 0;
console.log(array); // 输出 []

方法三：使用 splice() 方法删除数组的所有元素。

let array = [1, 2, 3];
array.splice(0, array.length);
console.log(array); // 输出 []

方法四：循环调用 pop() 方法直到数组为空。

let array = [1, 2, 3];
while (array.length) {
  array.pop();
}
console.log(array); // 输出 []
田本初
关注
  • 19
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javascript数组详解
qq_33193871的博客
10-19 284
课程大纲 数组的概念 数组的特点 数组的调用 数组的方法 二维数组 数组的概念 数组(Array)是按照一定顺序排列的一组值，每个值都拥有自己的编号，编号从0开始。整个数组用方括号来表示。 var arr=[item1,item2,item3]; item1、item2和item3是泛指，javascript中的数组元素可以是任何类型的数据。 split方法 split方法能够根据指定的符号将字符串进行分割，分割后的每一个子元素整合成一个数组返回。如果无法分割，那么返回的数组只有一个元素，这个元素
JavaScript数组详解
09-20
JavaScript 数组详解 JavaScript 数组是有序列表，是存放多个值的集合。数组的大小是可以动态调整的，每一项都可以保存任何类型的数据。 数组创建 数组可以通过 Array 构造函数创建，也可以使用数组字面量方式...
JavaScript 数组【详解】
Jin_Xiang123的博客
12-25 3408
在JavaScript中，数组是一种特殊的对象，用于存储和操作多个值。与其他编程语言不同，JavaScript的数组可以同时存储不同类型的值，并且长度是动态的，可以根据需要随时添加或删除元素。JavaScript数组使用方括号([])来表示，其中的每个元素用逗号分隔。数组中的元素可以通过索引来访问和修改，索引从0开始。JavaScript也提供了一些内置方法来操作数组，如push()、pop()、shift()、unshift()等，用于添加、删除和修改数组中的元素。操作示例描述创建数组。
js数组详解
weixin_44992737的博客
06-12 1457
js数组
细说JavaScript数组（JavaScript数组详解）
zhishunet
01-16 1158
生活中我们经常遇到，比如期末成绩名次表，特点就是具有严格的顺序，都是从第一名开始的顺序依次递减，中间没有间断，这种有序的数据就可以称为数组。
JavaScript数组详解。
zebghfv的博客
04-13 294
一、数组的基本概念 数组是值的有序集合。 每个值叫做元素，而且每个元素在数组中有个位置，每个位置用数字进行编号，叫做索引。 数组是无类型的。 1.数组元素可以是任何类型，并且同一个数组的不同元素也有可能有不同类型。 2.数组的元素可以是对象或者其他数组，从而创建复杂的数组结构。 数组是动态的 根据需要它们会自动增长或缩减，在声明的时候无需固定一个的长度。 数组也可以是稀疏的 1.数组的索引不一定是连续的，它们之间可以有空缺。 2.每个JS数组都有一个length属性，代表数组的长度。 3.针对非稀疏数组，l
JavaScript零基础入门 6：JavaScript数组详解
学Java，找哪吒
12-14 7426
一、垃圾回收（GC） 当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，所以这种垃圾必须进行清理。 在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作，我们需要做的只是要将不再使用的对象设置null即可。 二、数组（Array） 1、什么是数组 数组也是一个对象，它和我们普通对象功能类似，也是用来存储一些值的，不同的是普通对象是使用字符串作为属性名
Js数组详解
qq_38256266的博客
06-15 305
数组1、概念2、数组的定义3、数组元素的获取4、数组的遍历5、数组的常见函数6、二维数组 1、概念 一组数据的有序的集合 (可以存储任意数据类型的值)。 2、数组的定义 直接定义 //直接用[]创建 var arr = [12,34,1,43,12,3] console.log(arr); //[]里可以不带参数 var a4=[]; a4[0] = 1; a4[1] = 5; console.log(a4); 通过构造函数来创建 //通过new Array()来创建 var arr1 =
JavaScript 数组详解
Java小技巧
07-10 1788
JQuery 数组详解 1.认识数组 1)、内置对象是JS语言自带的对象，提供了一些基本的功能提供开发者使用。常用的内置对象有 Math,String,Array,Date等。 2)、数组就是对象，可以存储多个不同类型的数据。 3)、【对象】属性（变量）和方法（函数）的集合。 2.创建数组 1)、【内存】栈区：基本数据类型保存在栈区，会根据函数的结束而自动释放。 ...
【JavaScript—数组】详解js数组一篇文章吃透js-数组
zhaochen1127的博客
08-23 1904
这篇文章将教会你js中的数组，包括了数组的概念，如何进行筛选数组元素，如何添加新数组 以及用两种不同的方式进行数组的筛选，一文即可搞懂js-数组
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 363
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 522
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1333
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
vue3如何定义一个组件
Java程序员专栏
06-09 552
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
最新发布
lx_nhs的博客
06-12 445
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
Vue CLI 4与项目构建实战指南
06-09 941
Vue CLI的作用和优势Vue CLI（Vue.js Command Line Interface）是官方提供的一个标准工具，用于快速搭建Vue项目架构。标准化开发流程：Vue CLI提供了一套标准的开发流程和项目结构，有助于团队协作和项目维护。快速原型开发：通过Vue CLI可以快速创建项目原型，提高开发效率。丰富的插件生态：Vue CLI拥有丰富的插件，可以轻松集成各种功能，如路由、状态管理、打包优化等。易于定制和扩展：Vue CLI支持对构建配置的深度定制，满足不同项目的需求。
js数组方法中的splice详解
02-28
splice() 是 JavaScript 数组对象的一个方法，用于修改数组的内容。它可以实现删除、插入和替换数组元素的功能。 splice() 方法的语法如下： array.splice(start, deleteCount, item1, item2, ...) 参数说明： - ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

田本初

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值