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 相关文章推荐
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 Javascript
vue实现登录功能
Dec 31 Vue.js
jQuery实现购物车全功能
Jan 11 jQuery
正则表达式基础与常用验证表达式
Jun 16 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
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
javascript的事件描述
2006/09/08 Javascript
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
python递归函数绘制分形树的方法
2018/06/22 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
护士思想汇报
2014/01/12 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
质量保证书
2015/01/17 职场文书
个人收入证明范本
2015/06/12 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server