2020年——22+高周波実用的なJavaScript断片編

1.三項演算子

let someThingTrue = true
if(someThingTrue){
    handleTrue()
}else{
    handleFalse()
}

******         ******

let someThingTrue = true
someThingTrue ?  handleTrue() : handleFalse()

2.短絡 演算

const defaultValue = "SomeDefaultValue"
let someValueNotSureOfItsExistance = null
let expectingSomeValue = someValueNotSureOfItsExistance ||     defaultValue

console.log(expectingSomeValue) // SomeDefaultValue

3.条件成立

let someValue = true
if (someValue) {
  console.log('    !')
}

4.  for ループ

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)
}

5.オブジェクトへの値のマッピング

let x='x',y='y'
let obj = {x,y}

console.log(obj) // {x: "x", y: "y"}

6.Object.entries()

const credits = {
  producer: '    ',
  name: '    ',
  rating: 9
}
const arr = Object.entries(credits)
console.log(arr)

***    ***
[ [ 'producer', '    ' ], [ 'name', '    ' ], [ 'rating', 9 ] ]

7.Object.values()

const credits = {
  producer: '    ',
  name: '    ',
  rating: 9
}
const arr = Object.values(credits)
console.log(arr)

***    ***

[ '    ', '    ', 9 ]

8.テンプレートの文字数

let name = '    '
let age = 20
var someStringConcatenateSomeVariable = `   ${name}，   ${age}  `
console.log(someStringConcatenateSomeVariable)

9.分配値

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

10.複数行の文字列

let multiLineString = `some string

with multi-line of

characters
`

console.log(multiLineString)

11.Aray.find略記

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' }

12.標準パラメータ値
初期のやり方

function area(h, w) {
  if (!h) {
    h = 1;
  }
  if (!w) {
    w = 1;
  }
  return h * w
}

ES 6以降のやり方

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

13.矢印関数の略字

let sayHello = (name) => {
  return `  ，${name}`
}

console.log(sayHello('    '))

簡単に次のように書きます

let sayHello = name => `  ，${name}`

console.log(sayHello('    '))

14.暗黙的な戻り

let someFuncThatReturnSomeValue = (value) => {
  return value + value
}
console.log(
someFuncThatReturnSomeValue('    '))

簡単に次のように書きます

let someFuncThatReturnSomeValue = (value) => (
  value + value
)
console.log(someFuncThatReturnSomeValue('    '))

15.関数にはパラメータ値が必要です.

function mustHavePatamMethod(param) {
  if (param === undefined) {
    throw new Error('Hey You must Put some param!');
  }
  return param;
}

このように書き換えます

mustHaveCheck = () => {
  throw new Error('Missing parameter!')
}
methodShoudHaveParam = (param = mustHaveCheck()) => {
  return param
}

16.charAt()略記

'SampleString'.charAt(0) // S
//   
'SampleString'[0]

17.条件付きの関数呼び出し

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()
}

短い書き方:

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

17.Math.Flor略記

let val = '123.95'

console.log(Math.floor(val)) //     
console.log(~~val) //   

18.Math.pow略字

Math.pow(2, 3) // 8
//   
2 ** 3 // 8

19.文字列を数値に変換する

const num1 = parseInt('100')
//   
console.log(+"100")
console.log(+"100.2")

20.&演算

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

21.1 toStering略記

let someNumber = 123
console.log(someNumber.toString()) // "123"
//   
console.log(`${someNumber}`) // "123"

22.オプションのチェーン演算子(リリース予定)
今はECMAScriptに関する新しい提案があります.

let someUser = {
  name: 'Jack'
}
let zip = someUser?.address?.zip //    ，  Swift 

もし  zipはundefinedです. ,エラーが発生しません.
この文法はまた、関数とコンストラクター呼び出しをサポートします.

let address = getAddressByZip.?(12345)

getAddressByZipが呼び出された関数である場合、表式はundefinedとして計算されます.
23.対象の方式を使ってswitch文法を置換する

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