JavaScript中的操作符详解

好久没有写点什么了,根据博主的技术,仍然写一点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('123') 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) // 1 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'

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/74508db19bcc9b5c2d48339daa8fd4a0.html