Vue提高篇-ES6基礎語法
阿新 • • 發佈:2018-12-12
1.變數定義:const-常量定義;let-變數定義
2.箭頭函式:let fn=(a,b)=>{alert(a+b)}
(a)箭頭函式可以替換函式表示式,不可替換函式宣告;
(b)箭頭函式中不存在 this 物件,其使用時一般this都指向外層的this物件;
(c)箭頭函式沒有argument偽陣列的引數集合;
3.模板字串:字串或表示式的拼接。
let a = 1; let b = 2; let strAll=`${a}+${b}=${a+b}`; //``-數字1左邊的鍵;${}-盛放變數或表示式 console.log(strAll) // "1+2=3"
4.解構:物件&陣列的簡易寫法
//物件的解構
let obj={
name:"yin",
age:10
};
let { name="admin",age }=obj; //name變數給出一個預設值,物件根據屬性名一一對應,這是一個無序的對應關係。
console.log(name); // "yin"
console.log(age); // 10
//陣列的解構
let arr=[1,2,3];
let [a,b,c]=arr; //陣列以序列號一一對應,這是一個有序的對應關係。
console.log(b); // 2
5.函式預設引數賦值
function add(x = 20, y = 30) {
return x + y;
}
console.log(add()); // 50
console.log(add(1,2)); // 3
6.展開運算子:三個點 ...
//陣列 let arr1=[1,2]; let arr2=[...arr1,3,4]; console.log(arr2); //[1,2,3,4] //物件 let obj1={name:"Yin"}; let obj2={...obj1,age:20}; console.log(obj2); //{name:"Yin",age:20} //函式裡使用 let fn=(a,b,...other)=>{ return other } console.log(fn(1,2,3,4,5,6)); //[3,4,5,6]
7.匯入匯出:import export
//匯入匯出基本使用
//child.js檔案
let obj={
name:"Yin",
age:20
};
export {obj00:obj};
//main.js檔案
import { obj00 } from './child';
console.log(obj00); //{name:"Yin",age:20}
//匯出預設物件
//child.js檔案
export default "stringDemo";
//main.js檔案
import str from './child';
console.log(str); // "stringDemo"