快捷導(dǎo)航

ES6常用小技巧總結(jié)【去重、交換、合并、反轉(zhuǎn)、迭代、計算等】

更新時間：2019年12月21日 12:16:47 作者：halaoda

這篇文章主要介紹了ES6常用小技巧,結(jié)合實例形式總結(jié)分析了ES6常見的數(shù)組去重、交換變量、合并數(shù)組、字符串反轉(zhuǎn)、數(shù)組迭代、數(shù)值計算等相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了ES6常用小技巧。分享給大家供大家參考，具體如下：

1- 數(shù)組去重

var arr = [1,2,3,4,3,4]; 
var arr2 = [...new Set(arr)];

這個時候arr2就是去重后的數(shù)組~

2- 交換兩個變量的值

let [x,y] = [1,2];
[y,x] = [x,y];
console.log(y);

3- 獲取字符串中的某個字符

let arr= "hellomybo";
console.log(arr[3]);

4- 使用箭頭函數(shù)代替回調(diào)函數(shù)

ES5的寫法

let a1 = [1,2,3].map(function (x) {
  return x * x;
});

ES6 箭頭函數(shù)寫法

let a2 = [1,2,3].map(x => x * x);
console.log(a1,a2);

5- 合并數(shù)組

var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];

// ES5的合并數(shù)組
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6的合并數(shù)組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

6- 字符串反轉(zhuǎn)

let str = "12345678900987654321";

原始寫法：

str.split('').reverse().join('')

展開寫法：

[...str].reverse().join('')

7- 過濾需要的數(shù)值和獲得計算后的數(shù)值

過濾：

['a',,'b'].filter(x => true)   // ['a','b']

計算：

let arr = [1,2,3,4].map(x=>x+1);
console.log(arr);

8-數(shù)組降維使用generator迭代器

var arr = [1, [[2, 3], 4], [5, 6]];
var flat = function* (a) {
 var length = a.length;
 for (var i = 0; i < length; i++) {
  var item = a[i];
  if (typeof item !== 'number') {
   yield* flat(item);
  } else {
   yield item;
  }
 }
};
for (var f of flat(arr)) {
 console.log(f);
}

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: