谈谈ES5和ES6的区别

这篇具有很好参考价值的文章主要介绍了谈谈ES5和ES6的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

谈谈ES5和ES6的区别

我们都知道JavaScript是由三部分组成:

1. ECMAScript(核心):规定了语言的组成部分=>语法、类型、语句、关键字、保留字、操作符、对象

2. BOM(浏览器对象模型): 支持访问和操作浏览器窗口,可以控制浏览器显示页面以外的部分。

3. DOM(文档对象模型): 把整个页面映射为一个多层节点结果,可借助DOM提供的API,可删除、添加和修改任何节点
 

什么是ES5?

ES5全称ECMAScript5,即 ES5,是ECMAScripts的第五次修订(第四版因为过于复杂废弃了),又称ECMAScript2009,于 2009 年完成标准化。

什么是ES6?

ES6, 全称 ECMAScript 6.0 ,即 ES6,是ECMAScripts的第六次修订,又称 ES2015,于2015年06 月发版,是 JavaScript 的下一个版本标准。

ES6 主要是为了解决 ES5 的先天不足,目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。ES6 是继 ES5 之后的一次改进,相对于 ES5 更加简洁,提高了开发效率

首先,说说ES5的特性:

1. strict模式:严格模式,限制一些用法。

2. Array增加方法:有every、some、forEach、filter、indexOf、lastIndexOf、isArray、map、reduce、reduceRight方法。

3. Object方法: Object.getPrototypeOf、Object.create等方法。

  • Object.getPrototypeOf
  • Object.create
  • Object.getOwnPropertyNames
  • Object.defineProperty
  • Object.getOwnPropertyDescriptor
  • Object.defineProperties
  • Object.keys
  • Object.preventExtensions / Object.isExtensible
  • Object.seal / Object.isSealed
  • Object.freeze / Object.isFrozen

其次,谈谈ES6的特性:

1. 块级作用域 => 关键字let,常量const

在 ES6 中通常用 let 和 const 来声明,let 表示变量、const 表示常量

◼️ 特点

let 和 const 都是块级作用域。以{}代码块作为作用域范围 只能在代码块里面使用,不存在变量提升,只能先声明再使用,否则会报错。在代码块内,在声明变量之前,该变量 都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ),在同一个代码块内,不允许重复声明。

const 声明的是一个只读常量,在声明时就需要赋值。(如果 const 的是一个对象,

对象所包含的值是可以被修改的。抽象一点儿说,就是对象所指向的地址不能改变,而

变量成员 是可以修改的。)

2. 对象的扩展

◼️ 属性和方法的简写

对象字面量属性的简写

ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值。

var foo = 'bar';

var baz = {foo}; // 等同于 var baz = {foo: foo};

对象字面量方法的简写。省略冒号与 function 关键字

var o = {
  method() {
    return "Hello!";
  }
};

// 等同于

var o = {
  method: function () {
    return "Hello!";
  }
};

◼️ Object.keys()方法

获取对象的所有属性名或方法名(不包括原形的内容),返回一个数组。

var obj={name: "john", age: "21", getName: function () { alert(this.name)}};

console.log(Object.keys(obj)); // ["name", "age", "getName"]

console.log(Object.keys(obj).length); //3

console.log(Object.keys(["aa", "bb", "cc"])); //["0", "1", "2"]

console.log(Object.keys("abcdef")); //["0", "1", "2", "3", "4", "5"]

◼️ Object.assign ()

assign 方法将多个原对象的属性和方法都合并到了目标对象上面。可以接收多个参

数,第一个参数是目标对象,后面的都是源对象

var target = {}; //目标对象

var source1 = {name : 'ming', age: '19'}; //源对象 1

var source2 = {sex : '女'}; //源对象 2

var source3 = {sex : '男'}; //源对象 3,和 source2 中的对象有同名属性 sex

Object.assign(target,source1,source2,source3);

console.log(target); //{name : 'ming', age: '19', sex: '男'}

3. 解构赋值

◼️ 数组的解构赋值

解构赋值是对赋值运算符的扩展。是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。数组中的值会自动被解析到对应接收该值的变量中,数组的解构赋值要一一对应如果

有对应不上的就是 undefined

let [a, b, c] = [1, 2, 3];

// a = 1 // b = 2 // c = 3

◼️ 对象的解构赋值

对象的解构赋值和数组的解构赋值其实类似,但是数组的数组成员是有序的,而对象的属性则是无序的,所以对象的解构赋值简单理解是等号的左边和右边的结构相同。

let { foo, bar } = { foo: 'aaa', bar: 'bbb' }; // foo = 'aaa' // bar = 'bbb'

let { baz : foo } = { baz : 'ddd' };  // foo = 'ddd'

4. 展开运算符(Spread operator)

展开运算符(spread operator)允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。

let obj1 = {
 value1: 1,
 value2: 2
};
let obj2 = {...obj1
};
console.log(obj2); // {value1: 1, value2: 2}

上面的用法实际相当于

obj2 = {value1: 1, value2: 2}

展开运算符的写法与obj2 = obj1直接赋值的写法的区别在于如果直接赋值的话,对于引用类型来说,相当于只是赋值了obj1的内存空间地址,当obj2发生改变的时候,obj1也会随着发生改变。而是用展开运算符写法的话,由于obj1对象中的属性类型都是基本类型,相当于重新创建了一个对象,此时obj2发生改变的时候,并不会影响obj1这个对象。但是仅限于其属性都为基本类型的情况(或者说只进行了一层的深拷贝)。如果该对象中的属性还有引用类型的话,修改属性中引用类型的值,则两个对象的属性值都会被修改。

let obj1 = {
 attri1: [3, 6, 0],
 attri2: 4,
 attri4: 5
};
let obj2 = {...obj1
};

obj2.attri2 = 888;
obj2.attri1[0] = 7;

console.log('obj1:', obj1);
console.log('obj2:', obj2);

展开运算符的应用

1.在函数中使用展开运算符

function test(a, b, c){};

let arr = [1, 2, 3];
test(...arr);

2.数组字面量中使用展开运算符

let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

// 使用push方法
let arr1 = [1, 2];
let arr2 = [3. 4];
arr1.push(...arr2); // [1, 2, 3, 4]

3.用于解构赋值,解构赋值中展开运算符只能用在最后,否则会报错。

// 解构赋值中展开运算符只能用在最后。
let [a, b, ...c] = [1, ,2, 3, 4]
console.log(a, b, c) // 1, 2, [3, 4]

4.类数组变成数组

let oLis = document.getElementsByTagName("li");
let liArr = [...oLis];

5.对象中使用展开运算符
ES7中的对象展开运算符符可以让我们更快捷地操作对象:

let {x,y,...z}={x:1,y:2,a:3,b:4};
x; // 1
y; // 2
z; // {a:3,b:4}

将一个对象插入另外一个对象当中:

let z={a:3,b:4};
let n={x:1,y:2,...z};
console.log(n); //{x:1,y:2,a:3,b:4}

合并两个对象:

let a={x:1,y:2};
let b={z:3};
let ab={...a,...b};
console.log(ab); // {x:1,y:2,z:3}

5. 函数的扩展

◼️ 函数的默认参数

ES6 为参数提供了默认值。在定义函数时便初始化了这个参数,以便在参数没有被传

递进去时使用。

◼️ 箭头函数

在 ES6 中,提供了一种简洁的函数写法,我们称作“箭头函数”。

写法:函数名=(形参)=>{……} 当函数体中只有一个表达式时,{}和 return 可以省 略

当函数体中形参只有一个时,()可以省略。

特点:箭头函数中的 this 始终指向箭头函数定义时的离 this 最近的一个函数,如果没有最

近的函数就指向 window。

6. 模板字符串

