JavaScript学习指南

主题

数组 ​

概述 ​

与变量不同，数组可以存储多个值。数组中的每个值都有一个索引，每个索引在内存地址中都有一个引用。每个值都可以通过其索引来访问。数组的索引从零开始，最后一个元素的索引比数组的长度少一。

数组是一个有序且可变（可修改）的不同数据类型的集合。数组允许存储重复元素和不同的数据类型。数组可以为空，也可以包含不同数据类型的值。

如何创建空数组 ​

在 JavaScript 中，我们可以用不同的方式创建数组。让我们看看创建数组的不同方法。 使用 const 而不是 let 来声明数组变量是很常见的。如果你使用 const，这意味着你不会再次使用该变量名。

使用 Array 构造函数 ​

js
// 语法
const arr = Array()
// 或者
// let arr = new Array()
console.log(arr) // []

使用方括号 ([]) ​

js
// 语法
// 这是创建空列表的最推荐方式
const arr = []
console.log(arr)

如何创建带值的数组 ​

带有初始值的数组。我们使用 length 属性来查找数组的长度。

js
const numbers = [0, 3.14, 9.81, 37, 98.6, 100] // 数字数组
const fruits = ['banana', 'orange', 'mango', 'lemon'] // 字符串数组，水果
const vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] // 字符串数组，蔬菜
const animalProducts = ['milk', 'meat', 'butter', 'yoghurt'] // 字符串数组，产品
const webTechs = ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongDB'] // 网络技术数组
const countries = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland'] // 字符串数组，国家

// 打印数组及其长度
console.log('Numbers:', numbers)
console.log('Number of numbers:', numbers.length)

console.log('Fruits:', fruits)
console.log('Number of fruits:', fruits.length)

console.log('Vegetables:', vegetables)
console.log('Number of vegetables:', vegetables.length)

console.log('Animal products:', animalProducts)
console.log('Number of animal products:', animalProducts.length)

console.log('Web technologies:', webTechs)
console.log('Number of web technologies:', webTechs.length)

console.log('Countries:', countries)
console.log('Number of countries:', countries.length)

数组可以包含不同数据类型的项目：

js
const arr = [
    'Asabeneh',
    250,
    true,
    { country: 'Finland', city: 'Helsinki' },
    { skills: ['HTML', 'CSS', 'JS', 'React', 'Python'] }
] // 包含不同数据类型的数组
console.log(arr)

使用 split 创建数组 ​

正如我们在前面的部分中看到的，我们可以在不同的位置分割字符串，并且可以转换为数组。让我们看看下面的例子。

js
let js = 'JavaScript'
const charsInJavaScript = js.split('')

console.log(charsInJavaScript) // ["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]

let companiesString = 'Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon'
const companies = companiesString.split(',')

console.log(companies) // ["Facebook", " Google", " Microsoft", " Apple", " IBM", " Oracle", " Amazon"]

let txt = 'I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.'
const words = txt.split(' ')

console.log(words)
// ["I", "love", "teaching", "and", "empowering", "people.", "I", "teach", "HTML,", "CSS,", "JS,", "React,", "Python"]

使用索引访问数组项 ​

我们使用索引访问数组中的每个元素。数组索引从 0 开始。

js
const fruits = ['banana', 'orange', 'mango', 'lemon']
let firstFruit = fruits[0] // 我们使用索引访问第一个项目

console.log(firstFruit) // banana

secondFruit = fruits[1]
console.log(secondFruit) // orange

let lastFruit = fruits[3]
console.log(lastFruit) // lemon

// 最后一个索引可以这样计算
let lastIndex = fruits.length - 1
lastFruit = fruits[lastIndex]

console.log(lastFruit)  // lemon

修改数组元素 ​

数组是可变的（可修改的）。一旦创建了数组，我们就可以修改数组元素的内容。

js
const numbers = [1, 2, 3, 4, 5]
numbers[0] = 10      // 将索引 0 处的 1 改为 10
numbers[1] = 20      // 将索引 1 处的 2 改为 20

console.log(numbers) // [10, 20, 3, 4, 5]

const countries = [
  'Albania',
  'Bolivia',
  'Canada',
  'Denmark',
  'Ethiopia',
  'Finland',
  'Germany',
  'Hungary',
  'Ireland',
  'Japan',
  'Kenya'
]

