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插件开发全解析
Oct 10 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
js调用webservice构造SOAP进行身份验证
Apr 27 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
vue实现列表垂直无缝滚动
Apr 08 Vue.js
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版本实现代码
2012/09/15 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
jQuery的学习步骤
2011/02/23 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
Python中文编码知识点
2019/02/18 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
python获取Linux发行版名称
2019/08/30 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
销售副总经理岗位职责
2013/12/11 职场文书
行政管理专业求职信
2014/07/06 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android