>  기사  >  웹 프론트엔드  >  자바스크립트에서 변수가 동일한지 확인하는 방법

자바스크립트에서 변수가 동일한지 확인하는 방법

青灯夜游
青灯夜游원래의
2021-04-19 11:00:073435검색

판단 방법: 1. 동등 연산자 "==" 또는 "==="를 사용합니다. 2. 배열에서 toString() 메서드를 사용합니다. 3. "Object.is()" 메서드를 사용합니다. "JSON.stringify()"를 사용하면 객체 또는 배열을 문자열 유형으로 변환한 다음 동등 비교를 위해 "==="를 사용합니다.

자바스크립트에서 변수가 동일한지 확인하는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

변수가 같은지 판단하는 방법

변수가 같은지 판단하는 방법은 대략 다음과 같습니다

  • =====;
  • == 以及 ===
  • 利用数组中的toString方法;
  • ES6中的Object.is方法;
  • 利用JSON.stringify,转换为String类型来比较;

=====

==为转换类型比较运算符,===为严格比较运算符,在数据类型相同的情况下,使用==一般不会造成问题。

let num = 5;
let num2 = 5;

num == num2;//true
num === num2;//true

但在数据类型不一致的情况下,==会做一些隐性的类型转换。

let num = 5;
let str = '5';

num == str;//true
num === str;//false

'' == false;//true
'' === false;//false

null == undefined;//true
null === undefined;//false

隐性转换类型可以带来一些便利性,但也有可能造成不易发现的bug,所以还是更推荐使用===来进行比较,这也是TS之所以流行的原因之一。

此外,上面列举的都是基本数据类型的比较,而在用===比较引用类型时,会存在一定的局限性。

let a = {xx: 1};
let b = a;

a === b;//true

let c = {xx: 1};
let d = {xx: 1};

c === d;//false

在比较引用类型时,===比较的是变量的引用是否相同,而非值,当引用不同时,就会返回false

由此可见,===并不是一枚无往不利的银弹,在比较对象是否相等时,还需要借助其他更可靠的方法。

【推荐学习:javascript高级教程

Array toString方法

前端给后端传参时,后端有时会要求多个参数,隔开,Array toString方法就比较有用了,这一方法也能用作数组比较。

let arr = [1,3,5,7,9];
let arr2 = [1,3,5,7,9];

arr.toString() === arr2.toString();//true "1,3,5,7,9"

不过也存在一定的局限性,不能用来比较二维及以上的数组、不能包含nullundefinedobjectfunction等,否则容易出错,如下

[1,3,5,[2,4,6]].toString();//"1,3,5,2,4,6"
[1,null,undefined,'',2].toString();//"1,,,,2"
[{xx:2},window,1,2].toString();//"[object Object],[object Window],1,2"

Object.is方法

Object.is是ES6中新增的方法,与===非常类似,同样用作比较两个值是否相等。

Object.is(1,1);//true
Object.is('str','str');//true
Object.is({},{});//false

不同的是在判断+0-0NaNNaN时的区别。

+0 === -0 //true
NaN === NaN //false

Object.is(+0, -0) //false
Object.is(NaN, NaN) //true

在处理兼容性问题时,polyfill可以这么写。

if (!Object.is) {
  Object.is = function(x, y) {
    if (x === y) {
      // 针对+0 不等于 -0的情况
      return x !== 0 || 1 / x === 1 / y;
    } else {
     // 针对NaN的情况
      return x !== x && y !== y;
    }
  };
}

JSON.stringify

JSON.stringify方法用于把对象或者数组转换为一个 JSON字符串,得出的字符串便可以用作对象的比较。

let obj = {name: 'lin', age: 24};
let obj2 = {name: 'lin', age: 24};

obj === obj2;//false
JSON.stringify(obj) === JSON.stringify(obj2);//true

JSON.stringify弥补了===无法准确比较对象的局限,不过它也有一定的局限性,在遇到undefinedfunction以及symbol值时会忽略。

