一、数组基础

二、数组的基本操作

三、数组对象

四、数组展开运算符

五、数组配合剩余参数

六、数组解构

七、数组对象解构

八、forEach遍历数组

九、filter 筛选数组

十、Array数组的构造函数

1、reduce方法 —— 累计器

2、find()方法 —— 查找元素

3、every()方法 —— 检测是否全部满足条件

4、join()方法 —— 数组转换字符串

5、Array.from() —— 伪数组转真数组

拓展：String的 split( ) —— 字符串拆为数组

一、数组基础

1、声明一个数组

const / let 数组名 = [ ]

2、数组的赋值

const 变量名 = [数据1,数据2,数据n...]

3、数组的索引从0开始

4、数组的取值、访问、查询

 数组名[下标]

5、查询赋值

数组[下标] = 新值

二、数组的基本操作

1、获取数组长度

数组.length

2、添加数据到数组末尾

数组.push(新增内容)

3、添加数据到数组开头

数组.unshift(新增内容)

4、删除数组最后一个元素

数组.pop()

5、删除数组最前一个元素

数组.shift()

6、删除指定数组索引元素

数组.splice (操作的下标,删除的个数)

7、函数返回数组

return [值1,值2...值n]
//使用变量进行接收，并使用变量调用
变量[下标]

三、数组对象

1、用数组存放对象（数组对象）

const 数组名 = [{对象1},{对象2},...{对象n}
]

2、从数组对象中获取对象的属性值

数组名[下标].属性名

四、数组展开运算符

展开运算符 ( … ) 将一个数组进行展开且不会修改原有数组

例如：

使用Math函数求最大值和最小值的方法，传入数组

        const arr = [10, 20, 30, 40, 50, 60]console.log(Math.max(arr)) //NaN,不可直接输入数组名求出最大值console.log(Math.max(...arr)) //得到60//相当于console.log(Math.max(10, 20, 30, 40, 50, 60)) //60

展开运算符也可用于数组合并

        const arr1 = [10, 20, 30, 40, 50, 60]const arr2 = [60, 50, 40, 30, 20, 10]//合并为一个数组const newArr = [...arr1, ...arr2]console.log(newArr)

五、数组配合剩余参数

剩余参数： ...

在函数的形参中使用 ...参数名

在调用的时候...数组名传递实参

比如：封装一个数组的求和函数

        const arr = [10, 20, 30, 40, 50]//求数组中的和function getSum(...arr) {let sum = 0for (let i = 0; i < arr.length; i++) {sum += arr[i]}return sum}const sum = getSum(...arr)console.log(sum)

六、数组解构

1、数组结构

语法：[变量1,变量2,...,变量n] = [值1,值2,...，值n]

 let / const [变量1,变量2,...,变量n] = [值1,值2,...，值n]//例如<script>const [a, b, c, d] = [1, 2, 3, 4]console.log(a) //1console.log(b) //2console.log(c) //3console.log(d) //4</script>

2、变量互换

        let a = 1let b = 2;[a, b] = [b, a] //a = b,b = aconsole.log(a) //a = 2console.log(b) //b = 1

如果解构的代码行前面有代码，需要在前面的代码末尾加上分号，或者在本行代码开头加上分号

3、变量问题

如果解构的值多余变量，就忽略多余的值

如果解构的变量多余值，则多余的值被默认为undefined

可以给解构的变量设默认值

        const [a = 0, b = 0, c = 0] = [1, 2]console.log(a)//1console.log(b)//2console.log(c)//0

同时可以忽略某些返回值

    <script>const [a, b, , d] = [1, 2, 3, 4]</script>

此时，1赋值给a，2赋值给b，4赋值给d，3没有被变量接收

但忽略的时候要用,隔开

4、二维数组的解构

二维数组写法

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

解构二维数组

    <script>const [a, b, [c, d]] = [1, 2, [3, 4]]</script>

七、数组对象解构

1、解构一维数组对象

        //1、声明数组对象const arr = [{name: '落日',age: 20}]//2、把数组对象解构为变量const [{ name, age }] = arrconsole.log(name) //落日console.log(age) //20

