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 };const 답변 = x > 10 ? 'is 더 크다': 'is lesser';

if 문을 중첩할 수도 있습니다:

const big = x > 10 ? " 더 큰 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가 참값인 경우에만 두 문이 동일합니다.

🎜🎜🎜판단값이 그렇지 않은 경우 실제 값이면 다음과 같이 할 수 있습니다. 🎜🎜🎜🎜 약어: 🎜🎜🎜for(let index in allImgs)🎜🎜🎜Array.forEach를 사용할 수도 있습니다: 🎜🎜

<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>

🎜🎜6. 🎜🎜🎜변수에 할당된 값이 전달됩니다. 값이 null인지 정의되지 않은지 확인하려면 다음을 수행하세요. 🎜🎜

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

🎜🎜약어: 🎜🎜🎜const dbHost = process.env.DB_HOST || 'localhost' ;🎜🎜🎜🎜7. 10진수 지수 🎜🎜🎜🎜0이 많은 숫자(예: 10000000)를 작성해야 하는 경우 지수(1e7)를 사용하여 숫자를 바꿀 수 있습니다. 🎜🎜

🎜for (let i = 0; i 🎜🎜 약어: 🎜🎜<pre class="brush:php;toolbar:false">&lt;span style=&quot;font-size: 16px;&quot;&gt;function volume(l, w, h) {&lt;br&gt;  if (w === undefined)&lt;br&gt;    w = 3;&lt;br&gt;  if (h === undefined)&lt;br&gt;    h = 4;&lt;br&gt;  return l * w * h;&lt;br&gt;}&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;">volume = (l, w = 3, h = 4 ) => (l * w * h);<br><br>volume(2) //output: 24<br></span>

🎜🎜약어: 🎜🎜

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

🎜🎜10. 암시적 반환 값 약어🎜🎜🎜🎜 return 문은 종종 함수의 최종 결과를 반환하는 데 사용됩니다. 단일 문의 화살표 함수는 암시적으로 해당 값( 함수는 { }반환 키워드를 생략하려면)🎜🎜🎜🎜객체 리터럴 표현식과 같은 여러 줄 문을 반환하려면 함수 본문을 ()로 묶어야 합니다. 🎜🎜

<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>

🎜🎜11. 기본 매개변수 값🎜🎜🎜🎜함수에서 매개변수에 기본값을 전달하기 위해 일반적으로 if 문을 사용하여 작성하지만 기본값을 정의하려면 ES6을 사용합니다. 값은 매우 간결합니다: 🎜 🎜

<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>

🎜🎜12. 템플릿 문자열🎜🎜🎜🎜전통적인 JavaScript 언어에서 출력 템플릿은 일반적으로 다음과 같이 작성됩니다. 🎜🎜

<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>

🎜🎜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

관련 기사

Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스Apr 15, 2025 am 12:16 AM

Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.

C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지Apr 14, 2025 am 12:05 AM

C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.

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의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

See all articles