ES6新特性总结（2）解构赋值、模板字符串、Symbol

1 解构赋值
- 1.1 Spread / Rest 操作符
- 1.2 数组的解构
- 1.3 对象的解构
- 1.4 解构的默认值和参数的解构
2 模板字符串
3 Symbol

1 解构赋值

1.1 Spread / Rest 操作符

Spread / Rest 操作符指的是"…"，具体是 Spread 还是 Rest 需要看上下文语境。

当被用于迭代器中时，它是一个Spread操作符。迭代器 (Iterator)是按照一定的顺序对一个或多个容器中的元素行进遍历的一种机制。

function foo(x, y, z) {console.log(x, y, z); //输出输入的三个元素
}
let arr = [1, 2, 3];
foo(...arr); //...表示对arr数组进行遍历

输出结果为：1 2 3

当被用于函数传参时，它是一个Rest操作符。

function foo(...args) {console.log(args);
}
foo(1, 2, 3, 4, 5);

输出结果为[ 1, 2, 3, 4, 5 ]

1.2 数组的解构

在ES5标准中赋值多个变量采用的方法是：

var a = 10;
var b = 20;
var c = 30;

ES6提供了更简洁的解构赋值来实现上述变量的定义：

let [a, b, c] = [10, 20, 30];
console.log(a); //输出：10
console.log(b); //输出：20
console.log(c); //输出：30

等号右边的值会按照顺序依次赋值给左边的变量。

当等号左右为非一一对应关系的赋值时，例如，当等号左边的数组长度小于右边时：

let [a, b] = [1, 2, 3];
console.log(a); //输出：1
console.log(b); //输出：2

可以看出只有等号右边的前两个数1和2赋值给了a和b，当等号左边的数组长度大于右边时：

let [a, b, c] = [1, 2];
console.log(a); //输出：1
console.log(b); //输出：2
console.log(c); //输出undefined

那么c就没有赋值，输出的结果也是undefined。

可以通过"…"把特定的元素放在变量里，例如：

let [a, ...arr] = [1, 2, 3];
console.log(a); //输出：1
console.log(arr); //输出[2，3]

在ES6中可以通过解构赋值来互换变量，例如：

let a = 1;
let b = 2;
console.log("交换前：", a, b); //输出：交换前： 1 2
[a, b] = [b, a];
console.log("交换后：", a, b); //输出：交换后： 2 1

1.3 对象的解构

对象解构的写法与数组解构类似，例如：

let obj = {name: "张三",age: 20,height: "180cm"
}
let { name, age, height } = obj; //变量的名称必须和对象的属性名相同
console.log(name, age, height); //输出结果：张三 20 180cm

也可以解构多层对象，例如：

let person = {name: "张三",age: 20,family: {father: "张四",mother: "王五"}
}
let { name, age, family: { father, mother } } = person;
console.log(age, father); //输出：20 张四

在解构对象时也可以自定义变量名称，例如：

let obj = {name: "张三",age: 20
}
let { name: myname, age: myage } = obj; //给name定义名称myname，给age定义名称myage
console.log(myname, myage); //输出结果：张三 20

1.4 解构的默认值和参数的解构

不管是数组的解构赋值，还是对象的解构赋值，都可以添加默认参数。例如：

let obj = {name: "张三",age: 20
}
let { name, age, height = "180cm" } = obj; //添加属性height
console.log(name, age, height); //输出：张三 20 180cm

在函数参数中使用解构，参数解构也可以给默认参数，例如：

function fun({ name, age, height = "180cm" } = {}) { //在本函数中，参数会传入{}中console.log(name, age, height);
}
let obj = {name: "张三",age: 20
}
fun(obj); //输出：张三 20 180cm

2 模板字符串

ES5标准中，一般输出模板是通过字符串拼接的方式进行的。在ES6中可以通过模板字符串简化字符串的拼接，模板字符串通过反引号来表示“``”（在键盘中波浪线的地方，切换到英文输入即可），如果要嵌入变量通过${ 变量名 }来实现，例如：

//arr是一个数组，数组的每一项都是一个对象
let arr = [{ name: "张三", age: 20 },{ name: "李四", age: 21 },{ name: "王五", age: 22 }
];
let str = ""; //定义一个字符串
for (let i = 0; i < arr.length; i++) {str += `姓名：${arr[i].name}，年龄：${arr[i].age}。`;
}
console.log(str); //输出该拼接字符串

输出结果为：姓名：张三，年龄：20。姓名：李四，年龄：21。姓名：王五，年龄：22。

3 Symbol

ES5中提供了6种数据类型分别是：undefined、null、boolean、string、number、object。

ES6中新增了一种数据类型：Symbol，用来表示唯一的值。每个创建的Symbol都是唯一的，这样在实际运用中可以创建一些唯一的属性及定义私有变量。

