#[関連する学習の推奨事項: JavaScript ビデオ チュートリアル ]# #これ以上ナンセンスではありません。この記事では、よく使用される、または実用的な JavaScript コード スニペットをいくつかリストします。お役に立てば幸いです。
1. 三項演算子
let someThingTrue = true if(someThingTrue){ handleTrue() }else{ handleFalse() } ****** 以下是简短版本 ****** let someThingTrue = true someThingTrue ? handleTrue() : handleFalse()复制代码
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const defaultValue = "SomeDefaultValue"
let someValueNotSureOfItsExistance = null
let expectingSomeValue = someValueNotSureOfItsExistance || defaultValue
console.log(expectingSomeValue) // SomeDefaultValue复制代码</pre><div class="contentsignin">ログイン後にコピー</div></div>
3. 条件成立 let someValue = true if (someValue) { console.log('条件成立!') }复制代码
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">for (let i = 0; i < 1e2; i++) { // 代替 i<100 是不是有点酷
}复制代码</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let someValues = [1, 2, 4]
for (let val in someValues) {
console.log(val)
}
let obj = {
&#39;key1&#39;: &#39;value1&#39;,
&#39;key2&#39;: &#39;value2&#39;,
&#39;key3&#39;: &#39;value3&#39;
}
for (let key in obj) {
console.log(key)
}复制代码</pre><div class="contentsignin">ログイン後にコピー</div></div>
5. オブジェクトへの値のマッピングlet x='x',y='y' let obj = {x,y} console.log(obj) // {x: "x", y: "y"}复制代码
const credits = { producer: '大迁世界', name: '前端小智', rating: 9 } const arr = Object.entries(credits) console.log(arr) *** 输出 *** [ [ 'producer', '大迁世界' ], [ 'name', '前端小智' ], [ 'rating', 9 ] ]复制代码
const credits = { producer: '大迁世界', name: '前端小智', rating: 9 } const arr = Object.values(credits) console.log(arr) *** 输出 *** [ '大迁世界', '前端小智', 9 ]复制代码
let name = '前端小智' let age = 20 var someStringConcatenateSomeVariable = `我是 ${name},今年 ${age} 岁` console.log(someStringConcatenateSomeVariable)复制代码
import { observable, action, runInAction } from 'mobx';复制代码
let multiLineString = `some string\n with multi-line of\n characters\n` console.log(multiLineString)复制代码
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' }复制代码
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]复制代码
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) // 简写复制代码
Math.pow(2, 3) // 8 // 简写 2 ** 3 // 8复制代码
const num1 = parseInt('100') // 简写 console.log(+"100") console.log(+"100.2")复制代码
let value = 1; if (value === 1) console.log('Value is one') //OR In short value && console.log('Value is one')复制代码
let someNumber = 123 console.log(someNumber.toString()) // "123" // 简写 console.log(`${someNumber}`) // "123"复制代码
以上が2021 年の高頻度で実用的な JavaScript スニペットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。