ES6解構和擴充套件運算子

2021-09-19 07:39:03 字數 4134 閱讀 5604

// 解構

// 解構的作用是可以快速取得陣列或物件當中的元素或屬性,而無需使用arr[x]或者obj[key]等傳統方式進行賦值

// 陣列解構賦值:

var arr = ['this is string', 2, 3];

// 傳統方式

// var a=arr[0];

// var b=arr[1];

// var c=arr[2];

console.log('-----------------陣列解構-----------------')

//解構賦值,是不是簡潔很多?

var [a, b, c] = arr

console.log(a);

console.log(b);

console.log(c);

console.log('-----------------巢狀陣列解構-----------------')

// 巢狀陣列解構:

var arr2 = [[1, 2, [3, 4]], 5, 6];

var [[d, e, [f, g]], h, i] = arr2

console.log(d); // 1

console.log(e); // 2

console.log(f); // 3

console.log(g); // 4

console.log(h); // 5

console.log(i); // 6

console.log('-----------------函式傳參解構-----------------')

var arr3 = ["asdasdasd", "asd", 7788];

function fn1([a, b, c])

fn1(arr3)

console.log('-----------------for迴圈解構-----------------')

var arr4 = [[11, 12], [21, 22], [31, 32]];

for (let [a, b] of arr4)

//11 12 21 22 31 32]

console.log('-----------------物件賦值解構-----------------')

var obj =

}var = obj;

console.log(name + ' ' + *** + ' ' + age);

console.log(son);

console.log('-----------------物件傳參解構-----------------')

var obj2 =

};function fn2()

fn2(obj2)

console.log('----------------- 變數名與物件屬性名不一致解構-----------------')

var obj3 = ;

var = obj3 //改變物件屬性名

console.log(nickname + ' ' + howold); //chris 26

console.log('----------------- 巢狀物件解構:-----------------')

var obj4 =

};var } = obj4

console.log(sonname + ' ' + son*** + ' ' + sonage);

obj5 =

var = obj5;

console.log(name + "------" + c);

console.log('----------------- 巢狀物件屬性重名,解構時需要更改變數名:-----------------')

var obj6 =

};//賦值解構

var } = obj6

console.log(myname)

console.log(name)

//傳參解構

function fn3(})

fn3(obj6);

console.log('----------------- 迴圈解構物件:-----------------')

var arr5 = [, , ]

for (let of arr5)

console.log('----------------- 解構的特殊應用場景:-----------------')

//變數互換

var x = 1;

var y = 2

var [x, y] = [y, x]

console.log(x, y) //2 1

//字串解構

var str = 'love';

var [h, i, j, k] = str

console.log(h);//l

console.log(i);//o

console.log(j);//v

console.log(k);//e

console.log('------------------- 擴充套件運算子 ---------------------')

console.log('------------------- 擴充套件運算子用三個點號表示,功能是把陣列或類陣列物件展開成一系列用逗號隔開的值---------------------')

var foo = function (a, b, c)

var arr6 = [1, 2, 3];

//傳統寫法

foo(arr6[0], arr6[1], arr6[2]);

console.log('-------------------使用擴充套件運算子----------')

foo(...arr6)

console.log('-------------陣列深拷貝----------')

var arr7 = [1, 2, 3];

var arr8 = arr7;

var arr9 = [...arr7];

console.log(arr7 === arr8); // true 說明arr7和arr8指向同乙個陣列

console.log(arr7 === arr9); // false 說明arr7和arr9指向不同陣列

console.log('--------------把乙個陣列插入另乙個陣列字面量----------')

var arr10 = [...arr7, 5, 6, 7]

console.log(arr10)

console.log('--------------字串轉陣列----------')

var str2 = "iloveyou";

var arr11 = [...str2];

console.log(arr11) //["i", "l", "o", "v", "e", "y", "o", "u"]

console.log('------------------- rest運算子 ---------------------')

console.log('------------------- rest運算子也是三個點號,不過其功能與擴充套件運算子恰好相反,把逗號隔開的值序列組合成乙個陣列 ---------------------')

console.log('------------------- 主要用於不定引數,所以es6開始可以不再使用arguments物件 ---------------------')

var bar = function (...items)

}bar(1, 2, 3, 4);

console.log('------------------- 分割符 ---------------------')

var bar2 = function (a, b, ...items)

bar2(3, 45, 523, 5);

console.log('------------------- rest運算子配合解構使用:---------------------')

var [g, ...rest] = [1, 2, 3, 4];

console.log(g);//1

console.log(rest);//[2, 3, 4]

ES6解構和擴充套件運算子

解構 解構的作用是可以快速取得陣列或物件當中的元素或屬性,而無需使用arr x 或者obj key 等傳統方式進行賦值 陣列解構賦值 var arr this is string 2,3 傳統方式 var a arr 0 var b arr 1 var c arr 2 console.log 陣列解...

ES6 擴充套件運算子

擴充套件運算子用3個點表示,功能是把陣列或者類陣列物件展開成一系列用逗號隔開的值 1,陣列 let arr red green blue console.log arr red,green,blue拷貝陣列 和object.assign一樣都是淺拷貝 let arr red green blue l...

ES6擴充套件運算子

首先,我們要讀仔細下面這句話,就很容易知道擴充套件運算子的使用了,可以在心裡反覆讀三遍 接下來,我們看下究竟怎麼個情況 宣告乙個方法 var foo function a,b,c console.log a console.log b console.log c 宣告乙個陣列 var arr 1,2...