提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

ES5和ES6作用域

ES6 作用域 Es5
2023-09-14 08:58:23 时间 
ES5和ES6作用域
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>ES5和ES6的区别</title>
</head>

<body>
    <script type="text/javascript">
    //ES5 中作用域，
    const callbacks = []
    //i是通过var定义的 是全局变量
    for (var i = 0; i <= 2; i++) {
        //闭包的作用域是全局
        callbacks[i] = function() {
            return i * 2 //callbacks中的return i*2，是对变量的引用，而不是对函数变量值的引用。函数体中是一个变量，而不是一个值
        }
    }
    console.table([
        callbacks[0](), //6,for循环执行完毕，i=3，调用callback的时候 i=3
        callbacks[1](), //6
        callbacks[2](), //6
    ]);
    console.log([
        callbacks[0](),
        callbacks[1](),
        callbacks[2](),
    ]);

    //ES6  作用域
    const callbacks2 = []
    //用let声明的变量有块作用域的概念
    for (let j = 0; j <= 2; j++) {
        callbacks2[j] = function() {
            return j * 2 //闭包取决于当前的块作用域，每循环一次，它就重新生成新的作用域
        }
    }
    console.table([
        callbacks2[0](), //0
        callbacks2[1](), //2
        callbacks2[2](), //4
    ]);

    //ES5 es5中要执行立即执行函数（(function(){},()），才能对作用域进行隔离。
    ((function() {
        const foo = function() {
            return 1;
        }
        console.log("foo === 1", foo() === 1);
        ((function() {
            const foo = function() {
                return 2;
            }
            console.log("foo === 2", foo() === 2);
        })())
        console.log("foo === 1", foo() === 1);
    })())
    //ES6  es6:{}表示一个新的作用域，{}可以对作用域进行隔离。
    {
        function foo() {
            return 1;
        }
        console.log("foo === 1", foo() === 1); {
            function foo() {
                return 2;
            }
        }
        console.log("foo === 2", foo() === 2);

    }

    //ES3,ES5写法
    var evens = [1, 2, 3, 4, 5];
    var odds = evens.map(function(v) { //遍历
        return v + 1
    });
    console.log(evens, odds)
    //ES6箭头函数
    {
        let evens = [1, 2, 3, 4, 5];
        let odds = evens.map(v => v + 1);
        console.log(evens, odds)
    }
    /*
    *箭头函数与普通函数的区别，在于this的绑定

    */
    //ES3,ES5，this指向是该函数被调用的对象
    {
        var factory = function() {
            this.a = 'a';
            this.b = 'b';
            this.c = {
                a: 'a+',
                b: function() {
                    return this.a
                }
            }
        }
        console.log(new factory().c.b()); //a+
    }
    //ES6  this指向定义时的this
    {
        var factory = function() {
            this.a = 'a';
            this.b = 'b';
            this.c = {
                a: 'a+',
                b: () => {
                    return this.a
                }
            }
        }
        console.log(new factory().c.b()); //a
    }
    /*
     **默认参数
     */
    {
        //ES3,ES5默认参数写法
        function f(x, y, z) {
            if (y === undefined) {
                y = 7;
            }
            if (z === undefined) {
                z = 42;
            }
            return x + y + z;

        }
        console.log(f(1)); //50
        console.log(f(1, 3)); //46
    } {
        //ES6  默认参数写法
        function f(x, y = 7, z = 42) {
            return x + y + z;
        }
        console.log(f(1)); //50
        console.log(f(1, 3)); //46
    } {
        //es6 检查X默认参数是否赋值了
        //先声明一个函数
        function checkParameter() {
            // throw new Error阻止js运行
            throw new Error('can\'t be empty')
        }

        function f(x = checkParameter(), y = 7, z = 42) {
            return x + y + z;
        }
        console.log(f(2));
        try {
            f();
        } catch (e) {
            console.log(e)
        } finally {}
    } {
        // ES3,ES5  可变参数
        function f() {
            var a = Array.prototype.slice.call(arguments); //伪数组，获取当前的参数列表
            var sum = 0; //初始值
            a.forEach(function(item) {
                sum += item * 1; //求和运算
            })
            return sum;
        }
        console.log(f(1, 2, 3))
    } {
        //ES6 可变参数写法
        //...a代表扩展运算符，可变参数的列表
        function f(...a) {
            var sum = 0;
            a.forEach(item => {
                sum += item * 1; //求和运算
            })
            return sum;

        }
        console.log(f(1, 2, 3))
    }
    /*
    **合并数组
    */
    {
        //es5 合并数组
        var params = ['hi','true',7];
        var other = [1,2].concat(params);
        console.log(other)
    }
    {
        //es6 利用扩展运算符合并数组写法
        var params = ['hi','true',7];
        var other = [1,2,...params];
        console.log(other)
    }
    </script>
</body>

</html>

 

效果图：

 

 

 

相关文章