ES6规范 let var const let赋值对象结构实现值之间的交换（一定要加分号隔开）扩展运算符扩展运算符的扩展

最新推荐文章于 2025-10-06 15:56:03 发布

原创最新推荐文章于 2025-10-06 15:56:03 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6

本文深入探讨了JavaScript中的变量声明，包括var、let和const的区别。通过示例展示了它们在作用域、变量提升、重新赋值和块级作用域等方面的不同。此外，还讲解了如何利用这些特性来实现值交换、扩展运算符的使用等实际编程场景。

<!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 声明的变量 不可以重复 
        // let a = 10
        // // let a = 20 //Uncaught SyntaxError: Identifier 'a' has already been declared
        // console.log(a)
        // // let 有自己的块级作用域
        // {
        //     var b = 10;
        //     let c = 20;

        // }
        // console.log(b) //10
        // console.log(c) //c is not defined
        // // 3.不存在变量提升
        // console.log(q) //undefined
        // var q = 20;
        // console.log(q) //20

        // console.log(w) //Cannot access 'w' before initialization at
        // let w = 20;

        //不影响作用于链
        function text() {
            let e = 30;
            function text2() {
                console.log(e) //30
            }
            text2()
        }
        text()
    </script>
</body>

</html>

let 和 var 之间的关系

var num = [];
        for (var i = 0; i < 5; i++) {
            num[i] = function () {
                console.log(i)
            }
        }
        num[1]() // 5 var会循环完最后输出最后5
        num[2]() // 5
        var num = [];
        for (let i = 0; i < 5; i++) {
            num[i] = function () {
                console.log(i)
            }
        }
        num[1]() // 1 let会产生独立的作用域
        num[2]() // 2

const

<!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>
        //const:声明一个常量，只是不会发生变化的
        // 一般常量用大写字母表示
        // 常量再次声明是必须给他赋值
        // 一旦进行赋值就不能在下面代码中进行重新赋值
        const ARR = [12, 23, 54]
        ARR[0] = 300
        // ARR=[23,23,546] //报错
        console.log(ARR)  //可以修改里面的数据 但不可以更改数组
    </script>
</body>

</html>

var let 案例

<!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>
    <style>
        div {
            border: 1px solid red;
            width: 50px;
            height: 40px;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>

        //let 会产生块级作用域 
        var divs = document.querySelectorAll("div")
        for (let i = 0; i < divs.length; i++) {
            divs[i].onclick = function () {
                divs[i].style.background = 'pink'
            }
        }
        // var divs = document.querySelectorAll("div")
        // for (var i = 0; i < divs.length; i++) {
        //     divs[i].onclick = function () {
        //         divs[i].style.background = 'pink'
        //     }
        // } //报错
    </script>
</body>

</html>

let赋值

<!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 [a, b, c] = [12, 34]
        console.log(a, b, c) //12 34 undefined
        let [q, [w, e]] = [23, [34, 54]]
        console.log(q, w, e) //23,34,54
        let [name = "张三"] = ["张四"]
        console.log(name) // 张四 

        
    </script>
</body>

</html>

对象结构

// 对象结构
    <!-- 对象解构赋值，根据属性名 和变量名进行匹配，相同的属性名的值会赋值给变量名的变量 -->
        let { r, t } = { r: 34, t: 54 }
        console.log(r, t)

        var student = {
            name1: "张三",
            set: 20
        }
        let { name1, set } = student
        console.log(name1, set) //张三 20
        
        //解构失败时
        let { num } = { set: '90' }
        console.log(num) //undefined

实现值之间的交换（一定要加分号隔开）

    <script>
        let x = 1;
        let y = 2;
        [x, y] = [y, x];
        console.log(x, y)
    </script>

扩展运算符

<script>
        // 不知道参数有多少时
        function arr(...values) {
            let sum = 0;
            for (const val of values) {
                sum += val
            }
            return sum
        }
        console.log(arr(20, 20));
        // 不知道返回值有多少时
        function add(a, b, c) {
            return a + b + c
        }
        const numbers = [20, 30, 20]
        console.log(add(...numbers))
    </script>

扩展运算符的扩展

    <script>
        const a1 = [1, 2, 3, 4]
        const [...a2] = a1
        console.log(a2)

        // 合并数组
        const s1 = [4, 5, 6]
        const s2 = [1, 2, 3]
        const s3 = [...s2, ...s1]
        console.log(s3)// 输出1，2，3，4，5，6

        // 与解构赋值结合
        const [q1, ...q2] = [10, 2, 3, 4, 6, 5]
        console.log(q1) //10
        console.log(q2) //2,3,4,6,5

        console.log([...'hello']) //h e l l o 
    </script>