创建方式：

let s1 = Symbol; //直接创建
let s2 = Symbol("myschool"); //传入字符串创建

目前前端项目都会采用模块化构建，为了防止对象属性名被覆盖，可以通过symbol来定义属性名。

例如，在a.js文件中写入以下代码：

const NAME = Symbol("name");
let obj = {[NAME]: "张三", //[NAME]为[Symbol(name)]age: 20
}
export default obj; //导出对象obj

在b.js写入以下代码：

import obj from "./a.js"; //导入a.js中的obj
const NAME = Symbol("name"); //再创建一个NAME
obj[NAME] = "李四";
console.log(obj); //输出该对象

导入其他模块时，需要带上文件的扩展名.js

注意：由于node编译器不识别ES6的语法，因此在vscode中需要手动设置一下
1、在终端输入命令：npm init -y，初始化node的开发环境，这时终端会自动输出以下信息：

2、这时在文件列表中，出现了一个叫package.json的文件，点进去该文件，在"main"的下一行，写入"type": "module",，这表示采用ES6的模块管理方式编译js文件，这时b.js就可以成功运行了。

这时运行b.js文件，得到结果为：{ age: 20, [Symbol(name)]: ‘张三’, [Symbol(name)]: ‘李四’ }

利用Symbol作为属性名，属性名不会被Object.keys()、Object.getOwnPropertyNames()、for…in循环返回。例如：

let obj = {[Symbol()]: "张三",age: 20,height: "180cm"
}
let keys = Object.keys(obj); //获取obj对象的所有属性，不包括Symbol
console.log(keys); //输出：[ 'age', 'height' ]
console.log(Object.getOwnPropertyNames(obj)); //输出[ 'age', 'height' ]
for (let key in obj) {console.log(key); //输出：age height
}

从上面可以看出，明明obj对象中有3个属性，但是只能打印出2个，这也是Symbol特殊的地方。

Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。
Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性，但不包括Symbol值作为名称的属性）组成的数组。

可以在类里利用Symbol来定义私有属性及方法。例如：

let People = (function () {let name = Symbol("name"); //定义Symbol类型的变量class People {constructor(yourName) {this[name] = yourName;}sayName() {console.log(this[name]);}}return People;
})();
let zhangsan = new People("张三");
console.log(zhangsan[Symbol("name")]); //输出：undefined
zhangsan.sayName(); //输出：张三

ES6新特性总结（2）解构赋值、模板字符串、Symbol相关推荐

ES6 | let 关键字 + const关键字 + 箭头函数 + rest参数 + 扩展运算符 ... + Symbol + 迭代器 + 生成器 + 变量的解构赋值 + 模板字符串
目录 ECMASript 相关介绍 ECMASript 6 新特性 let 关键字 const关键字变量的解构赋值模板字符串简化对象写法箭头函数 => 参数默认值 rest参数扩展运算 ...
学习笔记20230508--es6新特性打散数组和解构赋值 (应用层面)
在今天学习的过程中,对es6的新特性打散数组和解构赋值有了全新的认识,现学习分享如下- 欢迎各位大神们指教纠错
vue解构赋值_前端开发es6知识模块化、解构赋值、字符串模板
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍1.块级作用域 let const 2.箭 ...
let的解构赋值_前端开发es6知识模块化、解构赋值、字符串模板
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...
最详细ES6教程_变量的解构赋值
最详细ES6教程_变量的解构赋值数组的解构赋值基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定 ...
ES6基础：变量的解构赋值
ES6基础系列之变量的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.这种方式的出现大大提高了代码的扩展性前言一.数组的解构赋值二.对象的解构赋值三.函 ...
JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值
1.解构赋值的定义在ES6中,允许按照一定模式,从数组和对象中提取值(所谓解构),然后对变量进行赋值. var a = 1; var b = 2; var c = 3;//等价于var [a, b, ...
ES6入门：变量的解构赋值
1.数组的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b ...
ES6学习之 - 变量的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring) 1. 数组的解构赋值以前,为变量赋值,只能直接指定值. let a = 1; let b ...
【ES6学习】对象的解构赋值
解构不仅可以用于数组,还可以用于对象. let { foo , bar } = { foo :"aaa ", bar :"bbb " } ; too // &q ...

ES6新特性总结（2）解构赋值、模板字符串、Symbol

ES6新特性总结（2）解构赋值、模板字符串、Symbol

1 解构赋值

1.1 Spread / Rest 操作符

1.2 数组的解构

1.3 对象的解构

1.4 解构的默认值和参数的解构

2 模板字符串

3 Symbol

ES6新特性总结（2）解构赋值、模板字符串、Symbol相关推荐

最新文章

热门文章