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 constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
js观察者模式的弹幕案例
Nov 23 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
php从给定url获取文件扩展名的方法
2015/03/14 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
详细讲解JS节点知识
2010/01/31 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
JS重要知识点小结
2011/11/06 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
python动态性强类型用法实例
2015/05/09 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
Python API len函数操作过程解析
2020/03/05 Python
Python中实现输入一个整数的案例
2020/05/03 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
幼师专业求职推荐信
2013/11/08 职场文书
企业军训感想
2014/02/07 职场文书
工作鉴定评语
2014/05/04 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
MySQL分区表实现按月份归类
2021/11/01 MySQL
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android