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 &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
vue如何搭建多页面多系统应用
Jun 17 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
在Python中使用列表生成式的教程
2015/04/27 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
PyTorch预训练的实现
2019/09/18 Python
python实现小世界网络生成
2019/11/21 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
python pymysql库的常用操作
2020/10/16 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
卫生安全检查制度
2014/02/04 职场文书
经典演讲稿汇总
2014/05/19 职场文书
保安公司服务承诺书
2014/05/28 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
小学教师见习总结
2015/06/23 职场文书
简爱读书笔记
2015/06/26 职场文书
2022漫威和DC电影上映作品
2022/04/05 欧美动漫