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 相关文章推荐
LazyLoad 延迟加载(按需加载)
May 31 Javascript
JQuery 弹出框定位实现方法
Dec 02 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
Javascript实现基本运算器
Jul 15 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
php 前一天或后一天的日期
2008/06/28 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
xtree.js 代码
2007/03/13 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
javascript中floor使用方法总结
2019/02/02 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python 连连看连接算法
2008/11/22 Python
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Python高级property属性用法实例分析
2019/11/19 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
Python yield的用法实例分析
2020/03/06 Python
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
如何写你的创业计划书
2014/01/07 职场文书
小区停车场管理制度
2014/01/27 职场文书
网上快餐厅创业计划书
2014/02/01 职场文书
草船借箭教学反思
2014/02/03 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript