js拾遺
6701 ワード
最近はJavaScript教程を復習していますが、覚えていないことがたくさんあります.
Date
Dtae()とnew Date()は違いますが、Date()関数はパラメータを持つことができません.静的な方法です.
点文字マッチングは、回車(r)、改行(n)、行セパレータ(u 2028)、セグメントセパレータ(u 2029)以外のすべての文字に対応します.
(^^)は改行を含むすべての文字にマッチすることを表します.パラメータの一つは、オブジェクトの属性が になる.パラメータは、2番目のパラメータとして、文字列に変換する属性を指定します.オブジェクトの属性に対してのみ有効であり、 を変更するための関数としても良いです.パラメータ3が数字であれば、各属性の前に追加されたスペース(最大10個まで)を表す文字列(10文字を超えない)であれば、その文字列は各行の前に を無視する.
エロエロ
Number
Math
ES 6は、Mathオブジェクトに数学に関する17の方法を追加した.これらの方法はすべて静的な方法であり、Mathオブジェクトでのみ起動できます.
substringはsliceに似ていますが、規則を使って直感に違反していますので、substringの方法は勧められません.優先的にsliceを使うべきです.
参考文献
AST抽象文法ツリー
プロジェクトを一つの全体と見なして、所与のメインファイルを通じて、webpackはこのメインファイルの入り口からプロジェクトのすべての依存ファイルを見つけ始めました.その後、様々なloader変換、プラグイン処理、ファイル処理を使って、最後に指定されたフォルダに出力します.
webpack包装の最適化措置
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
に変換されると、オブジェクトは空のオブジェクトに回転されて無視されたオブジェクトの遍歴不能な属性JSON.stringify
の戻り値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" ,
Stringsubstringは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
}
}
}