javascript一些新的特性整理（1）

本文是对一篇讲script新特性的翻译

我js很久都没看了，这里重新记录学习一下。js可以直接在chrome里console中运行。

三元运算符

bad code

const x = 20;
let answer;
if (x > 10){
    answer = 'greater than 10';
} else {
    answer = 'less than 10';
}

good code

const x = 20;
const answer = x > 10 ? " greater than 10 " : x

短求值法

bad code

if (variable !== null || variable1 !== undefined || variable1 != ''){
    let variable2 = variable1;
}

good code

const variable2 = variable1 || 'new';

快速声明变量

bad code

let x;
let y;
let z = 3;

good code

let x, y, z = 3;

判断是否存在

bad code

if (likeJavaScript === true)

let a;
if ( a !== true ) {
// do something...
}

good code

if (likeJavaScript)

let a;
if ( !a ) {
// do something...
}

javascript 循环

bad code

for (let i=0; i< allImgs.length; i++)

good code

for (let index of allImgs)

foreach 的用法

function logArrayElements(element, index, array){
    console.log('a[' + index + ']=' + element);
}

[2, 5, 9].forEach(logArrayElements);

bad code

let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} else {
  dbHost = 'localhost';
}

good code

const dbHost = process.env.DB_HOST || 'localhost';

小数基础例子

not good code

for (let i = 0; i < 10000; i++) {}

good code

for (let i = 0; i < 1e4; i++) {}

// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

定义对象的属性值

not good code

const obj = {x:x, y:y};

good code

const obj = {x, y};

箭头函数使用

not good code

function seyHello(name){
    console.log('hello', name);
}

setTimeout(function(){
    console.log('Loaded')
}, 2000);

list.forEach(function(item){
    console.log(item);
});

good code

sayHello = name => console.log('hello', name);
setTimeout = () => console.log("Loaded", 2000);
list.forEach(item => console.log(item));

参考

https://www.sitepoint.com/shorthand-javascript-techniques/