countries[0] = 'Afghanistan'  // 用 Afghanistan 替换 Albania
let lastIndex = countries.length - 1
countries[lastIndex] = 'Korea' // 用 Korea 替换 Kenya

console.log(countries)

操作数组的方法 ​

有不同的方法来操作数组。这些是处理数组的一些可用方法：Array、length、concat、indexOf、slice、splice、join、toString、includes、lastIndexOf、isArray、fill、push、pop、shift、unshift

Array 构造函数 ​

Array：创建数组。

js
const arr = Array() // 创建一个空数组
console.log(arr)

const eightEmptyValues = Array(8) // 创建八个空值
console.log(eightEmptyValues) // [empty x 8]

使用 fill 创建静态值 ​

fill：用静态值填充所有数组元素

js
const arr = Array() // 创建一个空数组
console.log(arr)

const eightXvalues = Array(8).fill('X') // 创建八个用 'X' 填充的元素值
console.log(eightXvalues) // ['X', 'X','X','X','X','X','X','X']

const eight0values = Array(8).fill(0) // 创建八个用 '0' 填充的元素值
console.log(eight0values) // [0, 0, 0, 0, 0, 0, 0, 0]

const four4values = Array(4).fill(4) // 创建 4 个用 '4' 填充的元素值
console.log(four4values) // [4, 4, 4, 4]

使用 concat 连接数组 ​

concat：连接两个数组。

js
const firstList = [1, 2, 3]
const secondList = [4, 5, 6]
const thirdList = firstList.concat(secondList)

console.log(thirdList) // [1, 2, 3, 4, 5, 6]

获取数组长度 ​

Length：了解数组的大小

js
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.length) // -> 5 是数组的大小

获取数组中元素的索引 ​

indexOf：检查数组中是否存在某个项目。如果存在，则返回索引，否则返回 -1。

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

console.log(numbers.indexOf(5)) // -> 4
console.log(numbers.indexOf(0)) // -> -1
console.log(numbers.indexOf(1)) // -> 0
console.log(numbers.indexOf(6)) // -> -1

检查元素是否存在于数组中：

js
// 让我们检查数组中是否存在香蕉
const fruits = ['banana', 'orange', 'mango', 'lemon']
let index = fruits.indexOf('banana')  // 0

if(index === -1){
   console.log('This fruit does not exist in the array')  
} else {
    console.log('This fruit does exist in the array')
}
// This fruit does exist in the array

// 我们也可以在这里使用三元运算符
index === -1 ? console.log('This fruit does not exist in the array'): console.log('This fruit does exist in the array')

获取数组中元素的最后索引 ​

lastIndexOf：它给出数组中最后一个项目的位置。如果存在，则返回索引，否则返回 -1。

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

console.log(numbers.lastIndexOf(2)) // 7
console.log(numbers.lastIndexOf(0)) // -1
console.log(numbers.lastIndexOf(1)) //  6
console.log(numbers.lastIndexOf(4)) //  3
console.log(numbers.lastIndexOf(6)) // -1

检查数组 ​

includes：检查数组中是否存在某个项目。如果存在，则返回 true，否则返回 false。

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

console.log(numbers.includes(5)) // true
console.log(numbers.includes(0)) // false
console.log(numbers.includes(1)) // true
console.log(numbers.includes(6)) // false

Array.isArray：检查数据类型是否为数组

js
const numbers = [1, 2, 3, 4, 5]
console.log(Array.isArray(numbers)) // true

const number = 100
console.log(Array.isArray(number)) // false

将数组转换为字符串 ​

toString：将数组转换为字符串

js
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.toString()) // 1,2,3,4,5

const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']
console.log(names.toString()) // Asabeneh,Mathias,Elias,Brook

连接数组元素 ​

join：用于连接数组的元素，我们在 join 方法中传递的参数将在数组中连接并作为字符串返回。默认情况下，它用逗号连接，但我们可以传递不同的字符串参数，这些参数可以在项目之间连接。

js
const numbers = [1, 2, 3, 4, 5]
console.log(numbers.join()) // 1,2,3,4,5

const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook']