2、解构多级数组对象

八、forEach遍历数组

forEach作用：遍历数组中每个元素

有了forEach，就不需要用普通的for循环去遍历数组了

语法：

数组.forEach(function(当前元素item,[当前索引index]){//函数体
})

注意：index索引是可选参数，item代表索引的值，是必写的

举例：遍历普通数组

        const arr = [10, 20, 30, 40, 50, 60]arr.forEach(function (item, index) {console.log(item) //元素console.log(index) //索引})

同样，forEach也可以遍历数组对象

举例：遍历数组对象

        const arr = [{id: 1,name: '落日'},{id: 2,name: '听风'},{id: 3,name: '不见雨'},]arr.forEach(function (item, index) {console.log(item.id)console.log(item.name)})

可以使用箭头函数来简化

        arr.forEach(item => {const { id, name } = itemconsole.log(id)console.log(name)})

九、filter 筛选数组

作用：筛选符合条件的元素并返回给新数组

语法：

const 变量名 = 筛选的数组.filter(function(item,index){//函数体
})

举例：

选出数组中>=20的数

①、普通函数写法

        const arr = [5, 10, 15, 20, 30, 40, 50]//使用filter选出>=20的元素到新数组中const newArr = arr.filter(function (item) {return item >= 20})console.log(newArr)

②、箭头函数写法

        const newArr = arr.filter(item => item >= 20) //前面是箭头函数，后面是return的条件console.log(newArr)

返回的是符合条件的新数组，不影响到原数组的使用

十、Array数组的构造函数

上面已经写出了forEach遍历数组、fliter筛选数组，下面来记录几个其他的方法

1、reduce方法 —— 累计器

作用：返回函数累计器处理的结果，常用于求和

语法：

        数组.reduce(function () {}, 起始值)

参数：起始值可以省略，以累计值开始

在reduce中有四个形参

        数组.reduce(function (累计值, 当前元素, [索引], [原数组]) {}, 起始值)

累计值与当前元素必写

累计值用： prev 表示

当前元素： item

举例：求数组arr中的和

        const arr = [5, 10, 15, 20, 30, 40, 50]const sum = arr.reduce(function (prev, item) {//返回累计值+当前元素即可return prev + item})console.log(sum)

优化：箭头函数

        const sum = arr.reduce((prev, item) => prev + item)console.log(sum)

2、find()方法 —— 查找元素

作用：查找数组指定的元素

举例：查找数组中的'不见雨'

        const arr = ['落日', '听风', '不见雨']const re = arr.find(function (item) {return item === '不见雨'})console.log(re)

如果找的元素不存在，则返回值为undefined

优化：箭头函数

        const arr = ['落日', '听风', '不见雨']const re = arr.find(item => item === '不见雨')console.log(re)

find更多可用于数组对象

        const arr = [{name: '落日',age: 19},{name: '听风',age: 20},]//即当前元素.属性 ---> item.nameconst re = arr.find(item => item.name === '听风')console.log(re)console.log(re.name)

查找数组对象，返回的是查找元素所在数组中的对象，并不是属性，所以要获取还是要 re.属性名

3、every()方法 —— 检测是否全部满足条件

作用：用来检测数组中的元素是否都满足条件

举例：检测数组中是否每个元素都不为0

        const arr = [10, 20, 30, 40, 50]const flag = arr.every(item => item != 0)console.log(flag)

返回的是布尔值

4、join()方法 —— 数组转换字符串

作用：把数组元素转换成字符串

语法：数组.join([拼接符])

举例：把数组中的值用符号 - 拼接起来

        const arr = ['落日', '听风', '不见雨']const str = arr.join('-')console.log(str)

5、Array.from() —— 伪数组转真数组

    <ul><li>1</li><li>1</li><li>1</li></ul><script>const lis = document.querySelectorAll('ul li') //lis是伪数组console.log(lis) //NodeList(3)伪数组//转为真数组const lis1 = Array.from(lis)console.log(lis1) //Array(3)</script>

拓展：

1、String的 split( ) —— 字符串拆为数组

作用：把字符串拆分为数组

语法： split ('分隔符')

举例：把'落日and听风and不见雨，以and作为分隔符拆开为一个数组

        const str = '落日and听风and不见雨'const arr = str.split('and')console.log(arr)

2、Arrays.sort()

语法：数组名.sort(fn)

作用：升序排序数组

JavaScript的数组基础数组进阶单元知识点相关推荐

asp子窗口读取父窗口数据_算法与数据结构基础 - 数组(Array)
数组基础数组是最基础的数据结构,特点是O(1)时间读取任意下标元素,经常应用于排序(Sort).双指针(Two Pointers).二分查找(Binary Search).动态规划(DP)等算法.顺 ...
30.JavaScript数组基础、遍历、底层实现、push、pop、at、length
文章目录数组数组声明 at() push.pop.shift.unshift 栈队列遍历 length .length的意义 .length可写 Array() 多维数组 toString() ...
JavaScript（三）——对象与数组基础及API
文章目录数据存储 (1)原始类型存储 (2)引用类型存储一.面向对象二.对象 1分类 2 自定义对象创建方式(封装) 3.销毁对象 4.访问.删除对象属性 5.遍历对象 6.检测对象属性 7.方 ...
【超详细整理数组基础知识点】（学习笔记8--数组上）
前言新星计划第二篇博文,整理不易,点赞支持一下吧!!! 目录一.一维数组 1.数组的定义 2.数组的大小 3.数组的初始化 4.数组的元素访问二.数组与函数参数 1.数组元素作为函数参数 2.数 ...
JavaScript —— JSchallenger Arrays 数组练习（测试一下你的 JS 数组基础）【专题二】
文章目录二.JavaScript 数组练习 1. 返回数组 a 的第 n 个元素 2. 删除数组 a 的前三个元素,并返回结果 3. 提取数组 a 的后三个元素,并返回结果 4. 提取数组 a 的前 ...
【JavaScript基础-二维数组】JavaScript修改二维数组的某个元素时，其上下元素也受到影响
JavaScript修改二维数组的某个元素时,其上下元素也受到影响发布:2021年8月15日18:54:56 前言在研究背包问题时,一开始往往会用二维数组的形式来描述,这样会便于理解.但是,我在操 ...
C语言基础10——指针进阶。字符指针、指针数组、数组指针、函数指针、函数指针数组、回调函数、数组名详解、杨氏矩阵、字符串旋转
目录字符指针指针数组数组指针数组传参.指针参数函数指针函数指针数组指向函数指针数组的指针回调函数练习数组名的意义指针笔试题字符指针字符指针的另一种使用方式 #include ...
A01_[NumPy中文网]数组基础（创建数组，多维数组切片，数组属性）、使用数组（基本操作符，数组特殊运算符）、索引（花式索引，布尔索引，缺省索引）
NumPy简单入门教程 NumPy是Python中的一个运算速度非常快的一个数学库,它非常重视数组.它允许你在Python中进行向量和矩阵计算,并且由于许多底层函数实际上是用C编写的,因此你可以体验在 ...
彻底掌握 Javascript（九）数组【讲师辅导】-曾亮-专题视频课程
彻底掌握 Javascript(九)数组[讲师辅导]-1039人已学习课程介绍 javascript 数组也是一个对象,它不属于基础类型,在javascript中,数组非常灵活,而且 ...

JavaScript的数组基础数组进阶单元知识点

一、数组基础

二、数组的基本操作

三、数组对象

四、数组展开运算符

五、数组配合剩余参数

六、数组解构

七、数组对象解构

八、forEach遍历数组

九、filter 筛选数组

十、Array数组的构造函数

1、reduce方法 —— 累计器

2、find()方法 —— 查找元素

3、every()方法 —— 检测是否全部满足条件

4、join()方法 —— 数组转换字符串

5、Array.from() —— 伪数组转真数组

拓展：

1、String的 split( ) —— 字符串拆为数组

2、Arrays.sort()

JavaScript的数组基础数组进阶单元知识点相关推荐

最新文章

热门文章