I.はじめに
フロントエンド開発では、配列は一般的で重要なデータ構造です。配列には、配列内のデータを操作したり操作したりするための便利な方法が多数用意されています。この記事では、追加、削除、インターセプト、マージ、変換などの操作を含む、フロントエンドでよく使用される配列の API を簡単に紹介します。
2 つ、push() メソッドと Pop() メソッド
Push() メソッドは、配列の末尾に 1 つ以上の要素を追加し、変更された配列を返すために使用されます新长度。
const fruits = ['苹果', '香蕉'];
const res = fruits.push('橘子', '西瓜');
console.log(fruits); //[ '苹果', '香蕉', '橘子', '西瓜' ]
console.log(res); //4
Pop() メソッドは、配列の最後の要素を削除して返します。
const fruits = ['苹果', '香蕉', '橘子'];
const lastFruit = fruits.pop();
console.log(fruits); // ['苹果', '香蕉']
console.log(lastFruit); //橘子
3、shift() メソッドと unshift() メソッド
SHIFT() メソッドは、第一个配列の要素を削除して返すために使用されます。
const fruits = ['苹果', '香蕉', '橘子'];
const firstFruit = fruits.shift();
console.log(fruits); //[ '香蕉', '橘子' ]
console.log(firstFruit); //苹果
unshift() メソッドは、开头添加配列の 1 つ以上の要素をシフトするために使用され、変更された配列の新しい長さを返します。
const fruits = ['苹果', '香蕉'];
const newLength = fruits.unshift('橘子', '西瓜');
console.log(fruits); //[ '橘子', '西瓜', '苹果', '香蕉' ]
console.log(newLength); //4
4.slice()メソッド
lice() メソッドは、配列から指定された位置にある要素をインターセプトし、新しい配列を返すために使用されます。
構文はarray.slice(start, end)次のとおりです。 、startおよび はendオプションのパラメータで、選択した要素の開始位置と終了位置を示します。パラメータが渡されない場合は、デフォルトで配列全体が選択されます。このメソッドは、 ( ) から ( )startまでの要素を含む新しい配列を返します。end不包括end
const names = ['张三', '李四', '王五', '赵六'];
const slicedNames = names.slice(1, 3);
const slicedNames1 = names.slice();
const slicedNames2 = names.slice(0);
const slicedNames3 = names.slice(2);
const slicedNames4 = names.slice(3);
const slicedNames5 = names.slice(4);
//slice不改变原数组
console.log(names); //[ '张三', '李四', '王五', '赵六' ]
console.log(slicedNames); //[ '李四', '王五' ]
console.log(slicedNames1); //[ '张三', '李四', '王五', '赵六' ]
console.log(slicedNames2); //[ '张三', '李四', '王五', '赵六' ]
console.log(slicedNames3); //[ '王五', '赵六' ]
console.log(slicedNames4); //[ '赵六' ]
console.log(slicedNames5); //[] 参数大于等于4时就输出空数组
5、splice()メソッド
splice() メソッドは、配列から要素を削除、置換、または追加し、削除された要素の配列を返すために使用されます。これにより、元の配列が直接変更されます。
文法：array.splice(start, deleteCount, item1, item2, ...)
このうち、start は変更の開始位置、deleteCount は削除する要素の数、item1、item2 などは追加する要素を示します。の場合はdeleteCount为0、要素のみが追加され、要素は削除されないことを意味します。
//实现删除
let arr = [1,2,3,4,5]
console.log(arr.splice(0,2)); //[ 1, 2 ] 返回被删除的元素
console.log(arr); //[ 3, 4, 5 ] 该方法会改变原数组
//实现添加
let arr2 = [1,2,3,4,5]
console.log(arr2.splice(1,0,666,777)); //[] 返回空数组，没有删除元素
console.log(arr2); //[ 1, 666, 777, 2, 3, 4, 5 ] 原数组改变了
// 实现替换
let arr3 = [1,2,3,4,5]
console.log(arr3.splice(2,1,"aaa","bbb")); //[ 3 ] 返回被删除的一个元素
console.log(arr3); //[ 1, 2, 'aaa', 'bbb', 4, 5 ] 可以添加字符串
let arr4 = [1,2,3,4,5]
console.log(arr4.splice(1,4,666)); //[ 2, 3, 4, 5 ] 返回被删除的四个元素
console.log(arr4); //[ 1, 666 ]
6. join() メソッド
join() メソッドは、配列内のすべての要素を指定された delimiter で 1 つに結合するために使用されます字符串。
const fruits = ['苹果', '香蕉', '橘子'];
const joinedString = fruits.join(',');
console.log(fruits); //[ '苹果', '香蕉', '橘子' ]
console.log(joinedString); //苹果,香蕉,橘子
7、concat()メソッド
concat() メソッドは、2 つ以上の配列を結合して新しい配列を返すために使用されます。
const fruits1 = ['苹果', '橘子'];
const fruits2 = ['西瓜', '蓝莓'];
const combinedFruits = fruits1.concat(fruits2);
console.log(combinedFruits); //[ '苹果', '橘子', '西瓜', '蓝莓' ]
8、forEach()メソッド
forEach() メソッドは、配列内の各要素に対してコールバック関数を実行するために使用されます。
const fruits = ['火龙果', '蓝莓', '西瓜', '葡萄'];
fruits.forEach(fruit => {
console.log(fruit); //火龙果 蓝莓 西瓜 葡萄
});
9、map()メソッド
map() メソッドは、配列内の各要素に対してコールバック関数を実行し、新しい配列を返すために使用されます。新しい配列内の要素はコールバック関数の戻り値です。
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); //[ 1, 4, 9, 16, 25 ]
10. filter() メソッド
filter() メソッドは、配列内の対象となる要素をフィルター処理して、新しい配列を返すために使用されます。
//筛选出偶数
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); //[ 2, 4 ]
11、reduce()メソッド
reduce() メソッドは、配列オブジェクトのメソッドであり、指定されたルールに従って配列内のすべての要素を結合および計算し、最終値を返すために使用されます。
文法：array.reduce(callback, initialValue)
このメソッドは 2 つのパラメーターを受け取ります。最初のパラメーターはコールバック関数で、2 番目のパラメーターは初期値です。コールバック関数は、次の 4 つのパラメータを受け取ることができます。
- アキュムレータ: アキュムレータは、最後のコールバック関数の戻り値または初期値を格納するために使用されます。
- currentValue: 現在の要素の値。
- currentIndex: 現在の要素のインデックス。
- 配列: 配列オブジェクト自体。
initialValue は初期値であり、オプションのパラメータです。
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, num) => {
return acc + num
}, 10);
console.log(sum); //25
//如果初始值是设为0，则输出15
12. fill() メソッド
JS の fill メソッドは配列内のすべての要素を埋めることができ、元の配列を直接変更します。
文法：array.fill(value, start, end)
このうち、valueは埋められる値を表し、startとendは埋められる開始位置と終了位置を表します。start と end が渡されない場合、デフォルトで配列全体が埋められます。このメソッドは、変更された元の配列を返します。
let arr = [1, 2, 3, 4, 5];
arr.fill(0);
console.log(arr); // [0, 0, 0, 0, 0]
//将数组中从位置2到位置4(不包括位置4)的元素都填充为6
arr.fill(6, 2, 4);
console.log(arr); //[ 0, 0, 6, 6, 0 ]
13. 配列検索 API
1. () メソッドが含まれます
include メソッドは、要素が配列に含まれているかどうかを確認するために使用され、要素が含まれている場合は true を返し、含まれていない場合は false を返します。
IndexOf() メソッドとは異なり、includes() メソッドは開始位置の指定をサポートせず、配列の先頭から検索します。
const fruits = ['苹果', '香蕉', '橘子', '西瓜', 1, 2, 3];
console.log(fruits.includes('橘子')); //true
console.log(fruits.includes('葡萄')); //false
console.log(fruits.includes(3)); //true
console.log(fruits.includes(4)); //false
2.indexOf()メソッド
IndexOf メソッドは最初に一致した位置のみを返すことに注意してください。配列内に同一の要素が複数ある場合、このメソッドは最初の要素の位置のみを返します。
さらに、indexOf メソッドは、検索を開始する場所を指定するために使用されるオプションの 2 番目のパラメーターも受け入れることができます。
const fruits = ['苹果', '蓝莓', '橘子', '西瓜', '葡萄'];
console.log(fruits.indexOf('橘子', 1)); //2 返回元素下标
console.log(fruits.indexOf('橘子', 3)); //-1 没有该元素
const arr = [1,2,3,4,5,6,7,6,6,5];
// 从下标6开始查找元素5
console.log(arr.indexOf(5,6)); //9
3.lastIndexOf()()メソッド
lastIndexOf() メソッドは、配列内で最後に出現した要素のインデックス (位置) を検索し、見つかった場合はインデックス値を返し、見つかった場合は -1 を返します。
const fruits = ['火龙果', '橘子', '蓝莓', '西瓜', '葡萄', '橘子'];
console.log(fruits.lastIndexOf('橘子')); //5
console.log(fruits.lastIndexOf('柚子')); //-1
4. findIndex() メソッド
findIndex() メソッドは、配列内の条件を満たす要素のインデックスを検索するために使用され、見つかった場合はインデックス値を返し、見つかった場合は -1 を返します。
const arr = [1, 2, 3, 4, 5, 6];
const index = arr.findIndex(num => num > 3);
console.log(index); //3 返回第一个符合条件的元素的下标
const index2 = arr.findIndex(num => num > 10);
console.log(index2); //-1 不存在符合条件的元素
14.sort()メソッド
sort() メソッドは、配列をその場で並べ替えるために使用されます。これにより、新しい配列を作成せずに元の配列が直接変更されます。デフォルトでは、配列要素を文字列として扱い、Unicode コード ポイントで並べ替えます。ただし、カスタム比較関数を渡して、他のルールに基づいた並べ替えを実装することができます。
比较函数: 比較関数は、比較される 2 つの要素を表す、通常 a および b と呼ばれる 2 つのパラメーターを受け取ります。a が b の前に来るのか、b と同じ位置に来るのか、b の後に来るのかを示す、負、ゼロ、または正の数値を返す必要があります。比較関数の戻り値の規則は以下のとおりです。
- 戻り値が 0 未満の場合、a は b の前にソートされます。
- 戻り値が 0 の場合、a と b の相対位置は変更されません。
- 戻り値が 0 より大きい場合、a は b の後にソートされます。
const arr = [3, 1, 5, 2, 4];
arr.sort();
console.log(arr); //[1, 2, 3, 4, 5]
//默认排序（按照 Unicode 码点排序）
const arr = ['f', 'k', 'c', 'a', 'b'];
arr.sort();
console.log(arr); //[ 'a', 'b', 'c', 'f', 'k' ]
//使用比较函数进行自定义排序
const arr = [10, 2, 66, 26, 13, 1];
arr.sort((a, b) => a - b);
console.log(arr); //[ 1, 2, 10, 13, 26, 66 ]
const arr = [10, 2, 66, 26, 13, 1];
arr.sort((a, b) => b - a);
console.log(arr); //[ 66, 26, 13, 10, 2, 1 ]
15. reverse() メソッド
reverse() メソッドは、配列内の要素の順序を逆にする、つまり配列の要素を逆順に配置するために使用されます。
const arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); //[ 5, 4, 3, 2, 1 ]
16、toString() および toLocaleString() メソッド
toString メソッドは、配列をカンマで区切られた配列要素で構成される文字列に変換します。
const arr = [1, 2, 3, 4, 5];
console.log(arr.toString()); //1,2,3,4,5
const arr2 = ['苹果', '蓝莓', '橘子', '西瓜', '葡萄'];
const arr3 = ['a', 'null', 'b', 'c', 'undefined', 'd', 'e']
console.log(arr2.toString()); //苹果,蓝莓,橘子,西瓜,葡萄
console.log(arr3.toString()); //a,null,b,c,undefined,d,e
toLocaleString メソッドは、配列を配列要素で構成される文字列に変換します。要素もカンマで区切られますが、要素の形式は現在の環境の言語および地域設定に従って決定されます。
//根据当前环境的语言和地区设置来决定元素的格式
const arr = [123456.789, new Date()];
//我补充写作的时间
console.log(arr.toLocaleString()); //123,456.789,2023/5/29 07:57:19
const arr2 = [1000, 2000, 3000];
const str = arr2.toLocaleString();
console.log(str); //1,000,2,000,3,000
17. Array.from() メソッド
Array.from() は、类数组或可迭代对象新しい配列を作成するための JavaScript の静的メソッドです。反復可能なオブジェクトまたは配列のようなオブジェクトを受け取り、新しい配列インスタンスを返します。
Array.from(iterable, mapFn, thisArg)
- iterable: 必須、新しい配列の作成に使用される反復可能なオブジェクトまたは配列のようなオブジェクト。
- mapFn (オプション): 各要素を処理し、新しい配列内の要素を返すマッピング関数。
- thisArg (オプション): オプションのパラメータ。mapFn 関数を実行するときのこの値。
//使用字符串创建数组
const str = "Hello";
const arr = Array.from(str);
console.log(arr); //[ 'H', 'e', 'l', 'l', 'o' ]
//使用类似数组的对象创建数组
const obj = {
0: "榴莲",
1: "牛油果",
2: "蓝莓",
length: 3
};
const arr = Array.from(obj);
console.log(arr); //[ '榴莲', '牛油果', '蓝莓' ]
//使用映射函数处理数组元素
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = Array.from(numbers, num => num * 2);
console.log(doubledNumbers); //[ 2, 4, 6, 8, 10 ]
十八、最後の言葉
この記事では、フロントエンドで配列によく使用される API を紹介し、追加、削除、インターセプト、マージ、変換などの一般的な操作について説明します。これらの方法に習熟すると、開発効率をある程度向上させることができます。実際の開発では、ニーズに応じて適切な配列メソッドを選択してください。