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 相关文章推荐
javascript 当前日期转化为中文的实现代码
May 13 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
JS实现评价的星星功能
Aug 20 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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版(1)
2006/10/09 PHP
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
获取Django项目的全部url方法详解
2017/10/26 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
django 外键model的互相读取方法
2018/12/15 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
python实现简单坦克大战
2020/03/27 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
EJB实例的生命周期
2016/10/28 面试题
小学生国庆演讲稿
2014/09/05 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL