ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】


Posted in Javascript onDecember 21, 2019

本文实例讲述了ES6常用小技巧。分享给大家供大家参考,具体如下:

1- 数组去重

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

这个时候arr2就是去重后的数组~

2- 交换两个变量的值

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

3- 获取字符串中的某个字符

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

4- 使用箭头函数代替回调函数

ES5的写法

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

ES6 箭头函数写法

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

5- 合并数组

var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

6- 字符串反转

let str = "12345678900987654321";

原始写法:

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

展开写法:

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

7- 过滤需要的数值 和 获得计算后的数值

过滤:

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

计算:

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

8-数组降维 使用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.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
重载toString实现JS HashMap分析
Mar 13 Javascript
javascript表单事件处理方法详解
May 15 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 Javascript
Element中Slider滑块的具体使用
Jul 29 Javascript
js实现搜索提示框效果
Sep 05 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 #Javascript
angularjs模态框的使用代码实例
Dec 20 #Javascript
推荐几个不错的console调试技巧实现
Dec 20 #Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
Dec 20 #Javascript
node使用request请求的方法
Dec 20 #Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 #Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 #Javascript
You might like
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
php下获取http状态的实现代码
2014/05/09 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
Promise扫盲贴
2019/06/24 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
详解django自定义中间件处理
2018/11/21 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
Django-imagekit的使用详解
2020/07/06 Python
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
财务主管自我鉴定
2014/01/17 职场文书
2014年班主任工作总结
2014/11/08 职场文书
运动会200米广播稿
2015/08/19 职场文书
人事任命书范本
2015/09/21 职场文书
小学科学课教学反思
2016/02/23 职场文书
辞职信怎么写?
2019/05/21 职场文书
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
Golang ort 中的sortInts 方法
2022/04/24 Golang