收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JavaScript技巧 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

ES6解構賦值實例詳解

本文實例講述了ES6解構賦值。分享給大家供大家參考,具體如下:

基本用法

let [x, y, ...z] = ['a']
//"a", undefined, []

1.等號右邊如果不是數組,將會報錯(不是可遍歷結構)
2.解構賦值 var, let, const命令聲明均適用
3.set結構也可解構賦值(具有Iterator接口,可采用數組形式結構賦值)

set解構:任何類型的單個值的集合

let [x, y, z] = new Set(["a", "b", "c"])
x //"a"

默認值

1.數組成員的值不嚴格等于undefined,默認值不生效(null的話相應值依然為null)

[x=1, y=2, z=3, o=4] = ['a', , undefined, null]
//"a", 2, 3, null

2.如果默認值是表達式,表達式惰性求值,只有在用到的時候才會去執行

3.默認值可以引用結構賦值的其他變量,但該變量必須已聲明

對象結構賦值

1.數組按次序排列,對象變量必須與屬性同名

var {bar, foo, baz: loc} = {foo: 'aaa', baz: 'bbb'}
bar //undefined
foo //"aaa"
loc //"bbb"
baz //ReferenceError: baz is not defined

2.變量以前聲明過,使用let賦值會報錯

3.可用于嵌套結構的對象

var node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
}
var {loc:{start:{line}}} = node
line //1
loc //ReferenceError: loc is not defined
start //ReferenceError: start is not defined

line是變量,loc,start都是模式

4.對象結構可以指定默認值

(生效條件是對象屬性值嚴格等于undefined,null不會生效,解構失敗值為undefined)

5.解構模式是嵌套對象,且子對象父屬性不存在,報錯

6.已聲明的變量解構賦值

var x;
{x}={x:1} //SyntaxError: Unexpected token =
({x}={x:1}) //正確

js會將{x}理解成代碼塊,不將大括號寫在行首即可

7.可以將現有對象的方法賦值到某個變量

let { sin, cos, log } = Math(Math對象的名為sin的方法直接賦值給sin變量)

字符串解構賦值

const [a,b] = 'hello' a//h
let {length:len} = 'hello' len//5(字符串本身包含length屬性)

數值&布爾值

解構賦值規則:

① 只要等號右邊不是對象先將其轉化為對象,
② undefined和null無法轉換為對象,報錯

let a = true
{b} = {a}
//Object {a: true}

函數參數解構

[[1,2],[3,4]].map((a,b)=>a+b) //[3,7]
function({x=0,y=0}={}){
  return [x,y]
}

undefined會觸發函數參數默認值

圓括號問題

1.變量聲明語句中,模式不能帶有圓括號 let {x:(c)} = {}
2.函數參數中,模式不能帶有圓括號(函數參數也屬于變量聲明)
3.整個模式或嵌套模式中的一層,不可放入圓括號

賦值語句的非模式部分可使用

用途

1.[x, y] = [y, x]
2.函數返回的多個值分別賦值
3.函數參數與變量名對應
4.提取json數據(ajax請求返回數據處理中可用到)

({
  needServicePwd: this.needServicePwd,
  needImgCode: this.needImgCode,
  needSmsCode: this.needSmsCode
} = data)

5.函數參數的默認值,避免在函數內寫var foo = config.foo || ”

6.遍歷Map結構

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
  console.log(key + " is " + value);
}

7.引用模塊的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

更多相關內容可查看本站專題:《ECMAScript6(ES6)入門教程》、《JavaScript數組操作技巧總結》、《JavaScript字符與字符串操作技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript錯誤與調試技巧總結》及《javascript面向對象入門教程》

希望本文所述對大家基于ECMAScript的程序設計有所幫助。

React Native中導航組件react-navigation跨tab路由處理詳解
前言大家應該都有所體會,我們在一般應用都有跨tab跳轉的需求,這就需要特別處理下路由,所以下面是使用react-navigation作為路由組件的一種方式.具體

詳解RequireJs官方使用教程
§1.使用§1.1加載JavaScript文件RequireJS的目標是鼓勵代碼的模塊化,它使用了不同于傳統script標簽的腳本加載步驟。可以用它來加速、優化代碼,但其主要

CheckBox多選取值及判斷CheckBox選中是否為空的實例
實例如下:varchk_value=[];//定義一個數組//name是CheckBox的name屬性定義的名稱$('input[name="time"]:checked').each(function(){chk_value.push($(this).val());});if(chk_value.length1){a

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
36选7走势图大全 海南飞鱼历史开奖 河北11选五任选结果 中国中铁股票行情 打彩票的技巧 11选5每期必赚20元 股票配资公司·选杨方配资信任 广西快乐十分开奖结果查询 新疆11选5遗漏一定牛 四维图新股票行情与走势 广西快乐十分攻略 正规合法的股票配资平台 东软集团股吧 北京快3形态走势图一定牛 五分彩定位胆公式计算 河北11选5任五遗漏查询 asg游戏豆理财平台