用一对反引号(`)标识,它可以当作普通字符串使用,也可以用来定义多行字符串,也可以

在字符串中嵌入变量,js 表达式或函数,变量、js 表达式或函数需要写在${ }中。

var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
// return "Hello Bob, how are you today?"

7. for...of循环

var arr=["小林","小吴","小佳"];
for(var v of arr){
console.log(v);
}
//小林 //小吴 //小佳

8. Class类,有constructor、extends、super,本质上是语法糖,(对语言的功能并没有影响,但是更方便程序员使用)。

class Artist {
    constructor(name) {
        this.name = name;
    }

    perform() {
        return this.name + " performs ";
    }
}

class Singer extends Artist {

    constructor(name, song) {
        super.constructor(name);
        this.song = song;
    }

    perform() {
        return super.perform() + "[" + this.song + "]";
    }
}

let james = new Singer("Etta James", "At last");
james instanceof Artist; // true
james instanceof Singer; // true

james.perform(); // "Etta James performs [At last]"

class 类的继承 ES6 中不再像 ES5 一样使用原型链实现继承,而是引入 Class 这个概念。

◼️ ES6 所写的类相比于 ES5 的优点:

区别于函数,更加专业化(类似于 JAVA 中的类);

写法更加简便,更加容易实现类的继承;

9. Map + Set + WeakMap + WeakSet

四种集合类型,WeakMap、WeakSet作为属性键的对象如果没有别的变量在引用它们,则会被回收释放掉。

// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

//WeakMap
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });//Because the added object has no other references, it will not be held in the set

10. Math + Number + String + Array + Object APIs

一些新的API

Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".includes("cd") // true
"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior

[0, 0, 0].fill(7, 1) // [0,7,7]
[1, 2, 3].find(x => x == 3) // 3
[1, 2, 3].findIndex(x => x == 2) // 1
[1, 2, 3, 4, 5].copyWithin(3, 0) // [1, 2, 3, 1, 2]
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

11. proxies:使用代理(Proxy)监听对象的操作,然后可以做一些相应事情。

var target = {};
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`;
  }
};

var p = new Proxy(target, handler);
p.world === 'Hello, world!';

可监听的操作: get、set、has、deleteProperty、apply、construct、getOwnPropertyDescriptor、defineProperty、getPrototypeOf、setPrototypeOf、enumerate、ownKeys、preventExtensions、isExtensible。 

12. Symbol: 唯一命名

Symbol是一种基本类型。Symbol 通过调用symbol函数产生,它接收一个可选的名字参数,该函数返回的symbol是唯一的。

var key = Symbol("key");
var key2 = Symbol("key");
key == key2  //false

13. Promises:处理异步操作的对象,使用了Promise对象之后可以用一种链式调用的方式来组织代码,让代码更加直观(类似jQuery的deferred 对象)。

function fakeAjax(url) {
  return new Promise(function (resolve, reject) {
    // setTimeouts are for effect, typically we would handle XHR
    if (!url) {
      return setTimeout(reject, 1000);
    }
    return setTimeout(resolve, 1000);
  });
}

// no url, promise rejected
fakeAjax().then(function () {
  console.log('success');
},function () {
  console.log('fail');
});

Promise 对象Promise 是异步编程的一种解决方案,将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数,要是为了解决异步处理回调地狱(也就是循环嵌套的问题)而产生的。

Promise 构造函数包含一个参数和一个带有 resolve(解析)和 reject(拒绝)两个参数的

回调。在回调中执行一些操作(例如异步),如果一切都正常,则调用 resolve,否则调用

reject。

对于已经实例化过的 Promise 对象可以调用 Promise.then() 方法,传递 resolve 和

reject方法作为回调。

then()方法接收两个参数:onResolve 和 onReject,分别代表当前Promise 对象在成功或失败时Promise 的 3 种状态:Fulfilled 为成功的状态,Rejected 为失败的状态,Pending 既不是 Fulfilld 也不是Rejected 的状态,可以理解为 Promise 对象实例创建时候的初始状态

14. import 和 export

ES6 标准中,JavaScript 原生支持模块(module)。这种将 JS 代码分割成不同功能的小块进

行模块化,将不同功能的代码分别写在不同文件中,各模块只需导出公共接口部分,然后通

过模块的导入的方式可以在其他地方使用。

export 用于对外输出本模块(一个文件可以理解为一个模块)变量的接口。

import 用于在一个模块中加载另一个含有 export 接口的模块。

import 和 export 命令只能在模块的顶部,不能在代码块之中。

15、Set 数据结构

Set是 ES6 提供的一种新的数据结构,类似于数组。所有的数据都是唯一的,没有重复的值。它本身是一个构造函数。由于成员都是唯一的,不重复的特点,因此可以通过Set轻松实现对数组的 去重、交、并、补等操作。

