正文 

当前位置： 首页 > java > java语法

javascript的in操作符(“如何判断某值是否数组中的元素”？)

大鱼_style      2022-02-09     717

关键词：

  在编写JavaScript时，遇到一个常见的问题“如何判断某值是否数组中的元素”？这让我想起了PHP中的in_array()函数和Python中in 操作符。但JavaScript似乎没有内置类似的函数，而其in 操作符的作用也有点不同。通过查询相关的资料，我发现JavaScript的in 操作符还是挺有用的。

一、问题
让我想到in 操作符，正是因为这样一个问题：“如何判断某值是否数组中的元素”？
在PHP中，您可能会这样来处理：

$os = array("Mac", "NT", "Irix", "Linux");
if (in_array("Irix", $os)) {
    echo "Got Irix";
}


Python 中，可能会是这样：

val = 17
if val in [1,4,5,7,12,14,17,20,34]: print "yes"


那JavaScript中该如何操作呢？先来看看in 操作符的说明。

二、in 操作符
现在写JavaScript时，我喜欢参考两个地方：MDC 的Core JavaScript 1.5 Reference 和 W3Schools 的JavaScript Tutorial。
从这里，可找到in Operator的说明。可见，JavaScript中的in 操作符是对Object（对象）操作的，并不是针对数组。
1、简单用法
in 的右边必须是对象变量，例如：

var mycar = {make: "Honda", model: "Accord", year: 1998};
if ( "make" in mycar ) document.write(‘true‘);
  else document.write(‘false‘);  // 显示true


2、错误的用法
若我们把in 用于数组的判断时，会产生错误结果：

var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
if ( "oak" in trees ) document.write(‘true‘);
  else document.write(‘false‘);  //显示false


反过来，我们把trees数组看成一个对象，然后判断对象中的元素，例如：

if ( 0 in trees ) document.write(‘true‘);
  else document.write(‘false‘); //显示true
document.write(trees.length); //显示trees数组对象的length属性值：5
if ( ‘length‘ in trees ) document.write(‘true‘);
  else document.write(‘false‘); //显示true，因为length是trees数组对象的属性


三、对数组判断的正确方法
虽然in 直接在用于判断数组时会产生错误结果，但也不是没有办法可以避免的。合适地使用in 操作符反而可以带来便利。
1、通过循环来解决问题
其实，这是处理“如何判断某值是否数组中的元素”问题的最基本方法：

function in_array(searchString,array) {
  for (i=0;i<array.length;i++) {
    if ( searchString == array[i] ) return true;
  }
  return false;
}
if ( in_array(‘oak‘,trees) ) document.write(‘true‘); //显示true
  else document.write(‘false‘);



2、合适的利用in 操作符
既然我们知道in 可以用于判断对象的属性值，那么，同样的，我们可以把数组一一映射到对象的属性，然后再用in 判断。以下代码参考自：这里。

function oc(a)
{
  var o = {}; //相当于var o = new Object();
  for(var i=0;i<a.length;i++)
  {
    o[a[i]]=‘‘; //注意该写法，不能写成o.a[i]
  }
  return o;
}
if ( ‘oak‘ in oc(trees) ) document.write(‘true‘); //显示true
  else document.write(‘false‘);
o = oc(trees);
if ( o.oak != ‘undefined‘ ) document.write(‘true‘); //显示true
  else document.write(‘false‘); //true
if ( o[‘oak‘] != ‘undefined‘ ) document.write(‘true‘); //显示true
  else document.write(‘false‘); //true


这里，oc 函数把一个数组转换成对象，并把数组的元素作为对象的属性（值为空字符串），然后利用了in 操作符判断。
※ 注意：平时obj.key和obj[‘key‘]可以互通，但在for(;;)和for(in)语句中，对象属性的写法是obj[‘key‘]，而不是obj.key。

3、巧用in 操作符
除了数组情况下可借用in 操作符外，我们还可以利用in 的特性来简化if 语句在多个“或”条件情况时的写法。
例如，下面一句：

if ( foo == ‘bar‘ || foo == ‘foobar‘ || foo == ‘foo‘ )
{
//...
}


就可以写成：

if ( foo in { ‘bar‘:‘‘, ‘foobar‘:‘‘, ‘foo‘:‘‘ } )
{
//...
}


判断结果相同。

四、注意事项
使用in 操作符时，除了小心区分数组与对象的区别外，还需要注意：
1、in 面向的必须是对象
例如，下面对字符串的判断中：

