03JavaScript 数组的操作方法(重点)

1.push() 方法 数组的尾部添加一个或多个元素

<!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 = [1, 2, 3, 6, 5, 4, 9];

        // push()方法 在数组的尾部添加一个或者多个元素
        console.log(arr.push(10, 11));
        console.log(arr);

        // 1.参数:需要添加的元素,可以是一个或者多个
        // 2.返回值:返回添加过后数组的新长度
        // 3.改变原数组
    </script>
</body>

</html>

2.pop() 方法 从数组尾部删除一个元素

<!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 = [1, 2, 3, 6, 5, 4, 6];

        // pop()方法 在数组的尾部删除一个元素
        console.log(arr.pop());
        console.log(arr);

        // 1.参数:没有参数
        // 2.返回值:返回被删除的元素
        // 3.改变原数组
    </script>
</body>

</html>

3.shift() 方法 从数组的头部删除一个元素

<!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 = [1, 3, 6, 9, 5, 3, 55, 3, 6];

        // shift()方法 从数组的头部删除一个元素
        console.log(shift());
        console.log(arr);

        // 1.参数:没有参数
        // 2.返回值:返回被删除的元素
        // 3.改变原数组
    </script>
</body>

</html>

4. unshift() 方法 ,从数组的头部添加一个或多个元素

<!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 = [1, 2, 3, 4, 5, 6];

        // unshift()方法  在数组的头部添加一个或多个元素
        console.log(arr.unshift(0, 10));
        console.log(arr);

        // 1.参数:要添加的新元素,一个或者多个
        // 2.返回值:返回添加过后数组的新长度
        // 3.改变原数组
    </script>
</body>

</html>

5.includes()方法 检索数组当中是否包含某个元素

<!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 = [1, 3, 2, 5, 6, 9];

        // includes() 方法 ,检索数组当中是否有某个元素
        console.log(arr.insludes(1));
        console.log(arr);

        // 1.参数:要检索的元素(必须的);开始的位置(可选的,是个下标,如果不写这个参数
        // 的话就是检索全局)(可以是负数,表示从倒数第几个开始找)
        // 2.返回值:返回true或false
        // 3.不改变原数组
    </script>
</body>

</html>

6.indexOf() 方法 检测数组当中某个元素第一次出现的位置

<!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 = [1, 2, 3, 6, 5, 8];

        // indexOf()方法 检索数组当中某个元素第一次出现的位置
        console.log(arr.indexOf(3));
        console.log(arr);

        // 1.参数:需要检索的值(必须的);开始检索的位置(可选的)(可以是负数)
        // 2.返回值 返回值为查找元素第一次出现位置的索引下标,如果检测失败返回 -1
        // 3.不改变原数组
    </script>
</body>

</html>

7.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 = [1, 3, 6, 8, 9, 9, 6, 1];

        // lastIndexOf() 方法 检索数组当中某个元素最后一次出现的位置
        console.log(arr.lastIndexOf(6));
        console.log(arr.lastIndexOf(6, -3));
        console.log(arr);

        // 1.参数:要查找元素(必须的);开始检索的位置(可选的,从后往前找)(支持负数)
        // 2.返回值 :返回查找元素的最后一次出现位置的下标,如果检索失败,则返回-1
        // 3.不改变原数组
    </script>
</body>

</html>

8.join() 方法 将数组转换为字符串(可以传递参数,可以控制字符串之间的连接符号)

<!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 = [1, 2, 3, 6, 5, 4];

        // jion() 方法,将数组转换为字符串
        console.log(arr.join());
        console.log(arr.join('-'));
        console.log(arr.join(''));

        // 1.参数:转换为字符串之间的连接符(可选的,默认以逗号进行连接)
        // 2.返回值:返回转换之后的字符串
        // 3.不改变原数组
    </script>
</body>

</html>

9.toString() 方法 将数组转换为字符串(不可以传递参数,也不能控制字符串之间的连接符号)

