記事ディレクトリ
1. なぜ手作業でコードを書くのでしょうか?
日常の開発プロセスでは、コードの根本的な実装ロジックについて考えることなく、コードを取り出して直接使用することがよくありますが、基礎的なことをいくつか勉強し始めると、各メソッドや関数の基礎的な実装の考え方が理解できるようになりました。 JavaScript では、これによりコード レベルと論理的思考が非常に向上すると思います。
2. 手書きコード
2.1 それぞれについて
2.1.1 基本的な使い方
forEach() メソッドは、配列の各要素を呼び出し、その要素をコールバック関数に渡すために使用されます。
let arr = [1, 2, 3];
arr.forEach((item, index, arr) => {
console.log(item, index, arr);
});
2.1.2 手書き実装
出力に一貫性がある
Array.prototype.myForEach = function (callback) {
if (typeof callback !== 'function') {
throw new Error('参数必须是一个函数');
}
for (let i = 0; i < this.length; i++) {
callback(this[i], i, this);
}
};
arr.myForEach(function (item, index, arr) {
console.log(item, index, arr);
});
2.2 マップ
2.2.1 基本的な使い方
map() メソッドは、関数呼び出し後に元の配列要素の処理された値を要素とする新しい配列を返します。
map() メソッドは、元の配列要素の順序で要素を順番に処理します。
元の配列は変更されず、
新しい配列が返されます。元の配列に 1 を加算します。
let arr = [1, 2, 3, 4];
let newArr = arr.map((item, index, arr) => {
return item + 1;
});
console.log(newArr); // [2, 3, 4, 5]
console.log(arr); // 不会改变原数组 [1, 2, 3, 4]
2.2.2 手書き実装
Array.prototype.myMap = function (callback) {
if (typeof callback !== 'function') {
throw new Error('参数必须是一个函数');
}
// 最终要返回的数组
let result = [];
for (let i = 0; i < this.length; i++) {
result.push(callback(this[i], i, this));
}
return result;
};
let newArr = arr.myMap((item, index, arr) => {
return item + 1;
});
console.log(newArr); // [2, 3, 4, 5]
console.log(arr); // 不会改变原数组 [1, 2, 3, 4]
2.3 フィルター
2.3.1 基本的な使い方
filter() メソッドは、条件を満たす指定された配列内のすべての要素をチェックすることによって要素がチェックされる新しい配列を作成します。
filter() は元の配列を変更しません。
配列内の 3 より大きい項目を返します。
let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter((item, index, arr) => {
return item > 2;
});
console.log(newArr); // [3,4,5]
console.log(arr); // [1,2,3,4,5]
2.3.2 手書き実装
Array.prototype.myFilter = function (callback) {
if (typeof callback !== 'function') {
throw new Error('参数必须是一个函数');
}
let result = [];
for (let i = 0; i < this.length; i++) {
// 判断是否符合item > 2，符合则push到数组res里面返回
callback(this[i], i, this) && result.push(this[i]);
}
return result;
};
let newArr = arr.myFilter((item, index, arr) => {
return item > 2;
});
console.log(newArr); // [3,4,5]
console.log(arr); // [1,2,3,4,5]
2.4ごと
2.4.1 基本的な使い方
Every() メソッドは、配列のすべての要素が指定された条件(関数によって提供される) を満たすかどうかをチェックするために使用されます。
Every() メソッドは、指定された関数を使用して配列内のすべての要素をチェックします。
配列内の要素が不満足であることが検出された場合、式全体がfalseを返し、残りの要素は再度チェックされません。すべての要素が条件を満たす場合はtrue
を返します。
let arr = [1, 2, 3, 4, 5];
let flag = arr.every((item, index, arr) => {
return item > 4;
});
console.log(flag); // true
2.4.2 手書き実装
Array.prototype.myEvery = function (callback) {
if (typeof callback !== 'function') {
throw new Error('参数必须是一个函数');
}
for (let i = 0; i < this.length; i++) {
if (!callback(this[i], i, this)) {
return false;
}
}
return true;
};
let flag = arr.every((item, index, arr) => {
return item > 4;
});
console.log(flag); // false
2.5くらい
2.5.1 基本的な使い方
some() メソッドは、配列内の要素が指定された条件 (関数によって提供される) を満たしているかどうかを確認するために使用されます。
1 つの要素が条件を満たす場合、式はtrueを返し、残りの要素はチェックされません。条件を満たす要素がない場合はfalse
を返します。
2.5.2 手書き実装
Array.prototype.mySome = function (callback) {
if (typeof callback !== 'function') {
throw new Error('参数必须是一个函数');
}
for (let i = 0; i < this.length; i++) {
if (!callback(this[i], i, this)) {
return false;
}
}
return true;
};
let flag = arr.mySome((item, index, arr) => {
return item > 3;
});
console.log(flag);
2.6 削減
2.6.1 基本的な使い方
reduce()メソッドは関数をアキュムレータとして受け入れ、配列内の各値 (左から右へ) は最初に最終値に減算されます。
構文: `
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
最初のパラメータtotal : は必須です。初期値、または計算完了後の戻り値。
2 番目のパラメータcurrentValue : 必須。現在の要素
3 番目のパラメータcurrentIndex : オプション。現在の要素のインデックス
4 番目のパラメータarr : オプション。現在の要素が属する配列オブジェクト。
例を使用して配列要素の累積を実現する
let arr = [1, 2, 3, 4];
let sum = arr.reduce((tol, cur) => {
return (tol += cur);
}, 0);
console.log(sum); // 10
2.6.2 手書き実装
Array.prototype.myReduce = function (callback, InitialValue) {
if (typeof callback !== 'function') {
throw new Error('传入第一个参数必须是函数');
}
const array = this;
// 如果没有传InitaialValue初始值时，初始值默认为数组的第一项即array[0]
let result = InitialValue || array[0];
for (let i = 0; i < array.length; i++) {
// 如果没有传第二个参数InitialValue初始值，当前数组第一项就不在进入循环
if (!InitialValue && i == 0) {
continue;
}
result = callback(result, array[i], i, this);
}
return result;
};
let result = arr.myReduce((tol, cur, index, arr) => {
return (tol += cur);
}, 0);
console.log(result); // 10
2.7 見つける
2.7.1 基本的な使い方
find() メソッドは、条件を満たす配列の最初の要素の値を返します。
let arr = [1, 2, 3];
let flag = arr.find((item, index, arr) => {
return item > 2;
});
console.log(flag); // 3
2.7.2 手書き実装
Array.prototype.myFind = function (callback) {
if (typeof callback !== 'function') {
throw new Error('传入的参数必须是函数');
}
for (let i = 0; i < this.length; i++) {
if (callback(this[i], i, this)) {
return this[i];
}
}
return undefined;
};
let flag = arr.myFind((item, index, arr) => {
return item > 2;
});
console.log(flag);
2.8 インデックスの検索
2.8.1 基本的な使い方
findIndex() メソッドは、テスト条件 (関数) で渡された配列の最初の要素の位置を返します。
let arr = [1, 2, 3, 4];
let index1 = arr.findIndex((item, index, arr) => {
return item == 3;
});
console.log(index1);
2.8.2 手書きコード
Array.prototype.myFindIndex = function (callback) {
for (let i = 0; i < this.length; i++) {
if (callback(this[i], i, this)) {
return i;
}
}
return -1;
};
let index1 = arr.myFindIndex((item, index, arr) => {
return item == 3;
});
console.log(index1);
2.9 フラットマップ
2.9.1 基本的な使い方
flatMap() メソッドは、まず、map 関数を使用して各要素をマップし、次に結果を新しい配列に圧縮します。マップに深さ値1のフラットを付けたものとほぼ同じですマップを変更せずに元の配列を
トラバースする場合、操作完了後、操作された要素が配列の場合は
フラットマップのレイヤー平らになります。
faltmap(callback,thisArg)
最初のパラメータのコールバック: (item, i, arr) を実行のために渡すことができます。
2 番目のパラメータ thisArg: コールバックの実行時に thisArg を指します。
コード例:
let arr = [1, 2, 3, 4, 5];
let arr1 = arr.flatMap((item) => [item * 2]);
console.log(arr1); // [2, 4, 6, 8, 10]
console.log(arr); // [1, 2, 3, 4, 5] 原数组没有发生改变
let arr2 = arr.flatMap((item) => [[item * 2]]);
console.log(arr2); // 只能拍平一层 [[2], [4], [6], [8], [10]];
console.log(arr); // [1, 2, 3, 4, 5]
2.9.2 手書き実装
Array.prototype.myFlatMap = function (callback, thisArg) {
let newArr = [];
for (let i = 0; i < this.length; i++) {
let res = callback.call(thisArg, arr[i], i, arr);
if (Array.isArray(res)) {
newArr.push(...res);
} else {
newArr.push(res);
}
}
return newArr;
};
let arr1 = arr.flatMap((item) => [item * 2]);
console.log(arr1); // [2, 4, 6, 8, 10]
let arr2 = arr.myFlatMap((item) => [[item * 2]]);
console.log(arr2); // 只能拍平一层 [[2], [4], [6], [8], [10]];
| 議論して勉強する皆さんを歓迎します、ご支援ありがとうございます |