JavaScript では、配列は順序付けられたデータのコレクションであり、大量のデータを格納するために使用されます。複数のデータを一度に格納でき、配列の長さを動的に調整できます。配列を使用すると、プログラム コードを大幅に短縮および簡素化できるため、アプリケーションの効率が向上します。
このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
JavaScript 配列 (Array) は、順序付けされたデータのコレクションです。配列内の各メンバーは要素 (Element) と呼ばれ、各要素の名前 (キー) は配列の添字 (インデックス) と呼ばれます。配列の長さは柔軟で、読み取りおよび書き込みが可能です。つまり、配列の長さは動的に調整できます。
配列の役割: 大量のデータを保存するため、複数のデータを一度に保存できます。配列を使用すると、プログラム コードを大幅に短縮および簡素化できるため、アプリケーションの効率が向上します。
JavaScript では、Array オブジェクトを使用して配列を定義できます。さらに、Array オブジェクトは配列に関連するさまざまなプロパティとメソッドも提供します。
配列の定義: Array 略称: arr
Array は JS のデータ コンテナーです。参照タイプの 1 つです。
その機能は非常に単純で、複数のデータを保持するために使用され、配列の長さは動的に調整できます。
#配列の作成方法:
- ##リテラル
- ##コンストラクター
- リテラル構文:
var 配列名 = [メンバー 1, メンバー 2, メンバー 3, ...];var array name = new Array(member 1, member 2, member 3, ...) (少なくとも 2 つ以上の配列要素が必要です;)配列要素はカンマで区切られます。
コンストラクター構文:
小さなバグ: パラメータの場合パラメータが 1 つしかない場合パラメータの型が数値の場合、配列の長さとみなされます ;var arr = new Arry (5 ); console.log(arr); 出力結果は次のとおりです:
var array name = new Array();
var arr = new Array ();//新規作成空の配列
配列 0、A は大文字にする必要があることに注意してください
配列は 2 つの部分で構成されます:
1: インデックス (また、サブスクリプトと呼ばれます)、サブスクリプトは 0 から始まります;
2. メンバー (配列要素):
メンバーには制限がなく、任意の値を使用できます。データのタイプ;文字列、数値、ブール値、未定義、null、配列のいずれかにすることができます。
##配列要素の取得:
配列の値: 配列名 [添字]; 添字は 0 から始まります。
/ / 形式: 配列名 [添字] 添字はインデックスとも呼ばれます /
/ 機能: の添字に対応する値を取得します配列。添字が存在しない場合は、unknown が返されます。特殊なケース: インデックスを通じて複数のメンバーを設定すると、途中で中断が発生します。 オン、空、禁止!
#var arr = ['赤',, '緑', '青'];
console.log(arr[0]); // red console.log(
arr[2]) ; // blue コンソール。 log(
arr[3]); // この配列の添字の最大値は 2 です。そのような配列要素がないため、出力結果は未定義です ;
インデックスによるメンバーの追加/メンバーの変更:// 构造函数定义一个数组 var arr = new Array('张三', '李四', '王五', '赵六') // 添加成员 arr[4] = '龚七' console.log(arr) //张三', '李四', '王五', '赵六','龚七' // 修改成员 arr[0] = '王老五' console.log(arr) //'王老五', '李四', '王五', '赵六'
var arr = ["a", "b"];arr[5] = "good";
console.log (arr); //
遍历数组:
数组的属性length,就是数组成员的个数;
数组名.length
var arr = [1, 2, 3, 4, 5, 6, 7, 8];
length表示数组的长度 它会跟着数组实时发生变化(动态监测数组元素的个数)
console.log(arr.length) //数组成员的个数: 8
length属性可读可写 它也会影响数组的成员个数 但是我们一般不会主动修改该属性;
var arr = [1, 2, 3, 4, 5, 6, 7, 8];
arr.length = 3;
console.log(arr.length);
console.log(arr);
数组元素求和,求平均值:
求数组元素的最大值:
数组元素转字符串,并分割开: 推荐: 数组名.join("连接符")
求数组中大于10的成员,并挑选出来:
数组元素的倒叙:
数组元素的增删改查;
unshift 头增 数组名.unshift("value")
作用:头部增加 (可以增加多个)
参数:添加的成员,可以是多个;
返回值:数组的新长度
var arr = ['张三', '李四', '王五', '赵六']; var result = arr.unshift('王二',刘一) console.log(result); // 6 console.log(arr); // ["王二", "刘一","张三", "李四", "王五", "赵六"]
push 尾增 数组名.push("value")
作用:尾部增加 (可以增加多个)
参数:添加的成员,可以是多个;
返回值:数组的新长度
var arr = ['张三', '李四', '王五', '赵六']; var result = arr.push('王二',"刘一") console.log(result); // 6 console.log(arr); // ["张三", "李四", "王五", "赵六", "王二","刘一"]
shift 头删 数组名.shift() 只删除第一个,()括号内为空;
作用:删除数组的头部第一项
参数:无;
返回值:被删除的那一项
var arr = ['张三', '李四', '王五', '赵六']; var result = arr.shift() console.log(result); // 张三 console.log(arr) // ['李四', '王五', '赵六'];
pop 尾删 数组名.pop() 只删除最后一个,()括号内为空;
作用:删除数组最后一项;
参数:无;
返回值:被删除的那一项
var arr = ['张三', '李四', '王五', '赵六']; var result = arr.pop(); console.log(result); // 赵六 console.log(arr) //["张三", "李四", "王五"]
concat 拼接,合并; 数组名.concat("value")
作用:合并
参数:任意个、任意类型
返回值:一个新的合并后的数组
特点:没有改变原来的数组
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var newArr = arr1.concat(arr2, "good", true, 1);
console.log(arr1); // 1,2,3
console.log(arr2); //4,5,6
console.log(newArr); //1, 2, 3, 4, 5, 6, "good", true, 1
slice 截取 数组名.slice(start,end) 参数是下标; 包括开头,不包括结尾;
slice的本质是复制(浅复制)
作用:截取
参数:
没有参数 截取全部
一个参数 从指定位置截取到最后(包括最后)
两个参数 从指定开始位置截取到指定的结束位置 1. 这两个参数都是下标 2. 开始位置(包含) 3. 结束位置(不包含) 4. 第二个参数要比第一个大;
参数可以是负数,负数是从后面开始,最后一个是-1;
特点:不改变原数组
没有参数 (截取全部的)
var arr = ['张三', '李四', '王五', '赵六'];
var arr1 = arr.slice();
console.log(arr1) // ["张三", "李四", "王五", "赵六"]
一个参数 (从指定位置截取到最后(包括最后))
var arr = ['张三', '李四', '王五', '赵六'];
var arr2 = arr.slice(1);
console.log(arr2) // ["李四", "王五", "赵六"]
两个参数 (包括开始,不包括结尾)
var arr = ['张三', '李四', '王五', '赵六'];
var arr3 = arr.slice(1, 3);
console.log(arr3) // ["李四", "王五"]参数为负数; (还是第二个参数要比第一个大)
var arr = ['张三', '李四', '王五', '赵六','刘一'];
var arr3 = arr.slice(-3, -1);
console.log(arr3) // ["王五","赵六"]PS: 如果参数是负数 那么表示从后往前数 最后一个值是-1
splice 操作数组 数组名.splice(参数1,参数2,参数3)
作用:用于操作数组成员
参数:
- 参数1:操作开始位置; (从第几个索引号后开始, 可以看成直接从顺序的第几个后开始的)
- 参数2:删除的成员个数; (为0,是添加)
- 参数3:从第三个参数开始是添加的成员;
返回值:被删除的那些成员组成的数组
特点:会改变原数组
// 删除 var arr = ['张三', '李四', '王五', '赵六']; var result = arr.splice(1, 2) console.log(result); // ["李四", "王五"] console.log(arr); // ["张三", "赵六"] ---------------------------------------------------------------------- // 插入 第二个参数为0; var arr = ['张三', '李四', '王五', '赵六']; var result = arr.splice(2, 0, '小绵羊'); console.log(result); // [] console.log(arr) // ["张三", "李四", "小绵羊", "王五", "赵六"] ------------------------------------------------------------------------ // 替换 第一个参数从哪里开始, 第二个参数删除几个,第三个参数...添加的新成员; var arr =['张三', '李四', '王五', '赵六']; var result = arr.splice(2, 1, '小绵羊', '大绵羊'); console.log(result); // ["王五"] console.log(arr) // ["张三", "李四", "小绵羊", "大绵羊","赵六"]-----------------------------------------------------------------------------------------------
如果只有一个参数 则第二个参数默认为删除所有;
var arr = ['张三', '李四', '王五', '赵六'];
var result = arr.splice(2);
console.log(result); // ["王五","赵六"]
console.log(arr) // ["张三", "李四"]
indexOf 数组名.indexOf("数组元素")
作用: 查找
参数:被查找的成员;
返回值:下标(索引); 若有该成员返回该索引; 若没有就返回-1
var arr = ["a", "b", "c", "d", "e", "f"];
var idx = arr.indexOf("d"); //3
var idx = arr.indexOf("aa"); //-1
console.log(idx);
join 数组名.join("连接符")
作用:转字符串
返回值:数组元素变成字符串类型,链接符相连;
参数: 拼接符号(可选)
数组名.join() 不写内容,默认是逗号, ;
数组名.join(''), '' 没有空格隔开, 数组直接相连;
数组名.join(' ') 空格隔开, 空格
数组名.join('*')
var arr =['张三', '李四', '王五', '赵六']; var str = arr.join(); console.log(str); // 张三,李四,王五,赵六 var str1 = arr.join('+'); console.log(str1); // 张三+李四+王五+赵六 var str2 = arr.join('❤'); console.log(str2); // 张三❤李四❤王五❤赵六//返回值是数组元素变成字符串,并连接符相连;
reverse 数组倒叙 数组名.reverse() 括号内不跟参数;
作用:将数组的成员倒序
返回值:倒叙的原数组
参数:无
特点:会改变原数组
var arr =['张三', '李四', '王五', '赵六']; console.log(arr) // ["张三", "李四", "王五", "赵六"] var arr1 = arr.reverse(); console.log(arr1) // ["赵六", "王五", "李四", "张三"] console.log(arr === arr1) // trueconsole.log(arr) // ["赵六", "王五", "李四", "张三"] //会改变原数组;
其他方法:
sort 排序 数组名.sort(函数) 升序或降序
作用:将数组成员按照指定规则排序
返回值:排序后原数组
参数:规则函数; 不跟参数(//不跟参数,会先转为字符串,然后按照ascii码排序首字母排;)
特点:会改变原数组
var arr = [89, 96, 45, 66, 78, 3, 100, 1];
arr.sort(function(a, b) {
return a - b; // 升序
});
console.log(arr); // [1, 3, 45, 66, 78, 89, 96, 100];
-------------------------------------------------------------------------
var arr = [89, 96, 45, 66, 78, 3, 100, 1];
arr.sort(function(a, b) {
return b - a; // 降序
});
console.log(arr); // [100, 96, 89, 78, 66, 45, 3, 1];
--------------------------------------------------------------
var arr = [89, 96, 45, 66, 78, 3, 100, 1];
arr.sort(); //不跟参数,会先转为字符串,然后按照ascii码排序首字母排;
console.log(arr); //[1, 100, 3, 45, 66, 78, 89, 96]
交换两个变量的值
var a = 4; var b = 5; // 交换两个变量的值要借助第三个变量 var c = b; b = a; a = c; console.log(a); // 5 console.log(b); // 4
数组的冒泡排序
for (var j = 0; j
for (var i = 0; i
if (arr[i] > arr[i + 1]) {
var temp = arr[i];
arr[i] = arr[i + 1];
arr[i + 1] = temp;
}
}
}----------------------------------------------------------
要排序 就要比较大小
最初に最初の数値と 2 番目の数値を比較します。最初の数値の方が大きい場合は、位置を交換します。比較後、配列の 2 番目の位置の数値は最初の数値より大きくなければなりません。
次に、最初の数値を取得します。 2 番目と 3 番目の数値を比較した後、配列内の 3 番目の数値が 2 番目の位置の数値より大きくなければなりません。
というように、1 回の比較の後、最終的な数値が得られる必要があります。
2 巡目は最初から比較を続けます。2 巡目以降、2 番目に大きい数値が決定されます。3 巡目...
最後まで。// / / 外側のループは内側のループの実行を決定します 回数
for (var j = 0; j
(var i = 0; i
// 前部が大きく後部が小さいかどうかを判断し、交換
if (arr[i ] > arr[i 1]) {
var temp = arr[i];
arr[i] = arr[ i 1];
arr[i 1]=temp;
##2 次元配列 #配列の各メンバーも配列であり、これを 2 次元配列と呼びます。
1 次元配列: [1, 2, 3, 4, 5, 6] 2 次元配列:
[
[1] 、2、3、4、5、6]、
#[1、2、3、4、5、6]、#[1、2、3、4、5、6] ]
...
]
配列をクリアする方法:
// 方法 1 推奨
arr = [ ];
// 方法 2
arr.length = 0; // メソッド 3 arr.splice(0, arr.length);
[推奨学習: JavaScript 上級チュートリアル]
以上がJavaScript配列の用途は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Reactは、動的でインタラクティブなユーザーインターフェイスを構築するための選択ツールです。 1)コンポーネント化とJSXは、UIを分割して簡単に再利用します。 2)国家管理は、UIの更新をトリガーするためにUseStateフックを通じて実装されます。 3)イベント処理メカニズムは、ユーザーの相互作用に応答し、ユーザーエクスペリエンスを向上させます。

