开发者社区> auqbllxiu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaScript:ES5和ES6区别实例

简介: JavaScript:ES5和ES6区别实例
+关注继续查看

常量

// ES5 中常量的写法

Object.defineProperty(window, "PI2", {
    value: 3.1415926,
    writable: false,
})

console.log(window.PI2)

// ES6 的常量写法

const PI = 3.1415926
console.log(PI)

// PI = 4

作用域

// ES5 中作用域

const callbacks = []
for (var i = 0; i <= 2; i++) {
callbacks[i] = function() {
return i * 2
}
}

console.table([
callbacks[0](),
callbacks[1](),
callbacks[2](),
])
// 输出是6 6 6


const callbacks2 = []
for (let j = 0; j <= 2; j++) {
callbacks2[j] = function() {
return j * 2
}
}

console.table([
callbacks2[0](),
callbacks2[1](),
callbacks2[2](),
])

// 输出是0 2 4

;((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)
}

箭头函数

/ eslint-disable /

{
// 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
}
}
}
// 谁调用this指向谁
console.log(new factory().c.b()); // 'a+'
};

{
// ES6
var factory = function() {
this.a = 'a';
this.b = 'b';
this.c = {
a: 'a+',
b: () => {
return this.a
}
}
}
// 定义时指向谁就是谁
console.log(new factory().c.b()); // 'a'
}

函数参数

/ eslint-disable /

{
// 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));
}

{
// 必选参数检查
function checkParameter() {
throw new Error('can\&#39;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 {}
}

{
// 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);
}

数据保护

/ 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 {

}

}


            </div>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript之全局函数详解(上)
JavaScript之全局函数详解
31 0
【Java8新特性】- Lambda表达式
Lambda 表达式(lambda expression)是一个匿名函数,Lambda表达式基于数学中的λ演算得名,直接对应于其中的lambda抽象(lambda abstraction),即没有函数名的函数。Lambda表达式可以表示闭包(注意和数学传统意义上的不同)。
223 0
JavaScript 实例总结
Switch 语句 确认框 confirm continue与break区别
1348 0
《JavaScript启示录》——1.5 使用new操作符实例化构造函数
构造函数从根本上说是用于创建预配置对象的饼干模具模板。以String()为例,这个函数在与new操作符[new String('foo') ]一起使用时会创建基于String()模板的字符串实例。让我们来看一个示例。
1366 0
JavaScript发布/订阅实例
原文链接: Pub/Sub JavaScript Object原文日期: 2014年6月11日翻译日期: 2014年6月13日翻译人员: 铁锚 高效AJAX网站的三大杀器: 事件代理, 浏览历史管理, 以及高效应用级 发布/订阅通信机制. 本博客的原文站点 同时使用了这三种技术,本文中作者将分享其中最简单的一个: 该网站使用的 一个微型 发布/订阅模块。
646 0
JavaScript操作select标签详解
获取select值 获取显示的汉字 document.getElementById("bigclass").options[window.document.getElementById("bigclass").selectedIndex].text 获取数据库中的id window.document.getElementById("bigclass").value 获取sel
994 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JavaScript 语言在引擎级别的执行过程
立即下载
Javascript中的函数
立即下载
Javascript中的对象
立即下载