22+ 高频实用的 JavaScript 片段 （2020年）

let someThingTrue = true 
if(someThingTrue){ 
    handleTrue() 
}else{ 
    handleFalse() 
} 
 
****** 以下是简短版本 ****** 
 
let someThingTrue = true 
someThingTrue ?  handleTrue() : handleFalse() 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

const defaultValue = "SomeDefaultValue" 
let someValueNotSureOfItsExistance = null 
let expectingSomeValue = someValueNotSureOfItsExistance ||     defaultValue 
 
console.log(expectingSomeValue) // SomeDefaultValue 
1.
2.
3.
4.
5.

let someValue = true 
if (someValue) { 
  console.log('条件成立!') 
} 
1.
2.
3.
4.

for (let i = 0; i < 1e2; i++) { // 代替 i<100 是不是有点酷 
} 
let someValues = [1, 2, 4] 
for (let val in someValues) { 
  console.log(val) 
} 
let obj = { 
  'key1': 'value1', 
  'key2': 'value2', 
  'key3': 'value3' 
} 
for (let key in obj) { 
  console.log(key) 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

let x='x',y='y' 
let obj = {x,y} 
 
console.log(obj) // {x: "x", y: "y"} 
1.
2.
3.
4.

const credits = { 
  producer: '大迁世界', 
  name: '前端小智', 
  rating: 9 
} 
const arr = Object.entries(credits) 
console.log(arr) 
 
*** 输出 *** 
[ [ 'producer', '大迁世界' ], [ 'name', '前端小智' ], [ 'rating', 9 ] ] 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

const credits = { 
  producer: '大迁世界', 
  name: '前端小智', 
  rating: 9 
} 
const arr = Object.values(credits) 
console.log(arr) 
 
*** 输出 *** 
 
[ '大迁世界', '前端小智', 9 ] 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

let name = '前端小智' 
let age = 20 
var someStringConcatenateSomeVariable = `我是 ${name}，今年 ${age} 岁` 
console.log(someStringConcatenateSomeVariable) 
1.
2.
3.
4.

import { observable, action, runInAction } from 'mobx'; 
1.

let multiLineString = `some string\n 
with multi-line of\n 
characters\n` 
 
console.log(multiLineString) 
1.
2.
3.
4.
5.

const pets = [{ 
    type: 'Dog', 
    name: 'Max' 
  }, 
  { 
    type: 'Cat', 
    name: 'Karl' 
  }, 
  { 
    type: 'Dog', 
    name: 'Tommy' 
  } 
] 
pet = pets.find(pet => pet.type === 'Dog' && pet.name === 'Tommy') 
 
console.log(pet) // { type: 'Dog', name: 'Tommy' } 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

function area(h, w) { 
  if (!h) { 
    h = 1; 
  } 
  if (!w) { 
    w = 1; 
  } 
  return h * w 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.

function area(h = 1, w = 1) { 
  return h * w 
} 
1.
2.
3.

let sayHello = (name) => { 
  return `你好，${name}` 
} 
 
console.log(sayHello('前端小智')) 
1.
2.
3.
4.
5.

let sayHello = name => `你好，${name}` 
 
console.log(sayHello('前端小智')) 
1.
2.
3.

let someFuncThatReturnSomeValue = (value) => { 
  return value + value 
} 
console.log( 
someFuncThatReturnSomeValue('前端小智')) 
1.
2.
3.
4.
5.

let someFuncThatReturnSomeValue = (value) => ( 
  value + value 
) 
console.log(someFuncThatReturnSomeValue('前端小智')) 
1.
2.
3.
4.

function mustHavePatamMethod(param) { 
  if (param === undefined) { 
    throw new Error('Hey You must Put some param!'); 
  } 
  return param; 
} 
1.
2.
3.
4.
5.
6.

mustHaveCheck = () => { 
  throw new Error('Missing parameter!') 
} 
methodShoudHaveParam = (param = mustHaveCheck()) => { 
  return param 
} 
1.
2.
3.
4.
5.
6.

'SampleString'.charAt(0) // S 
// 简写 
'SampleString'[0] 
1.
2.
3.

function fn1() { 
  console.log('I am Function 1') 
} 
 
function fn2() { 
  console.log('I am Function 2') 
} 
/* 
长的写法 
*/ 
let checkValue = 3; 
if (checkValue === 3) { 
  fn1() 
} else { 
  fn2() 
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

(checkValue === 3 ? fn1 : fn2)() 
1.

let val = '123.95' 
 
console.log(Math.floor(val)) // 常规写法 
console.log(~~val) // 简写 
1.
2.
3.
4.

Math.pow(2, 3) // 8 
// 简写 
2 ** 3 // 8 
1.
2.
3.

const num1 = parseInt('100') 
// 简写 
console.log(+"100") 
console.log(+"100.2") 
1.
2.
3.
4.

let value = 1; 
if (value === 1) 
  console.log('Value is one') 
//OR In short  
value && console.log('Value is one') 
1.
2.
3.
4.
5.

let someNumber = 123 
console.log(someNumber.toString()) // "123" 
// 简写 
console.log(`${someNumber}`) // "123" 
1.
2.
3.
4.

let someUser = { 
  name: 'Jack' 
} 
let zip = someUser?.address?.zip //可选链接，像 Swift  
1.
2.
3.
4.

let address = getAddressByZip.?(12345) 
1.

let fruit = 'banana'; 
let drink; 
switch (fruit) { 
  case 'banana': 
    drink = 'banana juice'; 
    break; 
  case 'papaya': 
    drink = 'papaya juice'; 
    break; 
  default: 
    drink = 'Unknown juice!' 
} 
console.log(drink) // banana juice 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.