Reactは、ユーザーインターフェイスを構築するためのフロントエンドフレームワークです。バックエンドフレームワークは、サーバー側のアプリケーションを構築するために使用されます。 Reactはコンポーネントで効率的なUIアップデートを提供し、バックエンドフレームワークは完全なバックエンドサービスソリューションを提供します。テクノロジースタックを選択するときは、プロジェクトの要件、チームのスキル、およびスケーラビリティを考慮する必要があります。

HTMLとReactの関係は、フロントエンド開発の中核であり、最新のWebアプリケーションのユーザーインターフェイスを共同で構築します。 1)HTMLはコンテンツ構造とセマンティクスを定義し、Reactはコンポーネントを介して動的インターフェイスを構築します。 2)ReactコンポーネントはJSX構文を使用してHTMLを埋め込み、インテリジェントなレンダリングを実現します。 3)コンポーネントライフサイクルは、状態および属性に従ってHTMLレンダリングと動的に更新を管理します。 4)コンポーネントを使用して、HTML構造を最適化し、保守性を向上させます。 5)パフォーマンスの最適化には、不必要なレンダリングの回避、重要な属性の使用、およびコンポーネントの単一の責任を維持することが含まれます。

Reactは、インタラクティブなフロントエンドエクスペリエンスを構築するための好ましいツールです。 1)Reactは、コンポーネント化と仮想DOMを通じてUIの開発を簡素化します。 2)コンポーネントは、関数コンポーネントとクラスコンポーネントに分割されます。関数コンポーネントはよりシンプルで、クラスコンポーネントはより多くのライフサイクル方法を提供します。 3)Reactの作業原則は、パフォーマンスを改善するために仮想DOMおよび調整アルゴリズムに依存しています。 4)国家管理は、usestateまたはthis.stateを使用し、ComponentDidmountなどのライフサイクルメソッドが特定のロジックに使用されます。 5)基本的な使用には、コンポーネントの作成と状態の管理が含まれ、高度な使用にはカスタムフックとパフォーマンスの最適化が含まれます。 6)一般的なエラーには、不適切なステータスの更新とパフォーマンスの問題が含まれます。

