javascript中的操作符详解1

2022-09-03 13:28:08

　　好久没有写点什么了，根据博主的技术，仍然写一点javascript新手入门文章，接下来我们一起来探讨javascript的操作符。

一、前言

javascript中有许多操作符，但是许多初学者并不理解或曲解他们的用途，本章将会带领初学者们一起来学习一下javascript的几个常用操作符：typeof、in、delete、new。

二、学习目标

1. 深入了解javascript操作符：typeof、in、delete、new的功能及用法。

2. 剖析根本，掌握这些常用的操作符的运用场景，活学活用。

三、课程讲解

1. typeof

　　typeof操作符输出的值有以下几种：number、string、boolean、undefined、object、function，但是如何判断typeof输出的是什么值并不容易，其中结合着许多js的其他基础知识，下面我们来看这些代码：

var a=NaN

var b=null

var c=new String('')

var d= []

var e;

typeof a  // number

typeof b  // object

typeof c  // object

typeof d  // object

typeof e // undefined

typeof f  // undefined

结论：

NaN是非数值，虽然他的意思是非数值，但是他的类型仍然是数字类型，其只是代表着非数值这个数字。

null由于历史原因，其typeof仍然是object，null表示一个空指针对象，原型链的顶层Object.prototype.__proto__就指向null

new String/Number/Boolean 这三个都是创建一个对象，与直接赋值字面量是不一样的。

typeof操作未定义变量不会报错，而是返回undefined，因此在代码中，我们常用typeof判断一个变量是否存在，这样避免了变量不存在引起报错。

2. in

　　遍历对象键值，最常用的方法是for...in，但是你真正了解in么？如果不了解，那就进入这一节的学习吧。

　　对于in的执行，是与原型链有关系的， in 操作符会查找对象的整个原型链，他会找到并且输出原型链中可枚举的属性和方法（关于原型链和描述符不在此文范围内）。为了避免for...in遍历出原型链上的属性或方法，我们常常看到会有一个判断: o.hasOwnProperty(property)，此方法可以判断属性是否是对象本身拥有的属性，而非继承获得。

var Foo = function (name) {

  this.name = name

}

Foo.prototype.hello = function () {

  console.log(this.name + '问好'

}

var f = new Foo('xu')

for (var key in f) {

  console.log(key) // 输出 name、 hello

}

for (key in f) {

  if (f.hasOwnProperty(key)) {

    console.log(key)   // 输出 name

  }

}

in还可以用于判断中，判断对象是否存在某属性可以用in 来判断，表达式： property in object （如： 'name' in f）

3. delete

故名思议，用来删除数据，他只能删除对象的属性内容或者数组的某个下标元素，他不能删除定义的变量包括对象和数组，删除成功返回true，否则返回false。如下所示：

var a = 1

var b = [1,5]

var c = {

  name: 'xu',

  hello: function () {

    console.log('hello')

  }

}

delete a   // false

delete arr[1]   //true

delete c.name  // true

console.log(a)  //

console.log(b)  // [1,undefined]

console.log(c) // {hello: function () {...}}

javascript中，凡是var定义的变量都不能用delete操作符删除（es6中let/const定义的变量对delete不可见），javascript解析器将var定义的变量的configurable描述符初始化为false，因此不能删除成功。而删除的数组元素会用undefined来填充。对象的属性被删除后没有遗留痕迹，但前提是可配置的属性。

4. new

　　我们经常用到的new新建一个对象，其工作原理其实很简单，但是也有一些潜在的隐患，如下所示：

var Foo = function (name) {

  this.name = name;

  return {

    user: 'xu'

  }

}

var f = new Foo('xu')

console.log(f.name)  // undefined
console.log(name in f) // false

console.log(f.user)  // 'xu'

上面的例子我们定义了一个构造函数Foo，传入一个参数姓名，在构造函数内部将传入的name写入实例中，最后返回了一个对象{user: 'xu'}。那么问题来了，new Foo 按理说应该返回的是一个Foo实例，也就是说f.name是有的并且在案例中的值为'xu'，但是我们却得到了undefined，并且name in f 返回 false，表示f这个对象并没有name属性。而f.user却得到了'xu'。

大家可能猜到了，如果构造函数中返回了一个对象，那么这个构造函数在new的过程中会返回这个定义的对象，而并非返回这个构造函数的实例。那么，如果return的是一个数字或者string呢？

var Foo = function (name) {

  this.name = name;

  return 1;

}

var f = new Foo('xu')

console.log(f) // {name: 'xu'}

以上案例我们可以看出，如果构造函数中return的是一个数字，那么new的这个构造函数会忽略，仍然返回正确的构造函数实例对象。不信你可以用instanceof来验证。

结尾

以上就是此文章的内容，希望对读者有所帮助，如有错误请指正~~~

码农公寓