宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取
这篇文章主要讲解了“ES6新增的特性有哪些及怎么用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“ES6新增的特性有哪些及怎么用”吧！
理解ES6
ECMAScript，是由网景公司制定的一种脚本语言的标准化规范；最初命名为Mocha，后来改名为LiveScript，最后重命名为JavaScript
ECMAScript 2015（ES2015），第 6 版，最早被称作 ECMAScript 6（ES6），添加了新的特性。
ES6 块级作用域 let
首先，什么是作用域？作用域简单讲就是声明一个变量，这个变量的有效范围，在 let 没来之前。js 只有 var 的全局作用域和 函数作用域 ，ES6 为 js 带来了块级作用域。【相关推荐：javascript学习教程】
{
var a = "?";
let b = "⛳";
}
console.loga);
console.logb);
? Uncaught ReferenceError: b is not defined
可以看到，我们使用 var 关键字在块中定义了变量 a，其实全局可以访问到，所以说，var声明的变量是全局的，但我们想让变量就在块中生效，出了块就访问不了了，这时就可以使用 ES6 新增的块级作用域关键字 let 来声明这个变量 a，当我再次访问，报错了，说 a is not defined ，a 没有定义
ES6 解构数组
如下所示，首先定义了一个函数，返回一个数组，在未使用解构数组前，调用数组并把返回值赋值给 temp ，然后打印 temp 数组，使用了解构数组后，直接定义一个数组变量，然后将函数返回值指向该变量，他会自动把第一项的值赋值给第一个数组变量，第二项赋值给第二个数组变量，以此类推，最后打印三个变量，看到没有问题
function breakfast) {
return ['?', '?', '?'];
}
var temp = breakfast);
console.logtemp[0], temp[1], temp[2]);
let [a, b, c] = breakfast);
console.loga, b, c);
? ? ? ? ? ?
ES6 解构对象
首先 breakfast 函数返回一个对象，使用解构对象，定义对象，键值对中键表示映射的实际对象的键名，值就是自定义变量，解构完成，会自动完成赋值，然后调用 breakfast 函数，返回对象，随后打印变量 a，b，c ，可以看到没问题
function breakfast) {
return { a: '?', b: '?', c: '?' }
}
let { a: a, b: b, c: c } = breakfast);
console.loga, b, c);
? ? ?
ES6 模板字符串
在使用模板字符串前，我们拼接字符串变量使用 +
使用 ES6 提供的模板字符串，首先使用 “ 把字符串包起来，当要使用变量时 ，使用 ${变量}
let a = '?',
b = '?️';
let c = '今天吃' + a + '吃完看' + b;
console.logc);
let d = `今天吃 ${a} 吃完看 ${b}`;
console.logd);
今天吃?吃完看?️ 今天吃 ? 吃完看 ?️
ES6 判断字符串里是否包含其他字符串
使用这些函数，可以轻松的完成是不是以什么开头的字符串，是不是以什么结尾的字符串，是不是包含了什么字符串等的操作
let str = '你好，我是小周 ❤️'; console.logstr.startsWith'你好')); console.logstr.endsWith'❤️')); console.logstr.endsWith'你好')); console.logstr.includes" "));
true true false true
ES6 默认参数
ES6里，可以使用默认参数，当调用函数时，没有给参数进行赋值时，就使用设置的默认参数执行，当给参数赋值时，就会使用新赋的值执行，覆盖默认值，使用如下：
function saystr) {
console.logstr);
}
function say1str = '嘿嘿') {
console.logstr);
}
say);
say1);
say1'❤️');
undefined 嘿嘿 ❤️
ES6 展开操作符
使用 ... 可以展开元素，方便操作，使用如下：
let arr = ['❤️', '?', '?']; console.logarr); console.log...arr); let brr = ['王子', ...arr]; console.logbrr); console.log...brr);
[ '❤️', '?', '?' ] ❤️ ? ? [ '王子', '❤️', '?', '?' ] 王子 ❤️ ? ?
ES6 剩余操作符
... 操作符用在函数参数上，接收一个参数数组，使用如下：
function f1a, b, ...c) {
console.loga, b, c);
console.loga, b, ...c);
}
f1'?','?','☃️','㊙️');
? ? [ '☃️', '㊙️' ] ? ? ☃️ ㊙️
ES6 函数名字
使用 .name 可以获取函数的名字，具体使用如下：
function f1) { }
console.logf1.name);
let f2 = function ) { };
console.logf2.name);
let f3 = function f4) { };
console.logf3.name);
f1 f2 f4
ES6 箭头函数
使用箭头函数可以让代码更简洁，但是也要注意箭头函数的局限性，以及箭头函数中自身没有 this，this指向父级
let f1 = a => a;
let f2 = a, b) => {
return a + b;
}
console.logf110));
console.logf210, 10));
10 20
ES6 对象表达式
使用es6的对象表达式，如果对象属性和值一样，可以省略值，函数写法可以省去function，用法如下：
let a = '㊙️';
let b = '☃️';
const obj = {
a: a,
b: b,
say: function ) {
}
}
const es6obj = {
a,
b,
say) {
}
}
console.logobj);
console.loges6obj);
{ a: '㊙️', b: '☃️', say: [Function: say] }
{ a: '㊙️', b: '☃️', say: [Function: say] }
ES6 恒量
使用 const 关键字定义衡量，const 限制的是给衡量分配值的动作，并不限制衡量中的值，使用如下：
const app = ['☃️', '?']; console.log...app); app.push'?'); console.log...app); app = 10;
可以看到当再次给衡量分配值就报错了
☃️ ? ☃️ ? ? app = 10; ^ TypeError: Assignment to constant variable.
ES6 对象属性名
使用点定义对象属性时，如果属性名中含有空格字符，是不合法的，语法通不过的，使用 [属性名] 可以完美解决，并且不仅可以直接写明属性名，还可以使用变量来指定，具体使用如下：
let obj = {};
let a = 'little name';
obj.name = '王子';
// 使用点定义属性中间有空格是不合法的
// obj.little name = '小王子';
obj[a] = '小王子';
console.logobj);
{ name: '王子', 'little name': '小王子' }
ES6 判断两个值是否相等
一些特殊值使用 === 或 == 进行比较的结果，可能不满足你的需求，这是你可以使用Object.is第一个值，第二个值) 来进行判断，可能你就开心的笑了
console.logNaN == NaN); console.log+0 == -0); console.logObject.isNaN, NaN)); console.logObject.is+0, -0));
false true true false
ES6 复制对象
使用 Object.assign) 可以把一个对象复制到另一个对象，使用如下：
let obj = {};
Object.assign
// 源
obj,
// 复制目标对象
{ a: '☃️' }
);
console.logobj);
{ a: '☃️' }
ES6 设置对象的 prototype
使用es6可以设置对象的 prototype，使用如下：
let obj1 = {
get) {
return 1;
}
}
let obj2 = {
a: 10,
get) {
return 2;
}
}
let test = Object.createobj1);
console.logtest.get));
console.logObject.getPrototypeOftest) === obj1);
Object.setPrototypeOftest, obj2);
console.logtest.get));
console.logObject.getPrototypeOftest) === obj2);
1 true 2 true
ES6 proto
let obj1 = {
get) {
return 1;
}
}
let obj2 = {
a: 10,
get) {
return 2;
}
}
let test = {
__proto__: obj1
}
console.logtest.get));
console.logObject.getPrototypeOftest) === obj1);
test.__proto__ = obj2;
console.logtest.get));
console.logObject.getPrototypeOftest) === obj2);
1 true 2 true
ES6 super
let obj1 = {
get) {
return 1;
}
}
let test = {
__proto__: obj1,
get) {
return super.get) + ' ☃️';
}
}
console.logtest.get));
1 ☃️
ES6 生成迭代器
在学习前，先首写一个迭代器
function diearr) {
let i = 0;
return {
next) {
let done = i >= arr.length);
let value = !done ? arr[i++] : undefined;
return {
value: value,
done: done
}
}
}
}
let arr = ['☃️', '?', '?'];
let dieArr = diearr);
console.logdieArr.next));
console.logdieArr.next));
console.logdieArr.next));
console.logdieArr.next));
{ value: '☃️', done: false }
{ value: '?', done: false }
{ value: '?', done: false }
{ value: undefined, done: true }
OK，看看简化的生成器
function* diearr) {
for let i = 0; i < arr.length; i++) {
yield arr[i];
}
}
let test = die['?','☃️']);
console.logtest.next));
console.logtest.next));
console.logtest.next));
{ value: '?', done: false }
{ value: '☃️', done: false }
{ value: undefined, done: true }
ES6 类
使用es6可以快速方便的构建类，好耶
class stu {
constructorname) {
this.name = name;
}
say) {
return this.name + '说奥里给';
}
}
let xiaoming = new stu"小明");
console.logxiaoming.say));
小明说奥里给
ES6 get set
定义get/set方法，用于获取或者修改类的属性
class stu {
constructorname) {
this.name = name;
}
get) {
return this.name;
}
setnewStr) {
this.name = newStr;
}
}
let xiaoming = new stu"小明");
console.logxiaoming.get));
xiaoming.set"大明")
console.logxiaoming.get));
小明 大明
ES6 static
使用static关键字修饰的方法，不用实例化对象也可以直接使用
class stu {
static saystr) {
console.logstr);
}
}
stu.say"奥里给 静态方法");
奥里给 静态方法
ES6 extends
使用继承，可以减少代码冗余，比如：
class Person {
constructorname, bir) {
this.name = name;
this.bir = bir;
}
showInfo) {
return '姓名：' + this.name + '生日：' + this.bir;
}
}
class A extends Person {
constructorname, bir) {
supername, bir);
}
}
let zhouql = new A"周棋洛", "2002-06-01");
// 周棋洛本身是没有showInfo方法的，是继承自Person的
console.logzhouql.showInfo));
姓名：周棋洛生日：2002-06-01
ES6 Set
Set 集合，与数组不同，Set 集合中不允许有重复元素
// 创建Set集合
let food = new Set'??');
// 重复添加，只有一个能进去
food.add'?');
food.add'?');
console.logfood);
// 当前集合大小
console.logfood.size);
// 判断集合中是否存在某一元素
console.logfood.has'?'));
// 删除集合中某一元素
food.delete'?');
console.logfood);
// 循环遍历集合
food.forEachf => {
console.logf);
});
// 清空集合
food.clear);
console.logfood);
Set3) { '?', '?', '?' }
3
true
Set2) { '?', '?' }
?
?
Set0) {}
ES6 Map
Map结合存储键值对
let food = new Map);
let a = {}, b = function ) { }, c = "name";
food.seta, '?');
food.setb, '?');
food.setb, '?');
food.setc, '米饭');
console.logfood);
console.logfood.size);
console.logfood.geta));
food.deletec);
console.logfood);
console.logfood.hasa));
food.forEachv, k) => {
console.log`${k} + ${v}`);
});
food.clear);
console.logfood);
Map3) { {} => '?', [Function: b] => '?', 'name' => '米饭' }
3
?
Map2) { {} => '?', [Function: b] => '?' }
true
[object Object] + ?
function ) { } + ?
Map0) {}
ES6 模块化
使用模块化开发，es6可以方便的导入和导出一些内容，还有默认导出等等细节
let a = '?';
let f1 = function str = '你丫的写参数') {
console.logstr);
}
export { a, f1 };
import {a, f1} from './27模块测试.js';
console.loga);
f1);
f1'知道了');
支付宝扫一扫
微信扫一扫
