1. 程式人生 > >Vue提高篇-ES6基礎語法

Vue提高篇-ES6基礎語法

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"