JS 数组详解【编程笔记】
2024-09-29
8
1. 什么是数组
2. JS 数组定义
3. JS 数组的 length
4. JS 数组的遍历
5. JS 数组元素操作
1. 什么是数组
数组是一种将多个数据存储在单个变量名下的优雅方式
数组是一组数据的集合,其中每个数据被称作数组的元素,在数组中可以存放任意数据类型的数据
特别注意: JS 中并没有数组这个数据类型,JS 中的数组也是对象,通过 typeof 关键字可证明这个结论
2. JS 数组定义
创建数组的三种方式
// 隐式创建,又称为字面量创建var arr = ['html', 'css', 'js']// 直接实例化var arr = new Array()var arr = new Array('react', 'vue')// 指定数组长度var arr = new Array(3)
3. JS 数组的 length
数组对象有一个 length 属性,即数组中元素的个数,这个属性是可以修改的。若将 length 属性修改为小于当前数组元素个数,则造成数据丢失;若将 length 属性设置为 0,即可清空数组
const arr = ['html', 'css', 'js', 'vue']arr.length = 2console.log(arr) //['html', 'css']arr.length = 0console.log(arr) //[]
字符串对象也有 length 属性,但是它不能被修改,严格模式下会直接报错,非严格模式下不报错,但也不会修改成功
// 开启严格模式// 'use strict'let str = 'liang'// 修改字符串的 length 属性无效// 在严格模式下会抛出异常,后面代码不再执行str.length = 3console.log(str, str.length) // liang 5
4. JS 数组的遍历
普通遍历
const arr = ['html', 'css', 'js', 'vue']// for 循环语句for (let index = 0; index < arr.length; index++) { console.log(index, arr[index]);}// 数组方法 forEacharr.forEach(item => { console.log(item)})// for...of 循环语句for (const item of arr) { console.log(item);}
数组方法 array.map()
循环处理数组中的每个元素,返回一个处理后的新数组,它不会修改原数组
const arr = [70, 62, 91, 57]const res = arr.map(item => item += 3)console.log(res);//[73, 65, 94, 60]
数组方法 array.reduce()
可以用于统计多维数组中某个字段的和
const arr = [ { name: '语文', score: 80 }, { name: '数学', score: 90 }, { name: '英语', score: 70 }]// res = 0 + 80 + 90 + 70 = 240const res = arr.reduce((total, item) => total += item.score, 0)
数组方法 array.filter()
用于过滤数组
const arr = [ { name: '语文', score: 80 }, { name: '数学', score: 90 }, { name: '英语', score: 70 }, { name: '物理', score: 60 },]// 只留下满足 score >= 80 的元素,不会修改原数组const res = arr.filter(item => item.score >= 80)
数组方法 array.every()
用于检测数组所有元素是否都满足指定条件
const arr = [ { name: '语文', score: 80 }, { name: '数学', score: 90 }, { name: '英语', score: 75 },]// 所有 score 都大于 70 才返回true// 需要特别注意的是当 arr 为空数组时也返回 trueconst bool = arr.every(item => item.score > 70)
数组方法 array.some()
用于检测数组中是否有元素满足指定条件
const arr = [ { name: '语文', score: 80 }, { name: '数学', score: 90 }, { name: '英语', score: 75 },]// 存在 score 大于 75 时, 停止遍历并返回 true// 当 arr 为空数组时, 返回 falseconst bool = arr.some(item => item.score > 75)
数组方法 array.find()
用于获取数组中满足指定条件的第一个元素的值
数组方法 array.findIndex()
用于获取数组中满足指定条件的第一个元素的值的索引
const arr = [ { name: '语文', score: 75 }, { name: '数学', score: 82 }, { name: '英语', score: 60 }]const res = arr.find(item => item.score > 80) // { name: '数学', score: 75 }const index = arr.findIndex(item => item.score > 80) // 1
5. JS 数组元素操作
数组方法在项目中的使用频率非常高,列举出最常用的一些方法
let arr = ['html']// 往数组尾部追加元素arr.push('css')// 往数组头部追加元素arr.unshift('vue')
更新于:4天前赞一波!
相关文章
- git switch 命令详解
- JS 的 apply 方法
- git rebase 命令详解
- JS 字符串和数组相互转换
- JS 数组去重的多种方法
- JS 函数中的 arguments 类数组对象
- 介绍Js简单的递归排列组合
- Node.js 软件包管理工具 (npm)
- JS 性能优化之防抖
- JS 性能优化之节流
- JS 数组方法 every 和 some 的区别
- JS 正则表达式常用方法
- JS 中的 ?. 和 ??
- MySQL 慢查询详解
- git stash 命令详解(保存开发进度)
- git fetch 命令详解
- git merge 命令详解
- homebrew 的 tap 功能详解
- git tag 命令详解
- git checkout 命令详解
文章评论
评论问答