Java登陆第三十二天——ES6(一)let、const、模板字符串、解构表达式、箭头函数

合集 - Java登陆(70)

47.Java登陆第三十二天——ES6(一)let、const、模板字符串、解构表达式、箭头函数2024-03-08

所谓ECMAScript6也就是JS6。这次更新带来了大量的新特性，使JS代码更简洁，更强大。

复习JS请走：JS入门

JS6文档请走：JS6菜鸟教程

ES6新增了let和const关键字，用作声明变量

let

相较于var，let声明的变量更规范。ES6更推荐使用let。

let不可重复声明
let可以作为成员变量：（let遇见非函数的 {} 时，其作用是成员变量）
let不可预解析：（见下栗）
let声明的全局变量不会作为window的属性

<script>
    console.log("1.let不可重复声明");
    var a1 = 10;
    var a1 = 10;
    let b1 = 20;
    let b1 = 20;//Identifier 'b1' has already been declared

    console.log("2.let有作用域");
    {
        var a2 = 10;
        let b2 = 20;
    }
    console.log(a2);//10
    console.log(b2);//b2 is not defined

    console.log("3.let不可预解析");
    console.log(a3);//undefined
    var a3 = 10;

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

    console.log("4.let声明的全局变量不会作为window的属性");
    var a4 = 10;
    console.log(window.a4);//10
    let b4 = 20;
    console.log(window.b4);//undefined
</script>

const

常量，类似Java中的final，常量的变量名建议大写

const必须有初始值
const值不可更改
const有作用域：（同let，非函数{}时作为成员变量）
const声明对象其地址值不可更改：（对象内部属性可改）

<script>
    console.log("1.const必须有初始值");
    const PI;//Missing initializer in const
    const PI=3.14;

    console.log("2.const值不可更改");
    const SEX="男";
    SEX="女";//Assignment to constant variable.


    console.log("3.const有作用域");
    {
        const A="阿斯顿";
    }
    console.log(A);// A is not defined

    console.log("4.const声明对象其地址值不可更改");
    const ARR=[1,2,3];
    console.log("修改前"+ARR);//修改前1,2,3
    ARR.push(4);
    console.log("修改后"+ARR);//修改后1,2,3,4
</script>

模板字符串

增强版的字符串而已，使用反引号``。

无需+号拼接的换行
支持${XXX}输出变量或拼接变量

<script>
    console.log("1.无需+号拼接的换行");
    let Str1 =//使用+号拼接的 换行字符串
        '<ul>'+
        '<li>床板</li>'+
        '<li>凳子</li>'+
        '<li>垃圾桶</li>'+
        '</ul>'

    let Str2 =//使用模板字符串 反引号` `
        `
        <ul>
        <li>床板</li>
        <li>凳子</li>
        <li>垃圾桶</li>
        </ul>
        `
    console.log("2.支持${XXX}输出变量或拼接变量");
    let temp="鼠标";
    let Str3 =//使用模板字符串 反引号` `
        `
        <ul>
        <li>床板</li>
        <li>凳子</li>
        <li>${temp}</li>
        </ul>
        `
    console.log(Str3);
/*

        <ul>
        <li>床板</li>
        <li>凳子</li>
        <li>鼠标</li>
        </ul>

 */
</script>

注意以上是字符串！！！标签不会被解析

解构表达式

解构赋值使用花括号 {} 表示对象，方括号 [] 表示数组。

解构赋值菜鸟教程

数组解构赋值
对象解构赋值
函数解构赋值

<script>
        console.log("1.数组解构赋值");
        let [a, b, c] = [1, 2, 3];//1赋值给变量a 2赋值给变量b
        console.log(a);//1
        console.log(b);//2
        console.log(c);//3

        let [x1, y1, z1] = [10, 20];//按照上述逻辑 打印z1应该是undefined
        //解构赋值允许手动设置 默认值
        let [x2, y2, z2 = 30] = [10, 20];
        console.log(z2);

        console.log("2.对象解构赋值");
        //定义对象person
        let person = {name: "小明", age: 18}
        //变量名必须和属性名相同，本质是初始化变量的值，为对象中同名属性的值
        let {name, age} = person;//等价于 let name = person.name
        console.log(name);//小明
        console.log(age);//18

        console.log("3.函数解构赋值");
        //切记切记 花括号 {} 表示对象，方括号 [] 表示数组，所以传参是数组。
        function f([max, min]) {
            return max > min ? max : min;
        }
        console.log( f([2,1]) );//2
</script>

箭头函数

和Java中的lambda不能说一样，简直就是一样。

//Java中lambda
()->{};

//JS中箭头函数
()=>{};

正常函数声明
箭头函数声明
箭头函数省略规则
箭头函数this关键字：（重要）

    <script>
        console.log("1.正常函数声明");
        //正常的函数声明
        let fun = function () {
            console.log("hello")
        }
        fun();//正常的调用函数

        let fun2 = function (x) {
            return x;
        }
        fun2(1);

        console.log("2.箭头函数声明");
        let fun3 = (x) => {return x};

        console.log("3.箭头函数省略规则");
        //1.一个传参省略(),多个传参或者无传参不可以!
        let fun3_1 = x => {return x};

        //2.方法体中只有一句，且不为return时，可以省略花括号{}
        let fun3_2 = x => console.log(x);
        let fun3_3 = x => return x;//报错 'return' outside function definition

        //3.方法体中有且仅有一句return，可以省略return和花括号{}
        let fun3_4 = x => x+1;
    </script>

箭头函数this关键字

    <script>
        console.log("4.箭头函数this关键字");
        //在JS中，this关键字通常用指向，函数所在的对象。(JS可以把函数作为对象的属性)
        let p1 = {
            name: "张三",
            say: function () {
                console.log("说话" + this)//这里的this指向对象p1
            },
            age: 18
        };
        p1.say();

        //但在箭头函数中，this指向的是，定义箭头函数时所处的上下文对象
        let p2 = {
            name: "李四",
            tell: () => {
                console.log(this)//这里的this指向上下文对象，也就是window对象
            }
        }
        p2.tell();

        //再次理解上下文
        function xy() {
            this.i = 0;//这里的this指向，函数所在的对象window

            setTimeout(() => {//window的定时器方法setTimeout(code, milliseconds)
                this.i++;//箭头函数的this指向上下文 i
                console.log(this.i);
            }, 1000)
        }
        xy();//1秒后i+1 打印1


    </script>

上下文对象直白的说就是，外层对象。

posted @ 2024-03-08 18:02 rowbed 阅读(22) 评论(0) 编辑收藏举报

Java登陆第三十二天——ES6(一)let、const、模板字符串、解构表达式、箭头函数

let

const

模板字符串

解构表达式

箭头函数

公告

搜索

常用链接

合集

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论