JavaScript数组操作详解-优快云博客

数组的结构：

<!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>
        let arr = [1, 2, 3, 4]
        // 打印数组里面下标为0的元素
        console.log(arr[0]);
        // 打印数组
        console.log(arr);
        // 打印数组的长度
        console.log(arr.length);
        // 遍历数组
        for (let i = 0; i <= arr.length; i++) {
            console.log(arr[i]);

        }
    </script>
</body>

</html>

效果图：

数组的增删改查：

<!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>
        // 声明数组
        let arr = [1, 2, 3, 4]

        // 在数组末尾增加元素 数组名.push(元素) 数组的增加
        arr.push(5);
        console.log(arr);
        
        // 在数组的开头增加元素 数组名.unshift(元素) 数组的增加
        arr.unshift(0);
        console.log(arr);

        // 删除数组末尾最后一个的元素  数组名.pop()   数组的删除
        arr.pop()
        console.log(arr);

        // 删除数组开头的第一个元素 数组名.shift()  数组的删除
        arr.shift()
        console.log(arr);
        
        // 删除指定的元素  数组名.splice(下标,删除的数量) 删除的数量没有写 默认后面全部删除
        arr.splice(1,1)
        console.log(arr);
        
        // 数组的赋值  数组名[下标]=赋的值
        arr[1]=10;
        console.log(arr);
        arr[5]=0;
        console.log(arr);



    </script>
</body>

</html>

效果图：

拓展运算符：

<!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>
        // 声明一个对象
        let per={
            name:'周氏吃包',
            sex:'男',
            age:20
        }
        let nes={
            screen:2,
            dads:'8'
        }
        let mos={
            ...nes,//拓展运算符...
            ...per,
            names:'花里胡哨'
        }
        console.log(mos);
    </script>
</body>
</html>

效果图：

在数组中使用拓展运算符：

<!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>
        // 链接两个数组
        let arr1 = [1, 2, 3]
        let arr2 = [4, 5, 6]

        // es5语法
        let arr3 = arr1.concat(arr2);
        console.log(arr3);

        // es5
        let arr4 = [...arr1, ...arr2]
        console.log(arr4);

        // 求最大值
        let arr = [11, 22, 444, 55]
        // es5写法  利用apply传参 自动遍历数组arr
        let max1 = Math.max.apply(Math,arr);
        console.log(max1);

        // es6写法
        let max=Math.max(...arr);
        console.log(max);





    </script>
</body>

</html>

效果图：

箭头函数：

<!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>
        let ae=(a,b)=>{
            return a+b
        }
        console.log(ae(10,20));
        console.log(this);  
         
        // 当初只有一个参数时传入参数的括号可以省略   要省略花括号要把return也省略掉
        let aye=a=>a*2;
       

    </script>
</body>
</html>

数组、拓展符、箭头函数

数组的结构：

效果图：

数组的增删改查：

效果图：

拓展运算符：

效果图：

在数组中使用拓展运算符：

效果图：

箭头函数：

效果展示：