前端基础之JavaScript数组

合集 - 前端炒米粉(25)

1.前端基础之前端知识引入2024-03-18 2.前端基础之HTTP协议介绍2024-03-18 3.前端基础之HTML基础2024-03-18 4.前端基础之HTML进阶2024-03-18 5.前端基础之CSS基础2024-03-19 6.前端基础之CSS选择器2024-03-19 7.前端基础之CSS基本属性2024-03-19 8.前端基础之CSS浮动和定位方式2024-03-19 9.CSS小练习2024-03-19 10.前端基础之JavaScript引入2024-03-19 11.前端基础之JavaScript的数据类型2024-03-19

12.前端基础之JavaScript数组2024-03-21

13.前端基础之JavaScript运算符2024-03-21 14.前端基础之JavaScript流程控制2024-03-21 15.前端基础之JavaScript函数2024-03-21 16.前端基础之JavaScript对象2024-03-21 17.前端基础之JavaScriptDOM和BOM2024-03-21 18.前端基础之原生js事件绑定案例2024-03-21 19.前端基础之jQuery引入2024-03-23 20.前端基础之jQuery基础2024-03-23 21.前端基础之jQuery进阶2024-03-23 22.前端基础之jQuery事件2024-03-23 23.前端基础之jQuery重要补充2024-03-23 24.前端框架之Bootstrap2024-03-24 25.前端补充：url编码2024-04-09

数组

一、什么是数组

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

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

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

数组的基本特点包括：

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

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

二、数组初识

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

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

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

创建数组：可以使用数组字面量[]或Array构造函数来创建数组。

 // 使用数组字面量创建数组
let numbers = [1, 2, 3, 4, 5];
 
// 使用Array构造函数创建数组
let colors = new Array('red', 'green', 'blue');

访问数组元素：通过索引访问数组元素。数组索引从0开始。

 let fruits = ['apple', 'banana', 'orange'];
console.log(fruits[0]); // 输出: apple

数组长度：可以通过length属性获取数组的长度。

 console.log(fruits.length); // 输出: 3

修改数组元素：可以通过索引修改数组元素。

 fruits[1] = 'grape';
console.log(fruits); // 输出: ['apple', 'grape', 'orange']

数组方法：JavaScript提供了许多数组方法来操作数组，例如push()、pop()、shift()、unshift()、splice()、slice()等。

 let numbers = [1, 2, 3, 4, 5];
numbers.push(6); // 在数组末尾添加元素
numbers.pop(); // 移除数组末尾的元素
numbers.shift(); // 移除数组开头的元素
numbers.unshift(0); // 在数组开头添加元素

迭代数组：可以使用循环或数组方法对数组进行迭代。

 fruits.forEach(function(fruit) {
    console.log(fruit);
});
 
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

多维数组：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）`forEach` 和 `for...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）`pop` 和 `shift`

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() 方法可以实现以下功能：

删除元素：可以删除指定位置的元素。
添加元素：可以在指定位置添加新元素。
替换元素：可以删除指定位置的元素，并在该位置添加新元素。

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

posted @ 2024-03-21 16:15 Xiao0101 阅读(29) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端基础之JavaScript对象

· 前端基础之JavaScript的数据类型

· 【14.0】JavaScript之数组

· 不容错过的秘籍：JavaScript数组的创建和使用详解

· 细说JavaScript数组（JavaScript数组详解）

公告

一个不像技术博客的博客

-------------------------------

时钟canvas

昵称： Xiao0101
园龄： 1年3个月
粉丝： 6
关注： 9

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. 爬虫之requests模块请求方式(1)

	// 使用数组字面量创建数组
	let numbers = [1, 2, 3, 4, 5];

	// 使用Array构造函数创建数组
	let colors = new Array('red', 'green', 'blue');

	let fruits = ['apple', 'banana', 'orange'];
	console.log(fruits[0]); // 输出: apple

	fruits[1] = 'grape';
	console.log(fruits); // 输出: ['apple', 'grape', 'orange']

	let numbers = [1, 2, 3, 4, 5];
	numbers.push(6); // 在数组末尾添加元素
	numbers.pop(); // 移除数组末尾的元素
	numbers.shift(); // 移除数组开头的元素
	numbers.unshift(0); // 在数组开头添加元素

	fruits.forEach(function(fruit) {
	console.log(fruit);
	});

	for (let i = 0; i < fruits.length; i++) {
	console.log(fruits[i]);
	}

	let matrix = [[1, 2], [3, 4], [5, 6]];
	console.log(matrix[1][0]); // 输出: 3

	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);
	}

	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] - 原数组未变

	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)

	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"] - 原数组已变

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

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

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

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

	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"] - 原数组未变

	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"] - 原数组已变

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

	let arr = [1, 2, 3];
	let val = arr.valueOf(); // [1, 2, 3]
	console.log(val);

	let arr = ['a', 'b', 'c', 'd', 'a'];
	let index = arr.indexOf('a'); // 0
	console.log(index);

	let arr = ['a', 'b', 'c', 'a', 'b'];
	let lastIndex = arr.lastIndexOf('a'); // 4
	console.log(lastIndex);

xiao

前端基础之JavaScript数组

数组

一、什么是数组

二、数组初识

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

（1）forEach 和 for...of

（2）concat

（3）join

（4）pop 和 shift

（5）unshift

（6）push

（7）reverse

（8）sort

（9）slice

（10）splice

（11）toString

（12）valueOf

（13）indexOf

（14）lastIndexOf

（15）map

（16）filter

（17）every

（18）some

（19）reduce

（20）rightReduce