省时省力的ES6

栏目: JavaScript · 发布时间: 6年前

内容简介:人一懒起来啊,简直是………上一次发文章都是两个月前了这次就收集一些ES6中的HACK吧!讲真的(会不会是..)…掌握这些技巧。能让我们少写很多行代码哦使用async/await,函数会把返回值放在一个数组中。使用数组解构后就可以把返回值直接赋给相应的变量。

人一懒起来啊,简直是………上一次发文章都是两个月前了 省时省力的ES6

这次就收集一些ES6中的HACK吧!讲真的(会不会是..)…掌握这些技巧。能让我们少写很多行代码哦 省时省力的ES6

1. 变量交换

let a = 'world', b = 'hello'
[a, b] = [b, a]
console.log(a) // -> hello
console.log(b) // -> world

// 双击666

2. 接收函数返回的多个结果

使用async/await,函数会把返回值放在一个数组中。使用数组解构后就可以把返回值直接赋给相应的变量。

const [user, account] = await Promise.all([
  fetch('/user'),
  fetch('/account')
])

3. 字符串拼接

let a = 'hello',
    b = 'world';

let _string = `${a} ${b}`

console.log(_string); // "hello world"

4. 函数参数默认值

const notify = (msg, {type='info', timeout, close=true} = {}) => {
  // display notification
    console.log(msg, type, timeout, close)
}

notify('Hi!'); // Hi! info undefined true
notify('Hi!', {type: 'error'}); // Hi! error undefined true
notify('Hi!', {type: 'warn', close: false}); // Hi! warn undefined false

5. 数组

代码不多一行搞定

// 最大值
const max = (arr) => Math.max(...arr);
max([1, 2, 3]) // outputs: 321

// 求和
const sum = (arr) => arr.reduce((a, b) => (a + b), 0)
sum([1, 2, 3, 4]) // output: 10

// 拷贝
let array1 = [1, "3", { a: 1}, 666];
let copyArray = [ ...array1 ];
console.log(copyArray) // [1, "3", {…}, 666]

// 数组连接
const one = ['a', 'b', 'c']
const two = ['d', 'e', 'f']
const three = ['g', 'h', 'i']
// Old way #1
const result = one.concat(two, three)
// Old way #2
const result = [].concat(one, two, three)
// New
const result = [...one, ...two, ...three]

6. 去重

通过 Set 可以轻易的实现数组去重

function dedupe(array) {

return […new Set(array)];

}

let noDupes = dedupe([1, 2, “a”, “a”, { obj1: 999}, 7, 3, 1], { obj1: 999});

console.log(noDupes); // [1, 2, “a”, { obj1: 999}, 7, 3]

通过数组创建 Set 会删除数组中的重复项,而spread运算符会将 Set 转换为 Array

7. 强制要求参数

const throwIfMissing = () => {
    throw new Error('Missing parameter');
}
const func = (requiredParam = throwIfMissing()) => {
    // some implementation
}

8. 删除对象中不需要参数

let { boy1, boy2, ...others } = { boy1: "sunshine", boy2: "sunshine", girl1: "beautiful", girl2: "very beautiful", girl2: "very beautiful", girl2: "very very beautiful" };

console.log(others) // { girl1: "beautiful", girl2: "very beautiful", girl2: "very beautiful", girl2: "very very beautiful"}

9. 动态属性名

let name = "mael";

let me = {
    [`${name}`]: name,
    age: 24
};

10. for 循环

let a = ['a', 'b', 'c', 'd' ];
// ES6 
for ( var val of a ) {
    console.log( val );
} // "a" "b" "c" "d"
// ES5
for ( var idx in a ) {
    console.log( idx );
}  // 0 1 2 3

11. 定义抽象基类

抽象基类是一种专门用于继承的类。它不能直接构建。主要用例是继承的类具有公共接口。但是, class 尚未利用 abstract 关键字来创建抽象基类,我们可以使用 new.target 来模拟。

class Note {
    constructor() {
        if (new.target === Note) {
            throw new Error('Note cannot be directly constructed.')
        }
    }
}
class ColorNote extends Note {

}
let note = new Note();               // error!
let colorNote = new ColorNote();   // ok

12. 定义惰性范围函数

我们可以使用 generators 来创建一个惰性函数

function* range(start, count) {
    for (let delta = 0; delta < count; delta++) {
        yield start + delta;
    }
}

for (let teenageYear of range(13, 7)) {
    console.log(`Teenage angst @ ${teenageYear}!`);
}

以上所述就是小编给大家介绍的《省时省力的ES6》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

WWW信息体系结构(影印版第2版)

WWW信息体系结构(影印版第2版)

Louis Rosenfeld / 清华大学出版社 / 2003-6 / 49.8

如今的网站和内联网已经变得比以前越来越大,越来越有价值,而且越来越复杂,同时其用户也变得更忙,也更加不能容忍错误的发生。数目庞大的信息、快速的变化、新兴的技术和公司策略是设计师、信息体系结构构建师和网站管理员必须面对的事情,而这些已经让某些网让看起来像是个快速增长却规划很差的城市——到处都是路,却无法导航。规划精良的信息体系结构当前正是最关键性的。 本书介绍的是如何使用美学和机械学的理念创建......一起来看看 《WWW信息体系结构(影印版第2版)》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具