快捷導(dǎo)航

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

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

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

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

1- 數(shù)組去重

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

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

2- 交換兩個(gè)變量的值

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

3- 獲取字符串中的某個(gè)字符

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('')

展開(kāi)寫法：

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

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

過(guò)濾：

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

計(jì)算：

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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

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

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

您可能感興趣的文章:

相關(guān)文章

微信小程序云開(kāi)發(fā)如何使用云函數(shù)生成二維碼
這篇文章主要為大家詳細(xì)介紹了微信小程序云開(kāi)發(fā)如何使用云函數(shù)生成二維碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-05-05
微信小程序自定義navigationBar頂部導(dǎo)航欄適配所有機(jī)型（附完整案例）
這篇文章主要介紹了微信小程序自定義navigationBar頂部導(dǎo)航欄適配所有機(jī)型（附完整案例），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
JavaScript navigator.userAgent獲取瀏覽器信息案例講解
這篇文章主要介紹了JavaScript navigator.userAgent獲取瀏覽器信息案例講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-08-08
JavaScript控制圖片360度旋轉(zhuǎn)代碼
JavaScript控制一張圖片旋轉(zhuǎn)，每次旋轉(zhuǎn)90度，可旋轉(zhuǎn)一周360度，以前沒(méi)見(jiàn)到過(guò)，也不知道有沒(méi)有用，奉獻(xiàn)給大家，希望喜歡
2011-12-12
微信小程序彈窗自定義實(shí)例代碼
這篇文章主要介紹了微信小程序彈窗自定義實(shí)例代碼的相關(guān)資料,有時(shí)候做開(kāi)發(fā)項(xiàng)目的時(shí)候需要根據(jù)客戶需求更改原系統(tǒng)的組件，這里就對(duì)小程序中彈窗進(jìn)行更改，需要的朋友可以參考下
2017-03-03
js的2種繼承方式詳解
這篇文章主要介紹了javascript的2種繼承方式,分析對(duì)象冒充和原型鏈方式的不同,需要的朋友可以參考下
2014-03-03
JavaScript事件監(jiān)聽(tīng)之鍵盤事件詳細(xì)介紹
在實(shí)際應(yīng)用中我們常常會(huì)遇到監(jiān)聽(tīng)按鍵輸入和鼠標(biāo)點(diǎn)擊事件,下面這篇文章主要給大家介紹了關(guān)于JavaScript事件監(jiān)聽(tīng)之鍵盤事件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-06-06
淺談JS的基礎(chǔ)類型與引用類型
下面小編就為大家?guī)?lái)一篇淺談JS的基礎(chǔ)類型與引用類型。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-09-09
來(lái)自chinaz的ajax獲取評(píng)論代碼
chinaz利用了ajax實(shí)現(xiàn)評(píng)論的讀取操作，下面我們參考chinaz的代碼
2008-05-05
淺析JavaScript事件和方法
本文通過(guò)示例向大家簡(jiǎn)單分析了javascript的事件和方法，文章簡(jiǎn)潔而不簡(jiǎn)單，是篇非常不錯(cuò)的基礎(chǔ)文章，這里推薦給大家。
2015-02-02