这里只讲 ES6比较突出的特性,因为只能挑出十个,所以其他特性请参考官方文档;

/**
 * Created by zhangsong on 16/5/20.
 */
//    ***********Number One : Parameters************
//                   参数的传递
//ES5:
var link = function (height,color,url) {
  var height = height || 50;
  var color = color || 'red';
  var url = url || 'http://azat.co'
};

//ES6
var link = function(height = 50, color = 'red', url = 'azat.co'){

};

//Number Two : Template Literals
//                  字面量插入字符串
//ES5

var name = 'your name is' + first + '' + last + '.';
var url =  'http://www.google.com' + id ;

//ES6

var name = `your name is ${first} ${last}.`;
var url = `http://www.google.com ${id}`;

//Number Three : Multi-line Strings
            //多行字符串
//ES5

var str = 'aaaaaaaaaaaaaaaaa'
    +'bbbbbbbbbbbbbbbbbbbbbb'
    +'cccccccccccccccccccccc';

//ES6

var str = `aaaaaaaaaaaaaaaaaaa
            bbbbbbbbbbbbbbbbbb
            cccccccccccccccccc`;

//              Number Four : Destructuring Assignment
               //读取对象属性或者是数组元素

//ES5:

var a = {
    p1: "this is p1",
    p2: "this is p2"
};
 var p1 = a.p1;
 var p2 = a.p2;

//ES6

var {p1 , p2} = a;

var [p1,p2] = arr.split('\n');

//Number Five : Enhanced Object Literals
            //对象的强化

//ES5

var serviceBase = {port: 3000, url: 'azat.co'},
    getAccounts = function(){return [1,2,3]}

var accountServiceES5 = {
    port: serviceBase.port,
    url: serviceBase.url,
    getAccounts: getAccounts,
    toString: function() {
        return JSON.stringify(this.valueOf())
    },
    getUrl: function() {return "http://" + this.url + ':' + this.port},
    valueOf_1_2_3: getAccounts()
};

var accountServiceES5ObjectCreate = Object.create(serviceBase)
var accountServiceES5ObjectCreate = {
    getAccounts: getAccounts,
    toString: function() {
        return JSON.stringify(this.valueOf())
    },
    getUrl: function() {return "http://" + this.url + ':' + this.port},
    valueOf_1_2_3: getAccounts()
};

//ES6

var serviceBase = {port: 3000, url: 'azat.co'},
    getAccounts = function(){return [1,2,3]}
var accountService = {
    __proto__: serviceBase,
    getAccounts,
    toString() {
        return JSON.stringify((super.valueOf()))
    },
    getUrl() {return "http://" + this.url + ':' + this.port},
    [ 'valueOf_' + getAccounts().join('_') ]: getAccounts()
};
console.log(accountService);

//Number Six: Arrow Functions
            //  箭头方法

//ES5:

var _this = this
$('.btn').click(function(event){
    _this.sendData()
});

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
var messages = ids.map(function (value) {
    return "ID is " + value // explicit return
});

//ES6

$('.btn').click((event) =>{
    this.sendData()
});

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
var messages = ids.map(value => `ID is ${value}`) // implicit return

//Number Seven : Promises
//ES5

setTimeout(function(){
    console.log('Yay!')
}, 1000)

//ES6

var wait1000 =  new Promise(function(resolve, reject) {
    setTimeout(resolve, 1000)
}).then(function() {
        console.log('Yay!')
    })

//OR

var wait1000 =  new Promise((resolve, reject)=> {
    setTimeout(resolve, 1000)
}).then(()=> {
        console.log('Yay!')
    })

//                       Block-Scoped Constructs Let and Const
//                          块级作用域的变量声明

//ES5:

function calculateTotalAmount (vip) {
    var amount = 0
   if (vip) {
        var amount = 1
    }
    { // more crazy blocks!
       var amount = 100
        {
            var amount = 1000
        }
    }
    return amount
}

console.log(calculateTotalAmount(true));

//ES6

function calculateTotalAmount (vip) {
    var amount = 0 // probably should also be let, but you can mix var and let
   if (vip) {
        let amount = 1 // first amount is still 0
    }
    { // more crazy blocks!
       let amount = 100 // first amount is still 0
        {
            let amount = 1000 // first amount is still 0
        }
    }
    return amount
}

console.log(calculateTotalAmount(true));

//let 使声明变量不会被提升
//let 严格限制了所声明变量的作用域,在哪声明在哪用
//let 不能重复声明同一个变量
//用 let 可以去掉函数的自执行

//                      Number Nine: Classes
//                           类

//New Concept in js:

class baseModel {
    constructor(options = {}, data = []) { // class constructor
       this.name = 'Base'
       this.url = 'http://azat.co/api'
       this.data = data
        this.options = options
    }

getName() { // class method
       console.log(`Class name: ${this.name}`)
    }
}

