ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • ES6小技巧之代替lodash

    Javascript ES6标准实行后,Lodash或者Ramada中的一些功能我们就不需要了,可以使用ES6的语法来实现 获取Object中指定键值 我们现在可以使用解包的方法快速获取对象中指定键值的值 const obj = { a:1, b:2, c:3, d:4 }; // 获取obj中a与b的值 const {a,b} = obj; // 也可以给他们取别名 const {a:A, b:B} = obj; 这个小技巧非常的方便,也是最基础的使用方法 排除Object中不需要的键值 既然

  • 浅谈让你的代码更简短，更整洁，更易读的ES6小技巧

    写在文章前面 这篇文章翻译自ES6 tips and tricks to make your code cleaner, shorter, and easier to read!. 文章就代码整洁方面对es6进行了总结.如有错误欢迎指出. template literals 模板字符串 模板字符串使字符串的使用变得比以前更简单了,他们以反引号开始(`),并且能过使用${变量}来插入变量.我们来比较一下下面两行代码. var fName = 'Peter', sName = 'Smith', ag

  • 不得不知的ES6小技巧

    如果你还知道其他一些小技巧,欢迎留言~ 很高兴把它们补充进来. 1. 强制要求参数 ES6提供了默认参数值机制,允许你为参数设置默认值,防止在函数被调用时没有传入这些参数. 在下面的例子中,我们写了一个required()函数作为参数a和b的默认值.这意味着如果a或b其中有一个参数没有在调用时传值,会默认required()函数,然后抛出错误. const required = () => {throw new Error('Missing parameter')}; const add = (

  • 详解ES6语法之可迭代协议和迭代器协议

    ECMAScript 2015的几个补充,并不是新的内置或语法,而是协议.这些协议可以被任何遵循某些约定的对象来实现. 有两个协议:可迭代协议和迭代器协议. 可迭代协议 可迭代协议允许 JavaScript 对象去定义或定制它们的迭代行为, 例如(定义)在一个 for..of 结构中什么值可以被循环(得到).一些内置类型都是内置的可迭代对象并且有默认的迭代行为, 比如 Array or Map, 另一些类型则不是 (比如Object) . Iterator 接口的目的,就是为所有数据结构,提供了

  • ES6 迭代器与可迭代对象的实现

    ES6 新的数组方法.集合.for-of 循环.展开运算符(...)甚至异步编程都依赖于迭代器(Iterator )实现.本文会详解 ES6 的迭代器与生成器,并进一步挖掘可迭代对象的内部原理与使用方法 一.迭代器的原理 在编程语言中处理数组或集合时,使用循环语句必须要初始化一个变量记录迭代位置,而程序化地使用迭代器可以简化这种数据操作 如何设计一个迭代器呢? 迭代器的本身是一个对象,这个对象有 next( ) 方法返回结果对象,这个结果对象有下一个返回值 value.迭代完成布尔值 done,

  • ES6中的迭代器、Generator函数及Generator函数的异步操作方法

    最近在写RN相关的东西,其中涉及到了redux-saga ,saga的实现原理就是ES6中的Generator函数,而Generator函数又和迭代器有着密不可分的关系.所以本篇博客先学习总结了iterator相关的东西,然后又介绍了Generator相关的内容,最后介绍了使用Generator进行异步编程.本篇博客所涉及的示例使用TypeScript语言编写,当然所涉及的特性是基于ES6规范的,使用TS语言不影响来阐述和总结ES6的相关特性.下篇博客准备系统梳理一下saga相关的内容. 一.迭

  • JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】

    JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】

    本文实例讲述了JS实现集合的交集.补集.差集.去重运算.分享给大家供大家参考,具体如下: ES5写法: ///集合取交集 Array.intersect = function () { var result = new Array(); var obj = {}; for (var i = 0; i < arguments.length; i++) { for (var j = 0; j < arguments[i].length; j++) { var str = arguments[i][

  • 深入理解ES6的迭代器与生成器

    本文介绍了深入理解ES6的迭代器与生成器,分享给大家,具体如下: 循环语句的问题 var colors = ["red", "green", "blue"]; for(var i=0; i<colors.length; i++){ console.log(colors[i]); } 在ES6之前,这种标准的for循环,通过变量来跟踪数组的索引.如果多个循环嵌套就需要追踪多个变量,代码复杂度会大大增加,也容易产生错用循环变量的bug. 迭代器

  • ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)

    一.什么是迭代器? 生成器概念在Java,Python等语言中都是具备的,ES6也添加到了JavaScript中.Iterator可以使我们不需要初始化集合,以及索引的变量,而是使用迭代器对象的 next 方法,返回集合的下一项的值,偏向程序化. 迭代器是带有特殊接口的对象.含有一个next()方法,调用返回一个包含两个属性的对象,分别是value和done,value表示当前位置的值,done表示是否迭代完,当为true的时候,调用next就无效了. ES5中遍历集合通常都是 for循环,数组

  • 详谈ES6中的迭代器(Iterator)和生成器(Generator)

    前面的话 用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简化数据操作,于是ES6也向JS中添加了这个迭代器特性.新的数组方法和新的集合类型(如Set集合与Map集合)都依赖迭代器的实现,这个新特性对于高效的数据处理而言是不可或缺的,在语言的其他特性中也都有迭代器的身影:新的for-of循环.展开运算符(...),甚至连异步编程都可以使用迭代器 本文将详细介

  • 你点的 ES6一些小技巧,请查收

    ES6出来已经有好几年了,同时很多新特性可以被巧妙地运用在项目中.我想要列下其中一些,希望它们对你有用. 如果你还知道其他一些小技巧,欢迎留言.我很高兴把它们补充进来. 1. 强制要求参数 ES6提供了默认参数值机制,允许你为参数设置默认值,防止在函数被调用时没有传入这些参数. 在下面的例子中,我们写了一个required()函数作为参数a和b的默认值.这意味着如果a或b其中有一个参数没有在调用时传值,会默认required()函数,然后抛出错误. const required = () =>

随机推荐