查询浏览器对ES6的支持情况https://kangax.github.io/compat-table/es6/

Chrome、MS Edge、Firefox、Safari、Node和其它很多环境都已经嵌入程序以支持 JavaScript ES6 的大部分功能。

一、变量和变量的作用域
ES5:
定义变量用 var=5;
使用var来定义变量会使变量泄露到其他的代码块,并且使用var来定义变量会产生预解析,即变量的声明提前了,但是变量的初始化并没有提前,如果想使用var来声明变量,一定要在函数的顶部声明;

ES6:
定义变量加入了 let const

1》使用let来定义变量
let 会将变量提升到块顶部(而非像ES5是函数顶部)。
但是在变量声明前引用变量会造成错误。
let 是块作用域的,不可以在声明前使用。
块开始到变量生的区域:temporal dead zone;

2》const
如果不希望变量的值在发生改变,使用const声明变量。

总结:使用let和const代替var,尽量使用const来定义变量,如果变量在后续代码中需要更改变化,则使用let来声明

二、封闭空间
ES5:
(function(参数){})(传参);
ES5中封闭空间避免了污染全局环境

ES6:
为了避免污染全局环境污染不必再使用封闭空间,在局部环境中使用let来定义变量就解决了所有问题

  1. {
  2. let a=;
  3. }
  4. alert(a); //undefined

三、字符串和变量的拼接
1》单行字符串和变量的拼接
ES5:
字符串和变量的拼接:变量不加'',字符串加'',字符串和变量的拼接使用+

  1. eg
  2. var name=jason;
  3. var age=;
  4. alert('His name is'+name+',He is'+age);

ES6:
字符串和变量的拼接,在拼接的整个作用域内加``(就是键盘1前面那个键的反引号),变量和字符串都不再加'',变量使用${变量名};
eg:

  1. const name=jason;
  2. const age=;
  3. alert(`His name is ${name},He is ${age}`);

2》多行字符串
在进行DOM操作的时候免不了需要进行多行字符串的操作
ES5:
eg:

  1. var oLi='<li>n'+
  2. <div>我是ES5</div>n'+
  3. '<p>这是我的拼接</p>n'+
  4. '</li>';

ES6:

  1. eg:
  2. const oLi=`<li>
  3. <div>我是ES6</div>
  4. <p>这是我的拼接</p>
  5. </li>`

四、解构赋值
1》数组的操作
ES5:

  1. var arr=[,,,,];
  2. var s=arr[];
  3. var n=arr[];
  4. alert(s,n);//1,5

ES6:

  1. const arr=[,,,,];
  2. const [s,,,,n]=arr;
  3. alert(s,n);

2》值的对调:例如冒泡排序中的数组的值的对调
ES5:

  1. function BubbleSort(arr){
  2. for(var i=;i<arr.length;i++){
  3. for(var j=;j<arr.length-;j++){
  4. if(arr[j]>arr[j+]){
  5. var tmp=arr[j];
  6. arr[j]=arr[j+];
  7. arr[j+]=tmp
  8. }
  9. }
  10. }
  11. return arr;
  12. }

ES6:

  1. function BubbleSort(arr){
  2. for(var i=;i<arr.length;i++){
  3. for(var j=;j<arr.length-;j++){
  4. if(arr[j]>arr[j+]){
  5. [arr[j],arr[j+]]=[arr[j+],arr[j]];
  6. }
  7. }
  8. }
  9. return arr;
  10. }

3》查找返回值(包含多个值的时候);
ES5:

  1. function obj() {
  2. var left=, right=, top=, bottom=;
  3. return { left: left, right: right, top: top, bottom: bottom };
  4. }
  5. var data = obj();
  6. var left = data.left;
  7. var bottom = data.bottom;
  8. console.log(left, bottom); // 1 4

ES6:

  1. function obj(){
  2. const left=, right=, top=, bottom=;
  3. return {left,right,top,bottom};
  4. }
  5. const {left,bottom}=obj();
  6. console.log(left, bottom); // 1 4

还有
ES5:

  1. function settings() {
  2. return { display: { color: 'red' }, keyboard: { layout: 'querty'} };
  3. }
  4. var tmp = settings();
  5. var displayColor = tmp.display.color;
  6. var keyboardLayout = tmp.keyboard.layout;
  7. console.log(displayColor, keyboardLayout); // red querty

ES6:

  1. function settings() {
  2. return { display: { color: 'red' }, keyboard: { layout: 'querty'} };
  3. }
  4. const { display: { color: displayColor }, keyboard: { layout: keyboardLayout }} = settings();
  5. console.log(displayColor, keyboardLayout); // red querty

五、类和面向对象
在 JavaScript 中,每个对象都有原型对象。所有 JavaScript 对象都从原型上继承方法和属性。
ES5中,属性放在构造函数(constructor)里,方法放在原型(prototype)上;
ES6中引入了类(class)来代替构造函数(constructor);
1》面向对象:ES6中引入了类(class)
ES5:

  1. function Person(name,age){
  2. this.name=name;
  3. this.age=age;
  4. }
  5.  
  6. Person.prototype.showName=function(){
  7. return this.name;
  8. }
  9.  
  10. var P1 = new Person('jason','');
  11. alert(P1.showName());//jason

ES6:

  1. class Person {
  2. constructor(name) {
  3. this.name = name;
  4. }
  5. showName() {
  6. return this.name;
  7. }
  8. }
  9. const P1 = new Person('jason');
  10. alert(P1.showName()); //jason

