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实现的鼠标经过时播放声音
May 18 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
Jul 20 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
js实现登录时记住密码的方法分析
Apr 05 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中的多态性[译]
2011/08/02 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
再探JavaScript作用域
2014/09/24 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
python批量制作雷达图的实现方法
2016/07/26 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
python raise的基本使用
2020/09/10 Python
python里glob模块知识点总结
2021/01/05 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
大学生求职中的自我评价
2013/10/01 职场文书
高中生学习的自我评价
2013/12/14 职场文书
外贸业务员工作职责
2014/01/06 职场文书
仓库文员岗位职责
2014/04/06 职场文书
食品工程专业求职信
2014/06/15 职场文书
龙门石窟导游词
2015/02/02 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
解决redis批量删除key值的问题
2022/03/23 Redis
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript