A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

[前端与移动开发] ES5和ES6之间的区别

© 杨耀 黑马粉丝团   /  2020-10-14 21:08  /  1620 人查看  /  1 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

ECMAScript 5(ES5):ECMAScript的第5版,于2009年标准化。该标准已在所有现代浏览器中完全实现

ECMAScript 6(ES6)/ ECMAScript 2015(ES2015):第6版ECMAScript,于2015年标准化。该标准已在大多数现代浏览器中部分实施。

以下是ES5和ES6之间的一些主要区别:

箭头函数和字符串插值:
ES5:

const greetings = (name) => {
    return `hello ${name}`;
}
ES6:

const greetings = name => `hello ${name}`;


Const。Const在许多方面像其他语言中的常量一样工作,但有一些注意点:Const表示对值的“恒定引用”。因此,使用const,您实际上可以改变一个被变量引用的对象属性,但是你无法改变引用本身。
const NAMES = [];
NAMES.push("Jim");
console.log(NAMES.length === 1); // true
NAMES = ["Steve", "John"]; // error


块作用域变量。新的ES6关键字let允许开发人员在块级别定义变量。
默认参数值 默认参数允许我们使用默认值初始化函数。如果省略或未定义参数,则使用默认值 - 意味着null是有效值。
// Basic syntax
function multiply (a, b = 2) {
    return a * b;
}
multiply(5); // 10


类定义和继承

ES6引入了对类(class关键字),构造函数(constructor关键字)和extend继承关键字的语言支持。


for-of运算符

for ... of语句创建一个循环遍历可迭代对象的循环。


Spread 操作符用于对象融合
const obj1 = { a: 1, b: 2 }
const obj2 = { a: 2, c: 3, d: 4}
const obj3 = {...obj1, ...obj2}


Promises Promises提供了一种处理异步操作的结果和错误的机制。你可以用回调来完成同样的事情,但是promises通过方法链接和简洁的错误处理提供了更高的可读性。
const isGreater = (a, b) => {
    return new Promise ((resolve, reject) => {
        if(a > b) {
        resolve(true)
    } else {
        reject(false)
    }
})
}
isGreater(1, 2)
    .then(result => {
    console.log('greater')
})
.catch(result => {
    console.log('smaller')
})


模块导出和导入 模块导出:
const myModule = { x: 1, y: () => { console.log('This is ES5') }}
export default myModule;
导入:

import myModule from './myModule';

1 个回复

倒序浏览
推荐一本ES6硬书、高薪面试必备,   阮一峰的  
ES6标准入门(第3版)    地址, https://item.jd.com/12172449.html
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马