連続出力JSエピソード10

前書き

配列は参照データ型のオブジェクトデータ型

配列を作成するには、ヒープメモリをオープンし、配列オブジェクトのキーと値のペアを格納します。

0:10
1:20
2:30
length : 3

1）配列に見られる各項目は、属性値は、デフォルトの属性名は、ゼロからのインクリメントの数は、数字は、"インデックス "の名前の場所に代わって、属性の数は、項目の現在の数を表します;配列は、インデックスの数は、ゼロからのインクリメントの構造のインデックスです！

2) デフォルトで length 属性があり、これは配列の長さを表します。

3）配列内の各項目は、任意のデータ型、実際のプロジェクトは、サーバーからデータを取得することができます - 一般的にオブジェクトまたは配列であり、階層の構造は、一般的にマルチレベル構造であるため、効果的に解析し、現在の非常に重要な知識のフロントエンドの開発を処理するためのデータの取得のニーズに応じて、配列/オブジェクトに関連する操作を学びます。反応開発は、常にビューのレンダリングを制御するためにデータを操作しており、データの操作はまた、オブジェクトと配列に偏っている; ...

 ==== 一次元配列 (- -レベル構造)
let arr = [];
let arr = [10  'AA', true, null, undefined, Symbo1(1)];
====2レベル以上の構造を持つ2次元配列
letarr=[{
x: 100
} {
y: 200 .
}]; 

配列の学習

• 基本をマスター
• 配列の一般的な組み込みメソッドの知識
• 配列のソートとデチェックのマスター

配列の反復処理

配列の反復

for (let i = 0; i < arr.length; i++) {
let item = arr[i];
console. log(現在の走査は、インデックス: ${i}値は: ${item}この!);
}

通常のオブジェクトとして、配列内のすべてのキーと値のペアをFOR IN

for (let key in arr) {
console.1og(key, arr[key]);
}

また、whileループやforループ、組み込みの反復メソッドを使って、配列の各項目を反復処理することもできます。

配列の一般的な組み込みメソッド

1.配列の追加、削除、変更について
+ push .
+pop
+ shift
+ unshift
+ splice
2.配列のルックアップとスプライシングについて
+ slice
+ concat
3.文字列に変換する
+ toString
+ join
4.の項目が含まれていることを確認する。
+ indexOf / lastIndex
+ includes
5.のソートについては
+ reverse
+ sort
6.配列を反復処理するメソッド
+forEach
+map

覚え方

1.方法論の意義と役割

2.パラメーター

3.戻り値

4.元の配列が変わったかどうか

配列を追加、削除、変更する5つの方法

let arr=[]

1

push: 配列の末尾に要素を追加する
@params:
パラメータの数は固定ではなく、型も固定ではないが、配列の末尾に順次追加される。
@return:
[NUMBER ]加算後の配列の長さ
生データの変更
オブジェクト・ベースのキーと値のペア操作: arr[arr. length]=xxx
let result = arr. push(40  ' ');
console. log(result); //=>5

2

pop:
配列の最後の項目を削除する
@params: 
@return:
削除された項目
生の配列の変更
arr.length--
最後の項目を削除する
let result = arr.pop();
console.1og(result,arr);

3

unshift: 配列の先頭に新しいコンテンツを追加する
@params:
変数番号、変数型、すべて順次追加される
@return:
[NUMBER ]加算後の配列の長さ
生データの変更
let result = arr. unshift(0, ' ');

プッシュとほぼ同じですが、最初に

4

shift: 配列の最初の項目を削除する
@params: 
@return:
削除された項目
生の配列の変更
let result = arr. shift();
console.1og(result, arr);

5

splice:配列の追加、削除、変更
arr.splice(n,m);配列のインデックスnから始まるm個の要素を削除する。
結果は新しい配列として削除を格納し、mがなければ最後まで削除される
元の配列を変更する
let arr = [  70];
let result = arr.splice(2, 3);
console.1og(result, arr); //=>result=[] arr=[,70]

空の配列の操作

let result = arr. splice(0); 
//=>インデックス・ゼロから始めて、末尾まで削除する（元の配列を空にする。
各項目は新しい配列RESULTに格納される。 )
console. log(result arr); 
//=>resu1t=[, , 70] arr=[]

どこからいくつの要素が削除され、その前にどの要素が追加されるか

let arr = [  70];
let result = arr.splice(2, 0 300);
console.1og(result, arr);

 :配列の末尾にある項目を削除するには、いくつかの選択肢がある。
let arr = [ 70];
arr. length--; .
arr.pop(); //=>結果を返す70
arr.splice(arr. length - 1); 
//=>最後のエントリーから始めて、最後まで削除する。-結果が返される。[70]
delete arr[arr.length - 1];
//を置き換えることはできないことを覚えておいてほしい。length-- 
//=>削除はできるが、LENGTHの長さは変わらない。
// ...