2》继承:提供了新的关键字 extends 和 super
ES5:

  1. function Person (name,age){
  2. this.name = name;
  3. this.age = age;
  4. }
  5. Person.prototype.showName = function(){
  6. return this.name;
  7. };
  8. Person.prototype.showAge = function(){
  9. return this.age;
  10. };
  11.  
  12. function Worker (name,age,job){
  13. //属性继承
  14. Person.call(this,name,age);
  15. //Person.apply(this,arguments);
  16. this.job = job;
  17. }
  18. //方法继承
  19. Worker.prototype = new Person();
  20. Worker.prototype.constructor = Worker;
  21. Worker.prototype.showJob = function(){
  22. return this.job;
  23. };
  24. //
  25. var w1 = new Worker('jason',,'要饭的');
  26. alert(w1.showJob());//要饭的

ES6:

  1. class Person {
  2. constructor(name,age) {
  3. this.name = name;
  4. this.age=age;
  5. }
  6. showName() {
  7. return this.name;
  8. }
  9. showAge(){
  10. return this.age;
  11. }
  12. }
  13. class Worker extends Person {
  14. constructor(name,age,job){
  15. super(name,age);
  16. this.job=job;
  17. }
  18. showJob(){
  19. return this.job;
  20. }
  21. }
  22. const W1 = new Worker('jason',,'要饭的');
  23. alert(W1.showJob()); // 要饭的

转载请注明‘转载于Jason齐齐的博客http://www.cnblogs.com/jasonwang2y60/’

关于ES6新增的东西的更多相关文章

  1. 关于ES6新增的东西(二)

    六.原生Promise 就是一个对象,用来传递异步操作的数据(消息) pending(等待.处理中)-> Resolve(完成.fullFilled) -> Rejected(拒绝.失败) ...

  2. ES6 新增的一些东西

    一.常量 不允许重复定义 const a='HELLO' const a='world'//报错Uncaught SyntaxError: Identifier 'a' has already bee ...

  3. ES6新增的 Set 和 WeakSet 是什么玩意?在此揭晓

    现在的章节内容会更加的紧密,如果大家看不懂可以先去看以前的文章,当然看了的忘了,也可以去看一下,这样学习后面的内容才会更加容易. 什么是Set结构 Set是ES6给开发者带来的一种新的数据结构,你可以 ...

  4. es6新增

    首先要说let,他是只在代码块中执行的变量,例如: {    let a = 10;    var b = 1;}console.log(a);//definedconsole.log(b);//1 ...

  5. ECMAScript简介以及es6新增语法

    ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...

  6. ES6新增的常用数组方法(forEach,map,filter,every,some)

    ES6新增的常用数组方法 let arr = [1, 2, 3, 2, 1]; 一 forEach => 遍历数组 arr.forEach((v, i) => { console.log( ...

  7. ES6新增对象方法的访问描述符:get(只读)、set(只写)

    Es6新增对象方法的访问描述符:get(只读).set(只写),可以直接使用,一般用于数据监听,用途类似于vue.$watch. var obj = { a:1, get bar() { return ...

  8. 浅谈ES6新增数据类型:Symbol

    面试中喜闻乐见的问题就是问我们的ES6新增了哪些个新特性 这篇文章一起学习一下新增的数据类型:Symbol JS的原始数据类型:6种Boolean,String,Undefined,NULL,Numb ...

  9. ES6新增的数据类型Map和Set。

    Javascript的默认对象表示方式 {} ,即一组键值对. 但是Javascript的对象有个小问题,就是键必须是字符串.但实际上Number或者其他数据类型作为键也是非常合理的. 为了解决这个问 ...

随机推荐

  1. VBA初试——合并

    今天遇到一个任务,要把excel中的相同行合并:没有找到直接的办法(vlookup大概能做),试了试VBA挺好用 数据结构 第一.二列是描述字段,第二列元素唯一:第三到第八列是标志位 任务 合并描述字 ...

  2. Mac下如何查看Tomcat的版本?

    Tomcat提供了一个查询自身版本号的方法,要查询Tomcat的版本号,必须知道Tomcat所在的准确目录. 例如: 所用的Tomcat所在的目录下的bin文件夹的完整路径为:/Library/Tom ...

  3. [转]看部电影,透透彻彻理解IoC(你没有理由再迷惑!)

    之前对依赖注入的概念一直感到模糊,直到看了这篇文章:http://www.iteye.com/topic/1122835 引述: IoC(控制反转:Inverse of Control)是Spring ...

  4. mvc view 中 js 不反应

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. jQuery基础_4

    dom对象就是jquery对象的数组组成部分jquery对象和dom对象的转化jquery对象-->dom对象$()[下标]dom对象-->jquery对象$(dom对象) jquery框 ...

  6. Html + Css思维导图

    最近整理的一份Html和Css的思维导图,共享给初学者使用. 各个知识点的详细案例介绍,后期会分阶段依次发布,希望对大家学习html和css有帮助. 如果对文中的知识点有异议,欢迎随时拍砖! 后期也回 ...

  7. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q138-Q140)

    Question  138 You are designing a SharePoint 2010 application that will deploy a Web Part assembly. ...

  8. TabLayout和ViewPager简单实现页卡的滑动

    首先需要在当前的module中的build Gradle的 dependencies中加入以下句子 compile 'com.android.support:design:23.0.1' 因为我们用到 ...

  9. 压缩Sqlite数据文件大小,解决数据删除后占用空间不变的问题

    最近有一网站使用Sqlite数据库作为数据临时性的缓存,对多片区进行划分 Sqlite数据库文件,每天大概新增近1万的数据量,起初效率有明显的提高,但历经一个多月后数据库文件从几K也上升到了近160M ...

  10. 基于Windows 10平台的PM2.5检测器制作

    本篇文章详细讲解了如何利用SDS011激光式PM2.5传感器.HC-06蓝牙模块和Windows 10设备完成一个简单的PM2.5检测器及其应用程序的开发.该检测器使用蓝牙完成数据输出,方便设备连接, ...