成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【W(wǎng)eb全棧課程二】ES6特性介紹（上）

kevin / 1319人閱讀

摘要：原因中，定義的變量沒有塊級作用域，在第一個(gè)中循環(huán)后已經(jīng)是，里面的執(zhí)行的時(shí)候彈出的就是。

ES6特性介紹（上）

ECMAScript（簡稱ECMA、ES），ES6也被稱為ECMAScript 2015
JavaScript是ECMAScript的一種，但是目前實(shí)現(xiàn)ECMAScript標(biāo)準(zhǔn)的僅JavaScript

ES6新的標(biāo)準(zhǔn)，新的語法特征：
1、變量/賦值
2、函數(shù)
3、數(shù)組/json
4、字符串
5、面向?qū)ο?br>6、Promise
7、generator
8、ES7:async/await

1、變量/賦值 【變量】

var：可以重復(fù)定義、不能限制修改（問題越早發(fā)現(xiàn)代價(jià)越小，因此其實(shí)嚴(yán)謹(jǐn)?shù)恼Z法更利于開發(fā)大項(xiàng)目）、沒有塊級作用域（函數(shù)作用域）

let： 不能重復(fù)定義、變量、塊級作用域

const： 不能重復(fù)定義、常量、塊級作用域

示例1，如下代碼得到彈出的值始終是3，大家可以想下原因。

window.onload=function(){
    let aBtn = document.getElementsByTagName("input");
    for (var i=0; i< aBtn.length; i++) {
        aBtn[i].onclick=function(){
            alert(i);
        }
    }
}

原因：es5中，var定義的變量沒有塊級作用域，i在第一個(gè)function中循環(huán)后已經(jīng)是3，里面的function執(zhí)行的時(shí)候彈出的就是3。
此時(shí)解決方案有2種，都是通過改變變量i的作用域解決
1、閉包的方式封一下（原生js是函數(shù)級作用域，用函數(shù)包了后作用域不會到外面去）

for (var i=0; i< aBtn.length; i++) {
    (function(i) {
        aBtn[i].onclick=function(){
            alert(i);
        }
    })(i);
}

2、ES6方式，let塊級作用域

for (let i=0; i< aBtn.length; i++) {
【賦值】

解構(gòu)賦值（借鑒于Python），只有符合以下要求，解構(gòu)賦值可以靈活使用

左右兩邊結(jié)構(gòu)必須一樣

定義和賦值必須同步完成

示例：

let arr=[12,5,8];
// let [a,b,c]=arr; // a=12,b=5,c=8
let {a,b,c}={a:12,b:3,c:6};
let [m,n,k]=[12,{a: {n1:5,n2:8},b:12,c:8},55];
alert(`${a},$,${c}`); // a=12,b=3,c=6
console(m,n,k); // m=12,n={a: {n1:5,n2:8},b:12,c:8},c=55
2、函數(shù)（類似Python） 【箭頭函數(shù)】

1、如果有且僅有1個(gè)參數(shù)，()可以省略
2、如果函數(shù)體只有一句話，而且是return，{}也可以省
關(guān)于this，箭頭函數(shù)會改變this（后面提及）

let show = function(a,b){return a+b;};
let show = ((a,b)=>a+b);
let show = (a=>a*3);
【默認(rèn)參數(shù)】

傳統(tǒng)函數(shù)實(shí)現(xiàn)默認(rèn)參數(shù)：

function show(a,b,c) {
    b=b||5;
    c=c||12;
    alert(`${a},$,${c}`);
}
show(13);//值是13,5,12
show(13,24,15);//值是13,24,15

ES6實(shí)現(xiàn)默認(rèn)參數(shù)：

function show(a,b=5,c=12) {
    alert(`${a},$,${c}`);//值是13,5,12
}
【...參數(shù)展開】

1、“...”作用1，接收剩余參數(shù)，參數(shù)展開必須在參數(shù)列表的最后

function show(a,b, ...args){
    console.log(a,b,args);
}
show(18,5,14,27,44,12);//函數(shù)中a=18,b=5,args=[14,27,44,12]

2、“...”作用2，展開一個(gè)數(shù)組

let arr=[5,14,27,44];
let arr1=[18,...arr,12];
alert(arr1);//顯示18,5,14,27,44,12
//等價(jià)于...arr=>5,14,27,44
3、數(shù)組/json 【數(shù)組常用方法】

1）map，映射，通常用于對一個(gè)列表進(jìn)行操作后返回新的列表，示例：

let arr=[59,84,27,46,97];
let arr2=arr.map(item=>{
    return item>=60;
});
alert(arr2);//arr2=[false,true,false,false,true]

2）filter，列表過濾，過濾出返回值true的列表，示例：

let arr=[59,84,27,46,97];
let arr2=arr.filter((item,index)=>{
    return item%2;
});
alert(arr2);//arr2=[59,27,97]

3）forEach 遍歷數(shù)組

4）reduce 通常用于匯總，返回一個(gè)值（reduce有tmp參數(shù)）

let arr=[59,84,27,46,97];
//使用reduce計(jì)算總和
let sum=arr.reduce((tmp,item,index)=>{//reduce有tmp參數(shù)
    return tmp+item;
});

5）偽數(shù)組使用數(shù)組的方法（類數(shù)組直接使用數(shù)組方法會報(bào)錯(cuò)），使用Array.from()轉(zhuǎn)換

Array.from(array-like).forEach(item=>{});
【json-可簡寫】

名字和值的變量名一樣，可以省略值的變量名只寫名字; function可以不寫

let a=5;
let obj={a,b:7,
    // show: function(){alert(this.a+","+this.b)}//傳統(tǒng)寫法
    show(){alert(this.a+","+this.b);}//ES6
}
obj.show();//
4、字符串

模板字符串
1)字符串拼接，插入變量