最後のメソッドの結果、LENGTHの長さは変更されていません。

 ;配列の最後に'huh'を追加する。
let arr = [ 70];
arr. push(' ');
arr[arr.length] = ' ';
arr.splice(arr.length-1, 0 ' ');
//これは最後尾に追加される
arr.splice(arr.length, 0 ' ');

配列のルックアップとステッチ

slice(n,m)：クエリの配列の実装は、インデックスnから始まり、インデックスmに、元の配列が変更されない方法に戻るには、新しい配列の内容を検索します。

let arr = [,  70];
let result = arr.slice(2, 5);
console. log(result, arr); 
//=>resu1t=[] arr=[ ,70]
console. log(arr.slice(2)); 
//=>[, 60, 70]第2引数は配列の終端を見つけるために残してある。
console. log(arr.slice(0)); 
//=>[, , 70]

これは、元の配列の各項目を見つけるために、新しい配列に戻るには、"配列のクローン "の実装として理解することができます：新しい配列と元の配列は2つの異なる配列ですが、ヒープの内容は同じですが、これは浅いクローンです！

concat: 配列スプライシングの実装。複数の配列を最終的に1つの配列にスプライシングします。

let arr1 = [];
let arr2 = [];
let arr = arr1.concat(' '  arr2);
console.log(arr); //=>[ " "  ]

文字列に変換

arr = [10, 20, 30, 40, 50, 60, 70]；

配列を文字列に変換します。

1. 配列の各項目をカンマ区切りの文字列に分割します。

2. join([char]): 区切り文字を指定します。

元の配列が変更されることはありません。

console. log(arr . toString()); 
//=>' ,,70'
console. log(arr.join()); //=> toString
console. log(arr . join('+')); 
//=>'++70'

引き分ける

この文字列をJS式の実行に変えることができれば、配列の各項目の合計を表すことになる。=>eval
let str = arr.join('+');//JS 
let total = eval(str);
console.log(total);

以前は合計を得るためにループしていたものが、今では合計で行われます。

アイテムが含まれているか確認

配列中の指定された項目のインデックスを取得します。

indexOf([item]): 配列内で現在のアイテムが最初に出現するインデックス。

lastIndex0f([item]) :配列内で現在のアイテムが最後に出現したインデクスを取得します。

let arr = [, , 30];
console. log( arr. index0f(20)); //=>1
console. log(arr . lastIndex0f(20)); //=>4
console. log(arr . index0f(40)); //=>-1 配列にこの項目が含まれていない場合、結果は次のようになる。-1
// =>この機能に基づいて、配列にアイテムが含まれているかどうかを検証する
if (arr. index0f(40) > -1) {
//配列には次の項目が含まれる。
}

第二の方法

includes:配列にこの項目が含まれているかどうかを検証し、TRUE/FALSEを返します。

console. log(arr . includes(40));

ソートについて

reverse: 元の配列を逆変換します。

letarr=[4,3,2,5,1];
let result = arr.reverse();
console.log(result, arr);|

新しい配列ではなく、変更された元の配列で、ヒープメモリは同じです。

ソート;ルールに従って元の配列を並べ替えると、元の配列が変更されます SORTは、カスタムソートのルールに基づいて、コールバック関数を渡すサポートしています。

arr.sort(); //=>デフォルトで小さいものから大きいものへソートする
console.1og(arr); //=>[1,2,3,4,5]
let arr = [0, , 9];
arr.sort(); //=>S0RTデフォルトでは、ソートは各項目のサイズではなく、各項目の各文字で行われる。
のコードは比較のソートを行うため、SORTを直接書くことになるが、これは2つ以上の場所の内容をソートすることを扱えない。
console.1og(arr); //=>[, , 9]

文字コード順

では、どのように複数桁のソートを実装するのでしょうか？

let arr = [0, , 9];
arr . sort(function (a, b) {
// => RETURN A-B B-A 
return b - a;
});
console.1og(arr); 

プリンタブル

