Lorsque vous souhaitez écrire une instruction if...else, utilisez plutôt l'opérateur ternaire.
<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>
Abréviation : <code><span style="font-size: 16px;">const answer = x > 10 ? 'is greater' : 'is lesser';</span>
const réponse = x > 'est plus grand' : 'est moindre';
Vous pouvez également imbriquer les instructions if : <span style="font-size: 16px;">const big = x > 10 ? " greater 10" : x</span>
Lorsque vous attribuez une autre valeur à une variable, vous voulez vous assurer que la valeur d'origine n'est pas valeur nulle ou indéfinie ou nulle. Vous pouvez écrire une instruction if multi-conditions.
<span style="font-size: 16px;">if (variable1 !== null || variable1 !== undefined || variable1 !== '') {<br> let variable2 = variable1;<br>}<br></span>
Ou vous pouvez utiliser la méthode d'évaluation de court-circuit : <span style="font-size: 16px;">const variable2 = variable1 || 'new';</span>
<h2>const variable2 = variable1 || > code><span style="font-size: 16px;"></span>
</h2>3. Méthode abrégée de déclaration de variables<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><span style="font-size: 16px;">let x;<br>let y;<br>let z = 3;<br></span></pre><div class="contentsignin">Copier après la connexion</div></div>
<p><span style="font-size: 16px;"><br></span>Méthode abrégée : <code><span style="font-size: 16px;">let x, y, z=3;</span>
<h2> soit x, y, z = 3;<span style="font-size: 16px;"></span>
</h2>
4.if existe la méthode d'abréviation de condition<span style="font-size: 16px;">if (likeJavaScript === true)</span>
<span style="font-size: 16px;">if ( likeJavaScript === true)<br></span>
<span style="font-size: 16px;">if (likeJavaScript)</span>
if (likeJavaScript)
Seulement lorsque likeJavaScript est une vraie valeur, les deux déclarations sont égales
<span style="font-size: 16px;">let a;<br>if ( a !== true ) {<br>// do something...<br>}<br></span>
Si la valeur de jugement n'est pas une vraie valeur, vous pouvez faire ceci :
<span style="font-size: 16px;">let a;<br>if ( !a ) {<br>// do something...<br>}<br></span>
<span style="font-size: 16px;">for (let i = 0; i < allImgs.length; i++)</span>
</span>pour (laissez i = 0; i < allImgs.length; i++)<code><span style="font-size: 16px;">for (let index in allImgs)</span>
Abréviation :
<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>
<h2>pour (laissez l'index dans allImgs)<span style="font-size: 16px;">
Vous pouvez également utiliser Array.forEach : <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>
La valeur attribuée à une variable En jugeant si sa valeur est nulle ou indéfinie, vous pouvez : <span style="font-size: 16px;">const dbHost = process.env.DB_HOST || 'localhost';</span>
<span style="font-size: 16px;">const dbHost = process.env. DB_HOST || 'localhost';<br/>
<span style="font-size: 16px;">for (let i = 0; i < 10000; i++) {}</span>
Exposant décimal
<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>
</span>for (let i = 0; i < 10000 ; i++) {}</h2>
Abréviation :<span style="font-size: 16px;">const obj = { x:x, y:y };</span>
8. Abréviation de l'attribut d'objet
<span style="font-size: 16px;">const obj = { x, y };</span>
Si le nom de l'attribut est le même que le nom de la clé, il peut être utilisé selon la méthode ES6 :
<span style="font-size: 16px;">const obj = { x:x, y:y };</span>
Abréviation :
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><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></pre><div class="contentsignin">Copier après la connexion</div></div>const obj = { x, y };<p>
9. Abréviation de la fonction flèche<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><h2> <span style="font-size: 16px;"></span>La méthode traditionnelle d'écriture de fonction est facile à comprendre et à écrire, mais lorsqu'elle est imbriquée dans une autre fonction, ces avantages sont perdus. </h2> <p><span style="font-size: 16px;"></span></p> Abréviation : <p><span style="font-size: 16px;"></span></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>
L'instruction return est souvent utilisée pour renvoyer le résultat final d'une fonction. Une fonction flèche avec une seule instruction peut implicitement renvoyer sa valeur (la fonction doit omettre {} afin d'omettre le mot-clé return)
<span style="font-size: 16px;">calcCircumference = diameter => (<br> Math.PI * diameter;<br>)<br><br>var func = () => ({ foo: 1 });<br></span>
Abréviation :
<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>
11. Valeur du paramètre par défaut
<span style="font-size: 16px;">volume = (l, w = 3, h = 4 ) => (l * w * h);<br><br>volume(2) //output: 24<br></span>
Abréviation :
<span style="font-size: 16px;">const welcome = 'You have logged in as ' + first + ' ' + last + '.'<br><br>const db = 'http://' + host + ':' + port + '/' + database;<br></span>
12. Chaîne de modèle Dans le langage JavaScript traditionnel, le modèle de sortie est généralement écrit comme ceci. ES6 peut utiliser des backticks et l'abréviation ${} :
<span style="font-size: 16px;">const welcome = `You have logged in as ${first} ${last}`;<br><br>const db = `http://${host}:${port}/${database}`;<br></span>
在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>
需要输出多行字符串,需要使用+来拼接:
<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>
扩展运算符有几种用例让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>
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>
想从数组中查找某个值,则需要循环。在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 === '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>
考虑一个验证函数
<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>
现在可以有适用于各种情况的验证函数,不需要为了每个而编写自定义验证函数了
有一个有效用例用于双重非运算操作符。可以用来代替Math.floor(),其优势在于运行更快,可以阅读此文章了解更多位运算。<span style="font-size: 16px;">Math.floor(4.9) === 4 //true</span>
简写:<span style="font-size: 16px;">~~4.9 === 4 //true</span>
相关推荐:
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!