資訊專欄INFORMATION COLUMN
摘要：原因中，定義的變量沒有塊級作用域，在第一個中循環(huán)后已經(jīng)是，里面的執(zhí)行的時候彈出的就是。
ES6特性介紹（上）
ECMAScript（簡稱ECMA、ES），ES6也被稱為ECMAScript 2015
JavaScript是ECMAScript的一種，但是目前實現(xiàn)ECMAScript標準的僅JavaScript
ES6新的標準，新的語法特征：
1、變量/賦值
2、函數(shù)
3、數(shù)組/json
4、字符串
5、面向?qū)ο?br>6、Promise
7、generator
8、ES7:async/await
var：可以重復定義、不能限制修改（問題越早發(fā)現(xiàn)代價越小，因此其實嚴謹?shù)恼Z法更利于開發(fā)大項目）、沒有塊級作用域（函數(shù)作用域）
let： 不能重復定義、變量、塊級作用域
const： 不能重復定義、常量、塊級作用域
示例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在第一個function中循環(huán)后已經(jīng)是3，里面的function執(zhí)行的時候彈出的就是3。
此時解決方案有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個參數(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);
【默認參數(shù)】
傳統(tǒng)函數(shù)實現(xià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實現(xià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，展開一個數(shù)組
let arr=[5,14,27,44]; let arr1=[18,...arr,12]; alert(arr1);//顯示18,5,14,27,44,12 //等價于...arr=>5,14,27,443、數(shù)組/json 【數(shù)組常用方法】
1）map，映射，通常用于對一個列表進行操作后返回新的列表，示例：
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 通常用于匯總，返回一個值（reduce有tmp參數(shù)）
let arr=[59,84,27,46,97];
//使用reduce計算總和
let sum=arr.reduce((tmp,item,index)=>{//reduce有tmp參數(shù)
return tmp+item;
});
5）偽數(shù)組使用數(shù)組的方法（類數(shù)組直接使用數(shù)組方法會報錯），使用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)容書寫時可以換行
新增常用方法：startsWith、endsWith
5、面向?qū)ο?/b>1）es5實現(xiàn)一個對象
傳統(tǒng)方式，function實現(xiàn)對象，使用prototype追加方法和繼承
缺點：大項目中每個開發(fā)者的實現(xiàn)不一致，原生沒有對象概念，有性能問題
//傳統(tǒng)方式實現(xiàn)對象，通過函數(shù)表達函數(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指向，需要手動修復
Worker.prototype.showJob=function(){
alert("我的工作是："+this.job);
}
let w=new Worker("小葉子",18,"學生");// 調(diào)用
w.showName();
w.showAge();
w.showJob();
2）es6的class實現(xiàn)一個對象
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,"學生");
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;//點擊的時候提示“我叫undefined”，this指向[object HTMLDocument]
document.onclick=p.showName.bind(p);//點擊的時候提示“我叫小葉子”，this指向p對象
【W(wǎng)eb全棧課程三】ES6特性介紹（下）》見：https://segmentfault.com/a/11...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/107567.html
摘要：示例運行函數(shù)彈出彈出函數(shù)接收參數(shù)，返回值。其中，返回一個對象，是的返回值，代表函數(shù)是否執(zhí)行完成。 ES6特性介紹（下） ES6新的標準，新的語法特征：1、變量/賦值2、函數(shù)3、數(shù)組/json4、字符串5、面向?qū)ο?、Promise7、generator8、ES7:async/await 《【W(wǎng)eb全棧課程二】ES6特性介紹（上）》見：https://segmentfault.com/a...
摘要：的另一個核心特性，蘋果表示也正在開發(fā)中，按開發(fā)進度可能幾個月后就能與我們見面。是基于的本地化數(shù)據(jù)庫，支持以及瀏覽器環(huán)境。 前端每周清單專注前端領域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID: frontshow），及時獲取前端每周清單。 本期是 2017 年的最后一...
摘要：沒有耐心閱讀的同學，可以直接前往學習全棧最后一公里。我下面會羅列一些，我自己錄制過的一些項目，或者其他的我覺得可以按照這個路線繼續(xù)深入學習的項目資源。 showImg(https://segmentfault.com/img/bVMlke?w=833&h=410); 本文技術(shù)軟文，閱讀需謹慎，長約 7000 字，通讀需 5 分鐘 大家好，我是 Scott，本文通過提供給大家學習的方法，...
摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎到困難循序漸進，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
閱讀 3030·2021-11-11 16:55
閱讀 617·2021-09-27 13:36
閱讀 1205·2021-09-22 15:35
閱讀 3045·2019-08-30 12:46
閱讀 3253·2019-08-26 17:02
閱讀 1928·2019-08-26 11:56
閱讀 1373·2019-08-26 11:47
閱讀 488·2019-08-23 17:01
