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 相关文章推荐
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
js this 绑定机制深入详解
Apr 30 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扩展ZF――Validate扩展
2008/01/10 PHP
在PHP中使用curl_init函数的说明
2010/11/02 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
javascript插入样式实现代码
2012/02/22 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
Node 代理访问的实现
2019/09/19 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python中内建函数的简单用法说明
2016/05/05 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
商务英语专业自荐信
2013/10/14 职场文书
职称自我鉴定
2013/10/15 职场文书
团队口号大全
2014/06/06 职场文书
店铺转让协议书
2014/12/02 职场文书
班主任工作实习计划
2015/01/16 职场文书
英文慰问信
2015/02/14 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
外出考察学习心得体会
2016/01/18 职场文书
一篇文章带你复习java知识点
2021/06/28 Java/Android
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL
vue实现列表垂直无缝滚动
2022/04/08 Vue.js