帶你深入理解解構賦值和箭頭函式

箭頭函式（★★★★★）

es6 的內建物件擴充套件

string 的擴充套件方法

什麼是解構賦值？

– es6中允許從陣列中提取值，按照對應位置，對變數賦值，物件也可以實現解構。

let
[a, b, c]=[
1,2,
3]; console.
log(a)
//1 console.
log(b)
//2 console.
log(c)
//3//如果解構不成功，變數的值為undefined

let person =
;let
= person;
console.
log(name)
;// 'zhangsan' 
console.
log(age)
;// 20
let= person;
// myname myage 屬於別名
console.
log(myname)
;// 'zhangsan' 
console.
log(myage)
;// 20

– 解構賦值就是把資料結構分解，然後給變數進行賦值

– 如果解構不成功，變數跟數值個數不匹配的時候，變數的值為undefined。

– 陣列解構用中括號包裹，多個變數用逗號隔開，物件解構用花括號包裹，多個變數用逗號隔開。

利用解構賦值能夠讓我們方便的去取物件中的屬性跟方法

–es6中新增的定義函式的放視：

(
)=>
//()：代表是函式； =>：必須要的符號，指向哪乙個**塊；{}：函式體
constfn=
()=>
//代表把乙個函式賦值給fn

1.函式體中只有一句**，且**的執行結果就是返回值，可以省略大括號，簡化**：

function
sum(num1, num2)
//es6寫法
const
sum=
(num1, num2)
=> num1 + num2;

2.如果形參只有乙個，可以省略小括號：

function
fn(n)
//es6寫法
const
fn=n => n;

3.箭頭函式不繫結this關鍵字，箭頭函式中的this，指向的是函式定義位置的上下文的this：

const obj =
functionfn(
)}const resfn = fn.
call
(obj)
;resfn()
;

1.箭頭函式中不繫結this,箭頭函式中的this指向是它所定義的位置，可以簡單理解成，定義箭頭函式中的作用域的this指向誰，它就指向誰。

2.箭頭函式的有點在於解決了this執行環境所造成的一些問題，比如：解決了匿名函式this指向的問題（匿名函式的執行環境具有全域性性），包括settimeout和setinterval中使用this所造成的問題。

var age =
100;
var obj =
}obj.
say();
//箭頭函式this指向的是被宣告的作用域裡面，而物件沒有作用域的，所以箭頭函式雖然在物件中被定義，但是this指向的是全域性作用域

剩餘引數語法允許我們將乙個不定數量的引數表示為乙個陣列，不定引數定義方式，這種方式很方便的去生命不知道引數情況下的乙個函式：

function
sum(fir,
...arg)
sum(10,
20,30)

剩餘引數和解構配合使用

let students =
['wangwu'
,'zhangsan'
,'lisi'];
let[s1,
...s2]
= students; 
console.
log(s1)
;// 'wangwu' 
console.
log(s2)
;// ['zhangsan', 'lisi']

擴充套件運算子可以將陣列或者物件轉為用逗號分隔的引數序列

let ary =[1
,2,3
];...arr  //1,2,3
console.
log(
...ary)
;//1 2 3 相當於下面的**
console.
log(1,
2,3)
;

擴充套件運算子可以應用於合併陣列

//方法一
let ary1 =[1
,2,3
];let ary2 =[4
,5,6
];let ary3 =
[...ary1,
...ary2]
;//方法二
ary1.
push
(...ary2)
;

將類陣列或可遍歷物件轉換為真正的陣列

let arry = document.
getelementsbytagname
('div');
arry =
[...arry]
;

建構函式方法：array.from()–將偽陣列或可遍歷物件轉換為真正的陣列：

//定義乙個集合
let arraylike =
;//轉成陣列
let arr2 = array.
from
(arraylike)
;// ['a', 'b', 'c']

用於找出第乙個符合條件的陣列成員，如果沒有找到返回undefined

let ary =[，
]；let tar = ary.
find
((item,index)
=>item.id==2)
;

找陣列裡面符合條件的值，當陣列中元素id等於2的查詢出來，注意，只會匹配第乙個

用於找出第乙個符合條件的陣列成員的位置，如果沒有找到返回-1

let ary =[1
,5,10
,15];
let index = ary.
findindex
((valuue,index)
=>value>9)
;console.
log(index;
)

//得出第乙個符合條件值對應的索引值位置為2

es6新增的建立字串的方式，使用反引號定義

let name =
`laosan`
；

let name =
'老三'
;let sayhello =
`你好，我是 $`
;        console.
log(sayhello)
;

列印出的結果是：你好，我是老三；

let res =
let html =`$
$$`;

相比於普通字串語法，模板字串最大優點在於可以換行，缺少點是是es6語法需要注意相容問題。

const
say=
function()
;let gret =` $
我我我我`
;console.
log(gret)
;

列印結果是：一二三四五，上山打老虎我我我我；

深入理解JavaScript箭頭函式
箭頭函式就是個簡寫形式的函式表示式並且它擁有詞法作用域的this 值即不會新產生自己作用域下的this，arguments super 和new.target 等物件此外，箭頭函式總是匿名的語法基礎語法 param1,param2,paramn param1,param2,paramn e...

js箭頭函式深入理解
let f a let f a let f a return alet f a a f 2 2let f 如果沒括號，花括號內會被視作待執行語句let callback callback callback function ok，普通函式 callback callback syntaxerror ...

箭頭函式與解構賦值
const firts 這就等同於 function first all 為認為最為典型的列子是dva中connect的寫法 connect 如果你將變為乙個引數比如a，再在箭頭函式中列印出a，就可以看到其實a是所有的model如果返回的是乙個物件的話，我們需要用圓括號將其包起來 const se...

帶你深入理解解構賦值和箭頭函式

深入理解JavaScript箭頭函式

js箭頭函式深入理解

箭頭函式與解構賦值

相關推薦