◼️ Set 属性和方法
 

Size() 数据的长度

Add() 添加某个值,返回 Set 结构本身。

Delete() 删除某个值,返回一个布尔值,表示删除是否成功。

Has() 查找某条数据,返回一个布尔值。

Clear()清除所有成员,没有返回值。

interface Set {
    add(value): this;
    clear(): void;
    delete(value): boolean;
    forEach(callbackfn: (value, value2, set: Set) => void, thisArg?: any): void;
    has(value): boolean;
    readonly size: number;
}

◼️ Set主要应用场景:数组去重、交集、并集、补集。
 

根据Set的特点,有很多场景可以通过Set快速实现。JavaScript Set 实用场景(数组: 去重、交、并、补)

let arr1 = [1, 2, 3, 4, 5, 6, 7, 4, 3, 2, 1];

// 去重
let newArr = [...new Set(arr1)];
console.log(arr1); // [LOG]: [ 1, 2, 3, 4, 5, 6, 7, 4, 3, 2, 1 ] 
console.log(newArr); // [LOG]: [ 1, 2, 3, 4, 5, 6, 7 ] 
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [3, 4, 5, 6, 7];

let arr1_set = new Set(arr1);
let arr2_set = new Set(arr2);

// 交集
let intersectionArr = [...arr1_set].filter(val => arr2_set.has(val));

console.log(intersectionArr );  // [LOG]: [ 3, 4, 5]

// 并集
let unionArr = [...new Set([...arr1, ...arr2])];
console.log(unionArr );  // [LOG]: [ 1, 2, 3, 4, 5, 6, 7 ] 

// 补集
let complementaryArr = [...arr1_set].filter(val => !arr2_set.has(val));
console.log(complementaryArr );  // [LOG]: [ 1, 2 ] 

15.  Modules

ES6的内置模块功能借鉴了CommonJS和AMD各自的优点:

(1) 具有CommonJS的精简语法、唯一导出出口(single exports)和循环依赖(cyclic dependencies)的特点。

(2) 类似AMD,支持异步加载和可配置的模块加载。

// lib/math.js
export function sum(x, y) {
  return x + y;
}
export var pi = 3.141593;

// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));

// otherApp.js
import {sum, pi} from "lib/math";
alert("2π = " + sum(pi, pi));

Module Loaders:
// Dynamic loading – ‘System’ is default loader
System.import('lib/math').then(function(m) {
  alert("2π = " + m.sum(m.pi, m.pi));
});

// Directly manipulate module cache
System.get('jquery');
System.set('jquery', Module({$: $})); // WARNING: not yet finalized

最后,我们来看看ES5和ES6的区别:

1. 系统库的引入

ES5:需要先使用require导入React包,成为对象,再去进行真正引用;

ES6:可以使用import方法来直接实现系统库引用,不需要额外制作一个类库对象

2. 导出及引用单个类

ES5:要导出一个类给别的模块用,一般通过module.exports来实现。引用时,则依然通过require方法来获取;

ES6:可以使用用export default来实现相同的功能,使用import方法来实现导入

3. 定义组件

ES5:组件类的定义可以通过React.createClass实现

ES6:让组件类去继承React.Component类就可以了

4. 组件内部定义方法

ES5:采用的是 ###:function()的形式,方法大括号末尾需要添加逗号;

ES6:省略了【: function】这一段,并且结尾不需要加逗号来实现分隔。

5. 定义组件的属性类型和默认属性

ES5:属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现(这两个方法应该是固定名称的);

ES6:统一使用static成员来实现。

6. 初始化STATE

ES5:初始化state的方法是固定的getInitialState;

ES6:第一种,直接构造state函数;第二种,相当于OC中的方法重写,重写constructor方法

谈谈ES5和ES6的区别文章来源地址https://www.toymoban.com/news/detail-431526.html