var color1 = new String("green");
"length" in color1 // returns true
var color2 = "coral";
"length" in color2 // generates an error (color is not a String object)


因为JavaScript与Python不同，字符串并不能直接就处理为字符串对象。FireFox 中会报“invalid ‘in‘ operand color2”，IE 中会报“缺少对象”。

2、对象属性被删除（deleted）或未定义（undefined）的判断结果是不同的
用delete删除对象的属性值：

var mycar = {make: "Honda", model: "Accord", year: 1998};
delete mycar.make;
"make" in mycar;  // returns false

var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
delete trees[3];
3 in trees; // returns false


把对象属性值设置为undefined：

var mycar = {make: "Honda", model: "Accord", year: 1998};
mycar.make = undefined;
"make" in mycar;  // returns true
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
trees[3] = undefined;
3 in trees; // returns true


3、关联数组
既然数组可以转换为对象，我们就可以把JavaScript的对象看成是“关联数组”（类似Python中的字典、Perl中的Hash），而普通数组元素就对应对象的属性（值为空）的情况。

var oneArray=new Array();
oneArray["firstKey"]="firstValue";
oneArray["secondKey"]="secondValue";
var oneObject={};
oneObject.firstKey="firstValue";
oneObject.secondKey="secondValue";
for ( key in oneArray ) {
  document.write(key+‘=>‘+oneArray[key]);
}
for ( key in oneObject ) {
  document.write(key+‘=>‘+oneObject[key]);
}


这样，有以下优势：

引用
a、我们就可以非常方便的利用in 来判断元素是否在对象中；
b、对象中检索属性，例如：o[‘oak‘]，其时间复杂度为O(1)，而要在数组中找一个元素，时间复杂度为O(n)。


不过，也不说所有的数组都可以用对象来代替的。至少，必须要求数组中元素是唯一的。
例如，下面的数组：

var trees = new Array("redwood", "bay", "cedar", "oak", "maple","oak");


因为"oak"元素重复了，就不能直接等转换为某个对象。

4、效率问题
根据介绍，见：这里。其中提出：
集合的遍历效率(从高到低)为：var value = obj[key]; > for ( ; ; ) > for ( in )。
所以说，如果数组能用对象代替（值唯一），应首选对象形式。当遇到“判断某值是否数组中的元素”时，直接判断该值obj.key == ‘undefined‘，或if( ‘key‘ in obj )即可。否则，用for(;;)方式判断吧。
（对象没有length，不能用for(;;)循环，只能用for(in)）
另外，在：这里，也提到了一个遍历数组的效率问题。其中提出，循环前，把数组的length先赋值个某变量后，循环时直接调用，这样效率会更高。




















































































































































javascript中typeof，instanceof，hasownproperty，in的用法和区别

一.typeof操作符typeof操作符用于返回正在使用值的类型。//使用原始值letmNull=null;letmUndefined=undefined;letmString=‘mazey‘;letmNumber=123;letmBoolean=true;letmFunction=function(){returntrue;};//用构造函数的方式new一个实例letoString=newStr 查看详情

javascript中in和hasownproperty区别

in操作符只要通过对象能访问到属性就返回true。hasOwnProperty()只在属性存在于实例中时才返回true。functionPerson(){}Person.prototype.name="Nicholas";Person.prototype.age=29;Person.prototype.job="SoftwareEngineer";Person.prototype.sayName= 查看详情

javascript中的操作符详解1

　　好久没有写点什么了，根据博主的技术，仍然写一点javascript新手入门文章，接下来我们一起来探讨javascript的操作符。一、前言javascript中有许多操作符，但是许多初学者并不理解或曲解他们的用途，本章将会带领初学者们一... 查看详情

js中for...in语句用于对数组或者对象的属性进行循环操作吗?

是的for(variableinobject)object为null、undefined，javascript会跳过循环执行后面的代码，在ECMAScript3中可能会抛出类型错误异常object为原始值，会转换为与之对应的包装对象若为对象类型，javascript会依次枚举对象的属性来执行循环，在每... 查看详情

JavaScript/jQuery：数组 - For In Loop 返回值的最低键

】JavaScript/jQuery：数组-ForInLoop返回值的最低键【英文标题】：JavaScript/jQuery:Array-ForInLoopReturnValueofLowestKey【发布时间】：2017-04-2515:01:20【问题描述】：这就是我所拥有的，我尝试在forin循环中执行此操作，但它并没有完全按照我的... 查看详情

