首页 > 编程语言 >前端基础之JavaScript数组

前端基础之JavaScript数组

时间:2024-03-21 16:25:16浏览次数:27  
标签:arr JavaScript console log 前端 元素 let 数组

数组

一、什么是数组

  • 数组类似于python里面的列表 []

在编程中,数组(Array)是一种数据结构,用于存储相同类型的多个元素。这些元素按照顺序排列,并通过索引(通常是非负整数)来访问。数组可以包含各种数据类型,例如整数、浮点数、字符串,甚至其他数组。

在许多编程语言中,数组的大小是固定的,一旦创建就无法改变。然而,JavaScript中的数组,长度是动态可变的,如果学过其他编程语言的朋友可能对这一点不是很习惯。

数组的基本特点包括:

  1. 索引: 每个元素都有一个唯一的索引,用于访问该元素。
  2. 连续存储: 数组中的元素在内存中是连续存储的,这有助于快速访问元素。
  3. 相同类型: 数组通常只能存储相同类型的元素,尽管有些编程语言支持混合类型数组。
  4. 固定大小或动态大小: 数组可以是固定大小的,也可以是动态大小的。

在许多编程语言中,数组是一个重要的数据结构,用于存储和操作大量数据。可以通过创建数组来存储一组数据,并通过索引来访问和操作这些数据。

二、数组初识

每一门编程语言,都有数组或类似数组的结构,同样的JavaScript(虽然是脚本语言也不例外。

JavaScript中的数组是一种用于存储多个值的数据结构。数组是一种有序集合,每个值在数组中都有一个数字索引,从0开始,不支持负数索引。JavaScript数组可以包含任意类型的值,包括数字、字符串、对象、函数等。

下面是关于JavaScript数组的一些重要信息:

  1. 创建数组:可以使用数组字面量[]Array构造函数来创建数组。
// 使用数组字面量创建数组
let numbers = [1, 2, 3, 4, 5];

// 使用Array构造函数创建数组
let colors = new Array('red', 'green', 'blue');
  1. 访问数组元素:通过索引访问数组元素。数组索引从0开始。
let fruits = ['apple', 'banana', 'orange'];
console.log(fruits[0]); // 输出: apple
  1. 数组长度:可以通过length属性获取数组的长度。
console.log(fruits.length); // 输出: 3
  1. 修改数组元素:可以通过索引修改数组元素。
fruits[1] = 'grape';
console.log(fruits); // 输出: ['apple', 'grape', 'orange']
  1. 数组方法:JavaScript提供了许多数组方法来操作数组,例如push()pop()shift()unshift()splice()slice()等。
let numbers = [1, 2, 3, 4, 5];
numbers.push(6); // 在数组末尾添加元素
numbers.pop(); // 移除数组末尾的元素
numbers.shift(); // 移除数组开头的元素
numbers.unshift(0); // 在数组开头添加元素
  1. 迭代数组:可以使用循环或数组方法对数组进行迭代。
fruits.forEach(function(fruit) {
    console.log(fruit);
});

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
  1. 多维数组:JavaScript中的数组可以是多维的,也就是数组的元素本身也可以是数组。
let matrix = [[1, 2], [3, 4], [5, 6]];
console.log(matrix[1][0]); // 输出: 3

JavaScript中的数组是一种灵活且强大的数据结构,可以用于存储和操作各种类型的数据。通过熟练掌握数组的特性和方法,可以更有效地处理和管理数据。

三、认识数组:数组的基本方法

方法名称 功能描述 返回值类型 是否改变原数组
forEach/for...of 遍历数组(forEach处理每个元素,for...of可读取元素并自动解包) 不会
concat 合并数组 新数组 不会
join 将数组转化为字符串 字符串 不会
pop 删除数组最后一个元素 删除的数据(即数组最后一个元素)
shift 删除数组第一个元素 删除的数据(即数组第一个元素)
unshift 在数组开头插入元素 新数组长度
push 在数组末尾添加元素 新数组长度
reverse 翻转数组顺序 翻转后的数组
sort 对数组元素排序 排序后的数组
slice 截取数组部分元素 新数组 不会
splice 插入、删除或替换数组元素 被删除或替换的元素
toString 数组转为字符串 字符串 不会
valueOf 获取数组原始值 原始值 不会
indexOf 查找指定元素在数组中的位置 元素索引(若不存在则返回 -1) 不会
lastIndexOf 查找指定元素在数组中最后一次出现的位置 元素索引 不会
map 应用函数映射数组元素 新数组 不会
filter 根据条件筛选数组元素 新数组 不会
every 判断数组所有元素是否都满足条件 布尔值 不会
some 判断数组是否有元素满足条件 布尔值 不会
reduce 按规则累积数组元素生成单个返回值 单一返回值 可以,但通常不会直接改变原数组
rightReduce 类似于reduce,但从数组末尾开始累积 单一返回值 可以,但通常不会直接改变原数组

(1)forEachfor...of

  • 遍历数组(forEach处理每个元素,for...of可读取元素并自动解包)
let arr = [1, 2, 3, 4, 5];

// forEach 示例
arr.forEach((item, index) => {
  console.log(`Element at index ${index}: ${item}`);
});

arr.forEach(function (item,index)  {
  console.log(`Element at index ${index}: ${item}`);
});

// for...of 示例
for (const item of arr) {
  console.log(item);
}

(2)concat

  • 合并数组
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]
console.log(arr1); // [1, 2, 3]  - 原数组未变

(3)join

  • 将数组转化为字符串(与python正好相反)
let arr = ['apple', 'banana', 'cherry'];
let str = arr.join(', '); // "apple, banana, cherry"
console.log(str);

# python中join方法
lst = ['apple', 'banana', 'cherry', 'orange']
x = '-'.join(lst)

(4)popshift

  • pop删除数组最后一个元素

  • shift删除数组第一个元素

let arr = ['a', 'b', 'c'];

// pop 示例
let poppedItem = arr.pop(); // "c"
console.log(poppedItem); // "c"
console.log(arr); // ["a", "b"]  - 原数组已变

// shift 示例
let shiftedItem = arr.shift(); // "a"
console.log(shiftedItem); // "a"
console.log(arr); // ["b"]    - 原数组已变

(5)unshift

  • 在数组开头插入元素
let arr = ['b', 'c'];
arr.unshift('a'); // 在数组开头插入元素
console.log(arr); // ["a", "b", "c"]

(6)push

  • 在数组末尾添加元素
let arr = ['a', 'b'];
arr.push('c', 'd'); // 在数组末尾添加元素
console.log(arr); // ["a", "b", "c", "d"]

(7)reverse

  • 翻转数组顺序
let arr = ['a', 'b', 'c'];
arr.reverse(); // 翻转数组顺序
console.log(arr); // ["c", "b", "a"]

(8)sort

  • 对数组元素排序
let arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b); // 自定义排序规则,升序排列
console.log(arr); // [1, 1, 3, 4, 5, 9]

(9)slice

  • 截取数组部分元素
let arr = ['a', 'b', 'c', 'd', 'e'];
let slicedArr = arr.slice(1, 4); // 截取下标从1到3的子数组
console.log(slicedArr); // ["b", "c", "d"]
console.log(arr); // ["a", "b", "c", "d", "e"]  - 原数组未变

(10)splice

  • 插入、删除或替换数组元素
let arr = ['a', 'b', 'c', 'd', 'e'];
let removedItems = arr.splice(2, 2, 'x', 'y'); // 从下标2开始,删除2个元素,并在此位置插入'x'和'y'
console.log(removedItems); // ["c", "d"]
console.log(arr); // ["a", "b", "x", "y", "e"]  - 原数组已变

(11)toString

  • 数组转为字符串
