国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

javascript解構(gòu)賦值

canopus4u / 547人閱讀

摘要：此文章為意譯并非直譯，可參考具體原文解構(gòu)賦值具體干什么解構(gòu)賦值是中的一個表達(dá)式語法糖，幫助開發(fā)者將數(shù)組，對象屬性解構(gòu)出來并且直接賦值到具體變量上面。

此文章為意譯并非直譯，可參考具體原文

解構(gòu)賦值具體干什么？

解構(gòu)賦值是javascript中的一個表達(dá)式語法糖，幫助開發(fā)者將數(shù)組，對象屬性解構(gòu)出來并且直接賦值到具體變量上面。

直接來段代碼感受下
let a,b,rest;
[a,b] = [10,20];
console.log(a);// 10,
console.log(b);// 20;
[a,b,...rest] = [10,20,30,40,50,60];
console.log(a); // 10
console.log(b); // 20
console.log(rest);// [30,40,50,60]
簡單實(shí)踐，將a,b的值進(jìn)行交互
let a=10,b=20;
[a,b]=[b,a];
console.log(a);// 20
console.log(b);// 10;
解構(gòu)賦值具體使用方式
數(shù)組對象進(jìn)行解構(gòu)賦值
// 1. 從已有對數(shù)組中解構(gòu)賦值
let foo = ["one","two","three"];
let [a,b] = foo;
console.log(a);
console.log(b);

// 2. 從字面量中解構(gòu)賦值
let [a,b] = [1,2];

// 3. 在解構(gòu)賦值對時(shí)候設(shè)置默認(rèn)值
let [a=5, b=10] = [1];
console.log(a); // 輸出：1
console.log(b); // 輸出：10

// 4. 解構(gòu)從函數(shù)返回對數(shù)組
function getArr(){
    return [1,2]
}
let [a,b] = getArr();

// 5. 解構(gòu)對時(shí)候，忽略特殊位置對值
let [a,,b] = [1,2,3];
// 全部忽略
[,,] = [1,2,3];

// 6. 解構(gòu)對時(shí)候?qū)?shù)組的其他值賦值給變量
let [a,...b] = [1,2,3,4,5];
console.log(a);// 1
console.log(b);// [2,3,4,5]
對象數(shù)據(jù)進(jìn)行解構(gòu)賦值
// 1. 解構(gòu)對象
let obj = {name:"hello",age:18};
let {name,age} = obj;
console.log(name);// hello;
console.log(age);// 18
// 2. 解構(gòu)字面量對象
let name,age;
({name,age} = {name:"hello",age:18});// 結(jié)果和上面一樣,注意，這里為什么需要用`()`包裹起來呢?
// 獨(dú)立的寫法
let {name,age} = {name:"hello",age:18};

// 3. 解構(gòu)的時(shí)候，設(shè)置別名
let obj = {name:"hello",age:18};
let {name:nameA,age:ageA} = obj;
console.log(nameA);// hello
console.log(ageA);// 18
// 4. 設(shè)置默認(rèn)值，這個和數(shù)組解構(gòu)類似
let obj = {name:"hello",age:18};
let {name="tom",age=20,city="sh"}=obj;
console.log(city);// sh
// 5. 設(shè)置默認(rèn)值，同時(shí)又設(shè)置別名
let obj = {n:"hello",age:18};
let {n:name="tom",age:a=19,city:c="sh"} = obj;
console.log(name); // hello
console.log(a);    // 18
console.log(c);    // sh
// 6. 設(shè)置函數(shù)參數(shù)的默認(rèn)值
function drawES2015Chart({size = "big", cords = {x: 0, y: 0}, radius = 25} = {}) {
  console.log(size, cords, radius);
  // do some chart drawing
}
drawES2015Chart({
  cords: {x: 18, y: 30},
  radius: 30
});
嵌套對象解構(gòu)和數(shù)組解構(gòu)
let data = {
  title:"objetAdnArray",
  list:[
    {
      id:1,
      des:"第一個對象",
      proList:[]
    },
    {
      id:2,
      des:"第二個對象",
      proList: []
    }
  ]
}

let {
  title,
  list:[{id,des}]
} = data;