删除操作员密码™不影响javascript中数组的长度

deleteOperatordon’timpactthelengthofArrayinJavaScriptRef:https://techfiddler.wordpress.com/2015/06/02/delete-operator-dont-impact-the-length-of-array-in-javascript/   varfruits=[& 查看详情

在javascript循环语句中，for和for.in循环哪个效率更高

...体要不要用就看具体场合权衡啦。参考技术A在看一本《JavaScript程序员参考手册》，书中提到for...in循环的代码优化：//代码优化前varmyArr=[0,1,2,3];for(variteminmyArr)myArr[item];解释器遇到for...in循环时，在后台需要为对象建立一个枚举... 查看详情

javascript陷阱之in语句

...坑。 先抛出两张图作比较（上图为Python语句，下图为javascript）：很好，in语句似乎通用于py和js判断一个元素是否存在于数组之中，然而，神奇的还在下面(javascript代码)： ???3不在数组[3,2,1]里? 查看详情

为啥不建议数组使用 JavaScript 的 For...In 循环？ [复制]

】为啥不建议数组使用JavaScript的For...In循环？[复制]【英文标题】：WhyisJavaScript\'sFor...Inloopnotrecommendedforarrays?[duplicate]为什么不建议数组使用JavaScript的For...In循环？[复制]【发布时间】：2011-07-1306:56:09【问题描述】：我在某处读到... 查看详情

javascript中for/in和for的区别

...了下foreachin开发的文档，foreachin是作为E4X标准的一部分在javascript1.6中发布的，而且它不是ECMAScript标准的一部分区别一：       forin是javascript1.0中发布的。  查看详情

sql中in操作符——你所不知道的优点

　　（1）在很多合法选项时，IN操作符的语法更清楚，更直观。　　（2）在与其它AND和OR操作符组合使用IN时，求值顺序更容易管理。　　（3）IN操作符用来指定要匹配值的清单时，功能与OR相当，不过一般比一组OR操作符执行得... 查看详情

sql中in操作符——你所不知道的优点

　　（1）在很多合法选项时，IN操作符的语法更清楚，更直观。　　（2）在与其它AND和OR操作符组合使用IN时，求值顺序更容易管理。　　（3）IN操作符用来指定要匹配值的清单时，功能与OR相当，不过一般比一组OR操作符执行得... 查看详情

08.21javascript07object概念创建对象创建属性操作方法遍历原型

#Object###Object的概念* 对象可以看做是属性的无序集合###创建对象Object* 直接量{}* 构造函数newObject() ###对象属性的操作* 运算符  .* 运算符[]* 属性检测  in     console 查看详情

Javascript：for..in 循环运行的次数超出预期

】Javascript：for..in循环运行的次数超出预期【英文标题】：Javascript:for..inlooprunningmorenumberoftimesthanexpected【发布时间】：2017-03-3114:31:12【问题描述】：在下面的代码中，user.roles的实际长度为1。但是，循环运行了两次。当我输出i的... 查看详情

javascript中for循环和for-in循环的区别

】javascript中for循环和for-in循环的区别【英文标题】：differencebetweenforloopandfor-inloopinjavascript【发布时间】：2015-02-2507:23:49【问题描述】：我发现javascript中的for循环和for-in循环是有区别的。当我定义一个新数组时：vara=newArray();然... 查看详情

R: 像 %in% 这样的操作符叫啥，我如何了解它们？

】R:像%in%这样的操作符叫啥，我如何了解它们？【英文标题】：R:Whatareoperatorslike%in%calledandhowcanIlearnaboutthem?R:像%in%这样的操作符叫什么，我如何了解它们？【发布时间】：2014-09-3012:20:39【问题描述】：我知道==和!=之类的基本知... 查看详情

JavaScript 循环：for...in 与 for

】JavaScript循环：for...in与for【英文标题】：JavaScriptLoops:for...invsfor【发布时间】：2011-07-1222:33:48【问题描述】：我在Javascript中遇到了一个奇怪的行为。我明白了“对象不支持此属性或方法”以下代码中removeAttribute函数的异常：var... 查看详情

javascript程序错误：cannotuse'in'operatortosearch

今天编程时，JavaScript程序报了这样的错误：Cannotuse‘in‘operatortosearchfor...，具体错误信息如下：   坦白说，这样的错误最难调试。因为它并不指向你所写的具体代码，而是泛泛指向了lib.js文件（该文件通常是第三方... 查看详情