zoukankan      html  css  js  c++  java
  • ES6新增(有关变量)

    参考学习:https://www.cnblogs.com/buautifulgirl/p/9811891.html
    1.有关变量
    2.解构赋值
    2.1 对象解构
    2.2 数组解构
    3.1 字符串解构
    3.2 数值解构和其他类型解构

    1.有关变量
    参考学习:https://www.cnblogs.com/LLLLily/p/7389652.html

    1.const定义的变量不可以修改,而且必须初始化
    ES6引入的第三个声明类关键词:const 用来定义常量。
    2.var定义的变量可以修改,如果不初始化会输出undefined,不会报错。
    3.let是块级作用域,函数内部使用let定义后,对函数外部无影响。

    ES6的let变量声明特点:

    拥有块级作用域
    没有变量声明提升
    暂时性死区
    不能重复声明
    let不会成为全局对象的属性
    

    以上let所介绍的规则均适用于const命令,不同的是,const声明的变量不能重新赋值,也是由于这个规则,const变量声明时必须初始化,不能留到以后赋值

    2.解构赋值

    https://www.cnblogs.com/xiaohuochai/p/7243166.html

    2.1对象解构:

       1.变量声明应用到对象解构
       2.变量赋值应用到对象解构
       3.解构赋值表达式的值与表达式右侧(也就是=右侧)的值相等
       4.解构赋值表达式时,如果指定的局部变量名称在对象中不存在,那么这个局部变量会被赋值为undefined
       5.当指定的属性不存在时,可以随意定义一个默认值,在属性名称后添加一个等号(=)和相应的默认值即可
       6.为非同名局部变量赋值
       7.嵌套对象解构
       8.嵌套对象解构非同名局部变量赋值
    

    1.变量声明应用到变量解构

    let node = {
        type: "Identifier",
        name: "foo"
    };
    let { type, name } = node;
    console.log(type); // "Identifier"
    console.log(name); // "foo"
    

    2.变量赋值应用到变量解构

      let node = {
        type: "Identifier",
        name: "foo"
    },
    type = "Literal",
    name = 5;
    // 使用解构来分配不同的值
    ({ type, name } = node);
    console.log(type); // "Identifier"
    console.log(name); // "foo"
    

    3.解构赋值表达式的值与表达式右侧(也就是=右侧)的值相等

    let node = {
        type: "Identifier",
        name: "foo"
    },
    type = "Literal",
    name = 5;
    function outputInfo(value) {
        console.log(value === node); // true
    }
    outputInfo({ type, name } = node);
    console.log(type); // "Identifier"
    console.log(name); // "foo"
    

    4.解构赋值表达式时,如果指定的局部变量名称在对象中不存在,那么这个局部变量会被赋值为undefined

    let node = {
        type: "Identifier",
        name: "foo"
    };
    let { type, name, value } = node;
    console.log(type); // "Identifier"
    console.log(name); // "foo"
    console.log(value); // undefined
    

    5.当指定的属性不存在时,可以随意定义一个默认值,在属性名称后添加一个等号(=)和相应的默认值即可

    let node = {
        type: "Identifier",
        name: "foo"
    };
    let { type, name, value = true } = node;
    console.log(type); // "Identifier"
    console.log(name); // "foo"
    console.log(value); // true
    

    6.为非同名局部变量赋值

    let node = {
        type: "Identifier",
        name: "foo"
    };
    let { type: localType, name: localName } = node;
    console.log(localType); // "Identifier"
    console.log(localName); // "foo"
    

    7.嵌套对象解构

    let node = {
        type: "Identifier",
        name: "foo",
        loc: {
            start: {
                line: 1,
                column: 1
            },
        end: {
            line: 1,
            column: 4
        }
    }
    };
    let { loc: { start }} = node;
    console.log(start.line); // 1
    console.log(start.column); // 1
    

    8.嵌套对象解构非同名局部变量赋值

    let node = {
        type: "Identifier",
        name: "foo",
        loc: {
            start: {
                line: 1,
                column: 1
            },
            end: {
                line: 1,
                column: 4
            }
        }
    };
    // 提取 node.loc.start
    let { loc: { start: localStart }} = node;
    console.log(localStart.line); // 1
    console.log(localStart.column); // 1
    

    2.2 数组解构:
    参考学习:https://www.cnblogs.com/xiaohuochai/p/7243166.html

    1.解构赋值
    2.变量交换
    3.嵌套数组解构
    4.不定元素
    5.数组复制
    
    let colors = [ "red", "green", "blue" ];
    let [ firstColor, secondColor ] = colors;
    console.log(firstColor); // "red"
    console.log(secondColor); // "green"
    

    在解构模式中,也可以直接省略元素,只为感兴趣的元素提供变量名,thirdColor前的逗号是前方元素的占位符

    let colors = [ "red", "green", "blue" ];
    let [ , , thirdColor ] = colors;
    console.log(thirdColor); // "blue"
    

    1.解构赋值

    let colors = [ "red", "green", "blue" ],
    firstColor = "black",
    secondColor = "purple";
    [ firstColor, secondColor ] = colors;
    console.log(firstColor); // "red"
    console.log(secondColor); // "green"
    

    2.变量交换

    // 在 ES6 中互换值
    let a = 1,
        b = 2;
    
    [ a, b ] = [ b, a ];
    console.log(a); // 2
    console.log(b); // 1
    

    3.嵌套数组解构

    let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
    // 随后
    let [ firstColor, [ secondColor ] ] = colors;
    console.log(firstColor); // "red"
    console.log(secondColor); // "green"
    

    4.不定元素

    let colors = [ "red", "green", "blue" ];
    let [ firstColor, ...restColors ] = colors;
    console.log(firstColor); // "red"
    console.log(restColors.length); // 2
    console.log(restColors[0]); // "green"
    console.log(restColors[1]); // "blue"
    

    5.数组复制

    // 在 ES6 中克隆数组
    let colors = [ "red", "green", "blue" ];
    let [ ...clonedColors ] = colors;
    console.log(clonedColors); //"[red,green,blue]"
    

    参考学习:https://www.cnblogs.com/xiaohuochai/p/7243166.html

    3 其他类型解构

    3.1 字符串解构
    字符串也可以解构赋值。这是因为,字符串被转换成了一个类似数组的对象

    const [a, b, c, d, e] = 'hello';
    console.log(a);//"h"
    console.log(b);//"e"
    console.log(c);//"l"
    console.log(d);//"l"
    console.log(e);//"o"
    

    类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值

    const {length} = 'hello';
    console.log(length);//5
    

    3.2 数值和布尔值解构

    let {toString:s1} = 123;
    console.log(s1 === Number.prototype.toString);//true
    let {toString:s2} = true;
    console.log(s2 === Boolean.prototype.toString);//true
    

    解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错

    let { prop: x } = undefined; // TypeError
    let { prop: y } = null; // TypeError
    

    4.类和面向对象

    5.字符串和变量的拼接

    单行字符串与变量的拼接
    多行字符串的拼接

    用法 
    step1: 定义需要拼接进去的字符串变量 
    step2: 将字符串变量用${}包起来,再写到需要拼接的地方
    
  • 相关阅读:
    Electron+Vue开发跨平台桌面应用
    html2canvas生成图片
    将某个DIV内容保存成图片,使用HTML2CANVAS截图方法(高清图并解决图片跨域问题)
    css3实现动画效果完整代码demo
    Vue + element从零打造一个H5页面可视化编辑器——pl-drag-template
    Vue.Draggable学习总结
    3d学习网
    vue router 报错: Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解决方法
    网页适配 iPhoneX,就是这么简单
    关于for循环
  • 原文地址:https://www.cnblogs.com/princeness/p/11664966.html
Copyright © 2011-2022 走看看