另外,值得一提的是利用JSON.parseJSON.stringify可实现对象深拷贝,局限性同上。

何时使用它们

不一样的场景可能有不一样的需求,如果只比较基本数据类型,那么===就足够了,如果想“一劳永逸배열에서 toString 메소드를 사용하세요.

ES6 Object.is 메소드; li>

JSON.stringify를 사용하여 비교를 위해 String 유형으로 변환합니다.

=====

🎜==는 변환 유형 비교 연산자이고 === code>는 엄격한 비교 연산자입니다. 데이터 유형이 동일한 경우 <code>==를 사용해도 일반적으로 문제가 발생하지 않습니다. 🎜rrreee🎜그러나 데이터 유형이 일치하지 않는 경우 ==는 암시적인 유형 변환을 수행합니다. 🎜rrreee🎜암시적 변환 방식은 어느 정도 편리함을 가져올 수 있지만 찾기 어려운 버그를 유발할 수도 있으므로 비교를 위해 ===를 사용하는 것이 더 좋습니다. TS가 인기 있는 이유 중 하나이기도 합니다. 🎜🎜또한 위 목록은 모두 기본 데이터 유형의 비교이므로 ===를 사용하여 참조 유형을 비교할 때 특정 제한 사항이 있습니다. 🎜rrreee🎜참조 유형을 비교할 때 ===는 변수의 참조가 동일한지, 값이 아닌 를 비교합니다. 참조가 다른 경우에는 <code>입니다. false가 반환됩니다. 🎜🎜===가 만능은 아니라는 것을 알 수 있습니다. 객체가 동일한지 비교할 때 더 신뢰할 수 있는 다른 방법이 필요합니다. 🎜🎜【추천 학습: javascript 고급 튜토리얼🎜]🎜🎜🎜Array toString method🎜🎜🎜🎜프런트엔드가 백엔드에 매개변수를 전달할 때 백엔드에서는 때때로 ,, Array toString로 구분된 여러 매개변수가 필요합니다. > 방법 이 방법은 배열 비교에도 사용할 수 있어 더욱 유용합니다. 🎜rrreee🎜단, 2차원 이상의 배열을 비교하는 데는 사용할 수 없으며 null, undefine객체를 포함할 수 없습니다. , 함수 등을 사용하지 않으면 다음과 같이 실수하기 쉽습니다🎜rrreee🎜🎜Object.is 메서드🎜🎜 🎜🎜Object.is는 ES6의 새로운 메서드로 ===와 매우 유사하며 두 값이 같은지 비교하는 데에도 사용됩니다. 🎜rrreee🎜차이점은 +0-0, NaN, NaN을 판단하는 데에 있습니다. 🎜rrreee🎜호환성 문제를 다룰 때 폴리필은 다음과 같이 작성할 수 있습니다. 🎜rrreee🎜🎜JSON.stringify🎜🎜🎜🎜JSON.stringify 메서드는 객체나 배열을 JSON 문자열로 변환하는 데 사용됩니다. 문자열은 객체 비교에 사용될 수 있습니다. 🎜rrreee🎜JSON.stringify===가 개체를 정확하게 비교할 수 없다는 제한 사항을 보완하지만 정의되지 않은가 발생하는 경우에도 특정 제한 사항이 있습니다. >, 함수기호 값은 무시됩니다. 🎜🎜또한 JSON.parseJSON.stringify를 사용하면 위와 동일한 제한 사항으로 개체 전체 복사를 실현할 수 있다는 점을 언급할 가치가 있습니다. 🎜🎜🎜사용 시기 🎜🎜🎜🎜다양한 시나리오마다 요구 사항이 다를 수 있습니다. 기본 데이터 유형만 비교한다면 ===입니다. "<code>한번만"을 원한다면 특정 비용으로 사용자 정의 방법을 사용해야 한다는 것은 의심의 여지가 없습니다. 🎜🎜매일 반복되는 개발 속에서도 여전히 더 많은 것을 탐색해야 합니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

위 내용은 자바스크립트에서 변수가 동일한지 확인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.