本文目录
- 1.三元操作符
- 2.分配变量（短路求值法）
- 3.Spread Operator
- 4.如果存在
- 5.变量赋值
- 6.对象属性
- 7.隐式返回
- 8.默认参数值
- 9.字符串拼接
- 10.for循环
- 11.十进制指数
- 12.解构赋值
- 13.更高阶的console
- 14.优雅版转换数组中的值的类型
- 15.优雅的截取数组中的最后一项
- 16.合并对象
- 17.避免多条件并列
- 18.巧用运算符
- 19.数组快速过滤空值
- 20.多个条件的 AND（&&）运算符
- 21.带有比较的return
- 22.用 Array.find 查找对象数组
1.三元操作符
当想写if...else语句时，使用三元操作符来代替。
Longhand:
const x = 20;
let answer;
if (x > 10) {
answer = 'is greater';
} else {
answer = 'is lesser';
}
Shorthand:
const answer = x > 10 ? 'is greater' : 'is lesser';
2.分配变量（短路求值法）
当给一个变量分配另一个值时，想确定源始值不是null，undefined或空值，可以尝试使用短路求值法代替传统的多重条件的if语句
Longhand:
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
let variable2 = variable1;
}else{
let variable2 = 'new';
}
Shorthand:
const variable2 = variable1 || 'new';
3.Spread Operator
数组的合并与展开和有趣。它可以用来代替某些数组的功能。Spread Operator只是一个系列的三个点(...)。
Longhand:
// 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();
Shorthand:
// Joining arrays
const odd = [1, 3, 5];
const nums = [2, 4, 6, ...odd];
console.log(nums); // [2, 4, 6, 1, 3, 5]
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];
不像concat()函数，使用Spread Operator你可以将一个数组插入到另一个数组的任何地方。
const odd = [1, 3, 5];
const nums = [2, ...odd, 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}
4.如果存在
Longhand:
if (likeJavaScript === true)
Shorthand:
if (likeJavaScript)
这有另一个示例。如果a不是true，然后做什么
Longhand:
let a;
if ( a !== true ) {
// do something...
}
Shorthand:
let a;
if ( !a ) {
// do something...
}
5.变量赋值
Longhand:
let dbHost;
if (process.env.DB_HOST) {
dbHost = process.env.DB_HOST;
} else {
dbHost = 'localhost';
}
Shorthand:
const dbHost = process.env.DB_HOST || 'localhost';
6.对象属性
如果属性名和值一样，可以使用下面简写的方式。(ES6)
Longhand:
const obj = { x:x, y:y };
Shorthand:
const obj = { x, y };
7.隐式返回
return在函数中经常使用到的一个关键词，将返回函数的最终结果。箭头函数用一个语句将隐式的返回结果（函数必须省略{}，为了省略return关键词）。
Longhand:
const a = function () {
return 2
}
console.log(a())
Shorthand:
const a = () => 2
console.log(a())
//2
如果返回一个多行语句（比如对象），有必要在函数体内使用()替代{}。这样可以确保代码作为一个单独的语句返回。(ES6)
Longhand:
function calcCircumference(diameter) {
return Math.PI * diameter
}
Shorthand:
calcCircumference = diameter => (
Math.PI * diameter;
)
8.默认参数值
在ES6中，可以在函数声明中定义默认值。
Longhand:
function volume(l, w, h) {
if (w === undefined)
w = 3;
if (h === undefined)
h = 4;
return l * w * h;
}
Shorthand:
volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24
9.字符串拼接
Longhand:
const welcome = 'You have logged in as ' + first + ' ' + last + '.'
const db = 'http://' + host + ':' + port + '/' + database;
Shorthand:
const welcome = `You have logged in as ${first} ${last}`;
const db = `http://${host}:${port}/${database}`;
另外模板字符串还可以进行多行字符串的拼接
Longhand:
const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
+ 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
+ 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
+ 'veniam, quis nostrud exercitation ullamco laboris\n\t'
+ 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
+ 'irure dolor in reprehenderit in voluptate velit esse.\n\t'
Shorthand:
const lorem = `Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse.`
10.for循环
Longhand:
for (let i = 0; i < allImgs.length; i++)
Shorthand:
for (let index in allImgs)
Array.forEach简写：
function logArrayElements(element, index, array) {
console.log('a[' + index + ']=' + element);
}
[2, 5, 9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 9
11.十进制指数
你可能看过这个。它本质上是一个写数字的奇特写法，就是一个数字后面有很多个0。例如1e7本质相当于10000000（1的后面有7个0）。它代表了十进制计数等于10000000。
Longhand:
for (let i = 0; i < 10000000; i++) {}
Shorthand:
for (let i = 0; i < 1e7; i++) {}
// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;
12.解构赋值
如果你正在使用任何一个流行的Web框架时，就有很多机会使用数组的形式或数据对象的形式与API之间传递信息。一旦数据对象达到一个对多个组件时，你需要将其展开。
Longhand:
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;
Shorthand:
import {observable, action, runInAction} from 'mobx';
const {store, form, loading, errors, entity} = this.props;
你甚至可以自己指定变量名：
const {store, form, loading, errors, entity:contact} = this.props;
13.更高阶的console
开发人员要做的一件重要的事就是调试。但是，调试不只是使用console.log在控制台中打印一堆日志消息。控制台对象具有更多有用的功能。它具有time and timeEnd函数，可以帮助你分析性能。它真的很简单。
在要测试的代码前面，调用console.time函数。此函数有一个参数，该参数采用描述你要分析的内容的字符串。在要测试的代码末尾，调用console.timeEnd函数。你为该函数提供与第一个参数相同的字符串。然后，你将在控制台中查看运行代码所花费的时间。
console.time('loop')
for (let i = 0; i < 10000; i++) {
// Do stuff here
}
console.timeEnd('loop')
14.优雅版转换数组中的值的类型
下面这个数组
var a = ['1', 2, '3', '4']
怎么把每个值的类型都转换成数字？按照以前的办法，可能需要写几行代码，而现在，一行就行了
var a = ['1', 2, '3', '4']
console.log(a.map(Number))
//[1, 2, 3, 4]
当然，也可以都转换成布尔类型
console.log(a.map(Boolean))
//[true, true, true, true]
15.优雅的截取数组中的最后一项
数组方法slice()可以接受负整数，如果提供它，它将接受数组末尾的值，而不是数组开头的值。
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]
16.合并对象
两个对象合并大家用的比较多的可能就是Object.assign了：
const obj1 = { a: 1 }
const obj2 = { b: 2 }
console.log(Object.assign(obj1, obj2))
Output:
{ a: 1, b: 2 }
其实有一种更简洁的方式：通过展开操作符(spread operator)来实现。
const obj1 = { a: 1 }
const obj2 = { b: 2 }
const combinObj = { ...obj1, ...obj2 }
console.log(combinObj)
Output:
{ a: 1, b: 2 }
17.避免多条件并列
开发中有时会遇到多个条件，执行相同的语句，也就是多个||这种：
if (status === 'process' || status === 'wait' || status === 'fail') {
doSomething()
}
这种写法语义性、可读性都不太好。可以通过switch case或includes这种进行改造。
1.switch case
switch(status) {
case 'process':
case 'wait':
case 'fail':
doSomething()
}
2.includes
const enum = ['process', 'wait', 'fail']
if (enum.includes(status)) {
doSomething()
}
18.巧用运算符
快速转换数字
+可以很方便的将string类型的数字变为number类型
constnumber = '10';
number = +number;
console.log(number); // 10
constnumber = '10';
number = ~~number;
console.log(number); // 10
感叹号（！）-逻辑非
！可以很方便的用来评估布尔值，但是需要注意的是，如果该值为true，则!value为false，反之亦然。
!1 // false
!-1 // false
!0 // true
!function() {} // false
!{} // false
!'' // true
!NaN // true
!null // true
!undefined // true
双重感叹号（!!）-双重逻辑非
这将显式强制将一个值转换为相应的布尔值。这与在已转换为布尔值的！value上加上一个感叹号（！）相同。
!!true // true
!!{} // true
!!(new Boolean(false)) // true
!!false // false
!!'' // false
!!Boolean(false) // false
需要注意的是：!! Boolean（false）和!!（new Boolean（false））给了我们一个不同的结果。如果不带new调用布尔构造函数，则它会返回一个布尔值。但是，如果使用new调用，它将返回Boolean的实例对象。所以!! Boolean（false）等于!! false，但是!!（new Boolean（false））等于!!（Boolean的实例），就像!! Object。
双星号（）-求幂**
这与Math.pow（x，y）完全相同，都者等于x ^ y，需要注意的是IE都不支持这个用法。
2 ** 3 === Math.pow(2, 3) // 8
-(2 ** 2) === -Math.pow(2, 2) // -4
10 ** -1 === Math.pow(10, -1) // 0.1
19.数组快速过滤空值
let result1 = [1, 2, 0, undefined, null, false, ''].filter(Boolean);
20.多个条件的 AND（&&）运算符
如果仅在变量为 true 的情况下才调用函数，则可以使用 && 运算符。
//Longhand
if (test1) {
callMethod();
}
//Shorthand
test1 && callMethod();
21.带有比较的return
我们也可以在 return 语句中使用比较。它将避免我们的 5 行代码，并将它们减少到 1 行。
// Longhand
let test;
function checkReturn() {
if (!(test === undefined)) {
return test;
} else {
return callMe('test');
}
}
var data = checkReturn();
console.log(data); //output test
function callMe(val) {
console.log(val);
}
// Shorthand
function checkReturn() {
return test || callMe('test');
}
22.用 Array.find 查找对象数组
当我们确实有一个对象数组并且我们想要根据对象属性查找特定对象时，find 方法确实很有用。
const data = [
{
type: 'test1',
name: 'abc'
},
{
type: 'test2',
name: 'cde'
},
{
type: 'test1',
name: 'fgh'
},
]
function findtest1(name) {
for (let i = 0; i < data.length; ++i) {
if (data[i].type === 'test1' && data[i].name === name) {
return data[i];
}
}
}
//Shorthand
filteredData = data.find(data => data.type === 'test1' && data.name === 'fgh');
console.log(filteredData); // { type: 'test1', name: 'fgh' }
网友评论