js基础速成05-数组

数组

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

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

如何创建一个空数组

在JavaScript中，我们可以用多种方式创建数组。以下是几种常见的方式。
通常使用 const 而不是 let 来声明数组变量。如果使用 const，则意味着该变量名不能被再次使用。

• 使用数组构造器

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

• 使用方括号 []

// 语法
// 这是最推荐的创建空数组的方法
const arr = []
console.log(arr)

如何创建一个带有值的数组

带初始值的数组。我们可以使用 length 属性获取数组的长度。

const numbers = [0, 3.14, 9.81, 37, 98.6, 100] // 数字数组
const fruits = ['香蕉', '橙子', '芒果', '柠檬'] // 水果数组
const vegetables = ['西红柿', '土豆', '卷心菜', '洋葱', '胡萝卜'] // 蔬菜数组
const animalProducts = ['牛奶', '肉', '黄油', '酸奶'] // 动物产品数组
const webTechs = ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongoDB'] // 网络技术数组
const countries = ['芬兰', '丹麦', '瑞典', '挪威', '冰岛'] // 国家数组

// 输出数组及其长度

console.log('数字:', numbers)
console.log('数字的数量:', numbers.length)

console.log('水果:', fruits)
console.log('水果的数量:', fruits.length)

console.log('蔬菜:', vegetables)
console.log('蔬菜的数量:', vegetables.length)

console.log('动物产品:', animalProducts)
console.log('动物产品的数量:', animalProducts.length)

console.log('网络技术:', webTechs)
console.log('网络技术的数量:', webTechs.length)

console.log('国家:', countries)
console.log('国家的数量:', countries.length)

数字: [0, 3.14, 9.81, 37, 98.6, 100]
数字的数量: 6
水果: ['香蕉', '橙子', '芒果', '柠檬']
水果的数量: 4
蔬菜: ['西红柿', '土豆', '卷心菜', '洋葱', '胡萝卜']
蔬菜的数量: 5
动物产品: ['牛奶', '肉', '黄油', '酸奶']
动物产品的数量: 4
网络技术: ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongoDB']
网络技术的数量: 7
国家: ['芬兰', '丹麦', '瑞典', '挪威', '冰岛']
国家的数量: 5

• 数组可以包含不同数据类型的元素

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

使用split创建数组

在前面的章节中我们已经看到，我们可以在不同的位置拆分字符串，并将其转换为数组。下面是一些示例。

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 开始。下图清楚地展示了数组中每个元素的索引。

const fruits = ['香蕉', '橙子', '芒果', '柠檬']
let firstFruit = fruits[0] // 通过索引访问第一个元素

console.log(firstFruit) // 香蕉

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

let lastFruit = fruits[3]
console.log(lastFruit) // 柠檬
// 最后一个索引可以通过以下方式计算

let lastIndex = fruits.length - 1
lastFruit = fruits[lastIndex]

console.log(lastFruit)  // 柠檬

const numbers = [0, 3.14, 9.81, 37, 98.6, 100]  // 一组数字

console.log(numbers.length)  // => 数组长度为 6
console.log(numbers)         // -> [0, 3.14, 9.81, 37, 98.6, 100]
console.log(numbers[0])      //  -> 0
console.log(numbers[5])      //  -> 100

let lastIndex = numbers.length - 1;
console.log(numbers[lastIndex]) // -> 100

const webTechs = [
  'HTML',
  'CSS',
  'JavaScript',
  'React',
  'Redux',
  'Node',
  'MongoDB'
] // 网络技术列表

console.log(webTechs)        // 输出所有数组项
console.log(webTechs.length) // => 数组长度为 7
console.log(webTechs[0])     //  -> HTML
console.log(webTechs[6])     //  -> MongoDB

let lastIndex = webTechs.length - 1
console.log(webTechs[lastIndex]) // -> MongoDB

const countries = [
  '阿尔巴尼亚',
  '玻利维亚',
  '加拿大',
  '丹麦',
  '埃塞俄比亚',
  '芬兰',
  '德国',
  '匈牙利',
  '爱尔兰',
  '日本',
  '肯尼亚'
] // 国家列表

console.log(countries)      // 输出所有国家
console.log(countries[0])   //  -> 阿尔巴尼亚
console.log(countries[10])  //  -> 肯尼亚

let lastIndex = countries.length - 1;
console.log(countries[lastIndex]) //  -> 肯尼亚

