js拾遺

6701 ワード
javascript
最近はJavaScript教程を復習していますが、覚えていないことがたくさんあります.
Date
Dtae()とnew Date()は違いますが、Date()関数はパラメータを持つことができません.静的な方法です.
new Date()*1 === new Date().getTime() === Date.now() //      
new Date(y, m, 0).getDate() //          ，       
new Date(y, m, 0).getDay() //              
new Date(y, m-1, 1).getDay() //
RegExp
点文字マッチングは、回車(r)、改行(n)、行セパレータ(u 2028)、セグメントセパレータ(u 2029)以外のすべての文字に対応します.
(^^)は改行を含むすべての文字にマッチすることを表します.str.replace(/2/gi, '1')の2番目のパラメータは、ドル記号を使用して、代替されたコンテンツを指すことができます.
$&：      
$`：         
$'：         
$n：      n   ，n  1      。
$$：      $。
'hello world'.replace(/(\w+)\s(\w+)/, '$2 $1')
// "world hello"
'abc'.replace('b', '[$`-$&-$\']')
// "a[a-b-c]c"
JSON.stringifyconsole.log(JSON.stringify(obj, null, 2))は3つのパラメータを受け取り、印刷対象のフォーマットを設定します.
  • パラメータの一つは、オブジェクトの属性がundefined、関数またはXMLオブジェクトである場合、JSON.stringifyによってフィルタリングされ、配列のメンバがundefined、関数またはXMLオブジェクトである場合、これらの値がnullに変換されると、オブジェクトは空のオブジェクトに回転されて無視されたオブジェクトの遍歴不能な属性
    • になる.
  • パラメータは、2番目のパラメータとして、文字列に変換する属性を指定します.オブジェクトの属性に対してのみ有効であり、JSON.stringifyの戻り値
    • を変更するための関数としても良いです.
  • パラメータ3が数字であれば、各属性の前に追加されたスペース(最大10個まで)を表す文字列(10文字を超えない)であれば、その文字列は各行の前にJSON.stringifyがパラメータオブジェクトがtoJSON方式であることを発見し、この方法の戻り値をパラメータとして直接使用し、元のオブジェクトの他のパラメータ
    • を無視する.
    エロエロ
    new Error() //       
new SyntaxError() //       
new ReferenceError() //            ，        
new TypeError() //       ，         ，let a = 22 a.sort() a   Number       
new RangeError() //     ，Maximum call stack，            ，          
new URIError() // encodeURIComponent() encodeURI()  URI
    Aray
    'a' in ['a', 1] 
for in for of 
arr.push(1, 2, 3)
[1, 2, 3, 4, 5].splice(2)         [1, 2] [3, 4, 5]
    es6は、空席をundefinedに移動するときにあるスキップ(es5)forEach、filter、reduce、some、everyは空席をスキップすることができると明確にしているが、この値を保持するmap()とjoin()は空の文字列に処理される.
    Number
    function rand(num) { 
    let seed = Date() * 1;
    seed = (seed * 9301 + 49297) % 233280; //         ?
    let rc = seed / (233280.0);
    return Math.ceil(rc * num);
}
rand(10) //  1~10    

0 / 0 NaN 
0 / 1 0 
1 / 0 Infinity

es6       0b 0o 0x    2 8 16   

base64 
    0~9 a~z A~Z '+' '/'    10 + 26 + 26 + 2 = 64
       \x00(    )，       1  2 = ，
    toString() 9007199254740991は、正確に表現できる最大整数undefined−90071254740991は、正確に表現できる最小整数を表している.
    Math
    ES 6は、Mathオブジェクトに数学に関する17の方法を追加した.これらの方法はすべて静的な方法であり、Mathオブジェクトでのみ起動できます.
    Math.trunc() //           ，      
Math.trunc(4.1) // 4
Math.trunc(-4.1) // -4
Math.hypot(3, 4) // 5               
Math.cbrt(8) // 2          

es6         2 ** 2 ** 2 => Math.pow(2, 4)
              ，         。          ，          。

