javascript中的操作符详解1

  好久没有写点什么了,根据博主的技术,仍然写一点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)  // undefinedconsole.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来验证。

结尾

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

时间: 2024-10-09 04:00:41

javascript中的操作符详解1的相关文章

【JavaScript中的this详解】

前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的规律 this指向的规律往往与函数调用的方式息息相关:this指向的情况,取决于函数调用的方法有哪些. 我们来看一下姜浩五大定律: 姜浩五大定律: ①通过函数名()直接调用:this指向window: ②通过对象.函数名()调用的:this指向这个对象: ③函数作为数组的一个元素,通过数组下标调用的

【好文收藏】javascript中event对象详解

event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. <HTML> <HEAD><TITLE>Cancels Links</T

javascript中event对象详解

event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. 前端UI资源I分享 <HTML> <HEAD><TITLE>Cancels L

JavaScript中的this详解

  前  言  this  JavaScript中的this详解 this详解 This的指向有几种情况?如何人为控制? [谁调用this,this指向谁!!] [this的指向,不关心this写在哪!!只关心包含this的函数,由谁调用!!] ①   通过()直接调用,this指向window  func(); ②   对象.函数调用,this指向当前对象. Obj.func()    div.onclick = function(){} ③   数组下标调用,this指向当前数组   [fu

JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 exec方法的返回值 exec方法返回的其实并不是匹配结果字符串,而是一个对象,简单地修改一下execReg函数,来做一个实验就可以印证这一点: function execReg(reg, str) { var result = reg.exec(str); alert(typeof result

javascript中addEventListener(attachEvent)详解

addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click"):第二个参数表示要接收事件处理的函数:第三个参数为 useCapture.例子如下:  <button type="button">点击我</button> <img src="11 (6).jpg" alt="" style="display:block"> <s

轻松学习JavaScript二十九:JavaScript中的this详解

这几天在看很多的JS的代码,多次出现this关键字,有时候表示不理解,就仔细看了这一方面的知识. 在JavaScript语言中,this的定义是:this是包含它的函数作为方法被调用时所属的对象.说明:这句话有点咬 嘴,但一个多余的字也没有,定义非常准确,我们可以分3部分来理解它:1包含它的函数.2作为方法被调用时.3所 属的对象.随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是,调用函数的那 个对象. this是Javascript语言的一个关键字,它代

JavaScript中继承方式详解

继承一直是面向对象语言中的一个最为人津津乐道的概念,在JavaScript中,继承也是难点之一,下面我尽量用通俗的语言来介绍一下实现继承的几种方法. 原型链 ECMAScript 中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.这个基本思想说的一点也不基本,那么先说一个在之前博文中提到的概念,原型与实例的关系.我们知道:每一个实例里包含了原型对象中的方法和属性.这是因为任何一个对象都有一个内部属性[[prototype]]

JavaScript中的数组详解

JavaScript中的数组 一.数组的定义 数组是值的有序集合,或者说数组都是数据的有序列表. 二.创建数组 [字面量形式] 1.空数组 var arr=[]; 2.带有元素的数组 var arr=[1,2,3,1,2]; 3.数组值可以是任意类型 var arr=[1,2.3,'foodoir',true,null,undefined,[1,2,3],{name:'foodoir',age:21}]; 注意: 1.数组字面量中的值不一定是常量,它们可以是任意表达式: 2.它可以包含对象字面量