console.log(title); // objetAdnArray
console.log(id);    // 1
console.log(des);   // 第一個對象
for of 循環(huán)中使用解構(gòu)
var people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith"
    },
    age: 35
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones"
    },
    age: 25
  }
];
for (let {name: n, family: {father: f}} of people) {
  console.log("Name: " + n + ", Father: " + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"
解析對象的字段傳遞給
function userId({id}) {
  return id;
}

function whois({displayName, fullName: {firstName: name}}) {
  console.log(displayName + " is " + name);
}

var user = { 
  id: 42, 
  displayName: "jdoe",
  fullName: { 
      firstName: "John",
      lastName: "Doe"
  }
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"
將變量最為解構(gòu)的key
let key = "z";
let {[key]:foo} = {z:"this is z"};
console.log(foo); // this is z
// 注意，這個用戶很類似對象字面量賦值的用法
let obj = {
    [key]:"hello"
}

obj.z // hello

總結(jié)：es6提供了許多語法糖，在客戶端使用的時(shí)候需要通過進(jìn)行編譯才能運(yùn)行，而在服務(wù)器端nodejs已經(jīng)很好的支持了

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/92685.html

相關(guān)文章

  • JavaScript中的解構(gòu)賦值

    摘要：是這樣描述解構(gòu)賦值的解構(gòu)賦值語法是一種表達(dá)式用來將數(shù)組中的值或?qū)ο笾械膶傩匀〕鰜韰^(qū)分為不同變量。現(xiàn)在讓我們將坐標(biāo)點(diǎn)放進(jìn)一個數(shù)組中現(xiàn)在要對這些點(diǎn)進(jìn)行處理，傳統(tǒng)可以想到的方法是這樣的借助解構(gòu)賦值，能變得這樣簡潔使用箭頭函數(shù)更簡潔 JavaScript是一種很有趣的語言，我個人很喜歡它，雖然仍還有些人不大喜歡它。在ECMAScript6（ES6）中，有許多有用的特性來使JavaScript開...

    Panda 評論0 收藏0

  • ECMASCRIPT 6 實(shí)戰(zhàn)之 解構(gòu)賦值

    摘要：相信解構(gòu)賦值自以下簡稱面世以來被大家快速地熟悉并運(yùn)用到實(shí)際開發(fā)中了這是一種能有效減少代碼量，使代碼邏輯更簡單優(yōu)雅的技術(shù)下面我們就再來回顧總結(jié)一下解構(gòu)賦值的種種用法吧基本用法從對象解構(gòu)假設(shè)有一個對象，它的結(jié)構(gòu)為以對稱的形式從從邊的對象中匹配與 相信解構(gòu)賦值(Destructuring)自 ECMASCRIPT 6(以下簡稱 ES 6) 面世以來被大家快速地熟悉并運(yùn)用到實(shí)際開發(fā)中了, 這是...

    yangrd 評論0 收藏0

  • [譯]JavaScript ES6解構(gòu)賦值指南

    摘要：解構(gòu)賦值允許我們將右邊的表達(dá)式看起來也像變量聲明一般，然后在左邊將值一一提取。數(shù)組的解構(gòu)賦值現(xiàn)在假設(shè)我們有一個變量，其值為。通過，這會看上去更清晰簡潔最后的解構(gòu)賦值給的語法帶來了更多的現(xiàn)代化。 前言 讓我們來仔細(xì)地看看ES6所帶來的更清晰的變量聲明與賦值語法。現(xiàn)今的變量聲明語法十分的直接：左邊是一個變量名，右邊可以是一個數(shù)組：[]的表達(dá)式或一個對象：{}的表達(dá)式，等等。解構(gòu)賦值允許我...

    Jeff 評論0 收藏0

  • ES6學(xué)習(xí)手稿之基本類型擴(kuò)展

    摘要：它是一個通用標(biāo)準(zhǔn)，奠定了的基本語法。年月發(fā)布了的第一個版本，正式名稱就是標(biāo)準(zhǔn)簡稱。結(jié)語的基本擴(kuò)展還有一些沒有在這里詳細(xì)介紹。 前言 ES6標(biāo)準(zhǔn)以及頒布兩年了，但是，好像還沒有完全走進(jìn)我們的日常開發(fā)。這篇文章從ES6的基本類型擴(kuò)展入手，逐步展開對ES6的介紹。 ECMAScript和JavaScript JavaScript是由Netscape創(chuàng)造的，該公司1996年11月將JavaSc...

    tommego 評論0 收藏0

  • JavaScript基礎(chǔ)之ES6對象解構(gòu)賦值

    摘要：具體的分析暫時(shí)不討論解決的方式很簡單，把上面的代碼塊變成一段表達(dá)式就小明總結(jié)解構(gòu)賦值是提供一個十分方便的表達(dá)式。的解構(gòu)賦值小明的對象賦值這里可以被賦予初始值小明對象的屬性不存在能夠賦值給多個變量 對象解構(gòu)賦值 ES6 允許按照一定模式，從數(shù)組和對象中提取值，對變量進(jìn)行賦值，這被稱為解構(gòu)(Destructuring)。 --- 阮一峰《ECMAScript...

    sutaking 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<