console.log(names.join()) // Asabeneh,Mathias,Elias,Brook
console.log(names.join('')) //AsabenehMathiasEliasBrook
console.log(names.join(' ')) //Asabeneh Mathias Elias Brook
console.log(names.join(', ')) //Asabeneh, Mathias, Elias, Brook
console.log(names.join(' # ')) //Asabeneh # Mathias # Elias # Brook

切片数组元素 ​

Slice：在范围内切出多个项目。它需要两个参数：起始位置和结束位置。它不包括结束位置。

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

console.log(numbers.slice()) // -> 复制所有项目
console.log(numbers.slice(0)) // -> 复制所有项目
console.log(numbers.slice(0, numbers.length)) // 复制所有项目
console.log(numbers.slice(1,4)) // -> [2,3,4] // 不包括结束位置

数组中的 Splice 方法 ​

Splice：它需要三个参数：起始位置、要删除的次数和要添加的项目数。

js
const numbers = [1, 2, 3, 4, 5]
numbers.splice()
console.log(numbers)                // -> 删除所有项目
js
const numbers = [1, 2, 3, 4, 5]
numbers.splice(0,1)
console.log(numbers)            // 删除第一个项目
js
const numbers = [1, 2, 3, 4, 5, 6]
numbers.splice(3, 3, 7, 8, 9)
console.log(numbers.splice(3, 3, 7, 8, 9))  // -> [1, 2, 3, 7, 8, 9] // 删除三个项目并替换三个项目

使用 push 向数组添加项目 ​

Push：在末尾添加项目。要向现有数组的末尾添加项目，我们使用 push 方法。

js
// 语法
const arr  = ['item1', 'item2','item3']
arr.push('new item')
console.log(arr)
// ['item1', 'item2','item3','new item']
js
const numbers = [1, 2, 3, 4, 5]
numbers.push(6)
console.log(numbers) // -> [1,2,3,4,5,6]

numbers.pop() // -> 从末尾删除一个项目
console.log(numbers) // -> [1,2,3,4,5]

使用 pop 删除末尾元素 ​

pop：删除末尾的项目。

js
const numbers = [1, 2, 3, 4, 5]
numbers.pop() // -> 从末尾删除一个项目
console.log(numbers) // -> [1,2,3,4]

从开头删除元素 ​

shift：删除数组开头的一个数组元素。

js
const numbers = [1, 2, 3, 4, 5]
numbers.shift() // -> 从开头删除一个项目
console.log(numbers) // -> [2,3,4,5]

从开头添加元素 ​

unshift：在数组的开头添加数组元素。

js
const numbers = [1, 2, 3, 4, 5]
numbers.unshift(0) // -> 从开头添加一个项目
console.log(numbers) // -> [0,1,2,3,4,5]

反转数组顺序 ​

reverse：反转数组的顺序。

js
const numbers = [1, 2, 3, 4, 5]
numbers.reverse() // -> 反转数组顺序
console.log(numbers) // [5, 4, 3, 2, 1]

numbers.reverse()
console.log(numbers) // [1, 2, 3, 4, 5]

对数组中的元素进行排序 ​

sort：按升序排列数组元素。Sort 接受一个回调函数，我们将在接下来的部分中看到如何使用带有回调函数的 sort。

js
const webTechs = [
  'HTML',
  'CSS',
  'JavaScript',
  'React',
  'Redux',
  'Node',
  'MongoDB'
]

webTechs.sort()
console.log(webTechs) // ["CSS", "HTML", "JavaScript", "MongoDB", "Node", "React", "Redux"]

webTechs.reverse() // 排序后我们可以反转它
console.log(webTechs) // ["Redux", "React", "Node", "MongoDB", "JavaScript", "HTML", "CSS"]

数组的数组 ​

数组可以存储不同的数据类型，包括数组本身。让我们创建一个数组的数组

js
const firstNums = [1, 2, 3]
const secondNums = [1, 4, 9]

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

const frontEnd = ['HTML', 'CSS', 'JS', 'React', 'Redux']
const backEnd = ['Node','Express', 'MongoDB']
const fullStack = [frontEnd, backEnd]
console.log(fullStack)   // [["HTML", "CSS", "JS", "React", "Redux"], ["Node", "Express", "MongoDB"]]
console.log(fullStack.length)  // 2
console.log(fullStack[0])  // ["HTML", "CSS", "JS", "React", "Redux"]
console.log(fullStack[1]) // ["Node", "Express", "MongoDB"]