[2, 4データ構造を設定する */ /* データ構造を設定する */ /* データ構造を設定する */ /* データ構造を設定する */ /* データ構造を設定する */ /* データ構造を設定する 110]

配列の反復

配列でよく使われる反復メソッド

forEach([関数]): 配列の各項目を走査し、関数が実行されるたびに、この項目の現在の走査と、関数内の対応するインデックスを取得します。

その他の反復法: フィルタを見つけるごとにいくつか減らす ...

let arr =[,40,50];
arr.forEach(function () {
 console.log('ok');
})

サイクルが5回であることを示すOKを5回出力

arr.forEach(function (item, index){
 //この関数は5回ループする
 // item: この項目の現在の走査は
 // index: 現在の項目のインデックス
console. log(item, index);
}); 

フォーマットとループの問題を解決

合計の配列console. log(eval(arr . join('+')));配列の中に有効でない数値がある場合、最終結果は次のようになる。NaN
let total = 0;
arr. forEach(function (item  index) {
item = Number(item);
if (isNaN(item) === false) {
total += item;
 }
});
console. log(total);

map: forEach は戻り値をサポートしていません。

MAPは戻り値をサポートしていますが、元の配列を変更することはありません。

let arr = [40.50];
let result = arr .map(function (item, index){
 //配列には5つの項目があり、この関数は5回ループされる。
 // item: 現在のループは- - 
 // index; 現在の値に対応するインデックス
 //この関数で返されるものが何であれ、配列の現在の項目が何であれ、置き換えられる。
 return '@@' ;
});
console.log(result); 

return 'item*10' ;

配列の複製を削除する12の方法

二重のforループ

オプション1：順番に各項目の配列を繰り返し、現在の項目と比較のための各項目のその "背面 "を取り、彼と同じの顔もある場合、それは、これは、項目の重複の背面の重複を削除することができることを意味します。

外側のループは、項目を取り出してその後ろの項目と比較するたびに、i < arr.length-1であれば、最後の項目は再度取り出す必要がないことを制御します。

let arr =[1,2,3,2,3,4,5,2,3,4,2,1,3,2,4];
for(leti=0;i<arr.length-1;i++){
 //比較したい項目を取り出すたびに、それに続く項目を順番に取り出す。
 let item = arr[i];
 //内部ループは、現在の項目の後にある各項目との比較を1つずつ制御する。
 //let j= i+1現在の項目の次の項目から1つずつ比較していけばいい。
 for (let j= i + 1; j < arr.length; j++)| {
 if (item === arr[j]) {
 //現在の項目が次の項目のいずれかと等しい場合、元の配列から次の項目を削除する。
 arr.splice(j, 1);
 }
}
console. log(arr);

でも！

なぜですか？

arr.splice0 が削除された場合の問題。

1.アレイ崩壊問題

2.パフォーマンスは、元の配列に影響され、一度項目を削除するには、スプライスに基づいて、インデックス後のすべての項目が1ビット進むようにします。

ループによって引き起こされる配列の崩壊を防ぐために、削除の完了後、ループのインデックスを1つだけでなく、ループ内の現在のインデックスから - 回を蓄積することはできません項目をスキップしました。

第1幕 j--;を追加。

for(letj=i+1;j<arr.length;j++){
if (item === arr[j]) {
 arr.splice(j, 1);
 j--; //=>  j--, j++これは、何も足したり引いたりしないことと同じであり、次の比較は現在のインデックスから開始されるため、配列が崩れるのを防ぐことができる。
 }
 }
}
console.1og(arr); .

方法2 現在のエントリーと最後のエントリーの置き換え

 for(leti=0;i<arr.length-1;i++){
 let item = arr[i];
 for(letj=i+1;j<arr.length;j++){
 if (item === arr[j]) {
 //現在の項目を最後の項目に置き換える
 arr[j] = arr[arr.1ength-1];
 //最後の項目を削除する
 arr.length--;
 //次のラウンドもこれと比較する
 j--;
 }
 }
}
console.log(arr);

オブジェクトのキーと値のペアのアプローチ

オプション2：オブジェクトのキーと値のペアのアプローチ

1.ループが1つしかないので、パフォーマンスが非常に良い

2.配列の中にオブジェクトがあると問題があります。

3.配列の中に数字10と文字列'10'がある場合、重複しているとみなされます。配列の中に未定義の値があると、問題が発生する可能性があります。

letarr=[1,2,3,1,1,4,2,3];
let obj = {};
for (let i =  ; i < arr.length; i++) {
 //各ループの現在の項目をオブジェクトのプロパティ名と値として格納する。
 let item = arr[i];
 if (obj[item] !== undefined) {
 // は、オブジェクトがこのプロパティを持っていて、現在の値が重複していることを証明しているので、この現在の値を削除する必要がある。
 arr[i] = arr[arr.1ength - 1];
 arr.length--; .
 i--;
 continue;
 }
 obj[item] = item;
}
console. log(arr);

ES6 set

ES6では、重複排除をすぐに実行できるわけではありませんが、いくつかの方法は提供されています。

/* データ構造の設定 */

let obj={
 y: 200
};
let arr=[obj,1,2,3,1,obj,1,4,2,3,'3',{
 x: 100
} {
 x: 100
}];
arr = Array. from(new Set(arr));
console. log(arr);|

はい、以上です！