JavaScript-数组常用方法

快乐小码农

 关注

阅读 60

2022-05-23


如下代码是示例中所需要使用到的变量数据提前贴出来放在这。


let arr = [1, 2, 3, 4, 5];

清空数组

方式一。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = [1, 2, 3, 4, 5];
        arr = [];

        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

方式二。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = [1, 2, 3, 4, 5];
        arr.length = 0;

        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

方式三。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = [1, 2, 3, 4, 5];
        arr.splice(0, arr.length)

        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

将数组转换为字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = [1, 2, 3, 4, 5];

        let str = arr.toString();
        console.log(str);
        console.log(typeof str);
    </script>
</head>
<body>
</body>
</html>

将数组转换成指定格式字符串

  • ​​join​​​ 方法默认情况下如果没有传递参数, 就是调用​​toString();​​
  • ​​join​​ 方法如果传递了参数, 就会将传递的参数作为元素和元素之间的连接符号
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = [1, 2, 3, 4, 5];

        let str = arr.join("+");
        console.log(str);
        console.log(typeof str);
    </script>
</head>
<body>
</body>
</html>

将两个数组拼接为一个数组

????注意点: 数组 ​​不能够使用加号​​​ 进行拼接, 如果使用 ​​加号​​ 进行拼接会先转换成字符串再拼接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arrOne = [1, 3, 5];
        let arrTwo = [2, 4, 6];

        let res = arrOne + arrTwo;
        console.log(res);
    </script>
</head>
<body>
</body>
</html>

不使用加号的方式进行拼接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arrOne = [1, 3, 5];
        let arrTwo = [2, 4, 6];

        let res = arrOne.concat(arrTwo);
        console.log(res);
    </script>
</head>
<body>
</body>
</html>

????注意点

扩展运算符在解构赋值中 (等号的左边) 表示将剩余的数据打包成一个新的数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arrOne = [1, 3, 5];
        let arrTwo = [2, 4, 6];

        let [...res] = [arrOne, arrTwo];
        console.log(res);
        console.log(typeof res);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组常用方法_html

扩展运算符在等号 ​​右边​​, 那么表示将数组中所有的数据解开, 放到所在的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arrOne = [1, 3, 5];
        let arrTwo = [2, 4, 6];

        // let res = [1, 3, 5, 2, 4, 6];
        let res = [...arrOne, ...arrTwo];
        console.log(res);
        console.log(typeof res);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组常用方法_html_02

不会修改原有的数组, 会生成一个新的数组返回给我们。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arrOne = [1, 3, 5];
        let arrTwo = [2, 4, 6];

        let res = [...arrOne, ...arrTwo];
        console.log(res);
        console.log(typeof res);

        console.log(arrOne);
        console.log(arrTwo);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组常用方法_javascript_03

对数组中的内容进行反转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = [1, 2, 3, 4, 5];

        // [1, 2, 3, 4, 5]-[5, 4, 3, 2, 1]
        let res = arr.reverse();
        console.log(res);
        
        // 注意点: 会修改原有的数组
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组常用方法_html_04

截取数组中指定范围内容

slice 方法是包头不包尾 (包含起始位置, 不包含结束的位置) 不会改变原有数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = [1, 2, 3, 4, 5];

        //  0  1  2  3
        // [1, 2, 3, 4, 5]
        let res = arr.slice(1, 3)
        console.log(res);
        console.log(arr);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组常用方法_数组_05

查找元素在数组中的位置

  • ​​indexOf​​ 方法如果找到了指定的元素, 就会返回元素对应的位置
  • ​​indexOf​​​ 方法如果没有找到指定的元素, 就会返回​​-1​​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        //         0  1  2  3  4  5
        let arr = [1, 2, 3, 4, 5, 3];

        let resOne = arr.indexOf(3);
        let resTwo = arr.indexOf(6);

        console.log(resOne);
        console.log(resTwo);
    </script>
</head>
<body>
</body>
</html>

????注意点

indexOf 方法默认是 ​​从左至右​​ 的查找, 一旦找到就会立即停止查找。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        //         0  1  2  3  4  5
        let arr = [1, 2, 3, 4, 5, 3];

        let res = arr.indexOf(3);

        console.log(res);
    </script>
</head>
<body>
</body>
</html>

还可以指定开始的查找位置进行查找指定的元素如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        //         0  1  2  3  4  5
        let arr = [1, 2, 3, 4, 5, 3];

        // 参数1: 需要查找的元素
        // 参数2: 从什么位置开始查找
        let res = arr.indexOf(3, 4);

        console.log(res);
    </script>
</head>
<body>
</body>
</html>

JavaScript-数组常用方法_数组_06

​​lastIndexOf​​​ 方法默认是 ​​从右至左​​ 的查找, 一旦找到就会立即停止查找。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        //         0  1  2  3  4  5
        let arr = [1, 2, 3, 4, 5, 3];

        let resOne = arr.lastIndexOf(3);
        let resTwo = arr.lastIndexOf(3, 4);
        
        console.log(resOne);
        console.log(resTwo);
    </script>
</head>
<body>
</body>
</html>

判断数组中是否包含某个元素

我们可以通过 ​​indexOf​​​ 和 ​​lastIndexOf​​​ 的结果, 判断是否是 ​​-1​​ 即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = [1, 2, 3, 4, 5];

        let resOne = arr.indexOf(8);
        let resTwo = arr.lastIndexOf(2);

        console.log(resOne === -1 ? "不存在" : "存在");
        console.log(resTwo === -1 ? "不存在" : "存在");
    </script>
</head>
<body>
</body>
</html>

也可以通过 ​​includes​​​ 函数来进行判断，返回值为 ​​true​​​、​​false​​，true 代表存在，false 反之。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let arr = [1, 2, 3, 4, 5];

        let res = arr.includes(4);
        console.log(res === true ? "存在" : "不存在");
    </script>
</head>
<body>
</body>
</html>




相关推荐

JavaScript-数组

8052cf60ff5c 107 0 0

JavaScript-字符串常用方法

上善若水山西太原 54 0 0

JavaScript-数组遍历

西红柿上校 55 0 0

JavaScript-数组高级API

伽马星系 35 0 0

JavaScript-数组解构赋值

流沙雨帘 74 0 0

javascript数组常用方法总结

巧乐兹_d41f 87 0 0

JavaScript-属性方法分类

pipu 80 0 0

JavaScript-数组增删改查

孟祥忠诗歌 86 0 0

JavaScript的数组常用方法

四月天2021 72 0 0

JavaScript 常用数组方法

烟中雯城 80 0 0

精彩评论（0）

0 0 举报