2021 年の高頻度で実用的な JavaScript スニペット

#[関連する学習の推奨事項: JavaScript ビデオ チュートリアル ]# #これ以上ナンセンスではありません。この記事では、よく使用される、または実用的な JavaScript コード スニペットをいくつかリストします。お役に立てば幸いです。

1. 三項演算子

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

****** 以下是简短版本 ******

let someThingTrue = true
someThingTrue ?  handleTrue() : handleFalse()复制代码

2. 短絡

または

演算 <pre class="brush:php;toolbar:false">const defaultValue = &quot;SomeDefaultValue&quot; let someValueNotSureOfItsExistance = null let expectingSomeValue = someValueNotSureOfItsExistance ||     defaultValue console.log(expectingSomeValue) // SomeDefaultValue复制代码</pre>3. 条件成立

let someValue = true
if (someValue) {
  console.log('条件成立!')
}复制代码

4.

for

ループ<pre class="brush:php;toolbar:false">for (let i = 0; i &lt; 1e2; i++) { // 代替 i&lt;100 是不是有点酷 }复制代码</pre><pre class="brush:php;toolbar:false">let someValues = [1, 2, 4] for (let val in someValues) { console.log(val) } let obj = { &amp;#39;key1&amp;#39;: &amp;#39;value1&amp;#39;, &amp;#39;key2&amp;#39;: &amp;#39;value2&amp;#39;, &amp;#39;key3&amp;#39;: &amp;#39;value3&amp;#39; } for (let key in obj) { console.log(key) }复制代码</pre>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\n
with multi-line of\n
characters\n`

console.log(multiLineString)复制代码

11. Array.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
}复制代码

ES6将来アプローチ

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.Floor の略語

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 .toString の省略形

let someNumber = 123
console.log(someNumber.toString()) // "123"
// 简写
console.log(`${someNumber}`) // "123"复制代码

22. オプションのチェーン演算子 (近日公開予定

以上が2021 年の高頻度で実用的な JavaScript スニペットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。