ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript のヒント
配列は JavaScript のあらゆる場所で使用でき、ECMAScript 6 の新機能スプレッド演算子を使用すると、多くの優れた機能を実現できます。
1. 空の配列を反復処理する
JavaScript で直接作成された配列は緩いため、多くの落とし穴があります。配列コンストラクターを使用して配列を作成してみると、すぐに理解できるでしょう。
const arr = new Array(4); [undefined, undefined, undefined, undefined] // 谷歌浏览器中是 [empty x 4]
緩やかな配列を使用して一部の変換をループするのは非常に難しいことがわかります。
const arr = new Array(4); arr.map((elem, index) => index); [undefined, undefined, undefined, undefined]
この問題を解決するには、新しい配列を作成するときに Array.apply を使用します。
const arr = Array.apply(null, new Array(4)); arr.map((elem, index) => index); [0, 1, 2, 3]
2. メソッドに空のパラメータを渡す
メソッドを呼び出したいときにパラメータのいずれかを入力しない場合、JavaScript はエラーを報告します。
method('parameter1', , 'parameter3'); // Uncaught SyntaxError: Unexpected token ,
一般的な解決策の 1 つは、null または未定義を渡すことです。
method('parameter1', null, 'parameter3') // or method('parameter1', undefined, 'parameter3');
ES6 でのスプレッド演算子の導入によると、空のパラメータをメソッドに渡すよりクリーンな方法があります。上で述べたように、配列は緩いので、null 値を渡しても大丈夫であり、これを利用します。
method(...['parameter1', , 'parameter3']); // 代码执行了...
3. 配列の重複排除
重複排除された値を簡単に取得できる組み込み関数が配列に提供されていない理由がわかりません。 . . Set でスプレッド演算子を使用すると、一意の配列を生成できます。
const arr = [...new Set([1, 2, 3, 3])]; // [1, 2, 3]
4. 配列要素を後ろから前に取得する
配列の要素を後ろから前に取得したい場合は、次のように記述できます。 this:
var arr = [1, 2, 3, 4] console.log(arr.slice(-1)) // [4] console.log(arr.slice(-2)) // [3, 4] console.log(arr.slice(-3)) // [2, 3, 4] console.log(arr.slice(-4)) // [1, 2, 3, 4]
5. 短絡条件文
特定の条件の論理値が true のときに関数を実行したい場合は、次のようになります。 this:
if (condition) {
dosomething()
}現時点では、次のような短絡を使用できます:
condition && dosomething()
6。演算子「||」を使用してデフォルト値を設定します
変数にデフォルト値を割り当てる必要がある場合は、次のように簡単に記述できます:
var a console.log(a) // undefined a = a || 'default value' console.log(a) // default value a = a || 'new value' console.log(a) // default value
7. 等価比較には Object.is() を使用します
JavaScript の型指定が弱いことは誰もが知っています。比較に == を使用すると、場合によっては型変換、つまり「2 つのオペランドの一方を他方に変換する」ために予期せぬことが起こることがあります。そして比較してください」の結果。次のように:
0 == ' ' //true null == undefined //true [1] == true //true
したがって、JavaScript は等価演算子 === を提供します。これは不等号演算子よりも厳密であり、型変換は発生しません。ただし、比較に === を使用するのは最良の解決策ではありません。
NaN === NaN //false
ES6 は新しい Object.is() メソッドを提供します。これには === のいくつかの機能があり、より優れており、より正確であり、いくつかの特殊な場合に適切に実行されます。 :
Object.is(0 , ' '); //false Object.is(null, undefined); //false Object.is([1], true); //false Object.is(NaN, NaN); //true
8. オブジェクトをバインドする関数を与える
オブジェクトをメソッドのこれにバインドする必要があることがよくあります。 JS では、関数を呼び出して this を指定したい場合は、bind メソッドを使用できます。
バインド構文
fun.bind(thisArg[, arg1[, arg2[, ...]]])
パラメータ
thisArg
バインディング関数が呼び出されるとき、パラメータは、実行時に元の関数へのポインタとして機能します。
arg1、arg2、…
バインド関数が呼び出されるとき、これらのパラメータは実際のパラメータの前にバインドされたメソッドに渡されます。
戻り値
指定されたこの値と初期化パラメータによって変更された元の関数のコピーを返します
JS のインスタンス
const myCar = {
brand: 'Ford',
type: 'Sedan',
color: 'Red'
};
const getBrand = function () {
console.log(this.brand);
};
const getType = function () {
console.log(this.type);
};
const getColor = function () {
console.log(this.color);
};
getBrand(); // object not bind,undefined
getBrand(myCar); // object not bind,undefined
getType.bind(myCar)(); // Sedan
let boundGetColor = getColor.bind(myCar);
boundGetColor(); // Red9. ファイル拡張子を取得します
解決策 1: 正規表現
function getFileExtension1(filename) {
return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename)[0] : undefined;
}解決策 2:文字列の分割メソッド
function getFileExtension2(filename) {
return filename.split('.').pop();
}これら 2 つのソリューションでは、一部の特殊なケースを解決できません。さらに強力なソリューションがもう 1 つあります。
解決策 3: String のスライスと lastIndexOf メソッド
function getFileExtension3(filename) {
return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
}
console.log(getFileExtension3('')); // ''
console.log(getFileExtension3('filename')); // ''
console.log(getFileExtension3('filename.txt')); // 'txt'
console.log(getFileExtension3('.hiddenfile')); // ''
console.log(getFileExtension3('filename.with.many.dots.ext')); // 'ext'これはどのように実装されますか?
String。 lastIndexOf() メソッドは、メソッドを呼び出す文字列内で指定された値 (この例では「.」) が出現する最後の位置を返します。見つからない場合は -1 を返します。
「filename」と「.hiddenfile」の場合、lastIndexOf の戻り値はそれぞれ 0 と -1 です。符号なし右シフト演算子 (>>>) は次のように変換します。 1 ～ 4294967295、-2 を 4294967294 に変換します。この方法により、エッジ ケースでもファイル名が変更されないことが保証されます。
String.prototype.slice() 上記で計算したインデックスからファイルの拡張子を抽出します。インデックスがファイル名の長さより大きい場合、結果は「」になります。
10. unapply 攻撃を防ぐ
組み込みオブジェクトのプロトタイプ メソッドを書き換える、書き換えることで外部コードが公開される可能性がありますコードと、バインドされたパラメーターを変更する関数。これは、es5 のアプローチでポリフィルを使用する場合、重大なセキュリティ問題になります。
// bind polyfill 示例
function bind(fn) {
var prev = Array.prototype.slice.call(arguments, 1);
return function bound() {
var curr = Array.prototype.slice.call(arguments, 0);
var args = Array.prototype.concat.apply(prev, curr);
return fn.apply(null, args);
};
}
// unapply攻击
function unapplyAttack() {
var concat = Array.prototype.concat;
Array.prototype.concat = function replaceAll() {
Array.prototype.concat = concat; // restore the correct version
var curr = Array.prototype.slice.call(arguments, 0);
var result = concat.apply([], curr);
return result;
};
}上面的函数声明忽略了函数bind的prev参数，意味着调用unapplyAttack之后首次调用.concat将会抛出错误。
使用Object.freeze，可以使对象不可变，你可以防止任何内置对象原型方法被重写。
(function freezePrototypes() {
if (typeof Object.freeze !== 'function') {
throw new Error('Missing Object.freeze');
}
Object.freeze(Object.prototype);
Object.freeze(Array.prototype);
Object.freeze(Function.prototype);
}());11.Javascript多维数组扁平化
下面是将多位数组转化为单一数组的三种不同方法。
var arr = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
期望结果：
[1, 2, 3, 4, 5, 6, 7, 8, 9]
解决方案1：使用concat()和apply()
var newArr = [].concat.apply([], arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
解决方案2：使用reduce()
var newArr = arr.reduce(function(prev, curr) {
return prev.concat(curr);
});
// [1, 2, 3, 4, 5, 6, 7, 8, 9]解决方案3：使用 ES6 的展开运算符
var newArr = [].concat(...arr); console.log(newArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
12. 函数中如何使用可选参数（包括可选回调函数）
实例函数中第2个与第3个参数为可选参数
function example( err, optionA, optionB, callback ) {
// 使用数组取出arguments
var args = new Array(arguments.length);
for(var i = 0; i < args.length; ++i) {
args[i] = arguments[i];
};
// 第一个参数为错误参数
// shift() 移除数组中第一个参数并将其返回
err = args.shift();
// 如果最后一个参数是函数，则它为回调函数
// pop() 移除数组中最后一个参数并将其返回
if (typeof args[args.length-1] === 'function') {
callback = args.pop();
}
// 如果args中仍有元素，那就是你需要的可选参数
// 你可以像这样一个一个的将其取出：
if (args.length > 0) optionA = args.shift(); else optionA = null;
if (args.length > 0) optionB = args.shift(); else optionB = null;
// 像正常一样继续：检查是否有错误
if (err) {
return callback && callback(err);
}
// 打印可选参数
console.log('optionA:', optionA);
console.log('optionB:', optionB);
console.log('callback:', callback);
/* 你想做的逻辑 */
}
// ES6语法书写更简短
function example(...args) {
// 第一个参数为错误参数
const err = args.shift();
// 如果最后一个参数是函数，则它为回调函数
const callback = (typeof args[args.length-1] === 'function') ? args.pop() : null;
// 如果args中仍有元素，那就是你需要的可选参数你可以像这样一个一个的将其取出：
const optionA = (args.length > 0) ? args.shift() : null;
const optionB = (args.length > 0) ? args.shift() : null;
// ... 重复取更多参数
if (err && callback) return callback(err);
/* 你想做的逻辑 */
}推荐教程：《JS教程》
以上がJavaScript のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。