let arr = [1, 2, 3];
let str = arr.toString(); // "1,2,3"
console.log(str);

(12)valueOf

  • 获取数组原始值
let arr = [1, 2, 3];
let val = arr.valueOf(); // [1, 2, 3]
console.log(val);

(13)indexOf

  • 查找指定元素在数组中的位置
let arr = ['a', 'b', 'c', 'd', 'a'];
let index = arr.indexOf('a'); // 0
console.log(index);

(14)lastIndexOf

  • 查找指定元素在数组中最后一次出现的位置
let arr = ['a', 'b', 'c', 'a', 'b'];
let lastIndex = arr.lastIndexOf('a'); // 4
console.log(lastIndex);

(15)map

  • 应用函数映射数组元素
let arr = [1, 2, 3, 4, 5];
let squaredArr = arr.map(num => num * num); // [1, 4, 9, 16, 25]
console.log(squaredArr);

(16)filter

  • 根据条件筛选数组元素
let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(num => num % 2 === 0); // [2, 4]
console.log(evenNumbers);

(17)every

  • 判断数组所有元素是否都满足条件
let arr = [true, true, false];
let allTrue = arr.every(val => val); // false
console.log(allTrue);

(18)some

  • 判断数组是否有元素满足条件
let arr = [false, false, true];
let containsTrue = arr.some(val => val); // true
console.log(containsTrue);

(19)reduce

  • 按规则累积数组元素生成单个返回值
let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((total, num) => total + num, 0); // 15
console.log(sum);

(20)rightReduce

  • 类似于reduce,但从数组末尾开始累积
  • 此方法不是ES6标准提供的,但可以通过扩展运算符实现类似效果
let arr = [1, 2, 3, 4, 5];
let reversedSum = arr.reduceRight((total, num) => total + num, 0); // 15 (等于sum,因为是从后向前累加)
console.log(reversedSum);

(21)统计数组长度

var arr= [11,22,33,44,55,66];
// undefined

arr
// (6) [11, 22, 33, 44, 55, 66]

// (1)统计数组的个数
arr.length
// 6

四、掌握数组:数组的进阶方法

(1)splice()方法

splice() 方法是 JavaScript 数组对象的一个方法,用于向数组中添加或删除元素。splice() 方法可以实现以下功能:

  1. 删除元素:可以删除指定位置的元素。
  2. 添加元素:可以在指定位置添加新元素。
  3. 替换元素:可以删除指定位置的元素,并在该位置添加新元素。

splice() 方法的语法如下:

array.splice(start, deleteCount, item1, item2, ...)
  • start:指定修改的起始位置(索引),从该位置开始进行操作。
  • deleteCount:要删除的元素个数。如果设置为 0,则不删除元素。
  • item1, item2, ...:要添加到数组的元素。

splice() 方法会修改原始数组,并返回一个包含被删除元素的数组。如果没有删除任何元素,则返回一个空数组。

以下是一些示例,演示splice() 方法的用法:

删除元素

let fruits = ['apple', 'banana', 'cherry', 'date'];

// 从索引 2 开始删除 1 个元素
fruits.splice(2, 1);

// fruits 现在为 ['apple', 'banana', 'date']

添加元素

let fruits = ['apple', 'banana', 'cherry'];

// 从索引 1 开始删除 0 个元素,并添加 'orange'(先删除后添加)
fruits.splice(1, 0, 'orange');

// fruits 现在为 ['apple', 'orange', 'banana', 'cherry']

替换元素

let fruits = ['apple', 'banana', 'cherry', 'date'];

// 从索引 2 开始删除 1 个元素,并添加 'lemon'
fruits.splice(2, 1, 'lemon');

// fruits 现在为 ['apple', 'banana', 'lemon', 'date']

splice() 方法是一个非常灵活和强大的方法,可以在数组中进行各种添加、删除和替换操作。需要注意的是,splice() 方法会直接修改原始数组。

