Refs

现代框架 Vue React 都使用到了 ES6 (包括D3js)

【常量】

// ES5 中常量的写法

Object.defineProperty(window, "PI2", {
value: 3.1415926,
writable: false,
}) // ES6 的常量写法 const PI = 3.1415926

【作用域】

// ES5 中作用域
const callbacks = []
for (var i = 0; i <= 2; i++) {
// 闭包总是获取最后一次的值
callbacks[i] = function() {
return i * 2
}
} console.table([
callbacks[0](),
callbacks[1](),
callbacks[2](),
]) // ES6 let 命令
const callbacks2 = []
for (let j = 0; j <= 2; j++) {
callbacks2[j] = function() {
return j * 2
}
} console.table([
callbacks2[0](),
callbacks2[1](),
callbacks2[2](),
])

// ES5 指甲汤
;((function() {
const foo = function() {
return 1
}
console.log("foo()===1", foo() === 1)
;((function() {
const foo = function() {
return 2
}
console.log("foo()===2", foo() === 2)
})())
})()) {
function foo() {
return 1
} console.log("foo()===1", foo() === 1)
{
function foo() {
return 2
} console.log("foo()===2", foo() === 2)
}
console.log("foo()===1", foo() === 1)
}

【箭头函数 和 function】区别于 context ,(function 类似于 method 所以 this 到运行时指定的。)(箭头函数是定义时(类似编译期)指定的 真的是函数)

{
// ES3,ES5
var evens = [1, 2, 3, 4, 5];
var odds = evens.map(function(v) {
return v + 1
});
console.log(evens, odds);
}; {
// ES6
let evens = [1, 2, 3, 4, 5];
let odds = evens.map(v => v + 1);
console.log(evens, odds);
} {
// ES3,ES5
var factory = function() {
this.a = 'a';
this.b = 'b';
this.c = {
a: 'a+',
b: function() {
return this.a
}
}
}
console.log(new factory().c.b());
}; { var factory = function() {
this.a = 'a';
this.b = 'b';
this.c = {
a: 'a+',
b: () => {
return this.a
}
}
}
console.log(new factory().c.b());
}

【默认参数】妙用在 必选参数 的实现

{
// ES5 ES3 默认参数的写法
function f(x, y, z) {
if (y === undefined) {
y = 7;
}
if (z === undefined) {
z = 42
}
return x + y + z
}
console.log(f(1, 3));
} {
// ES6 默认参数
function f(x, y = 7, z = 42) {
return x + y + z
}
console.log(f(1, 3));
} // 默认参数 实现 required 参数
{
function checkParameter() {
throw new Error('can\'t be empty')
}
function f(x = checkParameter(), y = 7, z = 42) {
return x + y + z
}
console.log(f(1));
try {
f()
} catch (e) {
console.log(e);
} finally {}
}

【可变参数】ES6 扩展了运算符 ...args ,不仅用在 形参 还可用在拼接数组。

{
// ES3,ES5 可变参数
function f() {
var a = Array.prototype.slice.call(arguments);
var sum = 0;
a.forEach(function(item) {
sum += item * 1;
})
return sum
}
console.log(f(1, 2, 3, 6));
} {
// ES6 可变参数
function f(...a) {
var sum = 0;
a.forEach(item => {
sum += item * 1
});
return sum
}
console.log(f(1, 2, 3, 6));
} {
// ES5 合并数组
var params = ['hello', true, 7];
var other = [1, 2].concat(params);
console.log(other);
} {
// ES6 利用扩展运算符合并数组
var params = ['hello', true, 7];
var other = [
1, 2, ...params
];
console.log(other);
}

………………………………………………………………………………………………………………………………

【对象代理】ES6 提供一个代理层 实现对数据的保护

/* eslint-disable */
{
// ES3,ES5 数据保护
var Person = function() {
var data = {
name: 'es3',
sex: 'male',
age: 15
}
this.get = function(key) {
return data[key]
}
this.set = function(key, value) {
if (key !== 'sex') {
data[key] = value
}
}
} // 声明一个实例
var person = new Person();
// 读取
console.table({name: person.get('name'), sex: person.get('sex'), age: person.get('age')});
// 修改
person.set('name', 'es3-cname');
console.table({name: person.get('name'), sex: person.get('sex'), age: person.get('age')});
person.set('sex', 'female');
console.table({name: person.get('name'), sex: person.get('sex'), age: person.get('age')});
} {
// ES5
var Person = {
name: 'es5',
age: 15
}; Object.defineProperty(Person, 'sex', {
writable: false,
value: 'male'
}); console.table({name: Person.name, age: Person.age, sex: Person.sex});
Person.name = 'es5-cname';
console.table({name: Person.name, age: Person.age, sex: Person.sex});
try {
Person.sex = 'female';
console.table({name: Person.name, age: Person.age, sex: Person.sex});
} catch (e) {
console.log(e);
}
} {
// ES6
let Person = {
name: 'es6',
sex: 'male',
age: 15
}; let person = new Proxy(Person, {
get(target, key) {
return target[key]
},
set(target,key,value){
if(key!=='sex'){
target[key]=value;
}
}
}); console.table({
name:person.name,
sex:person.sex,
age:person.age
}); try {
person.sex='female';
} catch (e) {
console.log(e);
} finally { } }

…………………………………………………………………………………………………………………………

