在看书的时候，搜void 0时，看到有人列出过类似的例子，所以延伸着搜索了一堆简写的例子整理出来。
这里的简写，包括比如void 0代替undefined这类值替代，
也包括了箭头函数替代普通函数、for循环各种写法中性能最好的这类写法替代，
还想到了以前面试的时候看到的es6面试题，数组去重，最简单的方法是用set和Array.from。
类似的都会整理出来，以后遇到了新的也会更新上来。
2018/12/22
（1）取整，位运算更快。原因介绍：参考：位运算实现的原因
位运算取整（更快）
位运算取整：下述，都可以
~~a; //双非位操作符
a|0;
。。。
（2）四舍五入（0.5规定向上取整），位运算更快
位运算的四舍五入，负数不适配
位运算适合正数的四舍五入，但是负数只能舍，不能入。
a+0.5|0;
~~(a+0.5);
。。。
（3）内置值 undefined
undefined替代
void 0; // 快
0[0]; // 略慢
（4）内置值 Infinity
Infinity替代
1/0;
（5）布尔值短写法
布尔值短写法
!0; // true
!1; //false
（6）十进制指数（想当初，刚学c的时候，我一直都用pow(10,n)）
10000000000 === 1e10
（7）三元运算符 ? :
还用于简化函数的调用。
function x() { console.log('x') };
function y() { console.log('y') };
let z = 3;
简化前：
if (z == 3) {
x();
} else {
y();
}
简化后：
(z==3?x:y)(); //x
（8）短路求值 && ||
当给一个变量分配另一个值时，想确定源始值不是null，undefined或空值。可以写撰写一个多重条件的if语句。
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
let variable2 = variable1;
}
或者可以使用短路求值方法：
const variable2 = variable1 || 'backupValue';
（9）声明变量简写
let x;
let y;
let z = 3;
简写方法：
let x, y, z=3;
（10）if存在条件简写
if ( a ) { }
if ( !a ) { }
（11）js循环简写
虽说，有for (variable in object) {} 用于遍历对象属性名，
for (variable of iterable) {} 用于遍历对象属性值（但不适用于普通自定义对象），
for ( var key of Object.keys( someObject ) ) { } for-of结合Object.keys可以遍历普通对象属性值，
Array.prototype.forEach遍历数组和类数组对象，
但是，从性能上来讲还是最原始的for( ; ; )运行最快，所以非必要的时候还是使用原始for循环。
//性能最优化，但是可读性低
var i; //优化变量声明
var divs = document.getElementsByTagName("div");
for( i = divs.length-1; i >= 0; i -= 1 ){
//优化循环中动态集合读取、减值迭代、用i-=1 代替 i--
}
//合理的循环优化，以优化性能的前提下兼顾可读性
var i,len;
var divs = document.getElementsByTagName("div");
for( i = 0, len = divs.length; i < len; i++ ){
}
参考：各种循环遍历对比
（12）对象属性简写
如果属性名与key名相同，则可以采用ES6的方法：
const obj = { x: x, y: y };
简写：
const obj = { x, y };
（13）箭头函数简写
要注意箭头函数的特性：
1）this指向定义时的环境。2）不可new实例化。3）this不可变。4）没有arguments对象。
常用于内部函数，增强可读性。
function sayHello(name) {
console.log('Hello', name);
}
setTimeout(function() {
console.log('Loaded');
}, 2000);
list.forEach(function(item) {
console.log(item);
});
简写：
sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));
（14）箭头函数中的省略return写法
(参数1,参数2,…,参数N) => 表达式（单一）
// 相当于：(参数1, 参数2, …, 参数N) => { return 表达式; }
function calcCircumference(diameter) {
return Math.PI * diameter
}
var func = function func() {
return { foo: 1 };
};
简写：
calcCircumference = diameter => (Math.PI * diameter);
var func = () => ({ foo: 1 });
（15）默认参数值
为了给函数中参数传递默认值，通常使用if语句来编写，但是使用ES6定义默认值，则会很简洁：
function volume(l, w, h) {
if (w === undefined)
w = 3;
if (h === undefined)
h = 4;
return l * w * h;
}
简写：
volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) // 24
（16）强制参数简写
JavaScript中如果没有向函数参数传递值，则参数为undefined。为了增强参数赋值，可以使用if语句来抛出异常，或使用强制参数简写方法。
function foo(bar) {
if(bar === undefined) {
throw new Error('Missing parameter!');
}
return bar;
}
简写：
mandatory = () => {
throw new Error('Missing parameter!');
}
foo = (bar = mandatory()) => {
return bar;
}
（17）模板字符串简写
es6中的模板字符串可以保留空白符（换行、空格、制表符）和传参。
模板字符串中的传参、换行、空格
const db = 'Our database is\n\t'
+ 'http://' + host + ':' + port + '/' + database;
简写：
const db = `Our database is
http://${host}:${port}/${database}`;
（18）解构赋值简写
在web框架中，经常需要从组件和API之间来回传递数组或对象字面形式的数据，然后需要解构它
const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');
const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;
简写：
import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity } = this.props;
也可以分配变量名：
const { store, form, loading, errors, entity:contact } = this.props;
//最后一个变量名为contact
（19）扩展运算符简写，数组，对象
// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()
简写：
// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd]; // [ 2, 4, 6, 1, 3, 5 ]
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr]; // [1, 2, 3, 4]
还使用扩展运算符来在一个数组中任意处插入另一个数组：
const odd = [1, 3, 5];
const nums = [2, ...odd, 4 , 6]; // [2, 1, 3, 5, 4 , 6]
也可以使用扩展运算符解构：
const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }
（20）从对象数组中查找某个值
es6数组的新方法 Array.find() ，但是只能返回一个值，找到多个返回第一个。
arr.find(callback[,thisArg])
function callback(element, index, array){}
const pets = [
{ type: 'Dog', name: 'Max'},
{ type: 'Cat', name: 'Karl'},
{ type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
for(let i = 0; i<pets.length; ++i) {
if(pets[i].type === 'Dog' && pets[i].name === name) {
return pets[i];
}
}
}
简写：
var pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }
（21）数组去重
es6新增数据结构set，元素不重复。
往常需要循环的代码在这里只有两行。
var arr = [1,2,2,3,4]; // 需要去重的数组
var set = newSet(arr); // {1,2,3,4}
var newArr =Array.from(set); // 再把set转变成array
console.log(newArr); // [1,2,3,4]
参考：为什么js中要用void 0 代替undefined，还是有特别的含义呢
课外：在搜索的时候，看到有人觉得object["key"]和object.key也是简写，个人觉得这就是个不一样的写法。object[keyValue]中的值是属性名字符串，object.key中的key是object下的已知属性。
有人遇到过 for ( var key in someObject ) { } 导致的在循环体中 someObject.key 取不到值。
这个for-in语句，相当于 for ( var key of Object.keys( someObject ) ) { }，
Object.keys()返回的是属性名字符串，for-in中的key返回的也是字符串。
var json = {a: 1};
for(var key in json ){
typeof key; //"string"
}
网友评论