JavaScript 擴展運算符

擴展運算符格式
擴展運算符格式很簡單,就是三個點(...)javascript

擴展運算符做用???
擴展運算符容許一個表達式在指望多個參數(用於函數調用)或多個元素(用於數組字面量)或多個變量(用於解構賦值)的位置擴展。java

下面開始經過四個例子來深入理解擴展運算符數組

  1. 建立一個數組middle
  2. 建立第二個包含middle的數組
  3. 輸出結果
var middle = [3, 4];
var arr = [1, 2, middle, 5, 6];
console.log(arr);
// [1, 2, [3, 4], 5, 6]複製代碼

在上例中,沒有使用擴展運算符。middle做爲數組放入另外一個數組中。app

可是若是想讓輸出結果只有一個數組???函數

這時候就用到擴展運算符,看下面例子,除了使用擴展運算符其餘都與上面例子相同。ui

var middle = [3, 4];
var arr = [1, 2, ...middle, 5, 6];
console.log(arr);
// [1, 2, 3, 4, 5, 6]複製代碼

當建立數組arr和使用在middle數組上使用擴展運算符時,不是將middle數組直接插入到arr中,而是將middle數組擴展,而後將元素插入到arr中。spa

複製數組

slice()是JavaScript數組的方法,做用是複製數組。咱們一樣可使用擴展運算符複製數組。code

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
console.log(arr2);
// ['a', 'b', 'c']複製代碼

arr數組中的元素擴展成爲單獨元素被分配到arr2中。如今能夠隨意改變arr2數組,且都不會對源數組arr產生影響。ip

這是由於,arr數組值被擴展後添加到arr2數組中,咱們設置arr2等於arr的值,而不是其自己。咱們能夠關注沒有擴展運算符時發生事情,就能理解了。字符串

若是建立數組而後設置另外一個數組等於其自己,以下:

var arr = ['a', 'b', 'c'];
var arr2 = arr;
console.log(arr2);
// ['a', 'b', 'c']複製代碼

如今咱們將arr2數組賦值給arr數組,這意味着只要改變arr2arr數組就會發生變化。

arr2.push('d');
console.log(arr2);
// ['a', 'b', 'c', 'd']
console.log(arr);
// ['a', 'b', 'c', 'd']複製代碼

拼接數組

使用擴展運算符能夠代替concat()來拼接數組。

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];

arr1 = arr.concat(arr2);
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']複製代碼

使用擴展運算符

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
arr = [...arr, ...arr2];
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']複製代碼

Math

也可使用math函數連同擴展運算符。如這個例子中,將使用Math.max()

Math.max()將返回一組數最大值。

Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100複製代碼

在沒有擴展運算符,在數組上使用Math.max()最容易方法就是使用.apply()

var arr = [2, 4, 8, 6, 0];
function max(arr) {
  return Math.max.apply(null, arr);
}
console.log(max(arr));
// 8複製代碼

如今看看使用擴展運算符作一樣事情。只須要兩行代碼就能夠作到一樣效果。

var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);
console.log(max);
// 8複製代碼

字符串轉數組

使用擴展運算符將字符串轉換爲數組。

var str = "hello";
var chars = [...str];
console.log(chars); 
// ['h', 'e',' l',' l', 'o']複製代碼

參考

原文連接


歡迎訂閱掘金專欄知乎專欄

相關文章
相關標籤/搜索