ES6的十个新特性
这里只讲 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的十个新特性的更多相关文章
- ES6 主要的新特性
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- ES6语法的新特性
ES6 就是ECMAScript 6是新版本JavaScript语言的标准.虽然目前已经更新到ES7,但是很多浏览器还不知处ES7语法,该标准仍在更新中,但目前部门网站都指出ES6的语法.目前ES6也 ...
- 深入浅出:了解JavaScript的ES6、ES7新特性
参照阮一峰博客:http://es6.ruanyifeng.com/#README es6常见题:https://blog.csdn.net/qq_39207948/article/details/8 ...
- ES6中常用新特性讲解
1.不一样的变量声明:const和let ES6推荐使用let声明局部变量,相比之前的var(无论声明在何处,都会被视为声明在函数的最顶部) let和var声明的区别: var x = '全局变量'; ...
- 2.ES6引进的新特性——类Class
为什么? ES6中引入了类,类在java/c++等面向对象的编程语言常见,JS引入类是为了在日后使用js开发大型的应用程序,类本质是语法糖(语法上更加人性化) 以前写一个类 function User ...
- 关于ES6的一些新特性的学习
一.关于变量 ES5 1.只有全局作用域变量和函数作用域变量 2.“变量提升”(当程序进入一个新的函数时,会将该函数中所有的变量的声明放在函数开始的位置.仅仅会提升变量的声明,不会提升变量的赋值) E ...
- ES6 开发常用新特性以及简述ES7
一.关于变量 ES6新增:块级作用域变量 1.let定义块级作用域变量 没有变量的提升,必须先声明后使用 let声明的变量,不能与前面的let,var,conset声明的变量重名 { { consol ...
- ES6/ES7/ES8新特性
ES6 变量的改变 let const 2. 字符串新增方法 let str = 'react'; str.includes('re') // true str.repeat(3) // reactr ...
- ES6中的新特性
本人最近学习es6一些方法,难免有些手痒,想着能不能将这些方法总结下,如下 1.数组的扩展 1)首先什么是伪数组 无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法 ...
随机推荐
- Hive学习笔记——基本配置及测试
1.什么是Hive Hive 是建立在 Hadoop上的数据仓库基础构架.它提供了一系列的工具,可以用来进行数据提取转化加载(ETL),这是一种可以存储.查询和分析存储在Hadoop中的大规模数据的机 ...
- 【iOS与EV3混合机器人编程系列之四】iOS_WiFi_EV3_Library 剖析之中的一个:WiFi UDP和TCP
在上一篇文章中.我们通过编写EV3 Port Viewer项目实现了iOS监測EV3的实时端口数据. 程序最核心的部分就是我们的开源码库iOS_WiFi_EV3_Library. 那么,在本文中,我们 ...
- 微信小程序动态显示项目倒计时效果
效果: wxml代码: <view class='spellNum'> <view> <text style='color: #fff;'>团长</text& ...
- jmeter插件JMeterPlugins-Standard 压力测试
Jmeter有插件提供用来给用户监控所测试的服务器的资源使用 情况,需要有Jmeter客户端插件和服务端插件 1.客户端插件 需要在https://jmeter-plugins.org/downloa ...
- JDK7 Garbage Frist
JDK7 G1新型垃圾回收器. http://www.infoq.com/cn/articles/jdk7-garbage-first-collector
- Domino Web中隐藏附件选择框
只要在Web Form的最后加入以下代码,并选择Pass-Tru HTML,即可隐藏默认的附件选择框. <div id=attach Style="display:none" ...
- 用Java自定义一个定时器
1.先定义一个监听类: import java.util.Date; import java.util.Timer; import javax.servlet.ServletContextEvent; ...
- Web的本质以及第一个Django实例.
Web框架的本质: 所有的Web应用本质上就是一个socket服务器, 而用户的浏览器就是一个socket客户端. import socket sk = socket.socket() s ...
- Xcode删除Project上层group
本来想在Project下New Group,结果点了New group from selection, 结果在Project上级新建了一个group,邮件菜单中无删除项…… 解决方法: 1,关闭Xco ...
- shiro权限笔记
shiro框架运行流程 认证:系统提供的用于识别用户身份的功能,通常就是登录功能.----让系统知道你是谁??授权:系统提供的为用户分配访问系统某些功能的能力.----让系统知道你能做什么?? 官网: ...