练习 ​

练习：级别 1 ​

js
const countries = [
  'Albania',
  'Bolivia',
  'Canada',
  'Denmark',
  'Ethiopia',
  'Finland',
  'Germany',
  'Hungary',
  'Ireland',
  'Japan',
  'Kenya'
]

const webTechs = [
  'HTML',
  'CSS',
  'JavaScript',
  'React',
  'Redux',
  'Node',
  'MongoDB'
]
  1. 声明一个空数组
  2. 声明一个包含超过 5 个元素的数组
  3. 找到数组的长度
  4. 获取数组的第一项、中间项和最后一项
  5. 声明一个名为 mixedDataTypes 的数组，在数组中放入不同的数据类型并找到数组的长度。数组大小应大于 5
  6. 声明一个名为 itCompanies 的数组变量，并分配初始值 Facebook、Google、Microsoft、Apple、IBM、Oracle 和 Amazon
  7. 使用 console.log() 打印数组
  8. 打印数组中公司的数量
  9. 打印第一家公司、中间公司和最后一家公司
  10. 打印出每家公司
  11. 逐一将每个公司名称更改为大写并打印出来
  12. 将数组打印为句子：Facebook、Google、Microsoft、Apple、IBM、Oracle 和 Amazon 是大型 IT 公司。
  13. 检查 itCompanies 数组中是否存在某家公司。如果存在则返回公司，否则返回未找到公司
  14. 过滤掉包含多个 'o' 的公司，不使用 filter 方法
  15. 使用 sort() 方法对数组进行排序
  16. 使用 reverse() 方法反转数组
  17. 从数组中切出前 3 家公司
  18. 从数组中切出最后 3 家公司
  19. 从数组中切出中间的 IT 公司
  20. 从数组中删除第一家 IT 公司
  21. 从数组中删除中间的 IT 公司
  22. 从数组中删除最后一家 IT 公司
  23. 删除所有 IT 公司

练习：级别 2 ​

  1. 创建一个单独的 countries.js 文件并将 countries 数组存储到此文件中，创建一个单独的文件 web_techs.js 并将 webTechs 数组存储到此文件中。在 main.js 文件中访问这两个文件

  2. 首先删除所有标点符号并将字符串更改为数组，并计算数组中单词的数量

    js
    let text = 'I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.'
console.log(words)
console.log(words.length)

  3. 在以下购物车中添加、删除、编辑项目

    js
    const shoppingCart = ['Milk', 'Coffee', 'Tea', 'Honey']
    • 如果尚未添加，请在购物车的开头添加 'Meat'
    • 如果尚未添加，请在购物车的末尾添加 Sugar
    • 如果您对蜂蜜过敏，请删除 'Honey'
    • 将 Tea 修改为 'Green Tea'

  4. 在 countries 数组中检查是否存在 'Ethiopia'，如果存在则打印 'ETHIOPIA'。如果不存在，则添加到 countries 列表中。

  5. 在 webTechs 数组中检查是否存在 Sass，如果存在则打印 'Sass is a CSS preprocess'。如果不存在，则将 Sass 添加到数组中并打印数组。

  6. 连接以下两个变量并将其存储在 fullStack 变量中。

    js
    const frontEnd = ['HTML', 'CSS', 'JS', 'React', 'Redux']
const backEnd = ['Node','Express', 'MongoDB']

console.log(fullStack)

练习：级别 3 ​

  1. 以下是 10 名学生年龄的数组：

    js
    const ages = [19, 22, 19, 24, 20, 25, 26, 24, 25, 24]
    • 对数组进行排序并找到最小和最大年龄
    • 找到中位数年龄（一个中间项目或两个中间项目除以二）
    • 找到平均年龄（所有项目除以项目数）
    • 找到年龄范围（最大值减去最小值）
    • 比较（min - average）和（max - average）的值，使用 abs() 方法

  2. 从 countries 数组中切出前十个国家

  3. 在 countries 数组中找到中间的国家

  4. 如果 countries 数组是偶数，则将其分为两个相等的数组。如果 countries 数组不是偶数，则前半部分多一个国家。

Copyright © 2025 e2ways.com