JavaScript の 19 の便利な短縮テクニック-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript の 19 の便利な短縮テクニック

小云云

Jan 03, 2018 pm 02:56 PM

javascriptjs共有

この記事では主に 19 の便利な JavaScript 省略テクニックを紹介します。お役に立てれば幸いです。

1. 三項演算子

if...else ステートメントを書きたい場合は、代わりに三項演算子を使用します。

<span style="font-size: 16px;">const x = 20;<br>let answer;<br>if (x > 10) {<br>    answer = 'is greater';<br>} else {<br>    answer = 'is lesser';<br>}<br></span>

省略形:
<code>const answer = x > 10 ? 'is greater' : 'is lesser';

也可以嵌套if语句：
const big = x > 10 ? " greater 10" : x

2.短路求值简写方式

当给一个变量分配另一个值时，想确定源始值不是null，undefined或空值。可以写撰写一个多重条件的if语句。

<span style="font-size: 16px;">if (variable1 !== null || variable1 !== undefined || variable1 !== '') {<br>     let variable2 = variable1;<br>}<br></span>

或者可以使用短路求值方法：
const variable2 = variable1 || 'new';

3.声明变量简写方法

<span style="font-size: 16px;">let x;<br>let y;<br>let z = 3;<br></span>

简写方法：
let x, y, z=3;

4.if存在条件简写方法

if (likeJavaScript === true)

简写：
if (likeJavaScript)

只有likeJavaScript是真值时，二者语句才相等

如果判断值不是真值，则可以这样：

