집 > 기사 > 웹 프론트엔드 > JavaScript 개발자가 사용하는 10가지 일반적인 트릭

JavaScript 개발자가 사용하는 10가지 일반적인 트릭

Guanhui앞으로: 2020-06-16 17:35:552445검색

우리는 JavaScript가 빠르게 발전하는 언어라는 것을 알고 있습니다. ES2020과 함께 많은 훌륭한 기능이 추가되었습니다. 솔직히, 다양한 방법으로 코드를 작성할 수 있습니다. 동일한 기능을 구현하기 위해 일부 코드는 매우 길고 일부 코드는 매우 짧습니다. 코드를 더 깔끔하고 명확하게 만들기 위해 할 수 있는 몇 가지 요령이 있습니다. 다음 팁은 다음 개발 작업에 확실히 유용할 것입니다.

함수 매개변수 검사기

JavaScript를 사용하면 함수 매개변수의 기본값을 설정할 수 있습니다. 이 기능을 사용하면 함수 매개변수를 확인하는 약간의 트릭을 구현할 수 있습니다.

const isRequired = () => { throw new Error(&#39;param is required&#39;); };
const print = (num = isRequired()) => { console.log(`printing ${num}`) };
print(2); //printing 2print(); // errorprint(null); //printing null

JSON 코드 형식 지정

JSON.stringify에 매우 익숙할 것입니다. 하지만 stringify 메서드를 통해 JSON 코드 형식을 지정할 수도 있다는 것을 알고 계셨나요? ? 실제로는 매우 간단합니다. JSON.stringify 非常熟悉了，但是你知道吗，你也可以通过 stringify 方法格式化你的代码。其实这很简单。

stringify 方法有三个参数，分别是 value replacer 和 space。后面两个参数是可选的，所以我们平常也不会用到它们。想要缩进输出的代码，我们可以使用2个空格，或者4个空格。

console.log(JSON.stringify({ name:"John", Age:23 }, null, &#39;  &#39;));
>>> 
{  "name": "John",  "Age": 23}

对数组去重

以往对数组去重我们会使用 filter 函数来过滤掉重复的值。但是现在我们可以使用新的 Set 特性来过滤。非常简单：

let uniqueArray = [...new Set([1, 2, 3, 3, 3, "school", "school", &#39;ball&#39;, false, false, true, true])];
>>> [1, 2, 3, "school", "ball", false, true]

去除数组中的 Boolean(v) 为 false 的值

有时候你想删除数组中 Boolean(v) 为 false 的值。在 JavaScript 中只有以下 6 种：

undefined
null
NaN
0
空字符串
false

去除这些值最简单的办法是使用下面的方法：

array.filter(Boolean)

如果你想先做一些更改然后再过滤，你可以用下面的方法。要记住，原始数组 array 是一直没变的，返回的是一个新数组。

array
  .map(item => {      // Do your changes and return the new item
  })
  .filter(Boolean);

同时合并多个对象

如果需要同时合并多个对象或者类，可以用下面这种方法。

const user = {  name: "John Ludwig",  gender: "Male",
};const college = {  primary: "Mani Primary School",  secondary: "Lass Secondary School",
};const skills = {  programming: "Extreme",  swimming: "Average",  sleeping: "Pro",
};const summary = { ...user, ...college, ...skills };

>>>
{  name: &#39;John Ludwig&#39;,  gender: &#39;Male&#39;,  primary: &#39;Mani Primary School&#39;,  secondary: &#39;Lass Secondary School&#39;,  programming: &#39;Extreme&#39;,  swimming: &#39;Average&#39;,  sleeping: &#39;Pro&#39;}

三个点也叫扩展操作符。

对数字数组排序

JavaScript 数组有一个原生的排序方法 arr.sort。这个排序方法默认把数组元素转换成字符串，并对其进行字典序排序。这个默认行为会在排序数字数组时出现问题，所以下面有一个办法来处理这个问题。

[0, 10, 4, 9, 123, 54, 1].sort()
>>> [0, 1, 10, 123, 4, 54, 9]

[0, 10, 4, 9, 123, 54, 1].sort((a,b) => a-b);
>>> [0, 1, 4, 9, 10, 54, 123]

禁用右键

有时候你可能想要禁止用户点击右键。虽然这个需求很少见，但是可能派的上用场。

<body oncontextmenu="return false">
  <p></p>
  </body>

这个简单的代码片段就可以禁止用户点击右键了。

解构时重命名

解构赋值是 JavaScript 的一个特性，它允许直接从数组或者对象中获取值，而不需要繁琐的声明变量再赋值。对对象来讲，我们可以通过下面这种方式来给属性名重新定义一个名字。

const object = { number: 10 };// Grabbing numberconst { number } = object;// Grabbing number and renaming it as otherNumberconst { number: otherNumber } = object;console.log(otherNumber); // 10

获取数组中的最后一项

如果你想获取数组中的最后一项，你可以使用 slice 函数，同时带上一个负数作为参数。

let array = [0, 1, 2, 3, 4, 5, 6, 7] 
console.log(array.slice(-1));
>>>[7]console.log(array.slice(-2));
>>>[6, 7]console.log(array.slice(-3));
>>>[5, 6, 7]

等待 Promises 全部执行完成

有时候你可能需要等待几个 promise 都执行完然后进行后面的操作。你可以使用 Promise.all 来并行执行这些 promise。

const PromiseArray = [    Promise.resolve(100),    Promise.reject(null),    Promise.resolve("Data release"),    Promise.reject(new Error(&#39;Something went wrong&#39;))];Promise.all(PromiseArray)
  .then(data => console.log(&#39;all resolved! here are the resolve values:&#39;, data))
  .catch(err => console.log(&#39;got rejected! reason:&#39;, err))

要注意，只要 Promise.all 中有一个是 rejected 状态时，其会立即停止执行并抛出异常。

如果你想忽略 resolved 或者 rejected 状态，你可以使用 Promise.allSettled

stringify 메서드에는 value replacer 및 space라는 세 가지 매개 변수가 있습니다. 마지막 두 매개변수는 선택사항이므로 일반적으로 사용하지 않습니다. 출력 코드를 들여쓰려면 공백 2개 또는 공백 4개를 사용할 수 있습니다.

const PromiseArray = [  Promise.resolve(100),  Promise.reject(null),  Promise.resolve("Data release"),  Promise.reject(new Error("Something went wrong")),
];Promise.allSettled(PromiseArray)
  .then((res) => {    console.log("here", res);
  })
  .catch((err) => console.log(err));
>>>
here [
  { status: &#39;fulfilled&#39;, value: 100 },
  { status: &#39;rejected&#39;, reason: null },
  { status: &#39;fulfilled&#39;, value: &#39;Data release&#39; },
  {    status: &#39;rejected&#39;,    reason: Error: Something went wrong
        at Object.<anonymous> 
        at Module._compile (internal/modules/cjs/loader.js:1200:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
        at Module.load (internal/modules/cjs/loader.js:1049:32)
        at Function.Module._load (internal/modules/cjs/loader.js:937:14)
        at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
        at internal/main/run_main_module.js:17:47
  }
]

Deduplicate arrays🎜과거에는 `filter` 함수를 사용하여 중복 값을 필터링했습니다. 어레이 중복을 제거합니다. 하지만 이제 새로운 `Set` 속성을 사용하여 필터링할 수 있습니다. 매우 간단합니다. 🎜rrreee

🎜false인 배열에서 Boolean(v) 값을 제거하세요🎜🎜🎜때때로 `Boolean( v)`는 `false` 값입니다. JavaScript에는 다음과 같은 6가지 유형만 있습니다: 🎜

`정의되지 않음`

`null`

`NaN`

`0`

빈 문자열

`false`
ul >🎜이 값을 제거하는 가장 쉬운 방법은 아래 방법을 사용하는 것입니다. 🎜rrreee🎜 먼저 일부 변경을 적용한 다음 필터링하려면 아래 방법을 사용할 수 있습니다. 원래 배열 `array`는 변경되지 않으며 새 배열이 반환된다는 점을 기억하세요. 🎜rrreee
🎜여러 개체를 동시에 병합🎜🎜🎜여러 개체나 클래스를 동시에 병합해야 하는 경우 다음 방법을 사용할 수 있습니다. . 🎜rrreee🎜점 3개는 확장 연산자라고도 합니다. 🎜
🎜숫자 배열 정렬🎜🎜🎜JavaScript 배열에는 기본 정렬 방법인 `arr.sort`가 있습니다. 이 정렬 방법은 기본적으로 배열 요소를 문자열로 변환하고 사전순으로 정렬합니다. 이 기본 동작은 숫자형 배열을 정렬할 때 문제를 일으킬 수 있으므로 이를 처리하는 방법은 다음과 같습니다. 🎜rrreee
🎜오른쪽 클릭 비활성화🎜🎜🎜때때로 사용자의 오른쪽 클릭을 비활성화하고 싶을 수도 있습니다. 이 요구 사항은 드물지만 유용할 수 있습니다. 🎜rrreee🎜이 간단한 코드 조각은 사용자가 마우스 오른쪽 버튼을 클릭하는 것을 비활성화할 수 있습니다. 🎜
🎜구조 분해 중 이름 바꾸기🎜🎜🎜구조 분해 할당은 번거로운 변수 선언이나 변수 선언 없이 배열이나 객체에서 직접 값을 얻을 수 있도록 하는 JavaScript의 기능입니다. 값을 할당합니다. 객체의 경우 다음과 같은 방법으로 속성 이름의 이름을 재정의할 수 있습니다. 🎜rrreee
🎜배열의 마지막 항목 가져오기🎜🎜🎜배열의 마지막 항목을 가져오려면 `slice 함수, 음수를 매개변수로 취합니다. 🎜rrreee<h2 class="heading" data-id="heading-9">🎜모든 Promise가 실행될 때까지 기다리세요🎜🎜🎜때로는 후속 작업을 수행하기 전에 여러 Promise가 실행될 때까지 기다려야 할 수도 있습니다. <code>Promise.all`을 사용하여 이러한 Promise를 병렬로 실행할 수 있습니다. 🎜rrreee🎜 `Promise.all` 중 하나가 거부된 상태인 경우 즉시 실행이 중지되고 예외가 발생한다는 점에 유의하세요. 🎜🎜해결됨 또는 거부됨 상태를 무시하려면 `Promise.allSettled`를 사용하면 됩니다. 이것은 ES2020의 새로운 기능입니다. 🎜rrreee🎜추천 튜토리얼: "🎜JS Tutorial🎜"🎜

위 내용은 JavaScript 개발자가 사용하는 10가지 일반적인 트릭의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript json Boolean Array sort Filter 字符串 JS 对象 promise

성명：

이 기사는 juejin.im에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：PHP는 데몬을 구현합니다 - 백엔드다음 기사：PHP는 데몬을 구현합니다 - 백엔드

JavaScript 개발자가 사용하는 10가지 일반적인 트릭

함수 매개변수 검사기

JSON 코드 형식 지정

对数组去重

去除数组中的 Boolean(v) 为 false 的值

同时合并多个对象

对数字数组排序

禁用右键

解构时重命名

获取数组中的最后一项

等待 Promises 全部执行完成

Deduplicate arrays🎜과거에는 filter 함수를 사용하여 중복 값을 필터링했습니다. ​​​​어레이 중복을 제거합니다. 하지만 이제 새로운 Set 속성을 ​​사용하여 필터링할 수 있습니다. 매우 간단합니다. 🎜rrreee

🎜여러 개체를 동시에 병합🎜🎜🎜여러 개체나 클래스를 동시에 병합해야 하는 경우 다음 방법을 사용할 수 있습니다. . 🎜rrreee🎜점 3개는 확장 연산자라고도 합니다. 🎜

관련 기사

Deduplicate arrays🎜과거에는 `filter` 함수를 사용하여 중복 값을 필터링했습니다. 어레이 중복을 제거합니다. 하지만 이제 새로운 `Set` 속성을 사용하여 필터링할 수 있습니다. 매우 간단합니다. 🎜rrreee