溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了ES6學習筆記之字符串、數組、對象、函數新增知識點。分享給大家供大家參考，具體如下：
反引號`` 內用于輸入格式化的字符串文本，在``內可以將表達式用${}包含起來
let str=`
<!DOCTYPE html>
<html lang="en">
<body>
<div>
<p class="pClass">格式化字符串</p>
</div>
</body>
</html>
`;
console.log(str);
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個空元素
通過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();
在用變量作為對象的元素時，會將變量名作為鍵值，將變量值作為值
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: "男" }
將整體字符串、對象等拆成單個元素
let str="這是一個字符串"; let arr=[...str]; console.log(arr);
輸出為：
當不確定傳入的參數個數時，可以采用"...參數"的方式，然后遍歷操作每個參數
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,2,3));
箭頭函數可以將函數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
}))
在使用接口調用時，有時需要根據調用返回是否成功分別去調用不同的函數，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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
