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: 将字符串变量用${}包起来,再写到需要拼接的地方
posted @ 2019-04-20 22:31  princeness  阅读(224)  评论(0编辑  收藏  举报