箭頭函式 rest引數與擴充套件運算子

2022-04-10 18:57:59 字數 3325 閱讀 6417

一、基本用法

箭頭函式的基本語法是:

var 函式名=(引數1,引數2)=>;

例如一下兩端**進行函式宣告的功能是一樣的:

var f1=(num1,num2)=>

var f2=function

(num1,num2)

f1(1,2);//

3f2(3,4);//

7

箭頭函式也可以與物件混合使用。注意變數的屬性需要用花括號括起來。基本語法如下:

var 變數名=()=>;

var person=

var f1=()=>

function

f2(person)

f1(person);

//f11-->alice18

f2(person);//

f2-->alice 18

二、箭頭函式的作用

箭頭函式的作用就是簡化**函式。

var arr=[1,2,3];

arr.map(

function

(x))

arr.map(x=>);//

1,4,9

三、rest引數

雖然叫做reset引數,但實際上寫法是...變數名。作用是獲取函式的多餘引數。比如下面這段**,要加的數值全都用...values代替了。而values的數量可以是任意數量,values是乙個陣列。

function

add(...values)

console.log(sum);

}add(1,2,3);//

6

注意,reset引數只能作為最後乙個引數傳入方法中,也就是說reset引數後面不能再有其他的引數了。否則會報錯。

這裡還有乙個要注意的地方,就是for of 與 for in的區別。

for in 主要是操作物件的。

四、箭頭函式與rest引數的混合使用

var object1=(head,...tail)=>

object1(1,"one","two","three");//

[1, array(3)]

五、擴充套件運算子

1、物件的擴充套件運算子

物件中的擴充套件運算子 用於 取出引數物件中的所有可遍歷屬性,拷貝到當前物件之中。

let bar = 

let baz =

//等同於

let bar =

let baz = object.assign({}, bar)

如果有同名屬性,會被覆蓋

let bar = 

let obj =

let baz =

console.log("baz-->>", baz) //

console.log("bar-->>", bar) //

擴充套件運算子對於物件例項的拷貝是淺拷貝。js中有兩種資料型別:基礎資料型別和引用資料型別。

基礎資料型別是按照值來進行訪問的,常見的基礎資料型別有number、sting、boolean、null和undefined,這類變數拷貝的時候會完整的複製乙份。

引用資料型別,如array,在拷貝的時候拷貝的是物件的引用,當原物件發生變化的時候,拷貝物件也跟著變化。

let obj1=

let obj2 =

console.log('obj1-->>', obj1) //

console.log('obj2-->>', obj2) //

obj2['b'] = 3

console.log("obj2-->>", obj2) //

這個例子,擴充套件運算子拷貝的物件是基礎資料型別,因此對obj2的修改並不會影響到obj1。但如果改成這樣:

let obj1 = };

let obj2 =;

obj2.c.nickname = 'd-edited';

console.log(obj1); //}

console.log(obj2); //

}

由於拷貝的是物件的引用,當原物件發生變化的時候,拷貝物件也跟著變化。 obj1中的物件c是乙個引用資料型別,拷貝的時候,拷貝的是 物件的引用。

2、陣列的擴充套件運算子

(1)將陣列轉化為引數序列:

function

add(x, y)

const numbers = [4, 38];

add(...numbers)

//42

(2)由於淺複製的原因,直接複製陣列是難以實現的,因為會影響拷貝物件,比如:

var arr1 = [1,2]

var arr2 =arr1

console.log("arr2-->>", arr2) //

[1, 2]

arr2[0] = '改變第一項'console.log("arr1-->>", arr1) //

['改變第一項', 2]

但是用擴充套件運算子就能是實現:

var arr1 = [1, 2]

var arr2 = [...arr1]

因為 擴充套件運算子用於 取出引數物件中的所有可遍歷屬性,拷貝到當前物件之中。 由於該陣列裡面的所有物件都是基礎資料型別,因此不存在淺拷貝的現象。

但如果這樣,淺複製了乙個引用資料型別,並對引用資料型別進行操作,就會影響原來的陣列了。

var arr1 = [1, [3,4]]

var arr2 =[...arr1]

arr2[1] [0]= '第二項改變'console.log("arr1-->>", arr1, arr1[1]) //

[1, ['第二項改變',4]]

(3)擴充套件運算子與解構賦值結合起來,可以生成陣列

let [first, ...rest] = [1,2,3,4,5]

console.log("first-->>", first, typeof first) //

1 number

console.log("rest-->>", rest) //

[2,3,4,5] array

注意,rest引數只能放在最後一位。否則報錯。

(4)字串轉陣列

[...'hello']

//[ "h", "e", "l", "l", "o" ]

箭頭函式和rest引數

箭頭函式 es6 允許使用 箭頭 定義函式。var f v v 等同於var f function v es6 引入 rest 引數 形式為 變數名 用於獲取函式的多餘引數,這樣就不需要使用 arguments 物件了。rest 引數搭配的變數是乙個陣列,該變數將多餘的引數放入陣列中。functio...

rest 引數與擴充套件運算子

rest 引數與擴充套件運算子 1.rest 引數 es6 引入 rest 引數 形式為.變數名 用於獲取函式的多餘引數,這樣就不需要使用arguments物件了。rest 引數搭配的變數是乙個陣列,該變數將多餘的引數放入陣列中。function add values return sum add ...

函式的擴充套件 rest引數

es6 引入 rest 引數 形式為.變數名 用於獲取函式的多餘引數,這樣就不需要使用arguments物件了。rest 引數搭配的變數是乙個陣列,該變數將多餘的引數放入陣列中。function add values return sum add 2,5,3 10上面 的add函式是乙個求和函式,利...