JavaScript が配列 (配列) でどのように動作するか

JavaScript の Array (配列) オブジェクトは、数値、文字列、オブジェクトなど、あらゆる種類のデータを含めることができる一連の値を格納するために使用されるコンテナーです。配列オブジェクトを使用すると、データを簡単に整理して処理し、検索、並べ替え、フィルタリング、反復処理などのさまざまな操作を実行できます。

1. JavaScript では、さまざまな方法で配列オブジェクトを作成できます。

1. 直接定義

arr = [1, 2, 3, 4, 5]; とします。

2. コンストラクター

let arr = new Array(1, 2, 3, 4, 5);
一連の初期値を渡すことに加えて、数値パラメーターを使用して配列の長さを指定することもできます。たとえば、
let arr = new配列(5);

3、和の配列からの配列

ES6 では、JavaScript は配列を作成するための 2 つの新しい配列メソッド Array.of および Array.from を提供します。
Array.of メソッドを使用すると、任意の数の要素を含む配列を作成できます (例:
let arr = Array.of(1, 2, 3, 4, 5);
Array.from メソッドを使用して、配列のようなオブジェクト、または反復オブジェクトを配列に変換します。たとえば、次のようになります。
let arr = Array.from("hello");

4. アクセス要素

角括弧 [] 演算子を使用して配列内の要素にアクセスできます (例:
let arr = [1, 2, 3, 4, 5];
console.log(arr[0]); // 1
コンソール。 log( arr[2]); // 3

4. 要素を変更する

角括弧演算子を使用して配列内の要素を変更することもできます (例:
let arr = [1, 2, 3, 4, 5];
arr[0] = 6;
arr[2] = 7;
console.log (arr); // [6, 2, 7, 4, 5]

2番目に、配列メソッド

JavaScript の Array オブジェクトには、配列内の要素を操作したり操作したりするための便利なメソッドが多数用意されています。以下に、一般的に使用されるいくつかの方法を紹介します。

元の配列を変更する方法

メソッド名	機能説明
押す（）	最後に 1 つ以上のデータを追加し、長さを返します
シフト（）	最初のビットを削除し、削除されたデータを返します
シフト解除()	最初に 1 つ以上のデータを追加し、長さを返します
ポップ（）	最後のビットを削除し、削除されたデータを返します
選別（）	ソート（文字ルール）し、結果を返す
スプライス（）	指定された場所を削除し、置き換えて、削除されたデータを返します
逆行する（）	配列を反転して結果を返す

元の配列を変更しない方法

メソッド名	機能説明
加入（）	区切り文字を使用して、配列を文字列に変換して返します。
concat()	配列をマージし、マージされたデータを返す
スライス（）	指定された位置で配列をインターセプトして返します。
toString()	文字列に直接変換して返します
値の()	配列オブジェクトのプリミティブ値を返します。
の指標（）	データのインデックスをクエリして返します。
lastIndexOf()	クエリを反転してデータのインデックスを返します。
forEach()	パラメーターはコールバック関数であり、配列内のすべての項目をスキャンします。コールバック関数は、value、index、self の 3 つのパラメーターを受け取ります。forEach には戻り値がありません。
地図（）	forEach と同じですが、コールバック関数はマップによって返される新しい配列を形成するデータを返します。
フィルター（）	forEach と同じですが、コールバック関数はブール値を返し、真のデータは新しい配列を形成し、フィルターによって返されます。
毎日（）	forEach と同じですが、コールバック関数はブール値を返し、すべてが true であり、すべてが true を返します。
いくつかの（）	forEach と同じですが、コールバック関数はブール値を返しますが、1 つが true である限り、一部は true を返します。
減らす（）	Merge は、forEach と同様に、配列のすべての項目を反復処理し、reduce によって返される最終値を構築します。
findIndex()	配列内の最初の対象となる要素の添え字を見つけて、走査を停止します。

3. メソッドの使用法

1、押す()

Push メソッドは、配列の末尾に 1 つ以上の要素を追加し、配列の新しい長さを返します。

var arr = ['a','b','c'];
var ele = arr.push('d');
// ele结果为: 4;
// arr数组被修改: ['a','b','c','d'];

2、シフト()

Shift メソッドは、配列から最初の要素を削除し、その要素の値を返します。

var arr = ['a','b','c','d'];
var ele = arr.shift();
// ele结果为: a;
// arr数组被修改: ['b''c','d'];

3、シフト解除()

unshift メソッドは、配列の先頭に 1 つ以上の要素を追加し、配列の新しい長さを返します。

var arr = ['a','b','c'];
var ele = arr.unshift('d');
// ele结果为: 4;
// arr数组被修改: ['d','a','b','c'];

4、ポップ()

Pop メソッドは、配列から最後の要素を削除し、その要素の値を返します。配列が空の場合は unknown を返します

var arr = ['a','b','c'];
var ele = arr.unshift('d');
// ele结果为: 4;
// arr数组被修改: ['d','a','b','c'];

5、ソート()

ソート方法は配列内の要素をソートするもので、デフォルトは昇順です。

var arr = [1,5,2,4,3]
arr.sort()
// arr数组被修改: [1,2,3,4,5]

6、スプライス()

splice(start,deleteCount,item1,...,itemx)メソッドは、配列の削除、挿入、置換を実現できます。

start: 変更の開始位置を指定します (0 から数えます)。配列の長さを超える場合は、配列の末尾から内容が追加されます。負の値の場合は、配列の末尾からの番号を示します (-1 から数えて、-n が最後であることを意味します) n 番目の要素など、array.length-n に等しい); 負の数の絶対値が配列の長さより大きい場合、開始位置が 0 番目の位置であることを意味します。

deleteCount: オプション。削除する配列要素の数を表す整数。
deleteCount が開始後の要素の総数より大きい場合、開始後のすべての要素 (開始ビットを含む) が削除されます。
deleteCount が省略されている場合、またはその値が array.length - start 以上の場合 (つまり、start 後のすべての要素の数以上の場合)、start 以降の配列のすべての要素は次のようになります。削除されました。
deleteCount が 0 または負の場合、要素は削除されません。この場合、少なくとも 1 つの新しい要素を追加する必要があります。

item1、...、itemX: オプション。start 位置から始まる、配列に追加する要素。指定しない場合、splice() は配列要素のみを削除します。

var arr = ['a', 'b', 'c', 'd'];
// 从索引 2 的位置开始删除 0 个元素，插入"e"
var insertOnce = arr.splice(2,0,'e');
insertOnce = []
arr = ['a', 'b', 'e', 'c', 'd']
// 从索引3的位置开始删除一个元素
var delOnce = arr.splice(3,1);
// delOnce数组为: ['c']
// arr数组被修改: ['a', 'b', 'e', 'd']

7、リバース()

reverse メソッドは配列項目を反転します。

var arr = [1,2,3,4,5];
arr.reverse();
// arr数组被修改: [5,4,3,2,1]

8、結合()

join() メソッドは、指定された区切り文字に従って配列内のすべての要素を文字列に入れ、その文字列を返します。
パラメータ: join(str); パラメータはオプションで、デフォルトは「,」で、受信文字が区切り文字として使用されます。

var arr = [1,2,3];
console.log(arr.join());         //1,2,3
console.log(arr.join("-"));      //1-2-3

9、concat()

concat() メソッドは、2 つ以上の配列を結合するために使用されます。このメソッドは既存の配列を変更しませんが、新しい配列を返します。

var arr1 = ['a', 'b', 'c', 'd'];
var arr2 = ['e','f']
var arr3 = arr1.concat(arr2);
// arr3数组为: ['a', 'b', 'c', 'd','e','f']

10、スライス()

lice(start, end) メソッドは、元の配列内の指定された開始添え字から終了添え字までの項目で構成される新しい配列を返します。

lice() メソッドは、1 つまたは 2 つのパラメータ、つまり、返される項目の開始位置 (start) と終了位置 (end) を受け入れることができます。

start は、元の配列要素が抽出される開始インデックス (0 から始まる) を抽出するためのオプションです。
このパラメータが負の場合、元の配列の最後から 2 番目の要素から抽出することを意味します。slice(-2) は、元の配列の最後から 2 番目の要素から最後の要素まで (両端を含む)。
start を省略した場合、スライスはインデックス 0 から始まります。
start が元の配列のインデックス範囲外の場合、空の配列が返されます。

end オプション元の配列要素の抽出が終了する、抽出が終了するインデックス (0 から始まります)。スライスは、元の配列内の最初から最後までのインデックスを持つすべての要素を抽出します (開始は含まれますが、終了は含まれません)。
lice(1,4) は、元の配列の 2 番目の要素から 4 番目の要素までのすべての要素 (インデックス 1、2、3 を持つ要素) を抽出します。
このパラメーターが負の数の場合、元の配列の最後のいくつかの要素で抽出が終了することを意味します。slide(-2,-1) は、元の配列の最後から 2 番目の要素を抽出することを示します (最後の要素を除く、つまり最後から 2 番目の要素のみ)。
end を省略した場合、元の配列の末尾までスライスが抽出されます。
end が配列の長さより大きい場合、スライスは元の配列の末尾まで抽出されます。

var arr = ['a','b','c','d'];
var res = arr.slice(0,2);
// arr数组未被修改: ['a', 'b', 'c', 'd'];
// res数组为: ['a', 'b'];

11、toString()

toString() は文字列に変換されます

var arr = [1,2,3];
console.log(arr.toString());     //1,2,3
console.log(arr);                //[1,2,3]---原数组未改变

12、()の値

valueOf() メソッドは、指定されたオブジェクトの元の値を返すために使用されます。オブジェクトに元の値がない場合は、オブジェクト自体が返されます。通常は、コード内で明示的にではなく、JavaScript によって内部的に呼び出されます。valueOf を使用すると、NULL ポインター例外を効果的に防ぐことができます。
さまざまなタイプのオブジェクトの valueOf() メソッドの戻り値:

配列: 配列オブジェクト自体を返します。
ブール値: ブール値を返します。
日付: 保存された時間は、UTC 1970 年 1 月 1 日の午前 0 時からのミリ秒数です。
関数: 関数自体を返します。
数値: 数値を返します。
オブジェクト: オブジェクト自体を返します。これがデフォルトです。
文字列: 文字列値を返します。
Math オブジェクトと Error オブジェクトには valueOf メソッドがありません。

// Array：返回数组对象本身
var array = ["ABC", true, 12, -5];
console.log(array.valueOf() === array);   // true

// Date：当前时间距1970年1月1日午夜的毫秒数
// Sun Aug 18 2013 23:11:59 GMT+0800 (中国标准时间)
var date = new Date(2013, 7, 18, 23, 11, 59, 230); 
console.log(date.valueOf());   // 1376838719230

// Number：返回数字值
var num =  15.26540; // 15.2654
num.valueOf() // 15.2654
console.log(num.valueOf() === num);   // true

// 布尔：返回布尔值true或false
var bool = true;
console.log(bool.valueOf() === bool);   // true

// new一个Boolean对象
var newBool = new Boolean(true); // Boolean {true}
newBool.valueOf() // true
// valueOf()返回的是true，两者的值相等
console.log(newBool.valueOf() == newBool);   // true
// 但是不全等，两者类型不相等，前者是boolean类型，后者是object类型
console.log(newBool.valueOf() === newBool);   // false

// Function：返回函数本身
function foo(){
    
    }
console.log( foo.valueOf() === foo );   // true

var foo2 =  new Function("x", "y", "return x + y;");
console.log( foo2.valueOf() === foo2); // true

// Object：返回对象本身
var obj = {
    
    name: "张三", age: 18};
console.log( obj.valueOf() === obj );   // true

// String：返回字符串值
var str = "http://www.xyz.com";
console.log( str.valueOf() === str );   // true

// new一个字符串对象
// String {"http://www.xyz.com"}
var str2 = new String("http://www.xyz.com"); 
str2.valueOf() // "http://www.xyz.com"
// 两者的值相等，但不全等，因为类型不同，前者为string类型，后者为object类型
console.log( str2.valueOf() === str2 );   // false

13、indexOf()

IndexOf(value,index) メソッドは、指定されたデータに従って配列内の位置を左から右にクエリし、指定されたデータが存在しない場合は -1 を返します。このメソッドはクエリメソッドであり、配列は変更されません。

value: 必須。取得する文字列値を指定します。オプションの整数パラメータ。
Index: 文字列内の検索を開始する位置を指定します。有効な値は 0 ～ stringObject.length - 1 です。このパラメータを省略した場合、文字列の最初の文字から検索が開始されます。

let arr = [1,2,3,4,5,4,3,2,1];
console.log(arr.indexOf(1)); // 没有填fromIndex所以默认从索引为0的位置开始往后查找
// 0
console.log(arr.indexOf(1,1)); // 表示从索引为1的位置开始往后查找
// 8

14、lastIndexOf()

lastIndexOf(value, start) メソッドは、指定されたデータに従って配列内の位置を右から左にクエリし、指定されたデータが存在しない場合は -1 を返します。

value: クエリ対象のデータ;
start: オプション、クエリの開始位置を示します (start が負の数の場合、配列の最後から数えます)。値が見つからない場合、メソッドは -1 を返します。

var arr = ["h","e","l","l","o"];
console.log(arr.lastIndexOf("l"));        //3
console.log(arr.lastIndexOf("l",3));      //3
console.log(arr.lastIndexOf("l",1));      //-1
console.log(arr.lastIndexOf("l",-3));     //2
console.log(arr.lastIndexOf("l",-4));     //-1

15、それぞれ()

forEach() メソッドは配列をループし、配列内の各項目に対して指定された関数を実行します。このメソッドには戻り値がありません。

パラメータ: すべては関数型であり、デフォルトで渡されるパラメータがあります。パラメータは次のとおりです: 走査する配列の内容、対応する配列のインデックス、および配列自体。

var arr = [1, 2, 3, 4, 5];
arr.forEach((item, index, a)=>{
    
    
   console.log(item + '|' + index + '|' + (a === arr));
});
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

16、地図()

map() メソッドは、配列内の各項目に対して指定された関数を実行し、各関数呼び出しの結果の配列を返します。

let arr = [10, 30, 50, 60, 120, 230, 340, 450]
let newArr = arr.map(item => {
    
    
    return item * 2
})
console.log(newArr); //[20, 60, 100, 120, 240, 460, 680, 900]
console.log(arr); //[10, 30, 50, 60, 120, 230, 340, 450]

17、フィルター()

filter() メソッドはフィルター処理を行うもので、配列内の各項目が指定された関数を実行し、フィルター条件を満たす配列を返します。

//过滤出索引为3的倍数 或者 值大于8的元素
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter((item, index) => {
    
     
   return index % 3 === 0 || item >= 8; 
}); 
console.log(arr2); //[1, 4, 7, 8, 9, 10]

18、毎()

Every() メソッドは配列内の各項目が条件を満たすかどうかを判定し、すべての項目が条件を満たした場合にのみ true を返します。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every((x)=> {
    
    
   return x < 10;
}); 
console.log(arr2); //true
var arr3 = arr.every((x) => {
    
    
   return x < 3;
}); 
console.log(arr3); // false

19、ある()

some()メソッドは配列内に条件を満たす項目があるかどうかを判定するもので、条件を満たす項目があればtrueを返します。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some((x)=> {
    
    
   return x < 3;
}); 
console.log(arr2); //true
var arr3 = arr.some((x)=> {
    
    
   return x < 1;
}); 
console.log(arr3); // false

20、リデュース()

reduce() メソッドは、配列の最初の項目から開始し、最後まで 1 つずつ移動し、配列のすべての項目を反復して、最終的な戻り値を構築します。
注:reduce() メソッドは、値のない配列要素に対しては実行されません。
構文：array.reduce(function(total, currentValue, currentIndex, arr),initialValue)
パラメータ値：
ここに画像の説明を挿入

// 作用:对数组中所有的内容进行汇总   要传至少两个值
let arr = [10, 30, 50, 60, 120, 230, 340, 450]
let newArr = arr.reduce((pre, n) => {
    
    
    return pre + n
}, 0)
console.log(newArr);
// 计算
var  arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和，10
console.log( mul ); //求乘积，24
// 去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    
    
   if(!pre.includes(cur)){
    
    
     return pre.concat(cur)
   }else{
    
    
     return pre
   }
},[])
console.log(newArr);// [1, 2, 3, 4]
// 将二维数组转成一维
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    
    
   return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

21、findIndex()

findIndex() メソッドは、提供されたテスト関数を満たす配列内の最初の要素のインデックスを返します。そうでない場合は、-1 を返します。

let arr = [10, 2, 9, 17, 22];
let index = arr.findIndex((item) => item > 13)
console.log(index);  // 3