//                            Number  Ten:  Modules
//                                   模块

//ES5 : Node.js

module.exports = {
    port: 3000,
    getAccounts: function() {
        //***
    }
}

var service = require('module.js')
console.log(service.port) // 3000

//ES6

export var port = 3000
export function getAccounts(url) {
//...
}

import {port, getAccounts} from 'module'
console.log(port) // 3000

//OR

import * as service from 'module'
console.log(service.port) // 3000

ES6的十个新特性的更多相关文章

  1. ES6 主要的新特性

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  2. ES6语法的新特性

    ES6 就是ECMAScript 6是新版本JavaScript语言的标准.虽然目前已经更新到ES7,但是很多浏览器还不知处ES7语法,该标准仍在更新中,但目前部门网站都指出ES6的语法.目前ES6也 ...

  3. 深入浅出:了解JavaScript的ES6、ES7新特性

    参照阮一峰博客:http://es6.ruanyifeng.com/#README es6常见题:https://blog.csdn.net/qq_39207948/article/details/8 ...

  4. ES6中常用新特性讲解

    1.不一样的变量声明:const和let ES6推荐使用let声明局部变量,相比之前的var(无论声明在何处,都会被视为声明在函数的最顶部) let和var声明的区别: var x = '全局变量'; ...

  5. 2.ES6引进的新特性——类Class

    为什么? ES6中引入了类,类在java/c++等面向对象的编程语言常见,JS引入类是为了在日后使用js开发大型的应用程序,类本质是语法糖(语法上更加人性化) 以前写一个类 function User ...

  6. 关于ES6的一些新特性的学习

    一.关于变量 ES5 1.只有全局作用域变量和函数作用域变量 2.“变量提升”(当程序进入一个新的函数时,会将该函数中所有的变量的声明放在函数开始的位置.仅仅会提升变量的声明,不会提升变量的赋值) E ...

  7. ES6 开发常用新特性以及简述ES7

    一.关于变量 ES6新增:块级作用域变量 1.let定义块级作用域变量 没有变量的提升,必须先声明后使用 let声明的变量,不能与前面的let,var,conset声明的变量重名 { { consol ...

  8. ES6/ES7/ES8新特性

    ES6 变量的改变 let const 2. 字符串新增方法 let str = 'react'; str.includes('re') // true str.repeat(3) // reactr ...

  9. ES6中的新特性

    本人最近学习es6一些方法,难免有些手痒,想着能不能将这些方法总结下,如下 1.数组的扩展 1)首先什么是伪数组 无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法 ...

随机推荐

  1. Hive学习笔记——基本配置及测试

    1.什么是Hive Hive 是建立在 Hadoop上的数据仓库基础构架.它提供了一系列的工具,可以用来进行数据提取转化加载(ETL),这是一种可以存储.查询和分析存储在Hadoop中的大规模数据的机 ...

  2. 【iOS与EV3混合机器人编程系列之四】iOS_WiFi_EV3_Library 剖析之中的一个:WiFi UDP和TCP

    在上一篇文章中.我们通过编写EV3 Port Viewer项目实现了iOS监測EV3的实时端口数据. 程序最核心的部分就是我们的开源码库iOS_WiFi_EV3_Library. 那么,在本文中,我们 ...

  3. 微信小程序动态显示项目倒计时效果

    效果: wxml代码: <view class='spellNum'> <view> <text style='color: #fff;'>团长</text& ...

  4. jmeter插件JMeterPlugins-Standard 压力测试

    Jmeter有插件提供用来给用户监控所测试的服务器的资源使用 情况,需要有Jmeter客户端插件和服务端插件 1.客户端插件 需要在https://jmeter-plugins.org/downloa ...

  5. JDK7 Garbage Frist

    JDK7 G1新型垃圾回收器. http://www.infoq.com/cn/articles/jdk7-garbage-first-collector

  6. Domino Web中隐藏附件选择框

    只要在Web Form的最后加入以下代码,并选择Pass-Tru HTML,即可隐藏默认的附件选择框. <div id=attach Style="display:none" ...

  7. 用Java自定义一个定时器

    1.先定义一个监听类: import java.util.Date; import java.util.Timer; import javax.servlet.ServletContextEvent; ...

  8. Web的本质以及第一个Django实例.

       Web框架的本质:    所有的Web应用本质上就是一个socket服务器, 而用户的浏览器就是一个socket客户端. import socket sk = socket.socket() s ...

  9. Xcode删除Project上层group

    本来想在Project下New Group,结果点了New group from selection, 结果在Project上级新建了一个group,邮件菜单中无删除项…… 解决方法: 1,关闭Xco ...

  10. shiro权限笔记

    shiro框架运行流程 认证:系统提供的用于识别用户身份的功能,通常就是登录功能.----让系统知道你是谁??授权:系统提供的为用户分配访问系统某些功能的能力.----让系统知道你能做什么?? 官网: ...