<!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 = [1, 2, 3, 6, 5, 1, 2];

        // toString() 方法,将数组转换为字符串
        console.log(arr.toString());

        // 1.参数 :没有参数
        // 2.返回值:返回转换后的字符串
        // 3.不改变原数组

        // toString()和join()的区别
        // join()可以传递参数,用来控制字符串之间的连接符号,toString()不能

        // toString()和join()的相同点
        // 1.都可以将数组转换为字符串,默认以逗号连接
        // 2.都不改变原数组
    </script>
</body>

</html>

10. Array.isArray() 方法 检测一个值是不是一个数组,是数组的话返回true,不是数组的话返回false

<!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 = [1, 2, 3, 6, 5, 2, 3];

        // Array.isArray() 方法检测一个值是否为一个数组
        console.log(Array.isArray(arr));

        // 1.参数:要检测的值
        // 2.返回值:是数组返回true  不是数组返回false
        // 3.不改变原数组
    </script>
</body>

</html>

11.splice() 方法 数组的增删改

<!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 = [1, 2, 3, 4, 5, 6];

        // splice() 方法,数组的增删改


        // 添加 splice(开始添加的位置,0,需要添加的元素)
        // arr.splice(0, 0, 0, -1);
        // console.log(arr);

        // 删除 splice(开始删除的位置,删除几个)
        // arr.splice(1, 2);
        // console.log(arr);

        // 修改 splice(开始修改的位置,修改几个,添加替换的元素)
        arr.splice(0, 3, -1, -2, -3);
        console.log(arr);

        // 1.参数:开始操作的位置,删除元素的个数,添加的新元素(如果没有,则是删除操作)
        // 2.返回值: 返回被删掉的内容所组成的数组
        // 3.改变原数组

    </script>
</body>

</html>

12.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 = [1, 2, 3, 6, 9, 10];

        // slice() 方法 复制数组
        console.log(arr.slice(0, 3));
        console.log(arr);

        // 1.参数:开始复制的位置,结束的位置(包含开始位置,不包含结束的位置)(支持负数)
        // 2.返回值:返回复制的元素
        // 3.不改变原数组

        // 如果要克隆数组的话,直接传递一个参数 0

    </script>
</body>

</html>

13.reverse() 方法 颠倒数组

<!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 = [1, 2, 3, 4, 5, 6];

        // reverse()方法 颠倒数组
        console.log(arr.reverse());
        console.log(arr);

        // 1.参数:没有参数
        // 2.返回值:返回颠倒后的数组
        // 3.改变原数组
    </script>
</body>

</html>

14.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 = [1, 2, 3, 4, 5];
        var arr1 = [6, 7, 8, 9, 0];

        // concat() 方法,合并一个或多个数组
        console.log(arr.concat(arr1));
        console.log(arr);

        // 1.参数:要合并的数组(可以是一个,也可以是多个)
        // 2.返回值 返回合并后的新数组
        // 3.不改变原数组
    </script>
</body>

</html>

15.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 = [10, 13, 6, 38, 2, 3, 5];
        // arr.sort();   //只能对十以内的数进行排序
        // console.log(arr);

        // 要想正常排序
        arr.sort(function (a, b) {
            return a - b;
        })
        console.log(arr);
    </script>
</body>

</html>

16.总结

<!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>
        // 数组的操作方法

        // 1.改变原数组的
        // push()          数组的尾部添加一个或多个元素
        // pop()           数组的尾部删除一个元素
        // shift()         数组的头部删除一个元素
        // unshift()       数组的头部添加一个或多个元素
        // splice()        数组的增删改
        // reverse()       颠倒数组
        // sort()          数组的排序

        
        // 2.不改变原数组的
        // includes()      检索数组当中是否包含某个元素
        // indexOf()       检索数组当中某个元素第一次出现的位置
        // lastIndexOf()   检索数组当中某个元素最后一次出现的位置(从后往前找)
        // join()          将数组转换为字符串(可以传参控制连接符号)
        // toString()      将数组转换为字符串(不可以传参,不能控制连接符号)
        // Array.isArray() 检索一个值是不是一个数组
        // slice()         复制数组(包含开始位置,不包含结束位置)
        // concat()        合并数组
    </script>
</body>

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值