查询浏览器对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. 用Kotlin改写PHP程序是什么样的体验

    学Kotlin其实要看:http://kotlinlang.org/docs/kotlin-docs.pdf 在线版是不完整的!!!少了一些章节,会有点难看懂后面的文档. 我选择了WordPress里 ...

  2. 在window下配置laravel开发环境

    1.由于有一点php基础,所以非常想更进一步,就选择据说在国外最流行的php框架来学习了,laravel框架,官网上介绍是为艺术而生,从知乎和一些论坛上看到,laravel学起来并不简单,首先配置问题 ...

  3. entityframework学习笔记--002-database first

    1.实体框架紧紧地和Visual Studio集成在一起,为了在你的应用程序中使用实体框架,我们增加一个ADO.NET实体数据框架到你的项目.方法如下: 右键你的项目,然后选择 ➤New Item(新 ...

  4. 十二种获取Spring的上下文环境ApplicationContext的方法

    转载:https://my.oschina.net/u/2391658/blog/729414

  5. python字符串连接的N种方式

    python中有很多字符串连接方式,今天在写代码,顺便总结一下: 最原始的字符串连接方式:str1 + str2 python 新字符串连接语法:str1, str2 奇怪的字符串方式:str1 st ...

  6. [ASP.NET Core] Getting Started

    前言 本篇文章介绍如何快速建立一个ASP.NET Core应用程序,为自己留个纪录也希望能帮助到有需要的开发人员. ASP.NET Core官网 环境 建立一个ASP.NET Core应用程序,首先要 ...

  7. jQuery拉开关闭帷幕

    查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/7.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  8. 用原生javascript实现在页面动态显示时间

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

  9. View and Data API 现在支持IE11了

    By Daniel Du After a long time waiting, IE11 finally supports WebGL, which enables us viewing our 3D ...

  10. [Android]从Launcher开始启动App流程源码分析

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5017056.html 从Launcher开始启动App流程源码 ...