数组对象中常用的方法

1、往数组中添加删除元素

在这里插入图片描述

1.1、往数组中添加元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 添加数组元素的方法
        // 1、push()在我们数组的末尾 添加一个或多个数组元素  push  推
        var arr = [1, 2, 3];
        arr.push(4,'haha');
        // console.log(arr.push(4,'haha'));
        console.log(arr);
        // (1) push是可以给数组追加新的元素
        // (2) push()参数直接写 数组元素就可以了
        // (3) push完毕之后,返回的结果是 新数组的长度
        // (4) 原数组也会发生变化


        // 2、unshift 在我们的数组的开头 天机一个或多个数组元素
        console.log(arr.unshift('red','purple'));
        console.log(arr);
        // (1) unshift是可以给数组前面追加新的元素
        // (2) unshift()参数直接写 数组元素就可以了
        // (3) unshift完毕之后,返回的结果是 新数组的长度
        // (4) 原数组也会发生变化
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

1.2、往数组中删除元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        // 3、pop() 它可以删除数组的最后一个元素 记住一次只能删除一个元素
        console.log(arr.pop());
        console.log(arr);
        // (1) pop是可以删除数组的最后一个元素  记住一次只能删除一个元素
        // (2) pop()没有参数
        // (3) pop()完毕之后,返回的结果是 删除的那个元素
        // (4) 原数组也会发生变化 


        // 4、shift() 它可以删除数组的第一个元素
        console.log(arr.shift());
        console.log(arr); 
        // (1) shift()是可以删除数组的第一个元素  记住一次只能删除一个元素
        // (2) shift()没有参数
        // (3) shift()完毕之后,返回的结果是 删除的那个元素
        // (4) 原数组也会发生变化 
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2、筛选数组

使用数组的push()方法筛选数组元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 筛选出数组中值小于2000的元素,放到新数组中去
        var arr = [1000,2000,2500,800];
        var newArr = [];
        for(var i=0;i<arr.length;i++){
    
    
            if(arr[i] < 2000){
    
    
                newArr.push(arr[i]);
            }
        }
        console.log(newArr);
        
    </script>
</head>
<body>
    
</body>
</html>

3、翻转、排序

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 数组排序
        // 1、翻转数组
        var arr = ['pink','red','blue'];
        arr.reverse();
        console.log(arr);

        // 2、数组排序(冒泡排序)
        // a - b升序排列      b - a降序排列 
        var arr1 = [13, 4, 77, 1, 7];
        arr1.sort(function(a, b){
    
    
            return a - b;
        })
        console.log(arr1);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

4、数组索引方法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 返回数组索引方法 indexOf(数组元素) 作用是返回该数组元素的索引号 从前面开始查找
        // 它只返回第一个满足条件的索引号
        // 它如果在该数组里面找不到元素,则返回的是 -1
        var arr = ['red','blue','yellow','green','white'];
        console.log(arr.indexOf('blue'));
        
        // 返回数组元素索引号 lastIndexOf(数组元素) 作用就是返回该数组元素的索引号 从后面开始查找
        var arr = ['red','blue','yellow','green','white'];
        console.log(arr.lastIndexOf('blue'));
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

5、数组去重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        
        function unique (arr){
    
    
            var newArr = [];
            for(var i = 0;i<arr.length;i++){
    
    
                if(newArr.indexOf(arr[i]) === -1){
    
    
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }
        
        var demo = unique(['a','b','c','d','e','a','b','c']);
        console.log(demo);
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

6、数组转换为字符串

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 数组转换为字符串
        // 1、toString() 将我们的数组转换为字符串
        var arr = [1, 2, 3];
        console.log(arr.toString());//1,2,3

        // 2、join(分隔符)
        var arr1 = ['green','blue','pink'];
        console.log(arr1.join());     //green,blue,pink
        console.log(arr1.join('-'));  //green-blue-pink
        console.log(arr1.join('&'));  //green&blue&pink       
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_46112274/article/details/121569898