数组的方法

最新推荐文章于 2022-08-17 10:59:11 发布

晚风yY

最新推荐文章于 2022-08-17 10:59:11 发布

阅读量99

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/m0_55689351/article/details/115467583

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

数组的定义：

数组是一组数据的集合，在内存中是一段连续的内存空间。

数组的特点：数组定义时可以无需指定数组长度存储数据是无需指定具体类型，可以存储任意类型

数组的创建方式：

var a=[]

var a=new Array()
//括号里面参数可以有参数，若为一个数字，表示该数组的长度，如果为多个数字或者一个（多个）非数字表示的是传递数组中应该包含的值。

数组中的方法：

1.join()

将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。

var a = [1,5,6]
a.join()
a.join('-')

2.push()和pop()

push: 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。

pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。【注：pop（）里面有没有参数，都是删除最后一项。】

a.push(5,6,7,8,9)
a.pop()
a.pop(8,9)

3.sort()

sort()：按升序排列元素——即最小的值位于最前面，最大的值排在最后面。在排序时，sort()方法会调用每个元素的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        var arr = ['h', 'e', 'l', 'l', 'o']
        arr.sort()
        console.log(arr);
        
        // toString()  转换成字符串
        var b = 10
        b = b.toString()
        console.log(typeof b);
    </script>
</body>

</html>

4.reverse()：

反转数组项的顺序。

5.concat():

concat() ：将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。【注：传入的不是数组，则直接把参数添加到数组后面，如果传入的是数组，则将数组中的各个项添加到数组中】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = ['h', 'e', 'l', 'l', 'o']
        // 没有给concat 传参，会返回原数组
        var a = arr.concat()
        console.log(a);
        // 传参 会与元素组进行合并
        var b = arr.concat(8,9)
        console.log(b);
        console.log(arr);
        // 如果参数为数组，也按照传入参数的顺序进行正常合并
        var c = arr.concat(200,b)
        console.log(c);
    </script>
</body>

</html>

6.slice()：

返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。

只设置了一个参数，则为起始下标，返回数组下标（包括下标）到数组最后

设置了两个参数，返回起始下标（包括下标）

到终止下标（不包括终止下标）的数组设置了两个参数，终止下标为负数，将负数加上数组长度来替换该位置的数

两个参数都是负数，都加上数组长度转换成正数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var arr = ['h', 'e', 'l', 'l', 'o']
        // 一个参数 会产生起始位置到数组完的一个新数组
        var a = arr.slice(1)
        console.log(a);
        // 2个参数 会返回范围内的元素，第二个参数 不包含
        var b = arr.slice(1,3)
        console.log(b);
        // 2个参数  为负数的参数会与数组长度相加
        var c = arr.slice(1,-1)
        console.log(c);   // [e,l,l]
        // 2个参数
        var d = arr.slice(-5,-1)
        // 0-4
        console.log(d); // ['h', 'e', 'l'，'l']
    </script>
</body>
</html>

7.splice()

很强大的数组方法，它有很多种用法，可以实现删除、插入和替换。

删除：可以删除任意数量的项，只需指定 2 个参数：第一个参数（删除位置），第二个参数（删除个数），第二个参数可选，没有会从下标开始删除到数组结束

插入：第一个参数（插入位置），第二个参数（0），第三个参数（插入的任意数量的元素）

替换：第一个参数（替换位置），第二个参数（删除的个数），第三个参数（插入任意数量的元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var arr = ['h', 'e', 'l', 'l', 'o']
        // 1.删除：需要传入两个参数，第一个删除代表删除的位置，第二个参数代表删除的个数
        // arr.splice(1)
        // arr.splice(1,2)
        // 2.插入:第一个参数插入的位置，第二参数是固定的为0,从第三个参数开始是插入的元素列表
        // arr.splice(4,0,'1','2','3')
        // console.log(arr);
        // 3.替换：第一个参数（替换位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）
        // 找到要替换的位置，把该位置上的元素给删除，插入你想要的元素
        // arr.splice(3,1,'f')
        // arr.splice(3,1,'f','w','123') //  ['h', 'e', 'l', 'f','w','123', 'o']
    </script>
</body>
</html>

8.indexOf()和 lastIndexOf()

indexOf()：接收两个参数：要查找的元素和（可选的）表示查找起点位置的索引。省略第二个参数从数组的开头（位置 0）开始向后查找。

lastIndexOf：接收两个参数：要查找的元素和（可选的）表示查找起点位置的索引。省略第二个参数从数组的末尾开始向前查找。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = ['h', 'e', 'l', 'l', 'o']
        // indexOf()    会返回元素第一次出现的下标，从前完后查找， 如果找不到返回-1
        var a = arr.indexOf('l',4)
        console.log(a);
        // lastIndexOf()  会返回元素第一次出现的位置，顺序从后往前进行查找，如果找不到返回-1
        var b = arr.lastIndexOf('l',0)
        console.log(b);

    </script>
</body>

</html>