const shoppingCart = [
  '牛奶',
  '芒果',
  '西红柿',
  '土豆',
  '牛油果',
  '肉',
  '鸡蛋',
  '糖'
] // 购物车产品列表

console.log(shoppingCart) // -> 输出所有购物车中的商品
console.log(shoppingCart[0]) //  -> 牛奶
console.log(shoppingCart[7]) //  -> 糖

let lastIndex = shoppingCart.length - 1;
console.log(shoppingCart[lastIndex]) //  -> 糖

修改数组元素

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

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 = [
  '阿尔巴尼亚',
  '玻利维亚',
  '加拿大',
  '丹麦',
  '埃塞俄比亚',
  '芬兰',
  '德国',
  '匈牙利',
  '爱尔兰',
  '日本',
  '肯尼亚'
]

countries[0] = '阿富汗'  // 将阿尔巴尼亚替换为阿富汗
let lastIndex = countries.length - 1
countries[lastIndex] = '韩国' // 将肯尼亚替换为韩国

console.log(countries)

数组方法

数组构造器

Array: 用于创建数组的内建构造器。

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

const eightEmptyValues = Array(8) // 它创建了包含 8 个空值的数组
console.log(eightEmptyValues) // [empty x 8]

fill

fill: 用于向数组中添加相同的元素。

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

const eightXvalues = Array(8).fill('X') // 它创建了包含 8 个 'X' 值的数组
console.log(eightXvalues) // ['X', 'X', 'X', 'X', 'X', 'X', 'X', 'X']

const eight0values = Array(8).fill(0) // 它创建了包含 8 个 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: 用于将两个数组合并为一个。

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

length: 数组的长度，即数组中的元素数量。

const numbers = [1, 2, 3, 4, 5]
console.log(numbers.length) // -> 5 是数组中元素的数量

indexOf

indexOf: 用于查找某个元素在数组中的索引。如果该元素存在于数组中，则返回该元素的索引；否则返回 -1。

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

lastIndexOf

lastIndexOf: 返回元素在数组中的最后一个索引。如果元素不存在，则返回 -1。

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

includes: 用于检查数组中是否包含指定元素。如果存在，则返回 true；否则返回 false。

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

Array.isArray: 用于检查数据类型是否为数组。如果是数组，则返回 true；否则返回 false。

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

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

toString

toString: 将数组转换为字符串。

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: 用于连接数组元素并返回一个字符串。可以指定分隔符。如果不指定分隔符，则使用逗号。

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

slice

slice: 从数组中提取部分元素。它不会修改原数组。

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

console.log(numbers.slice()) // -> 它复制了整个数组
console.log(numbers.slice(0, numbers.length)) // -> 它复制了整个数组
console.log(numbers.slice(1, 4)) // -> [2, 3, 4] // 它不会包括最后一个元素

splice

splice: 从数组中删除、替换或添加元素。它修改了原数组。

const numbers = [1, 2, 3, 4, 5]
numbers.splice(0, 1) // 从索引 0 开始删除一个元素
console.log(numbers) // -> [2, 3, 4, 5]

numbers.splice(3, 1, 7) // 删除索引 3 的元素，并在该位置插入 7
console.log(numbers) // -> [2, 3, 4, 7]

numbers.splice(3, 0, 6) // 从索引 3 开始不删除任何元素，插入 6
console.log(numbers) // -> [2, 3, 4, 6, 7]

push

push: 向数组末尾添加一个或多个元素。

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

numbers.push(7)
console.log(numbers) // [1, 2, 3, 4, 5, 6, 7]

pop

pop: 从数组末尾删除一个元素。

const numbers = [1, 2, 3, 4, 5]
numbers.pop() // 删除末尾的5
console.log(numbers) // [1, 2, 3, 4]

从数组开头移除元素

shift: 从数组的开头移除一个元素。

const numbers = [1, 2, 3, 4, 5]
numbers.shift() // -> 从开头移除一个元素
console.log(numbers) // -> [2,3,4,5]

从数组开头添加元素

unshift: 在数组的开头添加一个元素。

const numbers = [1, 2, 3, 4, 5]
numbers.unshift(0) // -> 在开头添加一个元素
console.log(numbers) // -> [0,1,2,3,4,5]

反转数组顺序

reverse: 反转数组的顺序。

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 方法接受一个回调函数，之后我们将介绍如何使用回调函数来进行排序。

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"]

数组的数组

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

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"]