(2) forEach()方法

forEach()是JavaScript数组对象的一个方法,用于遍历数组中的每个元素,并对每个元素执行提供的回调函数。下面是forEach()方法的一般语法:

array.forEach(function(currentValue, index, arr), thisValue)
  • currentValue:当前元素的值。
  • index:当前元素的索引。
  • arr:当前正在操作的数组。
  • thisValue(可选):在回调函数中,使用该值作为 this 对象。如果省略,将使用全局对象。

forEach()方法中,可以传递一个回调函数作为参数,这个回调函数将在数组中的每个元素上被调用。回调函数可以接受三个参数:当前元素的值、当前元素的索引和数组本身。这样,你可以在回调函数中对数组的每个元素进行操作。

以下是一个简单的示例,演示如何使用forEach()方法:

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

numbers.forEach(function(number, index) {
    console.log(`Number at index ${index} is ${number}`);
});

在这个示例中,forEach()方法遍历了numbers数组中的每个元素,并输出了每个元素的值和索引。

需要注意的是,forEach()方法会在遍历数组的过程中修改原始数组。如果需要对数组进行操作而不改变原始数组,可以考虑使用map()方法。

代码演示

var l = [1,2,3,4,5]

l.forEach(function(value){console.log(value)},l)
VM2464:1 1  # 一个参数就是数组里面每一个元素对象
VM2464:1 2
VM2464:1 3
VM2464:1 4
VM2464:1 5

l.forEach(function(value,index){console.log(value,index)},l)
VM2514:1 1 0  # 两个参数就是元素+元素索引
VM2514:1 2 1
VM2514:1 3 2
VM2514:1 4 3
VM2514:1 5 4

l.forEach(function(value,index,arr){console.log(value,index,arr)},l)  # 元素+元素索引+元素的数据来源
VM2965:1 1 0 (5) [1, 2, 3, 4, 5]
VM2965:1 2 1 (5) [1, 2, 3, 4, 5]
VM2965:1 3 2 (5) [1, 2, 3, 4, 5]
VM2965:1 4 3 (5) [1, 2, 3, 4, 5]
VM2965:1 5 4 (5) [1, 2, 3, 4, 5]

l.forEach(function(value,index,arr,xxx){console.log(value,index,arr,xxx)},l)  # 最多三个
VM2996:1 1 0 (5) [1, 2, 3, 4, 5] undefined
VM2996:1 2 1 (5) [1, 2, 3, 4, 5] undefined
VM2996:1 3 2 (5) [1, 2, 3, 4, 5] undefined
VM2996:1 4 3 (5) [1, 2, 3, 4, 5] undefined
VM2996:1 5 4 (5) [1, 2, 3, 4, 5] undefined

(3)map()方法

map() 方法是 JavaScript 数组对象的一个方法,用于创建一个新数组,新数组的元素是原始数组经过指定函数处理后的结果。map() 方法不会修改原始数组,而是返回一个新的数组。

map() 方法的语法如下:

const new_array = array.map(function callback(currentValue, index, array) {
    // 返回新数组的元素
}, thisArg);
  • callback 函数:用来生成新数组元素的函数,可以接受三个参数:
    • currentValue:当前元素的值。
    • index(可选):当前元素的索引。
    • array(可选):调用 map() 方法的数组。
  • thisArg(可选):执行 callback 函数时使用的 this 值。

map() 方法会遍历原始数组的每个元素,对每个元素应用提供的回调函数,并将返回值组成一个新数组。原始数组保持不变。

以下是一个简单的示例,演示如何使用 map() 方法:

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

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

// doubled 现在为 [2, 4, 6, 8, 10]

在上面的示例中,map() 方法遍历 numbers 数组中的每个元素,并将每个元素乘以 2,然后将结果存储在新数组 doubled 中。