9.数组的遍历

for循环

for (var i = 0; i < arr.length; i++) {
       console.log(arr[i]);

for of方式

// for of 直接取数组中的每一个元素

for (var item of arr) {
       console.log(item);
}
for(var p of peoples){
       console.log(p['name']);
       console.log(p.sex);

for in方式

 // for in 不止可以遍历数组 还可以遍历对象
for (var index in arr) {
       console.log(arr[index]);
} 
var person = {
      	name: '张三',
         age: 20,
         height: 180,
         sex: '男'
}
for (var key in person) {
       // 对象[属性] = 属性值
       console.log(person[key]);

10.数组的迭代方法-forEach()

ECMAScript为数组定义了五个迭代方法，每个方法都接收两个参数：要在每一项上面运行的函数和运行该函数的作用域——影响this的值。传入这些方法的函数会接收三个参数（元素，索引，数组本身）

forEach() 对数组的每一项运行给定函数，该方法没有返回值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var peoples = [
            {
                name: '张三',
                sex: '男'
            },
            {
                name: '李四',
                sex: '女'
            },
            {
                name: '王五',
                sex: '男'
            }
        ]
        // forEach
        // 第一个参数是函数 函数也会产生三个参数 
        peoples.forEach(function (item, index, arr) {
            console.log(item);  // 第一个参数是数组的元素
            console.log(index); // 第二个参数是下标
            console.log(arr); // 第三个参数是数组本身
        })
    </script>
</body>

</html>

11.数组的迭代方法-some()和every()

some()对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true

every() 对数组中的每一项运行都给定函数，如果该函数对每一项都返回true，则返回true

    <script>
        var peoples = [
            {
                name: '张三',
                sex: '男'
            },
            {
                name: '李四',
                sex: '女'
            },
            {
                name: '王五',
                sex: '男'
            }
        ]
        // 只要有一个为ture 结果就为true
        var a = peoples.some(function(item,index,arr){
            return item.sex == '男'
        })
        // 全部为true,则结果为true
        var b = peoples.every(function(item,index,arr){
            return item.sex == '男'
        })
        console.log(a,b);

12.数组的迭代方法-filter()

filter（）：对数组的每一项运行给定函数，返回该函数会返回true的元素组成的数组【注：对新数组变化不会影响原数组的改变】

<script>
        var peoples = [
            {
                name: '张三',
                sex: '男',
                age: 30
            },
            {
                name: '李四',
                sex: '女',
                age: 18
            },
            {
                name: '王五',
                sex: '男',
                age: 12
            }
        ]
        // 筛选出 年龄在30岁以下的人
        // 返回一个新数组
        var a = peoples.filter(function (item, index, arr) {
            return item.age < 30
        })
        console.log(a);
    </script>

13.数组的迭代方法-map()

map（）：对数组的每一项运行给定函数，返回每次函数调用结果所组成的数组

可以对数组做集中处理

 <script>
        var peoples = [
            {
                name: '张三',
                sex: '男',
                age: 30
            },
            {
                name: '李四',
                sex: '女',
                age: 18
            },
            {
                name: '王五',
                sex: '男',
                age: 12
            }
        ]
        // 给peoples 数组的所有对象全部新增id属性,id值为下标
        var a = peoples.map(function(item,index,arr){
            item.id = index
            return item
        })
        console.log(a);
       
    </script>

14.reduce和reduceRight()

【注：reduceRight并不常用】

reduce（）和 reduceRight()，这两个方法都会迭代数组所有的元素，然后构建一个最终的值返回。

这两个方法都接收两个参数：一个在每一项上面调用的函数和（可选）作为归并基础的初始值。

给reduce和reduceRight这两个方法的函数都接收四个参数值：前一个值，当前值，索引，数组对象。

这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项。

reduceRight（）与reduce（）使用一样，只不过是从后往前遍历。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var peoples = [
            {
                name: '张三',
                sex: '男',
                age: 30
            },
            {
                name: '李四',
                sex: '女',
                age: 18
            },
            {
                name: '王五',
                sex: '男',
                age: 12
            }
        ]
        // 求出所有年龄的和
        // pre 上一次的值
        // current 当前值
        // index 下标
        // arr 数组本身
        var sum = peoples.reduce(function(pre,current,index,arr){
            return pre+current.age
        },0)
        console.log(sum);
        var sum1 = peoples.reduceRight(function(pre,current,index,arr){
            return pre+current.age
        },0)
        console.log(sum1);
    </script>

晚风yY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数组的方法

数组的定义：数组是一组数据的集合，在内存中是一段连续的内存空间。数组的特点：数组定义时可以无需指定数组长度存储数据是无需指定具体类型，可以存储任意类型数组的创建方式：var a=[]var a=new Array()//括号里面参数可以有参数，若为一个数字，表示该数组的长度，如果为多个数字或者一个（多个）非数字表示的是传递数组中应该包含的值。数组中的方法：1.join()将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方..
复制链接

扫一扫