JavaScript 数组操作

76 阅读4分钟

前言

JavaScript 数组是一种非常常用的数据结构,用于存储和操作一组相关的数据。数组可以存储任意类型的数据,包括数字、字符串、对象等,并且可以根据索引访问和修改数组中的元素。之前我们有简单的了解过,本章我就学习更多的数组操作

一、创建数组

1.使用数组字面量 [] 创建数组

const numbers = [1,2,3]

2.使用 Array 构造函数创建数组

const numbers = new Array(1,2,3)

二、访问元素

1.使用索引访问数组元素

const fruits = ['apple','banana','orange']
console.log(fruits[0]) // ’apple'

注意:数组有下标的概念,从0开始,当我们使用索引访问的数组中的第1个元素apple时,也就是访问下标0,如上述代码

三、修改元素

1.通过索引对数组进行修改

const numbers = [1,2,3]
numbers[1] = 3
console.log(numbers) // [1,3,3]

四、遍历元素

1.使用循环语句 for 遍历数组元素

const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}
// 控制台日志就会分别打印出 1 2 3 4 5

2.使用 forEach 方法遍历数组元素

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function (number) {
  console.log(number);
});
// 控制台日志就会分别打印出 1 2 3 4 5

3.使用 for...of 循环语句遍历数组

const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
  console.log(number);
}
// 控制台日志就会分别打印出 1 2 3 4 5

五、数组方法

1.添加元素

1).使用 push 方法向数组末尾添加元素

const fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // 输出:["apple", "banana", "orange"]

2).使用 unshift 方法向数组开头添加元素

const fruits = ["banana", "orange"];
fruits.unshift("apple");
console.log(fruits); // 输出:["apple", "banana", "orange"]

2.删除元素

1).使用 pop 方法删除数末尾的元素

const fruits = ["apple", "banana", "orange"];
fruits.pop();
console.log(fruits); // 输出:["apple", "banana"]

2).使用 shift 方法删除数组开头的元素

const fruits = ["apple", "banana", "orange"];
fruits.shift();
console.log(fruits); // 输出:["banana", "orange"]

3.数组长度

1).使用 length 属性获取数组的长度

const fruits = ["apple", "banana", "orange"];
console.log(fruits.length); // 输出:3

4.数组查找

1).使用 indexOf 方法查找元素是否在数组的位置中

const fruits = ["apple", "banana", "orange"];
console.log(fruits.indexOf("banana")); // 输出:1
console.log(fruits.indexOf("grape")); // 输出:-1

2).使用 includes 方法检查数组是否包含某个元素

const fruits = ["apple", "banana", "orange"];
console.log(fruits.includes("banana")); // 输出:true
console.log(fruits.includes("grape")); // 输出:false

3).使用 find 方法查找满足条件的第一个元素

const numbers = [1, 2, 3, 4, 5];
const evenNumber = numbers.find(function (number) {
  return number % 2 === 0;
});
console.log(evenNumber); // 输出:2 

5.数组排序

1).使用 sort 方法对数组元素进行比较

const fruits = ["banana", "apple", "orange"];
fruits.sort();
console.log(fruits); // 输出:["apple", "banana", "orange"]

6.数组转换

1).使用 join 方法将数组转为字符串

const fruits = ["apple", "banana", "orange"];
const fruitString = fruits.join(", ");
console.log(fruitString); // 输出:"apple, banana, orange"

2).使用 toString 方法将数组转换为字符串

const fruits = ["apple", "banana", "orange"];
const fruitString = fruits.toString();
console.log(fruitString); // 输出:"apple,banana,orange"

3).使用 Array.form 方法将类似数组的对象或可迭代的对象转换为数组

const str = "hello";
const strArray = Array.from(str);
console.log(strArray); // 输出:["h", "e", "l", "l", "o"]

练习题:

1.数组求和
function sumArray(arr) {
  ...你的代码
}

// 示例用法
console.log(sumArray([1, 2, 3, 4, 5])); // 输出 15
console.log(sumArray([-1, 0, 1])); // 输出 0

2.查找数组中的最大值
function findMaxValue(arr) {
  ...你的代码
}

// 示例用法
console.log(findMaxValue([2, 7, 1, 9, 4])); // 输出 9
console.log(findMaxValue([-1, 0, -5, -3])); // 输出 0

3. 数组反转
function reverseArray(arr) {
  ...你的代码
}

// 示例用法
console.log(reverseArray([1, 2, 3, 4, 5])); // 输出 [5, 4, 3, 2, 1]
console.log(reverseArray(['a', 'b', 'c'])); // 输出 ['c', 'b', 'a']

算法题:移动零
给定一个包含数字和零的数组,编写一个函数将所有的零移动到数组的末尾,同时保持非零元素的相对顺序不变。
function moveZeroes(nums) {
  ...你的代码
}

// 示例用法
console.log(moveZeroes([0, 1, 0, 3, 12])); // 输出 [1, 3, 12, 0, 0]
console.log(moveZeroes([1, 2, 0, 0, 3, 0, 4])); // 输出 [1, 2, 3, 4, 0, 0, 0]

结语:

本章内容较多,需要各位认真观看,有的人直接就来看结语,最好老实从头看!这一章呢,笔者带大家简单的过了一遍数组的操作。还有很多方法,这里呢,并没有全部写完。但是这些几乎都是非常常用的,所以大家务必学会,能看到这里,笔者非常的开心。好了让我出发基础篇的最后一章,对象的操作!🚀🚀🚀