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扩展的JavaScript常用函数库
Nov 30 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
js定时器实例分享
Dec 20 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
vue设置动态请求地址的例子
Nov 01 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
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
php报错502badgateway解决方法
2019/10/11 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
银行开业庆典方案
2014/02/06 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
2015年端午节活动总结
2015/02/11 职场文书
老龙头导游词
2015/02/11 职场文书
排球赛新闻稿
2015/07/17 职场文书
Win11开始菜单添加休眠选项
2022/04/19 数码科技