ES6學習筆記之字串、陣列、物件、函式新增知識點例項分析
本文例項講述了ES6學習筆記之字串、陣列、物件、函式新增知識點。分享給大家供大家參考，具體如下：
1、模板字串
反引號`` 內用於輸入格式化的字串文字，在``內可以將表示式用${}包含起來
let str=`
<!DOCTYPE html>
<html lang="en">
<body>
<div>
<p class="pClass">格式化字串</p>
</div>
</body>
</html>
`;
console.log(str);
2、轉化為陣列
Array.form將偽陣列、集合轉化為陣列
let allLi=document.querySelectorAll('li');
console.log(Array.isArray(allLi));//輸出false,allLi不是個陣列
let arr=Array.from(allLi);
console.log(Array.isArray(arr));//輸出true，arr被轉化為陣列
Array.of將元素構建為陣列
let arrayOf=Array.of('str',2,{}); //建立由字串、數字、物件構成的陣列
let arr=Array.of(7); //陣列包含一個元素7
let arr=Array(7); //陣列包含7個空元素
3、類的封裝
通過class來包裝類
class Person{
constructor(name,age){ //Person類的建構函式
this.name=name;
this.age=age;
}
print(){ //類函式輸出
console.log("My name is "+this.name+",I'm "+this.age+" years.");
}
}
let p=new Person('tony',15);
p.print();
4、物件的使用
在用變數作為物件的元素時，會將變數名作為鍵值，將變數值作為值
let name='tony';
let age=15;
let person={
name,age
}
console.log(person);
輸出結果為：
Object { name: "tony",age: 15 }
Object.assign()方法實現物件合併，引數為：合併目標，合併源1，合併源2...
let obj1={'name':'tony'};
let obj2={'age':15};
let obj3={'sex':'男'};
let obj={};
Object.assign(obj,obj1,obj2,obj3); //將後面的物件併到第一個物件
console.log(obj);
輸出為：
Object { name: "tony",age: 15,sex: "男" }
5、延展操作符...
將整體字串、物件等拆成單個元素
let str="這是一個字串"; let arr=[...str]; console.log(arr);
輸出為：
6、函式Rest引數
當不確定傳入的引數個數時，可以採用"...引數"的方式，然後遍歷操作每個引數
function sum(name,...num) {
console.log(name);
let res=0;
for (let value of num){ //將後面未知個數的引數當作陣列num遍歷
res+=value;
}
return res;
}
console.log(sum('tony',10,3));
7、箭頭函式
箭頭函式可以將函式function (引數) {表示式}簡化為：(引數...)=>{表示式...}，無需輸入function，甚至省略(),{},return。
1、當只有一個引數時，可以寫為引數 => 表示式，例如使用map函式遍歷一個數組，使每個元素乘2：
var arr = [1,4,9,16]; const map1 = arr.map(x => x * 2); //利用map()遍歷陣列，傳入一個引數當作x，並返回x*2
map中的函式以x為引數遍歷每個arr中的元素，*2之後自動返回，形成map1陣列
2、當有多個引數時，需要給引數加括號：() =>表示式，例如遍歷陣列輸出索引與值：
let arr=['data0','data1','data2']; arr.forEach((value,index)=> //通過forEach遍歷陣列，傳入兩個引數value與index console.log(index+':'+value) );
輸出如下：
3、當有多行表示式時，要用{}將函式包含成一塊：() =>{}，並且使用塊語句時，函式不會自動返回值，需要使用return將值返回。
4、JavaScript的{}也可以表示一個物件，當使用箭頭函式返回物件時，為了與函式體區別需要將物件用()包含起來：() =>({})，否則會報錯，例如在react中使用setState方法，需要返回一個物件:
this.setState((prevState) =>({
flag: !prevState.flag
}))
8、Promise函式
在使用介面呼叫時，有時需要根據呼叫返回是否成功分別去呼叫不同的函式，ES6提供了Promise函式來解決這個問題。在呼叫成功時，執行.then方法，失敗時執行.catch方法來分別處理不同情況，返回不同的資料。
例如定義一個檢查登陸的Promise方法，當傳入引數為true時登陸成功，回撥函式為then，false失敗，呼叫catch：
//定義promise函式
let checkLog=function (flag) {
return new Promise(function(resolve,reject){
if(flag){ //如果判定條件為真，執行resolve函式
resolve({ //其括號內的引數作為結果返回
status:1,info:"登陸成功"
})
}else{ //判定為假執行reject函式
reject({
status:0,info:"登陸失敗"
}
)
}
})
};
//使用promise函式
checkLog(false).then(res=>{ //根據promise返回的不同值分別執行then或catch
console.log(`成功資訊：${res.info}`);
}).catch(err=>{
console.log(`錯誤資訊：${err.info}`);
})
當傳入true：
當傳入false：
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
更多關於JavaScript相關內容可檢視本站專題：《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程式設計有所幫助。