<span style="font-size: 16px;">let a;<br>if ( a !== true ) {<br>// do something...<br>}<br></span>

简写：

<span style="font-size: 16px;">let a;<br>if ( !a ) {<br>// do something...<br>}<br></span>

5.JavaScript循环简写方法

for (let i = 0; i 

简写：
for (let index in allImgs)
也可以使用Array.forEach：

<span style="font-size: 16px;">function logArrayElements(element, index, array) {<br>  console.log("a[" + index + "] = " + element);<br>}<br>[2, 5, 9].forEach(logArrayElements);<br>// logs:<br>// a[0] = 2<br>// a[1] = 5<br>// a[2] = 9<br></span>

6.短路评价

给一个变量分配的值是通过判断其值是否为null或undefined，则可以：

<span style="font-size: 16px;">let dbHost;<br>if (process.env.DB_HOST) {<br>  dbHost = process.env.DB_HOST;<br>} else {<br>  dbHost = 'localhost';<br>}<br></span>

简写：
const dbHost = process.env.DB_HOST || 'localhost';

7.十进制指数

当需要写数字带有很多零时（如10000000），可以采用指数（1e7）来代替这个数字：
for (let i = 0; i 
简写：

<span style="font-size: 16px;">for (let i = 0; i <br>// 下面都是返回true<br>1e0 === 1;<br>1e1 === 10;<br>1e2 === 100;<br>1e3 === 1000;<br>1e4 === 10000;<br>1e5 === 100000;<br></span>

8.对象属性简写

如果属性名与key名相同，则可以采用ES6的方法：
const obj = { x:x, y:y };

简写：
const obj = { x, y };constanswer = x > 10 ? 'より大きい' : 'より小さい';

if ステートメントをネストすることもできます:

const big = x > 10 ? "greater 10" : x

2. 変数に別の値を代入する場合、ソース値を決定する必要があります。 null、未定義、または空の値ではありません。複数条件の if ステートメントを作成できます。

<span style="font-size: 16px;">function sayHello(name) {<br>  console.log('Hello', name);<br>}<br><br>setTimeout(function() {<br>  console.log('Loaded')<br>}, 2000);<br><br>list.forEach(function(item) {<br>  console.log(item);<br>});<br></span>

または、ショートサーキット評価メソッドを使用することもできます:

const variable2 = variable1 || 'new';

3. 変数のショートハンドメソッドを宣言します

<span style="font-size: 16px;">sayHello = name => console.log('Hello', name);<br><br>setTimeout(() => console.log('Loaded'), 2000);<br><br>list.forEach(item => console.log(item));<br></span>

短縮メソッド：

let x, y, z=3;

4.if 条件付き省略メソッド

if (likeJavaScript === true)

略語:

if (likeJavaScript)

likeJavaScriptが真の値である場合のみ、2つのステートメントは等しい

判定値がそうでない場合true 値の場合、これを行うことができます:

🎜

<span style="font-size: 16px;">function calcCircumference(diameter) {<br>  return Math.PI * diameter<br>}<br><br>var func = function func() {<br>  return { foo: 1 };<br>};<br></span>

🎜🎜略語:🎜🎜

<span style="font-size: 16px;">calcCircumference = diameter => (<br>  Math.PI * diameter;<br>)<br><br>var func = () => ({ foo: 1 });<br></span>

🎜🎜5. JavaScript ループ略語メソッド🎜🎜🎜🎜for (let i = 0; i 🎜🎜🎜 略語: 🎜🎜<code>🎜for (let Index in allImgs)🎜🎜🎜 Array.forEach を使用することもできます: 🎜🎜

<span style="font-size: 16px;">function volume(l, w, h) {<br>  if (w === undefined)<br>    w = 3;<br>  if (h === undefined)<br>    h = 4;<br>  return l * w * h;<br>}<br></span>

🎜🎜6。 🎜🎜🎜変数に割り当てられた値が渡されます。値が null か未定義であるかを判断するには、次のようにします。 🎜🎜

<span style="font-size: 16px;">volume = (l, w = 3, h = 4 ) => (l * w * h);<br><br>volume(2) //output: 24<br></span>

🎜🎜 省略形: 🎜🎜🎜const dbHost = process.env.DB_HOST || 'localhost' ;🎜🎜🎜🎜7. 10 進数の指数 🎜🎜🎜🎜多くのゼロを含む数値 (10000000 など) を記述する必要がある場合は、指数 (1e7) を使用して数値を置き換えることができます: 🎜🎜

🎜for (let i = 0; i 🎜🎜 省略形: 🎜🎜<pre class="brush:php;toolbar:false">&lt;span style=&quot;font-size: 16px;&quot;&gt;const welcome = 'You have logged in as ' + first + ' ' + last + '.'&lt;br&gt;&lt;br&gt;const db = 'http://' + host + ':' + port + '/' + database;&lt;br&gt;&lt;/span&gt;</pre>🎜🎜8. オブジェクト属性の省略形🎜🎜🎜🎜 属性名がキー名については、ES6 メソッドを使用できます: 🎜🎜<code>🎜const obj = { x:x, y:y };🎜

🎜🎜🎜省略形: 🎜🎜🎜const obj = { x , y };🎜🎜🎜🎜9. アロー関数の略語🎜🎜🎜 🎜関数を記述する従来の方法は理解しやすく、書きやすいですが、別の関数にネストされると、これらの利点が失われます。 🎜🎜

<span style="font-size: 16px;">const welcome = `You have logged in as ${first} ${last}`;<br><br>const db = `http://${host}:${port}/${database}`;<br></span>

🎜🎜略語: 🎜🎜

<span style="font-size: 16px;">const observable = require('mobx/observable');<br>const action = require('mobx/action');<br>const runInAction = require('mobx/runInAction');<br><br>const store = this.props.store;<br>const form = this.props.form;<br>const loading = this.props.loading;<br>const errors = this.props.errors;<br>const entity = this.props.entity;<br></span>

🎜🎜10. 暗黙的な戻り値の略語🎜🎜🎜🎜 return ステートメントは、関数の最終結果を返すためによく使用されます。関数は { を省略する必要があります。 return キーワードを省略するには)🎜🎜🎜🎜 複数行のステートメント (オブジェクトリテラル式など) を返すには、関数本体を () で囲む必要があります。 🎜🎜

<span style="font-size: 16px;">import { observable, action, runInAction } from 'mobx';<br><br>const { store, form, loading, errors, entity } = this.props;<br></span>

🎜🎜略称: 🎜🎜

<span style="font-size: 16px;">const { store, form, loading, errors, entity:contact } = this.props;<br>//最后一个变量名为contact<br></span>

🎜🎜11. デフォルトのパラメータ値🎜🎜🎜🎜関数内のパラメータにデフォルト値を渡すには、通常if文を使って記述しますが、ES6を使用してデフォルト値を定義します非常に簡潔になります:🎜 🎜

<span style="font-size: 16px;">const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'<br>    + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'<br>    + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'<br>    + 'veniam, quis nostrud exercitation ullamco laboris\n\t'<br>    + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'<br>    + 'irure dolor in reprehenderit in voluptate velit esse.\n\t'<br></span>

🎜🎜 略語: 🎜🎜

<span style="font-size: 16px;">const lorem = `Lorem ipsum dolor sit amet, consectetur<br>    adipisicing elit, sed do eiusmod tempor incididunt<br>    ut labore et dolore magna aliqua. Ut enim ad minim<br>    veniam, quis nostrud exercitation ullamco laboris<br>    nisi ut aliquip ex ea commodo consequat. Duis aute<br>    irure dolor in reprehenderit in voluptate velit esse.`<br></span>

🎜🎜 12. テンプレート文字列🎜🎜🎜🎜 従来の JavaScript 言語では、出力テンプレートは通常次のように記述されます。 🎜🎜

<span style="font-size: 16px;">// joining arrays<br>const odd = [1, 3, 5];<br>const nums = [2 ,4 , 6].concat(odd);<br><br>// cloning arrays<br>const arr = [1, 2, 3, 4];<br>const arr2 = arr.slice()<br></span>

🎜🎜ES6 ではバッククォートと ${} 省略形を使用できます: 🎜🎜

<span style="font-size: 16px;">const welcome = `You have logged in as ${first} ${last}`;<br><br>const db = `http://${host}:${port}/${database}`;<br></span>

13.解构赋值简写方法

在web框架中，经常需要从组件和API之间来回传递数组或对象字面形式的数据，然后需要解构它

<span style="font-size: 16px;">const observable = require('mobx/observable');<br>const action = require('mobx/action');<br>const runInAction = require('mobx/runInAction');<br><br>const store = this.props.store;<br>const form = this.props.form;<br>const loading = this.props.loading;<br>const errors = this.props.errors;<br>const entity = this.props.entity;<br></span>

简写：

<span style="font-size: 16px;">import { observable, action, runInAction } from 'mobx';<br><br>const { store, form, loading, errors, entity } = this.props;<br></span>

也可以分配变量名：

<span style="font-size: 16px;">const { store, form, loading, errors, entity:contact } = this.props;<br>//最后一个变量名为contact<br></span>

14.多行字符串简写

需要输出多行字符串，需要使用+来拼接：

<span style="font-size: 16px;">const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'<br>    + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'<br>    + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'<br>    + 'veniam, quis nostrud exercitation ullamco laboris\n\t'<br>    + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'<br>    + 'irure dolor in reprehenderit in voluptate velit esse.\n\t'<br></span>

使用反引号，则可以达到简写作用：

<span style="font-size: 16px;">const lorem = `Lorem ipsum dolor sit amet, consectetur<br>    adipisicing elit, sed do eiusmod tempor incididunt<br>    ut labore et dolore magna aliqua. Ut enim ad minim<br>    veniam, quis nostrud exercitation ullamco laboris<br>    nisi ut aliquip ex ea commodo consequat. Duis aute<br>    irure dolor in reprehenderit in voluptate velit esse.`<br></span>

15.扩展运算符简写

扩展运算符有几种用例让JavaScript代码更加有效使用，可以用来代替某个数组函数。

<span style="font-size: 16px;">// joining arrays<br>const odd = [1, 3, 5];<br>const nums = [2 ,4 , 6].concat(odd);<br><br>// cloning arrays<br>const arr = [1, 2, 3, 4];<br>const arr2 = arr.slice()<br></span>

简写：

<span style="font-size: 16px;">// joining arrays<br>const odd = [1, 3, 5 ];<br>const nums = [2 ,4 , 6, ...odd];<br>console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]<br><br>// cloning arrays<br>const arr = [1, 2, 3, 4];<br>const arr2 = [...arr];<br></span>

不像concat()函数，可以使用扩展运算符来在一个数组中任意处插入另一个数组。

<span style="font-size: 16px;">const odd = [1, 3, 5 ];<br>const nums = [2, ...odd, 4 , 6];<br></span>

也可以使用扩展运算符解构：

<span style="font-size: 16px;">const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };<br>console.log(a) // 1<br>console.log(b) // 2<br>console.log(z) // { c: 3, d: 4 }<br></span>

16.强制参数简写

JavaScript中如果没有向函数参数传递值，则参数为undefined。为了增强参数赋值，可以使用if语句来抛出异常，或使用强制参数简写方法。

<span style="font-size: 16px;">function foo(bar) {<br>  if(bar === undefined) {<br>    throw new Error('Missing parameter!');<br>  }<br>  return bar;<br>}<br></span>

简写：

<span style="font-size: 16px;">mandatory = () => {<br>  throw new Error('Missing parameter!');<br>}<br><br>foo = (bar = mandatory()) => {<br>  return bar;<br>}<br></span>

17.Array.find简写

想从数组中查找某个值，则需要循环。在ES6中，find()函数能实现同样效果。

<span style="font-size: 16px;">const pets = [<br>  { type: 'Dog', name: 'Max'},<br>  { type: 'Cat', name: 'Karl'},<br>  { type: 'Dog', name: 'Tommy'},<br>]<br><br>function findDog(name) {<br>  for(let i = 0; i<pets.length></pets.length>    if(pets[i].type === 'Dog' && pets[i].name === name) {<br>      return pets[i];<br>    }<br>  }<br>}<br></span>

简写：

<span style="font-size: 16px;">pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');<br>console.log(pet); // { type: 'Dog', name: 'Tommy' }<br></span>

18.Object[key]简写

考虑一个验证函数

<span style="font-size: 16px;">function validate(values) {<br>  if(!values.first)<br>    return false;<br>  if(!values.last)<br>    return false;<br>  return true;<br>}<br><br>console.log(validate({first:'Bruce',last:'Wayne'})); // true<br></span>

假设当需要不同域和规则来验证，能否编写一个通用函数在运行时确认？

<span style="font-size: 16px;">// 对象验证规则<br>const schema = {<br>  first: {<br>    required:true<br>  },<br>  last: {<br>    required:true<br>  }<br>}<br><br>// 通用验证函数<br>const validate = (schema, values) => {<br>  for(field in schema) {<br>    if(schema[field].required) {<br>      if(!values[field]) {<br>        return false;<br>      }<br>    }<br>  }<br>  return true;<br>}<br><br><br>console.log(validate(schema, {first:'Bruce'})); // false<br>console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true<br></span>

现在可以有适用于各种情况的验证函数，不需要为了每个而编写自定义验证函数了

19.双重非位运算简写

有一个有效用例用于双重非运算操作符。可以用来代替Math.floor()，其优势在于运行更快，可以阅读此文章了解更多位运算。
Math.floor(4.9) === 4 //true

简写：
~~4.9 === 4 //true

相关推荐：

js判断是否为空字符串的简写方法实例详解

js的简写写法介绍

怎么简写php 中的三元运算符

以上がJavaScript の 19 の便利な短縮テクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

メモ帳++7.3.1

使いやすく無料のコードエディター

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。