到了这里,关于谈谈ES5和ES6的区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • this在Es5和Es6的区别

    在ES5和ES6中,this的指向有所不同。 在ES5中,this的默认指向是全局对象(在浏览器环境中通常是window对象)。在函数中,this的指向取决于函数的调用方式。例如,在方法调用中,this指向调用该方法的对象;在构造函数中,this指向构造出来的新对象;在定时器或事件处理函数

    2024年01月19日
    浏览(41)
  • ES5 构造函数与ES6 Class的区别

    Class 类中不存在变量提升 class内部会启用严格模式 class的所有方法都是不可枚举的 class 必须使用new调用 class 内部无法重写类名 class 的继承有两条继承链 一条是: 子类的__proto__ 指向父类 另一条: 子类prototype属性的__proto__属性指向父类的prototype属性. es6的子类可以通过__pro

    2024年02月06日
    浏览(106)
  • ES5 的构造函数和 ES6 的类有什么区别

    在JavaScript中,类和构造函数都被用来创建对象,接下来会从以下几点说说两者的区别: 构造函数使用函数来定义 类使用class来定义 ES6 的 class 可以看作是一个语法糖,这种写法只是让对象原型的写法更加清晰、更像面向对象编程的语法。 比如这是一个构造函数生成实

    2024年02月11日
    浏览(42)
  • 【chatGTP 对es6与es5的区别是什么的解析】

    笔者对chatGPT做了一些提问其结果另人印象深刻,这回答要比一些博主的文章要精彩的多,机器取代人工写作看样子是时间问题了 ES6 (ECMAScript 2015) 和 ES5 (ECMAScript 5) 是 JavaScript 的两个主要版本,它们之间有很多区别。 以下是 ES6 相对于 ES5 的主要区别: 变量声明方式: ES6 引入

    2024年02月02日
    浏览(43)
  • 【ES5和ES6】数组遍历的各种方法集合

    特点: 没有返回值,只是针对每个元素调用func 三个参数:item, index, arr ;当前项,当前项的索引,被遍历的数组 for 循环可以在循环体中终止或跳过该循环,forEach不可以 特点:返回新的arr, 每个元素为调用函数返回的结果 参数: function:必选,数组中每个元素都会执行的函

    2024年02月12日
    浏览(36)
  • 【微信小程序 | 实战开发】实现ES6转ES5开关

    你是否想要掌握人工智能的最新技术和应用?你是否想要成为未来社会的创新者和领导者?你是否想要和全球的优秀导师和同学一起学习和交流?如果你的答案是肯定的,那么欢迎来到床长人工智能教程网站,这里是你实现梦想的起点! 个人名片: 🐼 作者简介:一名大二在

    2024年02月11日
    浏览(55)
  • 【微信小程序 | 实战开发】ES5、ES6概述和新特性介绍

    个人名片: 🐼 作者简介:一名大二在校生,喜欢编程🎋 🐻‍❄️ 个人主页🥇: 小新爱学习. 🐼 个人WeChat:hmmwx53 🕊️ 系列专栏:🖼️ 零基础学Java——小白入门必备 重识C语言——复习回顾

    2024年02月09日
    浏览(40)
  • 微信小程序 ,[JS 文件编译错误] 以下文件体积超过 500KB,已跳过压缩以及 ES6 转 ES5 的处理。

    导入全部图表的echarts.js非常大,如果你的项目较大可能会导致项目上传失败, 在你把整个echarts.js导入项目时开发者工具也会有如下提示: [JS 文件编译错误] 以下文件体积超过 500KB,已跳过压缩以及 ES6 转 ES5 的处理。ec-canvas/echarts.js 我们可以通过图表在线定制来替换 echarts.js 文

    2024年02月13日
    浏览(45)
  • webpack5基础使用(1)-介绍、打包文件、处理样式资源(css、less)文件、配置文件内容、eslint工具检测语法、babel工具es6语法转es5

    webpack5是一个 静态资源打包工具 。 会以一个或多个文件作为打包的入口,将整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件,就可以直接在浏览器端运行了 进一步来说就是: 当开发时,肯定会使用框架、es6模块化语法、less/sass等css预处

    2024年02月03日
    浏览(56)
  • 【JavaScript】数组方法 (ES6)

    arr.find(callback) 用于获取第 1 个符合要求的元素: callback : (item, index, arr) = boolean item -当前值、 index -当前索引、 arr -当前数组 返回值: callback 第一次返回 true 的对应 item ;如果没有符合的元素,则返回 undefined arr.findIndex(callback) 用于获取第 1 个符合要求的元素的下标: cal

    2024年02月14日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包