'hello'[1] // "e"               ，
    String
    substringはsliceに似ていますが、規則を使って直感に違反していますので、substringの方法は勧められません.優先的にsliceを使うべきです.
    str.charAt() //   
str.charCodeAt() //     Unicode   
String.fromCharCode(97) //    
str.substr(0, 4) //      4 
str[0]
str.concat(str2)
str1.localeCompare(str2) // Unicode
    イベントサイクル
    参考文献
                              Node
I/O                     ✅   ✅
setTimeout              ✅   ✅
setInterval             ✅   ✅
setImmediate            ❌   ✅
requestAnimationFrame   ✅   ❌

                          Node
process.nextTick        ❌   ✅
MutationObserver        ✅   ❌
Promise.then            ✅   ✅
    フィボナッチ数列
    //     
function add(n) { 
    let res1 = 1;
    let res2 = 1;
    let sum = res2 
    for (let i = 2; i < n; i++) {
        sum = res1 + res2
        res1 = res2 
        res2 = sum 
    }
    return sum
}

//        
var cache = []
function add(n) { 
    if (n <= 2) {
        cache[n] = 1
        return 1
    }
    if (cache[n] !== undefined) {
        return cache[n]
    }
    cache.push(add(n-1) + add(n-2))
    return cache[n]
}

//    ，      
function add() {
    if (n <= 2) {
        return 1
    }
    return add(n-1) + add(n-2)
}
    厳格モード
    1.         
2.    with
3.        // delete x =>      
4.    fn.caller fn.arguments //    
5.           
6.           
7.          02
    Flexundefinedは、縮小占有の空間サイズを拡大する.
    flex: 0 1 auto; //    
flex: 0 0 auto; // flex: none;
flex: 1 1 auto; // flex: auto;
flex: 1 1 0%; // flex: 1;
    ベベル
    AST抽象文法ツリー
    babel-core 
       babylon   es6     AST
    babel-traverse   ATS            AST  
    babel-generator    AST              

     API、    ，      
    babel-polyfill   es6          
        regenerator-runtime、core-js 

    babel-plugin-transform-runtime     
        babel-runtime 
            regenerator-runtime、core-js 
        babel-helpers      ，                ，
    Webpack
    プロジェクトを一つの全体と見なして、所与のメインファイルを通じて、webpackはこのメインファイルの入り口からプロジェクトのすべての依存ファイルを見つけ始めました.その後、様々なloader変換、プラグイン処理、ファイル処理を使って、最後に指定されたフォルダに出力します.
    webpack包装の最適化措置
    webpack.DllPlugin           ，               ，      
HappyPack    ，      
babel-loader      cacheDirectory: true 
exclude include 
noParse: /^(vue|vue-router|vuex|vuex-router-sync|axios)$/
css   contenthash
    hash        
    chunkhash .vue        
    contenthash    css
    急速な並べ替え、泡の並べ替え
    function fast(arr) { //     
    if (arr.length <= 1) { //       
        return arr
    }
    
    let index = Math.floor(arr.length / 2) //        
    let val = arr.splice(index, 1)[0] //         
    let left = []
    let right = []

    for (let i = 0, len = arr.length; i < len; i++) { //           
        if (arr[i] < val) {
            left.push(arr[i]) //      
        } else {
            right.push(arr[i]) //      
        }
    }

    return fast(left).concat([val], fast(right)) //     
}

function maop(arr) { //     
    for (let i = 0, len = arr.length; i < len - 1; i++) {
        let flag = 0 

        for (let j = 0; j < len - i - 1; j++) {
            if (arr[j] > arr[j+1]) {
                let temp = arr[j]
                arr[j] = arr[j+1]
                arr[j+1] = temp 
                flag = 1
            }
        }

        if (flag === 0) {
            return arr
        }
    }
}
    JavaScriptのalert()関数使用テクニック詳細
    js配列の順序並べ替え、完全にランダムに並べ替えてまとめます.