map() 方法非常适合用于对数组中的每个元素进行某种转换或处理操作,生成一个新的数组。由于它不会修改原始数组,因此在需要保留原始数据的情况下很有用。

标签:arr,JavaScript,console,log,前端,元素,let,数组
From: https://www.cnblogs.com/xiao01/p/18087636

相关文章

  • 前端基础之JavaScript运算符
    一、什么是运算符运算符,顾名思义就是在运算中的符号,例如加法中的”+“就是一个运算符。严谨来说,运算符是一种告诉编译器执行特定的数学或逻辑操作的符号。二、运算符的分类JavaScript中的运算符可以分为多种类型,包括算术运算符、赋值运算符、比较运算符、逻辑运算符、位运算......
  • 前端基础之JavaScript流程控制
    一、if判断在JavaScript中,if语句是一种常见的条件语句,用于根据条件执行不同的代码块。除了基本的if语句外,还有if...else、if...elseif...else等变体,用于处理多个条件的情况。1.if语句if语句用于在条件为真时执行特定的代码块。语法:if(condition){//当条件......
  • 前端基础之JavaScript对象
    一、什么是对象现实生活中:万物皆对象,对象是一个具体的事物,看得见摸得着的实物。例如,一本书、一辆汽车、一个人可以是“对象”,一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字......
  • 前端基础之JavaScript函数
    一、什么是函数在JavaScript中,函数是一种可重复使用的代码块,用于执行特定任务或计算。函数可以接受参数,执行特定的操作,并返回一个值。二、函数的声明函数可以通过函数声明、函数表达式或箭头函数来定义。函数声明:functionfunctionName(parameters){//函数体......
  • JavaScript 实现通过 id 数组获取可展示的 name 拼接字符串
    JavaScript实现通过id数组获取可展示的name拼接字符串场景有一个包含许多对象的数组,每个对象都包含了一个标识(id)和一个名称(name)。想要从这个数组中选出特定的一些对象,这些对象的标识(id)在另一个数组中已经给出。然后,想把这些选出来的对象的名称(name)连接成一个字符串,用逗号分......
  • 测试面经 之 如何判断 Bug 是前端问题还是后端问题
    常见软件测试问题,如何判断一个Bug是Bug,并且如何判断该bug是前端问题还是后端问题。1.记录Bug:首先,作为一个专业的测试,无论该bug怎样,是否太浅显,都需要及时记录该问题。将该问题的标题,问题描述,复现步骤,环境版本,测试环境,测试账号,服务器端日志,报错截图,接口入参和......
  • [踩坑回顾]前端项目打包编译之后,页面访问异常:exports is not defined.
    周一遇到的问题,是qiankun框架的一个vue2子项目,使用yudao开源框架二次开发。 排查:1.开发环境正常。2.项目迁移前使用的babel、package配置均未被使用过。3.考虑打包使用的命令错误。发现未按照官方教程使用npm进行编译,后端同事用pom.xml文件使用pnpm命令进行编译。 解......
  • 数组的基本算法
    6.1冒泡排序privatestaticvoidbubbleSort(int[]arr){  //外循环:控制比较的轮数  for(inti=0;i<arr.length-1;i++){    //内循环:控制比较的次数    //-1避免索引越界,-i提高效率    for(intj=0;j<arr.length-1......
  • 前端学习-vue学习009-侦听器
    官方教程链接侦听器:import{ref,watch}from'vue'constcount=ref(0)watch(count,(newCount)=>{console.log(`newcountis:${newCount}`)})pre标签:识别json对象中的\n\t等转义字符,展示原始的JSON对象结构。v-ifv-elseasyncawaitfetch<template>......
  • React函数组件Hook
    问题:相对于类组件,函数组件的编码更简单,效率也更高,但函数组件不能有state(旧版)解决:React16.8版本设计了一套新的语法来让函数组件也可以有stateHook是React16.8的新增特性。它可以让你在不编写class的情况下使用state以及其他的React特性Hook也叫......