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

目录

一、数组基础

二、数组的基本操作

三、数组对象

四、数组展开运算符

五、数组配合剩余参数

六、数组解构

七、数组对象解构

八、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 = 0
            for (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) //1
        console.log(b) //2
        console.log(c) //3
        console.log(d) //4
    </script>

2、变量互换

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

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

3、变量问题

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

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

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

        const [a = 0, b = 0, c = 0] = [1, 2]
        console.log(a)//1
        console.log(b)//2
        console.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]) //1
        console.log(arr[1]) //2
        console.log(arr[2]) //[3,4]
        console.log(arr[2][0]) //3
        console.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 }] = arr
        console.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 } = item
            console.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.name
        const 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)

作用：升序排序数组