附录 A ES6附加特性
时间:2020-11-30
本文章向大家介绍附录 A ES6附加特性,主要包括附录 A ES6附加特性使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
模板字符串
const student = {
name: "Wango",
age: 24,
}
// 普通字符串
const info1 = "My name is " + student.name + ", and I'm " + student.age + " years old";
// 模板字符串
const info2 = `My name is ${student.name}, and I'm ${student.age} years old`;
console.log(info1 === info2);
// true
模板字符串占位符${}内可以放置任意JS表达式,且不局限于一行
解构
对象的解构
const student = {
name: "Wango",
age: 24,
gender: "male",
}
// 对象解构,变量名必须与对象的属性名一致
let {name, age, gender} = student;
console.log(name === student.name);
// true
console.log(age === student.age);
// true
console.log(gender === student.gender);
// true
// 对象解构,显式指定要赋值的变量
let {name: myName, age: myAge, gender: myGender} = student;
console.log(myName === student.name);
// true
console.log(myAge === student.age);
// true
console.log(myGender === student.gender);
// true
数组的解构
const students = ["Wango", "Lily", "Jack", "Tom"];
// 数组元素的值按顺序赋值给指定变量
let [stu1, stu2, stu3, stu4] = students;
console.log(stu1 === students[0]);
// true
console.log(stu2 === students[1]);
// true
console.log(stu3 === students[2]);
// true
console.log(stu4 === students[3]);
// true
// 可以跳过特定的数组项
[stu1, , stu2, ,] = students;
console.log(stu1 === students[0]);
// true
console.log(stu2 === students[2]);
// true
// 可以捕获要追踪的项
let [first, ...remaining] = students
console.log(first === students[0]);
// true
console.log(remaining);
// ["Lily", "Jack", "Tom"]
// 字符串本质上也是数组,也可以用解构
const a = "Hello world!";
const [b, ...c] = a;
console.log(b);
// H
console.log(c);
// ["e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
增强版对象字面量
// 原有对象字面量
const name = "Wango";
const student = {
// 在作用域内创建一个与变量同名的属性,
// 并将该变量的值赋给它
name: name,
// 定义一个方法
getName: function() {
return this.name;
}
};
// 创建一个动态生成的属性
student["newStudent" + name] = true;
// ES6增强版对象字面量
const newStudent = {
name, // 简写,直接将同名变量的值赋给属性
getName() { //直接方法名加括号,表明这是一个方法
return this.name;
},
// 动态属性名
["newStudent" + name]: true,
}
原文地址:https://www.cnblogs.com/hycstar/p/14061383.html
- 怎么能学透一个知识点
- Jarvis-OJ平台多题WriteUp分享
- 会员提问 之 JS中的私有方法有什么意义?
- 本周末的QQ群视频--还是电商网站的事
- 【译】使用Apache的mod重写来保护你的C2 Empire
- 大白话,设计一个购物车对象
- 【译】Cromos – 下载并注入代码到谷歌 Chrome 浏览器扩展中
- X-NUCA 2017第三期 WriteUp
- 学习分享 | Flipped Ciphertext Bits
- 聊一下JavaScript定时器
- java redis 通用组建
- 学习分享 | Padding Oracle
- FastJson 反序列化注意事项
- Python编写渗透工具学习笔记二 | 0x05编写脚本劫持tcp会话
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Java+selnium 智能等待,try catch方法智能定位需添加等待的元素
- Python中的命名空间和作用域(2)
- C/C++可以用正则表达式吗?
- typescript实战总结之实现一个互联网黑白墙
- 文件上传漏洞演示(一句话木马文件 + 蚁剑)
- [Bazel]构建Golang项目
- 2020--IDEA破解失败后无法打开(mac/win)【已解决】
- CPU:别再拿我当搬砖工!
- 7类 登录/注册 安全漏洞
- 安全弹出你的移动设备,保护数据安全!
- burpsuite系列
- idea_Maven_setting文件依赖源国内镜像
- Wapiti安装及使用
- 利用burpsuite+sqlmap POST自动化注入详解
- GSoC: GitHub Checks API 项目第一阶段总结