es6小技巧

let myKey = 'variableKey';
let obj = {
    key1: 'One',
    key2: 'Two',
    [myKey]: 'Three' /* 棒呆! */
};

给变量键加上一层 [],程序员们就可以在一条对象字面量声明里完成全部事情。


let ages = [12, 19, 6, 4];

let firstAdult = ages.find(age => age >= 18); // 19
let firstAdultIndex = ages.findIndex(age => age >= 18); // 1

find 和 findIndex 允许基于计算值查找,这种方式还防止了一些不必要的副作用和循环产生的不确定值。


// 传参给需要多个独立参数的函数 arguments
// 很像 Function.prototype.apply()
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

// 将节点列表转换成数组
let divsArray = [...document.querySelectorAll('div')];

// 将参数转换成数组
let argsArray = [...arguments];

这个神奇的运算符还有附加的好处:它能把可迭代对象(NodeListarguments 等等)转化为真正的数组,而之前我们只能用 Array.from 或其它的 hack 方法。



// 多行字符串
let myString = `Hello

I'm a new line`; // 这么写完全没问题!

// 基础的插值操作
let obj = { x: 1, y: 2 };
console.log(`Your total is: ${obj.x + obj.y}`); // Your total is: 3

当然,除了多行字符串,模板字符串还有其它的能力,比如说简单或者高级的插值。不过,仅仅是优雅的写多行字符串这件事情,已经让我十分欣慰了。



// 基础用法
function greet(name = 'Anon') {
  console.log(`Hello ${name}!`);
}
greet(); // Hello Anon!

// 还可以是函数!
function greet(name = 'Anon', callback = function(){}) {
  console.log(`Hello ${name}!`);

  // 不再需要“callback && callback()”啦 (不需要条件判断)
  callback();
}

// 只给其中一个参数默认值
function greet(name, callback = function(){}) {}

如果在调用的时候不传无默认值的参数,其它的语言可能会发出警告,但是 JavaScript 会默认将它们设为 undefined

ES6的一些基本用法

原文地址:https://www.cnblogs.com/linux-centos/p/6113245.html