2025年ES6语法-遍历-reduct-展开语法-解构语法

编程基础 • 2025-04-02 15:57 • 阅读 13

遍历数组语法

<script>
        var emps = ['mike', 'jack', 'tom', 'smill', 'shirley']

        // 遍历数组的方式: 4种

        // 方式1: 序号
        for(let i = 0; i<emps.length;i++){
            console.log(i, emps[i])
        }

        // 方式2: for..in;  为对象准备的遍历方式
        for(const key in emps){
            console.log(key, emps[key]);
        }

        // 方式3: ES6中提供 for..of 语法, 专门遍历数组
        // 直接遍历值, 没有序号
        for(const value of emps){
            console.log(value);
        }

        // 方式4: forEach
        emps.forEach((value, index, array)=>{
            console.log(index, value);
        })
</script>

以上四种方式都可以使用, 看自己喜欢哪一种(个人是比较喜欢forEach的写法, 可以简化, 上篇文章有说到, 这里我就没简化来写)

通过打印结果来看, 是没问题的

reduct

reduct: 归纳,简化;

把数组中的元素合并成1个值

<script>
        var nums = [12, 34, 54, 65, 23, 5, 456, 3, 4, 4]

        // box: 容器
        // 参数2: 代表box容器的默认值, 此处是 0 ; 如果不写,则默认是数组的第一个元素
        // 自动遍历每个元素, 把盒子进行传递
        var t = nums.reduce((box, value)=>{
            // 元素把 值 加入到 盒子中, 返回给下个元素
            return box + value
        }, 0)
        console.log(t);
</script>

展开语法

ES6新增: ...运算符, 可以展开数组或对象类型

<script>
    var a = [11, 22, 33]
    // ...可以把数组中的元素取出来
    var b = [...a, 44, 55]
    console.log(b);
</script>

解构语法

通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。

特点：

解构赋值是对赋值运算符的扩展。
是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

代码片段:

<script>
        var emps = ['小明', '小红','小亮','小黄']

        // 把数组元素拿出来放在4个变量里

        // 解构语法
        var [emp0, emp1 , emp2, emp3] = emps
        console.log(emp0, emp1, emp2, emp3);
</script>

说明：在解构赋值语法中，"="左侧的叫做数据模型，="右侧的叫做数据源。

如果想指定其中的某一个, 可以用 , 逗号符号隔开, 这样就是占一个位置, 什么也不做

<script>
        var emps = ['小明', '小红','小亮','小黄']

        // 把数组元素拿出来放在4个变量里

        // 解构语法
        var [emp0, , emp2, emp3] = emps
        console.log(emp0 , emp2, emp3);
</script>

2025年ES6语法-遍历-reduct-展开语法-解构语法

遍历数组语法

reduct

展开语法

解构语法

相关推荐