Reactは、コアコンポーネントと状態管理を備えたユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1)コンポーネントと州の管理を通じてUIの開発を簡素化します。 2)作業原則には和解とレンダリングが含まれ、React.memoとusememoを通じて最適化を実装できます。 3)基本的な使用法は、コンポーネントを作成およびレンダリングすることであり、高度な使用法にはフックとコンテキストアピの使用が含まれます。 4)不適切なステータスの更新などの一般的なエラーでは、ReactDevtoolsを使用してデバッグできます。 5)パフォーマンスの最適化には、React.MEMO、仮想化リスト、コードスプリッティの使用が含まれ、コードを読みやすく保守可能に保つことがベストプラクティスです。

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1)JSXはHTMLを埋め込み、開発をより直感的にします。 2)仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3)保守性を向上させるコンポーネントベースの管理UI。 4)国家管理とイベント処理は、インタラクティブ性を高めます。

Reactコンポーネントは、機能またはクラスによって定義され、UIロジックのカプセル化、およびプロップを介して入力データを受け入れることができます。 1)コンポーネントの定義:関数またはクラスを使用して、反応要素を返します。 2)レンダリングコンポーネント:Reactコールレンダリングメソッドまたは機能コンポーネントを実行します。 3)マルチプレックスコンポーネント:データをプロップに渡して、複雑なUIを構築します。コンポーネントのライフサイクルアプローチにより、ロジックをさまざまな段階で実行でき、開発効率とコードメンテナビリティが向上します。

React Strictモードは、追加のチェックと警告をアクティブにすることにより、Reactアプリケーションの潜在的な問題を強調する開発ツールです。これは、レガシーコード、安全でないライフサイクル、および副作用を特定するのに役立ち、現代の反応の実践を促進します。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)
