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

结尾

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

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

  1. Javascript中prototype属性详解 (存)

    Javascript中prototype属性详解   在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...

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

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  3. (转)javascript中event对象详解

    原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解          博客分类: javaScript JavaScriptCS ...

  4. 【JavaScript中的this详解】

    前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...

  5. JavaScript中的this详解

    前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...

  6. JavaScript 中 this 的详解

    this 的指向 this 是 js 中定义的关键字,它自动定义于每一个函数域内,但是它的指向却让人很迷惑.在实际应用中,this 的指向大致可以分为以下四种情况. 原文作者:林鑫,作者博客:http ...

  7. Javascript中prototype属性详解

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  8. JavaScript中的数组详解

    JavaScript中的数组 一.数组的定义 数组是值的有序集合,或者说数组都是数据的有序列表. 二.创建数组 [字面量形式] 1.空数组 var arr=[]; 2.带有元素的数组 var arr= ...

  9. Javascript中的 “&” 和 “|” 详解

    转自:https://www.jb51.net/article/104394.htm 一.前言: 在文章开始之前,先出几个题目给大家看看: var num1 = 1 & 0; console. ...

随机推荐

  1. win7安装时,避免产生100m系统保留分区的办法

    在通过光盘或者U盘安装Win7操作系统时,在对新硬盘进行分区时,会自动产生100m的系统保留分区.对于有洁癖的人来说,这个不可见又删不掉的分区是个苦恼.下面介绍通过diskpart消灭保留分区的办法: ...

  2. 了解PHP中的Array数组和foreach

    1. 了解数组 PHP 中的数组实际上是一个有序映射.映射是一种把 values 关联到 keys 的类型.详细的解释可参见:PHP.net中的Array数组    . 2.例子:一般的数组 这里,我 ...

  3. LeetCode 7. Reverse Integer

    Reverse digits of an integer. Example1: x = 123, return 321 Example2: x = -123, return -321 Have you ...

  4. Paypal开发中遇到请求被中止: 未能创建 SSL/TLS 安全通道及解决方案

    最近在基于ASP.NET上开发了Paypal支付平台,在ASP.NET开发的过程中没有遇到这个问题,但是引用到MVC开发模式中的时候就出现了"未能创建 SSL/TLS 安全通道及解决方案&q ...

  5. 算法与数据结构(十四) 堆排序 (Swift 3.0版)

    上篇博客主要讲了冒泡排序.插入排序.希尔排序以及选择排序.本篇博客就来讲一下堆排序(Heap Sort).看到堆排序这个名字我们就应该知道这种排序方式的特点,就是利用堆来讲我们的序列进行排序.&quo ...

  6. EC笔记:第4部分:22、所有成员都应该是private的

    EC笔记:第4部分:22.所有成员都应该是private的 更简单的访问 用户不用记得什么时候该带上括号,什么时候不用带上括号(因为很确定的就要带上括号) 访问限制 对于public的成员变量,我们可 ...

  7. SSH框架和Redis的整合(2)

    5. 添加功能的实现 新建一个Action:RClasAction,实现向Redis添加课程数据,并同步到MySQL. package com.school.action; import java.u ...

  8. 值得注意的ibatis动态sql语法格式

    一.Ibatis常用动态sql语法,简单粗暴用一例子 <select id="iBatisSelectList" parameterClass="java.util ...

  9. [转载]SQL语句中的日期计算

    1. 本月的第一天SELECT  DATEADD(mm,  DATEDIFF(mm,0,getdate()),  0) 2. 本月的最后一天SELECT  dateadd(ms,-3,DATEADD( ...

  10. css中line-height行高的深入学习

    之前对css中行高line-height的理解还是有些肤浅,深入后才发觉里面包罗万象.学习行高line-height,首先从基本原理开始 (标注该文章转载 http://www.cnblogs.com ...