let person={name:"李明",age:17};
alert("我叫"+person.name+"，我今年"+person.age+"歲");//傳統(tǒng)方式
alert(`我叫${person.name}，我今年${person.age}歲`);//ES6模板字符串

2）模板字符串的內(nèi)容書寫時(shí)可以換行

新增常用方法：startsWith、endsWith

5、面向?qū)ο?/b>

1）es5實(shí)現(xiàn)一個(gè)對象
傳統(tǒng)方式，function實(shí)現(xiàn)對象，使用prototype追加方法和繼承
缺點(diǎn)：大項(xiàng)目中每個(gè)開發(fā)者的實(shí)現(xiàn)不一致，原生沒有對象概念，有性能問題

//傳統(tǒng)方式實(shí)現(xiàn)對象，通過函數(shù)表達(dá)函數(shù)，prototype添加方法
function Person(name,age){
    this.name=name;
    this.age=age;
}
Person.prototype.showName=function(){
    alert("我叫"+this.name);
}
Person.prototype.showAge=function(){
    alert("我"+this.age+"歲");
}
// 繼承
function Worker(name,age,job){
    Person.call(this,name,age);
    this.job=job;
}
Worker.prototype=new Person();
Worker.prototype.constructor=Worker;//非官方繼承會改變constructor指向，需要手動修復(fù)
Worker.prototype.showJob=function(){
    alert("我的工作是："+this.job);
}
let w=new Worker("小葉子",18,"學(xué)生");// 調(diào)用
w.showName();
w.showAge();
w.showJob();

2）es6的class實(shí)現(xiàn)一個(gè)對象
ES6的類和其它面向?qū)ο蟮恼Z言更為類似（大部分屬性類似Python）

class Person{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }
    showName(){
        alert("我叫"+this.name);
    }
    showAge(){
        alert("我"+this.age+"歲");
    }
}
class Worker extends Person{
    constructor(name,age,job){
        super(name,age); //super-超類（父類）
        this.job=job;
    }
    showJob(){
        alert("我的工作是："+this.job);
    }
}
let w=new Worker("小葉子",18,"學(xué)生");
w.showName();
w.showAge();
w.showJob();

【函數(shù)this/bind】
1、函數(shù)this
箭頭函數(shù)this：根據(jù)所在的環(huán)境確定this，this是所在環(huán)境的this，this恒定
普通函數(shù)this：根據(jù)調(diào)用我的人確定this，誰調(diào)用this是誰，this經(jīng)常變化

2、bind是function中的方法，類似call和apply，為方法綁定this
call和apply直接調(diào)用方法，bind先綁定方法的this，不執(zhí)行

let p=new Person("小葉子",18);
// document.onclick=p.showName;//點(diǎn)擊的時(shí)候提示“我叫undefined”，this指向[object HTMLDocument]
document.onclick=p.showName.bind(p);//點(diǎn)擊的時(shí)候提示“我叫小葉子”，this指向p對象

【W(wǎng)eb全棧課程三】ES6特性介紹（下）》見：https://segmentfault.com/a/11...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107567.html

相關(guān)文章

  • 【Web全棧課程三】ES6特性介紹（下）

    摘要：示例運(yùn)行函數(shù)彈出彈出函數(shù)接收參數(shù)，返回值。其中，返回一個(gè)對象，是的返回值，代表函數(shù)是否執(zhí)行完成。 ES6特性介紹（下） ES6新的標(biāo)準(zhǔn)，新的語法特征：1、變量/賦值2、函數(shù)3、數(shù)組/json4、字符串5、面向?qū)ο?、Promise7、generator8、ES7:async/await 《【W(wǎng)eb全棧課程二】ES6特性介紹（上）》見：https://segmentfault.com/a...

    wangshijun 評論0 收藏0

  • 前端每周清單第 45 期: Safari 支持 Service Worker, Parcel 完整教

    摘要：的另一個(gè)核心特性，蘋果表示也正在開發(fā)中，按開發(fā)進(jìn)度可能幾個(gè)月后就能與我們見面。是基于的本地化數(shù)據(jù)庫，支持以及瀏覽器環(huán)境。 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID: frontshow），及時(shí)獲取前端每周清單。 本期是 2017 年的最后一...

    趙春朋 評論0 收藏0

  • 全棧最后一公里 - Node.js 項(xiàng)目的線上服務(wù)器部署與發(fā)布

    摘要：沒有耐心閱讀的同學(xué)，可以直接前往學(xué)習(xí)全棧最后一公里。我下面會羅列一些，我自己錄制過的一些項(xiàng)目，或者其他的我覺得可以按照這個(gè)路線繼續(xù)深入學(xué)習(xí)的項(xiàng)目資源。 showImg(https://segmentfault.com/img/bVMlke?w=833&h=410); 本文技術(shù)軟文，閱讀需謹(jǐn)慎，長約 7000 字，通讀需 5 分鐘 大家好，我是 Scott，本文通過提供給大家學(xué)習(xí)的方法，...

    Nosee 評論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

    pumpkin9 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<