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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
jQuery表单验证插件解析(推荐)
Jul 21 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
php实现的RSS生成类实例
2015/04/23 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
JS执行删除前的判断代码
2014/02/18 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
python 自动批量打开网页的示例
2019/02/21 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
python基于property()函数定义属性
2020/01/22 Python
详解Django中异步任务之django-celery
2020/11/05 Python
用python计算文件的MD5值
2020/12/23 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
一套.net面试题及答案
2016/11/02 面试题
vue路由实现登录拦截
2021/03/24 Vue.js
护士感人事迹
2014/05/01 职场文书
诚信教育主题班会
2015/08/13 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python