ES6常用實(shí)例

stackvoid 發(fā)布于2019-08-23 11:37 / 3016人閱讀

摘要：屬性名表達(dá)式屬性的簡(jiǎn)潔表示法允許在對(duì)象之中，直接寫變量。函數(shù)返回一個(gè)對(duì)象。另一個(gè)栗子函數(shù)內(nèi)部語(yǔ)句返回的值，會(huì)成為方法回調(diào)函數(shù)的參數(shù)。

屬性名表達(dá)式

var obj = {
  ["student_" + "1_name"]: "jack",
  ["say" + "hello"]() { // 
    return "hi";
  }
};
console.log(obj.student_1_name);//jack
console.log(obj.sayhello());//hi

屬性的簡(jiǎn)潔表示法

var b = {foo} // b = {foo:foo}
//ES6 允許在對(duì)象之中，直接寫變量。這時(shí)，屬性名為變量名, 屬性值為變量的值
function getPoint() {
  const x = 1;
  const y = 10;
  return {x, y};
}
getPoint();// {x:1, y:10}

解構(gòu)賦值

交換變量

var x=1,y=2;
[x,y]=[y,x];
console.log(x);//2

提取JSON數(shù)據(jù)，比如從后臺(tái)拿回來(lái)的返回值

var {res,code} = {res:
                    {
                        data: [1,2,4],
                        total: 3
                    },code:200};
console.log(res.total);//3

函數(shù)無(wú)序傳參

function name({ x, y, z }) {
  console.log(z);
}
name({ z: 6, y: 2, x: 4 });//6

函數(shù)傳參可以設(shè)置默認(rèn)值

function name({ x = 1, y, z }) {
    console.log(x);
}
name({ z: 6, y: 2});

輸入模塊的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");
import { func1 , func2 } from "../common.js"

擴(kuò)展運(yùn)算符

取代concat合并數(shù)組

let arr1=[1,2,3],
    arr2 = [4,5],
    all = [...arr1,...arr2];
console.log(all);//[1,2,3,4,5]

與解構(gòu)賦值配合，截取部分?jǐn)?shù)組

var first = [1, 2, 3],
    second = [2],
    [first, second, ...last] = [1, 2, 3, 4, 5];
  console.log(last);//[3,4,5]

字符串轉(zhuǎn)數(shù)組

var arr = [..."hello"];
console.log(arr);//["h", "e", "l", "l", "o"]

字符串?dāng)U展

字符串補(bǔ)全長(zhǎng)度

//補(bǔ)全指定位數(shù)
"1".padStart(10,"0");//"0000000001"

數(shù)組擴(kuò)展

使用 Array.from 方法，將類似數(shù)組的對(duì)象轉(zhuǎn)為數(shù)組

   const foo = document.querySelectorAll("div");
   const nodes = Array.from(foo);

async函數(shù)

函數(shù)前面的async關(guān)鍵字，表明該函數(shù)內(nèi)部有異步操作。

async function getStockPriceByName(name) {
  const symbol = await getStockSymbol(name);
  const stockPrice = await getStockPrice(symbol);
  return stockPrice;
}

getStockPriceByName("goog").then(function (result) {
  console.log(result);
});

async函數(shù)返回一個(gè) Promise 對(duì)象。

//另一個(gè)栗子：
function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint("hello world", 50);

async函數(shù)內(nèi)部return語(yǔ)句返回的值，會(huì)成為then方法回調(diào)函數(shù)的參數(shù)。

//栗子
async function f() {
  return "hello world";
}

f().then(v => console.log(v))
// "hello world"

多個(gè)await命令后面的異步操作

let [foo, bar] = await Promise.all([getFoo(), getBar()]);

class的繼承

class point {
    constructor(x,y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return "("+ this.x + "," + this.y + ")";
    }
}
class circlePoint extends point {
    constructor(x,y,color) {
      super(x, y);
      this.color = color;
    }
    toString() {
      return this.color + "" + super.toString();
    }
}
console.log(new circlePoint(1,2,"red").toString()); //red(1,2)

Module 的語(yǔ)法

export與export default的區(qū)別
1、在一個(gè)文件或模塊中，export、import可以有多個(gè)，export default僅有一個(gè)
2、通過(guò)export方式導(dǎo)出，在導(dǎo)入時(shí)要加{ }，export default則不需要