JSにおける値の受け渡しと参照の受け渡しの違いを詳しく解説

この記事では、JavaScript で渡す値と参照の違いについて詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

JavaScript では、値および参照によって渡すことができます。 2 つの主な違いは、値渡しはプリミティブ型を割り当てるときに発生するのに対し、参照渡しはオブジェクトを割り当てるときに発生することです。以下を詳しく見てみましょう。

1. 基本的な型とオブジェクトを理解する

JavaScript には、基本的な型とオブジェクトという 2 つのデータ型が用意されています。

基本的な型は、number、boolean、string、symbol、null、 ＃ ＃＃未定義＃＃＃。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// 基本类型 const number = 10; const bool = false; const str = &amp;#39;Hello!&amp;#39;; const missingObject = null; const nothing = undefined;</pre><div class="contentsignin">ログイン後にコピー</div></div>2 番目のカテゴリはオブジェクトです。通常のオブジェクト、配列、関数などはすべてオブジェクトです。

// Objects
const plainObject = {
  prop: 'Value'
};

const array = [1, 5, 6];

const functionObject = (n1, n2) => {
  return n1 + n2;
};

言い換えると、プリミティブ型ではない値はすべてオブジェクトです。

2. 値渡し

値渡しの単純なルールは、JS のすべての基本型が値によって渡されるというもので、非常に単純です。

値による受け渡しとは、値が変数に代入されるたびに、値のコピーが毎回作成されることを意味します。

例として、2 つの変数

a

と b があるとします。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>let a = 1; let b = a; b = b + 2; console.log(a); // 1 console.log(b); // 3</pre><div class="contentsignin">ログイン後にコピー</div></div>最初のステートメントは変数

a

を宣言し、その値を 1 に割り当てます。 2 番目のステートメントは、変数

b

を宣言し、値 a をそれに割り当てます。 最後に、

b = b 2

は 2 増加して 3 となります。 b 変数は変更されますが、その変更は a の値には影響しません。

3. 参照渡し

参照渡しの方法は、値渡しとは異なります。

オブジェクトが作成されると、そのオブジェクトへの参照が取得されます。 2 つの変数が同じ参照を保持している場合、オブジェクトへの変更は両方の変数に反映されます。

次のコードを見てください:

let y = x;

y.push(2);

console.log(x); // [1, 2]
console.log(y); // [1, 2]

最初のステートメント

let x =[1]

Create配列、変数 #xx を定義し、作成された配列への参照を使用して変数を初期化します。 次に、 y = x

で変数

y を定義し、 x 変数に格納されている参照を使用して y を初期化します。は参照渡しです。 y

y.push(2) を通じて配列を変更します。 x 変数と y 変数は同じ配列を参照するため、この変更は両方の変数に反映されます。 注: 簡単にするために、変数にはオブジェクトへの参照が含まれていると言います。しかし、厳密に言えば、JavaScript の変数に含まれる値はオブジェクトへの参照です。

[推奨学習:

JavaScript 上級チュートリアル

]

4. 値の転送と参照の転送の比較

オブジェクトの比較において値と参照の違いを理解することが重要です。

厳密比較演算子

===

を使用する場合、値が同じであれば 2 つの変数は等しいと見なされます。以下のすべての比較は等しく、

const one = 1;
const oneCopy = 1;

console.log(one === oneCopy); // true
console.log(one === 1);       // true
console.log(one === one);     // true

one

と

oneCopy は同じ値 1 を持ちます。両方のオペランドが 1 の場合、演算子 === は true と評価されます。 ただし、参照を比較する場合、比較演算子 ===

の動作は異なります。 2 つの参照は、まったく同じオブジェクトを参照している場合にのみ等しいと見なされます。

ar1

および

ar2 は、異なる配列インスタンスへの参照を保持します:

const ar1 = [1];
const ar2 = [1];

console.log(ar1 === ar2); // false
console.log(ar1 === [1]);  // false

const ar11 = ar1;
console.log(ar1 === ar11); // true
console.log(ar1 === ar1);  // true

ar1

および

ar2同じ構造の配列を参照しますが、ar1 と ar2 が参照しているため、ar1 === ar2 の計算結果は false になります。別の配列オブジェクトに。 比較演算子は、同じオブジェクトを指す参照を比較する場合にのみ true

を返します:

ar1 === ar11 または ar1 === ar1 。 5. 概要

JavaScript では、プリミティブ型は値として渡されます。つまり、値が割り当てられるたびに、その値のコピーが作成されます。

一方、オブジェクト (通常のオブジェクト、配列、関数、クラス インスタンスを含む) は参照です。オブジェクトが変更されると、それを参照するすべての変数に変更が反映されます。

比較演算子は、比較値と参照を区別します。参照を保持する 2 つの変数は、まったく同じオブジェクトを参照している場合にのみ等しいですが、値を保持する 2 つの変数は、変数が同じ 2 つの値 (変数、リテラルなどから) を持つ限り、等しくなります。値がどこから来たかに関係なく、変数は等しいです。

元のアドレス: https://dmitripavlutin.com/value-vs-reference-javascript/

著者: Ahmad shaded

翻訳アドレス: https:/ /segmentfault.com/a/1190000039761445

プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 ！

以上がJSにおける値の受け渡しと参照の受け渡しの違いを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。