ES6 快速开始的更多相关文章

  1. ES6快速入门(二)数据结构

    ES6快速入门 一.解构 1. 对象解构 let person = { name: 'Tang', age: 28 }; //必须同名,必须初始化 let {name, age} = person; ...

  2. ES6快速入门(一)函数与作用域

    ES6快速入门 一.块级绑定 1.var声明与变量提升 使用var声明的变量,不论在何处都会被视为(声明)在函数级作用域顶部的位置发生. function getValue(condition) { ...

  3. python 全栈开发,Day88(csrf_exempt,ES6 快速入门,Vue)

    BBS项目内容回顾 1. 登陆页面 1. 验证码 1. PIL(Pillow) 2. io 2. ORM 1. 增删改查 3. AJAX $.ajax({ url: '', type: '', dat ...

  4. es6 快速入门 系列

    es6 快速入门(未完结,持续更新中...) 前言 为什么要学习es6 es6对于所有javaScript开发者来说,非常重要 未来,es6将构成javaScript应用程序的基础 es6中很多特性, ...

  5. es6 快速入门 —— 函数

    其他章节请看: es6 快速入门 系列 函数 函数是所有编程语言的重要组成部分,es6之前函数语法一直没什么变化,遗留了许多问题,javaScript开发者多年来不断抱怨,es6终于决定大力度更新函数 ...

  6. es6 快速入门 系列 —— 变量声明:let和const

    其他章节请看: es6 快速入门 系列 变量声明:let和const 试图解决的问题 经典的 var 声明让人迷惑 function demo1(v){ if(v){ var color='red' ...

  7. es6 快速入门 系列 —— promise

    其他章节请看: es6 快速入门 系列 Promise Promise 是一种异步编程的选择 初步认识Promise 用 Promise 来实现这样一个功能:发送一个 ajax,返回后输出 json ...

  8. es6快速入门 系列 - async

    其他章节请看: es6 快速入门 系列 async 前文我们已经知道 promise 是一种异步编程的选择.而 async 是一种用于执行异步任务更简单的语法. Tip:建议学完 Promise 在看 ...

  9. es6 快速入门 系列 —— 类 (class)

    其他章节请看: es6 快速入门 系列 类 类(class)是 javascript 新特性的一个重要组成部分,这一特性提供了一种更简洁的语法和更好的功能,可以让你通过一个安全.一致的方式来自定义对象 ...

  10. es6 快速入门 系列 —— 对象

    其他章节请看: es6 快速入门 系列 对象 试图解决的问题 写法繁杂 属性初始值需要重复写 function createPeople(name, age){ // name 和 age 都写了 2 ...

随机推荐

  1. Integer’s Power HDU - 3208(容斥原理)

    找出(l,r)内的所有的指数最大的次方和 因为一个数可能可以看成a^b和c^d,所以我需要去重,从后往前枚举幂数,然后找可以整除的部分,把低次幂的数去掉. 然后开n方的部分,先用pow()函数找到最接 ...

  2. 洛谷P3620 数据备份

    好吧,我一开始说这是个神级数据结构毒瘤题,后来改成神题了. 主要是贪心做法的巧妙转化: 首先发现选择的一对必须相邻,于是我们搞出差分. 然后考虑选取最小值时,最小值两侧的数要么同时选,要么都不选. 然 ...

  3. B1016. 部分A+B

    正整数A的“DA(为1位整数)部分”定义为由A中所有DA组成的新整数PA.例如:给定A = 3862767,DA = 6,则A的“6部分”PA是66,因为A中有2个6. 现给定A.DA.B.DB,请编 ...

  4. 再谈 javascript 数组去重

    前言 数组去重方法老生常谈,既然是常谈,我也来谈谈 双层循环 也许我们首先想到的是使用 indexOf 来循环判断一遍,但在这个方法之前,让我们先看看最原始的方法: var array = [1,1, ...

  5. bzoj3900 交换茸角

    题目链接 思路 看到n比较小,可以状压. 可以先考虑什么情况下会无法平衡.显然就是排完序之后两两相邻的不能满足小于等于c的限制. 状态.用f[i]来表示i集合中的鹿完成交换所需要的次数. 预处理.无法 ...

  6. MySQL数据库简单查询

    --黑马程序员 DQL数据查询语言 数据库执行DQL语句不会对数据进行改变,而是让数据库发送结果集给客户端.查询返回的结果集是一张虚拟表. 查询关键字:SELECT 语法: SELECT 列名 FRO ...

  7. react-native中的触摸事件

    移动应用上的用户交互基本靠"摸".当然,"摸"也是有各种姿势的:在一个按钮上点击,在一个列表上滑动, 或是在一个地图上缩放.React Native 提供了可以 ...

  8. redis命令参考和redis文档中文翻译版

    找到了一份redis的中文翻译文档,觉得适合学习和查阅.这份文档翻译的真的很良心啊,他是<Redis 设计与实现>一书的作者黄健宏翻译的. 地址:http://redisdoc.com/i ...

  9. 关于串session

    关于session: 最近在用IE浏览器调试不同用户所拥有的权限功能,出现了串session.串session,主要的流程结构如下: 解决方法: 在IE快捷方式上点击鼠标右键>属性>快捷方 ...

  10. 使用Nexus配置Maven私有仓库

    使用Nexus配置Maven私有仓库 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装配置Nexus 1>.下载nexus 下载地址:https://www.sonat ...