ホームページ > 記事 > ウェブフロントエンド > JavaScript の 19 の便利な短縮テクニック

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

小云云オリジナル: 2018-01-03 14:56:523102ブラウズ

この記事では主に 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 < allImgs.length; 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 = &#39;localhost&#39;;<br/>}<br/></span>

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

7.十进制指数

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

<span style="font-size: 16px;">for (let i = 0; i < 1e7; i++) {}<br/><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(&#39;Hello&#39;, name);<br/>}<br/><br/>setTimeout(function() {<br/>  console.log(&#39;Loaded&#39;)<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></code></p> <p>短縮メソッド ：<span style="font-size: 16px;"></span><code></code></p>let x, y, z=3;<h2><span style="font-size: 16px;"></span></h2>4.if 条件付き省略メソッド<p><span style="font-size: 16px;"></span><code></code></p>if (likeJavaScript === true)<p> <span style="font-size: 16px;"></span></p>略語:<h2>
<span style="font-size: 16px;"><code></code></span>if (likeJavaScript)</h2>
<p><span style="font-size: 16px;"></span>likeJavaScriptが真の値である場合のみ、2つのステートメントは等しい</p>
<p><span style="font-size: 16px;"></span>判定値がそうでない場合true 値の場合、これを行うことができます:</p>🎜<pre class="brush:php;toolbar:false"><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 < allImgs.length; i++) 🎜🎜🎜🎜 略語: 🎜🎜🎜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>🎜🎜 省略形: 🎜🎜<code>🎜const dbHost = process.env.DB_HOST || 'localhost' ;🎜</code>🎜🎜🎜7. 10 進数の指数 🎜🎜🎜🎜多くのゼロを含む数値 (10000000 など) を記述する必要がある場合は、指数 (1e7) を使用して数値を置き換えることができます: 🎜🎜<code>🎜for (let i = 0; i 🎜🎜 省略形: 🎜🎜<pre class="brush:php;toolbar:false"><span style="font-size: 16px;">const welcome = 'You have logged in as ' + first + ' ' + last + '.'<br><br>const db = 'http://' + host + ':' + port + '/' + database;<br></span>

🎜🎜8. オブジェクト属性の省略形🎜🎜🎜🎜 属性名がキー名については、ES6 メソッドを使用できます: 🎜🎜🎜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; ++i) {<br/>    if(pets[i].type === &#39;Dog&#39; && 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