2020年に最も勉強しなければならない10個のスーパー実用Javascript技術!

21189 ワード

JS資料大全書 javascript vue.js es 6

ご存知のように、JavaScriptは急速に変化しています.新しいES 2020において、素晴らしい特性がたくさんあります.私たちはもう試したくないです.正直に言えば、時には違った角度でコードを作成することができます.同じ効果を達成することもできます.またあるものはもっと短くて、もっとはっきりしています.
以下はJavaScriptの役に立つ技術を並べたものです.いつかあなたに役に立つと信じています.
1.方法パラメータの検証
ES 6では関数のパラメータにデフォルト値を設定できます.これがあれば、検証方法のパラメータが空ではないことを実現できます.

const isRequired = () => {
      
  throw new Error('param is required')
}
 
const print = (num = isRequired()) => {
      
  console.log(`printing ${
       num}`) 
}
 
print(2) //printing 2
print() // error
print(null) //printing null

2.フォーマットJSONコード
私たちはJSON.strigifyをよく知っていますが、まだフォーマットの出力ができるということはあまり知られていません.
strigify方法は三つのパラメータがあります.value、replacer、space.その中で、後の二つはオプションパラメータです.これもその理由をあまり知らないです.JSONをインデントするには、spaceパラメータを使用しなければなりません.

console.log(JSON.stringify({
     name:"John",Age:23},null,'\t'));
>>> 
{
     
 "name": "John",
 "Age": 23
}

3.配列から唯一の値を取得する
配列から一意の値を得るには、繰り返しの値をfilter法でフィルタリングする必要があります.しかし、新しいSetの元の相手ができて、とても簡単になりました.

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

4.配列から虚値を削除する
いくつかの場合、配列から虚値を削除したいです.虚値はJavaScriptの値がFALSEの値です.JavaScriptの中には六つの虚値しかありません.

undefined

null

NaN

'(空の文字)

false

これらの虚値をフィルタする最も簡単な方法は、以下の関数を使用することである.

myArray.filter(Boolean)
            ，       ，          。   ，  myArray    。

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

5.複数のオブジェクトを統合する
実際の需要の中で、私達は常に複数の対照を合わせなければなりません.

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}

6.並べ替え数字配列
JavaScript配列は内蔵のsort方法を持っています.デフォルトでは、配列要素を文字列に変換し、辞書の並べ替えを行います.しかし、これは数字配列を並べ替える時に問題があります.解決方法は手書きの順序付けです.

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

7.マウスの右ボタンを無効にする
いくつかの場合、私達はホームページでマウスの右ボタンを無効にしたいです.以下の方法で無効にしてもいいです.

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

この簡単なコードは右クリックを無効にします.
8.構文に別名を使う
構成値はJavaScript式であり、配列内の値やオブジェクト内の属性を異なる変数に分解することができます.既存のオブジェクト変数を使用する必要はなく、自分の好みに応じて名前を変更できます.

const object = {
      number: 10 }
 
const {
      number } = object
 
//     
const {
      number: otherNumber } = object
 
console.log(otherNumber) //10

9.行列の最後の項目を取得します.
配列の末尾要素を取得するには、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]

10.Promisesを待つ
いくつかの場合、私達は複数のPromiseが終わるのを待つ必要があります.ここでPromise.allを使います.

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

Promise.allに関して注意したいことの一つは、Promiseが拒否した場合、この方法はエラーを引き起こすことです.これは私達のコードはすべてのPromiseが完成するまで待てないということです.
すべてのPromiseが完成するまで、断られても成功してもPromise.allSettledが使えます.この方法はES 2020の最終バージョンにある.

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(res);
}).catch(err => console.log(err));
//[
//{status: "fulfilled", value: 100},
//{status: "rejected", reason: null},
//{status: "fulfilled", value: "Data release"},
//{status: "rejected", reason: Error: Something went wrong ...}
//]

転載:オーケー

第二章:Javascript