亚洲欧洲日本综合aⅴ在线,亚洲国产成人久久综合同性

首頁免費(fèi)課 ES6快速入門筆記

ES6快速入門

            
                快樂動起來呀
            
            Web前端工程師
                    
                難度初級
            
                時長 1小時25分
            
                學(xué)習(xí)人數(shù)
            
綜合評分9.27
                            106人評價
                        查看評價
                                9.5
                                內(nèi)容實(shí)用
                            
                                9.1
                                簡潔易懂
                            
                                9.2
                                邏輯清晰

最熱最新

it輕描淡寫 09:40

可變參數(shù)的處理

查看全部

0 采集收起來源：默認(rèn)參數(shù)
2019-02-20
it輕描淡寫 08:35

ES6默認(rèn)參數(shù)的使用

查看全部

0 采集收起來源：默認(rèn)參數(shù)
2019-02-19
redwave001

作用域，閉包的理解。很重要

查看全部

0 采集收起來源：作用域
2019-02-18
FFF團(tuán)裁決之鍵

箭頭函數(shù)中的this指向的是'定義時this的指向',普通函數(shù)的是調(diào)用時指向。

查看全部

0 采集收起來源：箭頭函數(shù)
2019-02-18
玉石蘭兒
本門課知識總結(jié)（ES6與ES5的對比學(xué)習(xí)）：
1. 常量：在 ES6 中定義常量時，只需要將 var 變成 const 即可，詳情如下：
// ES5 常量寫法
Object.defineProperty(window, 'PI2', {
value: 3.1415926,
writable: false,
});
console.log('PI2', window.PI2);

// ES6 常量寫法
const PI3 = 3.14;
console.log('PI3', PI3);
// 報錯 "PI3" is read-only
// PI3 = 4;

2.作用域：（使用let 定義局部變量）
// ES5 中
var callbacks = [];
for(var i=0;i<=2;i++) {
callbacks[i] = function(){
return i *2;
};
}
console.table([
callbacks[0](),
callbacks[1](),
callbacks[2]()
]);

// ES6 中的閉包
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);
})())
})());

// ES6 作用域
{
const foo2 = function(){
return 3;
};
console.log('foo2()===3', foo2()===3);
{
const foo2 = function(){
return 4;
};
console.log('foo2()===4', foo2()===4);
}
console.log('foo2()===3', foo2()===3);
}
3.箭頭函數(shù)：（箭頭函數(shù)的 this? 指向定義時的對象，ES3, ES5 this 指向該函數(shù)被調(diào)用的對象）
// ES5 箭頭函數(shù)
{
var evens = [1, 2, 3, 4, 5];
var odds = evens.map(function(el) {
return el + 1;
});
console.log('evens', evens);
console.log(' odds', odds);
}

// ES6 箭頭函數(shù)
{
let evens1 = [1, 2, 3, 4, 5];
let odds1 = evens1.map( el => el + 1);
console.log('evens1', evens1);
console.log(' odds1', odds1);
}

{
// ES3, ES5 this 指向該函數(shù)被調(diào)用的對象
var factory = function() {
this.a = 'a';
this.b = 'b';
this.c = {
a: 'a+',
b: function() {
return this.a;
}
};
};
console.log((new factory()).c.b());
}

// ES6 this 指向定義時的對象
{
var factory = function() {
this.a = 'a';
this.b = 'b';
this.c = {
a: 'a+',
b: ()=> this.a
};
};
console.log((new factory()).c.b());
}
4.默認(rèn)參數(shù)：（默認(rèn)參數(shù)設(shè)置更加便捷，其中 ... params 表示數(shù)組?params?的展開后結(jié)果）
// ES3,ES5中默認(rèn)參數(shù)
{
function f(x, y, z) {
if(y === undefined) {
y = 10;
}
if(z === undefined) {
z = 100;
}
return x + y + z;
}
console.log(f(1, 20));
}

// ES6 默認(rèn)參數(shù)
{

function f1(x, y = 10, z = 100) {
return x + y + z;
}
console.log(f1(3, 20));
}

// ES6 使用默認(rèn)參數(shù)拋出異常
{
function checkParameter() {
throw new Error('can\'t be empty');
}
function f3(x = checkParameter(), y= 10, z = 100) {
return x + y + z;
}
// f3();
try{
f3();
} catch(e) {
console.log(e);
}
}
// ES3,ES5可變參數(shù)
{
function sum() {
var arr = Array.prototype.slice.call(arguments);
return arr.reduce( function(prev, curr){
return prev + curr;
},0);
}
console.log(sum(10,2,3,4,5));
}

// ES6可變參數(shù)
{
function sum1(...arr) {
return arr.reduce((pre, cur) => pre + cur);
}
console.log('sum1', sum1(1000, 200, 30, 4));
}
// ES5 合并數(shù)組
{
var params = ['hello', true, 7];
var other = [3, 4].concat(params);
console.log('other', other);
}
// ES6 合并數(shù)組
{
var params1 = ['world', false , 8];
var other1 = [10, 20, ... params];
console.log('other1', other1);
}
5.對象代理：（通過 Proxy 代理對象，讓對象讀取與修改更加快捷）
// ES3,ES5 數(shù)據(jù)保護(hù)
{
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;
}
};
};
// 創(chuàng)建實(shí)例
var person = new Person();
// 讀取數(shù)據(jù)
console.table({
name: person.get('name'),
sex: person.get('sex'),
age: person.get('age')
});
// 修改數(shù)據(jù)
person.set('name', 'es3-1');
// 讀取數(shù)據(jù)
console.table({
name: person.get('name'),
sex: person.get('sex'),
age: person.get('age')
});
// 修改性別
person.set('sex', 'female');
// 讀取數(shù)據(jù)
console.table({
name: person.get('name'),
sex: person.get('sex'),
age: person.get('age')
});

}

// ES5
{
console.log('\n\nes5');
var Person1 = {
name: 'es5',
age: 16
};
Object.defineProperty(Person1, 'sex', {
writable:false,
value: 'male'
});
console.table({
name: Person1.name,
age: Person1.age,
sex: Person1.sex
});
Person1.name = 'es5-1';
console.table({
name: Person1.name,
age: Person1.age,
sex: Person1.sex
});
try{
// 修改只讀屬性會報錯
Person1.sex = 'female';
console.table({
name: Person1.name,
age: Person1.age,
sex: Person1.sex
});

}catch (e) {
console.log(e);
}
}

// ES6
{
let Person2 = {
name: 'es6',
sex: 'male',
age: 17
};
let person2 = new Proxy(Person2, {
get(target, key) {
return target[key];
},
set(target, key, value) {
if(key !== 'sex') {
return (target[key] = value);
}
}
});
console.table({
name: person2.name,
sex: person2.sex,
age: person2.age
});
try{
person2.sex = 'female';
}
catch (e) {
console.log(e);
}
person2.age = 20;
console.table({
name: person2.name,
sex: person2.sex,
age: person2.age
});
}
查看全部

2 采集收起來源：對象代理
2019-02-14
小蝸牛奔跑

https://github.com/cucygh/fe-material

查看全部

4 采集收起來源：環(huán)境搭建
2019-02-11
Sandaydi

學(xué)前準(zhǔn)備
環(huán)境準(zhǔn)備

查看全部

0 采集收起來源：環(huán)境搭建
2019-02-08
小倩14 05:31

//ES5 中的常量，設(shè)置常量是只讀的

Object.defineProperty(window,"pi1",{
? ?value:3.141592,
? ?writable:false,//不可編輯
})
console.log("pi1:"+pi1);

// ES6 中的常量
const pi2=3.1415926
console.log("pi2:"+pi2);

//pi2=4 ? 加上這句會報 pi2 是只讀的錯誤

查看全部

1 采集收起來源：常量
2019-01-22
Autumn1 18:19

進(jìn)階指導(dǎo)，ES6零基礎(chǔ)教學(xué)

查看全部

0 采集收起來源：對象代理
2019-01-17
Autumn1 18:19

進(jìn)階指導(dǎo)，ES6零基礎(chǔ)教學(xué)-解析彩票項(xiàng)目

查看全部

0 采集收起來源：對象代理
2019-01-17
Autumn1 18:19

進(jìn)階指導(dǎo)，ES6零基礎(chǔ)教學(xué)：“解析彩票項(xiàng)目”

查看全部

0 采集收起來源：對象代理
2019-01-17
Autumn1 18:19

進(jìn)階指導(dǎo)，ES6零基礎(chǔ)教學(xué)：解析彩票項(xiàng)目

查看全部

0 采集收起來源：對象代理
2019-01-17
Autumn1 17:51

ES6進(jìn)階指導(dǎo)

查看全部

0 采集收起來源：對象代理
2019-01-17
Autumn1 07:26

下載此課程源碼

查看全部

1 采集收起來源：環(huán)境搭建
2019-01-17
Autumn1 03:41

ES6安裝環(huán)境準(zhǔn)備

查看全部

1 采集收起來源：環(huán)境搭建
2019-01-17
鹽的甜js 01:54

git教程

查看全部

0 采集收起來源：環(huán)境搭建
2019-01-13
丨帶你兜風(fēng)丨

es6語法模式

查看全部

0 采集收起來源：對象代理
2018-12-25