当前位置： 首页 > news >正文

js基础速成-数组

news 2024/9/21 10:29:40

数组

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

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

如何创建一个空数组

在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])      //  -> 100let 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])     //  -> MongoDBlet 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 改为 20console.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)) // trueconst 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,5const 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,5const 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)  // 2console.log(fullStack[0])  // ["HTML", "CSS", "JS", "React", "Redux"]console.log(fullStack[1]) // ["Node", "Express", "MongoDB"]

http://www.mrgr.cn/news/29942.html

相关文章：

  • C编程演奏中文版“生日快乐歌”
  • 智源推出下一代检索增强大模型框架MemoRAG
  • Perl 进程管理
  • Exchange Online 计划 1部署方案
  • 高效开发，从暗藏玄机的文件系统开始—合宙Air201资产定位模组LuatOS
  • 每日学习一个数据结构-红黑树
  • Python面试宝典第50题：分割等和子集
  • vue的插槽
  • 11 - TCPClient实验
  • 深入理解Python中的数据结构：元组（Tuple）
  • DevEco Profiler调优工具（一）
  • XTuner 微调个人小助手认知任务
  • 读构建可扩展分布式系统：方法与实践08微服务
  • 关于嵌入式硬件需要了解的基础知识
  • Vue学习记录之四（watch侦听器和watchEffect高级侦听器）
  • 问：Java中的多线程有哪些实现方式？
  • 【新手上路】衡石分析平台使用手册-租户管理
  • 如何全局修改Git的邮箱、用户名？
  • 比特币10年价格数据(2014-2024)分析(进阶2_时间序列分析)
  • windows10下tomcat安装及配置教程