共勉!

属性访问表达式

众所周知,JavaScript为属性的访问定义了两种语法方式:

表达式.标识符 // 表达式(指定对象)    标识符(指定需要访问的属性的名称)
表达式[表达式] //表达式1(指定对象)  表达式2(指定需要访问的属性的名称或者要访问数组的索引)

var O = {a:1,b:{c:3}}
var A = [O,4,[5,6,7]] O.a //1
O.b.c //3
O["a"] //1
A[1] //4
A[0].b.c //3
A[2]["2"] //7

第一种方法我们使用点"."来进行属性的访问,第二种则是使用方括号来进行属性访问。其实如上我们就可以轻松发现两种方法的区别,第二种方法的方括号内也是一个表达式。

但是这两种方法的第一个表达式都是先进行计算的,如果计算结果是空或者未定义那么就会抛出错误,如果运算结果不是对象或者数组,JS会将其转化为对象(例如下面代码块的字符串)。

var str = "Hello World!";
var world = s.substring(s.indexOf(" ")+1, s.length)

如果运算结果不是对象或者数组,JS会将其转化为对象=》有些人会奇怪,字符串不是对象,为什么它还具有属性?这是因为我们在进行属性访问的时候,JS就会将字符串调用 new String(str) 来转换成对象,而提供这个方法新创建的对象自然就继承(关于对象的继承可以查阅相关资料)了字符串的方法并且用来处理属性的引用。一旦属性引用结束了,这个新创建的对象就会被销毁。当然我这里只写了字符串的一个demo,数字布尔值也类似通过Number(),Boolean()构造函数来进行对象创建。

回到属性访问表达式,如果表达式后跟随"."和标识符,就会查找这个标识符所指定的属性的值没并将其作为整个表达式返回的值。如果对象表达式跟随一堆方括号,则会计算方括号内的表达式的值并将其转化为字符串,当然这两方法种如果访问的属性是不存在的。会返回undefine。

我们可以看出,使用"."+标识符的写法更加简单,并且我们有时候习惯了链式调用的时候更加喜欢".",但是,需要注意的是,这种方式下,我们要访问的属性名必须是合法的。如果我们进行访问的属性名称是一个保留字,或者包含空格,或者是一个数字,或者是通过表达式计算得出的值,这时候的属性访问必须要使用方括号。

delete运算符

delete是一元运算符,我们可以使用它来删除对象属性或者数组元素。

delete希望他的操作数是一个左值,如果我们误用使得他的操作数不是一个左值,那么delete就不会进行任何操作并且返回true,当然并不是所有属性都是能够删除的,用户var声明的变量,自定义函数,函数参数,内置核心属性等是不能给删除的,删除非法会抛出错误。

这里插入补充下左值:所谓左值,简单点说就是可以被赋值的表达式,在ES规范中是用内部类型引用(Reference)描述的,其作用为存放数据空间,且存放是允许的。比如这里的属性访问表达式。

虽然delete运算符可以删除对象的属性,但是我们要知道,delete其实只是断开了属性和宿主对象的联系,而不会操作属性中的属性。而且delete运算符只能删除自有属性,不能删除继承属性。

a = { b:{c:1} };
d = a.b;
delete a.b;
console.log(d.c) //结果仍旧是1,可以看出delete其实只是断开可属性和宿主对象的联系并没有将其销毁
o = {a:1};
delete o.a; //删除属性a并返回true
delete o.x; //因为a属性不存在,什么都不做并返回true
delete o.toString; //因为toString是继承来的,什么都不做并返回true
delete 110; //没有意义,返回true delete Object.prototype; //返回false
var b = 1;
delete this.b; //返回false
function f(){};
delete this.f; //返回false

逻辑运算符

运算符 示例 说明
逻辑与 (&&) expr1&&expr2 如果expr1 能转换成false则返回expr1,否则返回expr2. 因此, 在Boolean环境中使用时, 两个操作结果都为true时返回true,否则返回false.
逻辑或 (||) expr1||expr2 如果expr1能转换成true则返回expr1,否则返回expr2. 因此,在boolean环境(在if的条件判断中)中使用时, 二者操作结果中只要有一个为true,返回true;二者操作结果都为false时返回false.
逻辑非(!) !expr 如果单个表达式能转换为true的话返回false,否则返回true.

在JS计算逻辑中我们在使用逻辑运算符会有一个短路原理。如下

var a = true;
var b = false;
var c = a || 1; //true
var d = b || 1; //1
var e = a && 1; //1
var f = b && 1; //false

上面代码块的变量c赋值时,a和1都是真,但是因为js的短路原理,在逻辑或中只要排在前面的a为真,那么后面的1就会直接忽略,排在前面的操作数为假才会计算到后面的操作数。同理在使用逻辑与时,只要排在前面的操作数是为假,那么js就会直接忽略后面的操作数而让运算结果直接为false,如果前面的操作数为真,就会继续计算后面的操作数,最后如果后面操作数为真,赋值的才是后面的操作数。

var a = 真1 || 真2 //真1
var b = 假 || 真3 //真3
var c = 真4 && 真5 //真5
var d = 假 && 真6 //假

未完待续~~~~

JavaScript小细节点罗列(1)的更多相关文章

  1. JavaScript小细节点罗列

    共勉! 属性访问表达式 众所周知,JavaScript为属性的访问定义了两种语法方式: 表达式.标识符 // 表达式(指定对象) 标识符(指定需要访问的属性的名称) 表达式[表达式] //表达式1(指 ...

  2. JavaScript小细节点罗列(2)

    break 语句和 continue 语句 break语句和continue语句都具有跳转作用,可以让代码不按既有的顺序执行. break语句用于跳出代码块或循环. var i = 0; while( ...

  3. css小细节罗列

    有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样 ...

  4. php课程---Json格式规范需要注意的小细节

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于JavaScript Programming Lan ...

  5. HTML 标签小细节

    简书地址:https://www.jianshu.com/p/03a23aa28a34 今天重新学习了一下HTML中标签的用法,补充并记录一下自己新学到的知识. a中的href href Contai ...

  6. Vue.js 和 MVVM 的小细节

    Vue.js 和 MVVM 的小细节 转载 作者:流云诸葛 链接:www.cnblogs.com/lyzg/p/6067766.html MVVM 是Model-View-ViewModel 的缩写, ...

  7. Oracle Sales Cloud:管理沙盒(定制化)小细节2——使用对象触发器更新数字字段

    在上一篇 "管理沙盒(定制化)小细节1" 的随笔中,我们使用公式法在 "业务机会" 对象(单头)上建立了 "利润合计" 字段,并将它等于 & ...

  8. Oracle Sales Cloud:管理沙盒(定制化)小细节1——利用公式创建字段并显示在前端页面

    Oracle Sales Cloud(Oracle 销售云)是一套基于Oracle云端的CRM管理系统.由于 Oracle 销售云是基于 Oracle 云环境的,它与传统的管理系统相比,显著特点之一便 ...

  9. Oracle Sales Cloud:报告和分析(BIEE)小细节2——利用变量和过滤器传参(例如,根据提示展示不同部门的数据)

    在上一篇随笔中,我们建立了部门和子部门的双提示,并将部门和子部门做了关联.那么,本篇随笔我们重点介绍利用建好的双提示进行传参. 在操作之前,我们来看一个报告和分析的具体需求: [1] 两个有关联的提示 ...

随机推荐

  1. linux磁盘用满的两种情况

    首先查看分区的内存使用情况和inode使用情况 第一种情况,内存用完: 我们拿分区sdb5来做实验 查看内存使用情况和inode使用情况: 第二种情况:inode使用完 我们在该分区下创建很多空文件 ...

  2. day 48 ORM 进阶 多表连接 创建 以及 html模板继承

    多表的一对多创建 多表的多对多创建 多表的一对多修改 多表的多对多修改 前情提要:   最近认识了不少大佬,大佬开着保时捷. .一顿狂奔..我连车尾灯都看不到.. 本次内容  ORM 的多表链接  查 ...

  3. POJ 1221

    #include <iostream> #define MAXN 500 using namespace std; unsigned dp[MAXN][MAXN]; int main() ...

  4. 【转】MySQL下载安装验证

    MySQL官网下载路径:https://dev.mysql.com/downloads/mysql/ MySQL安装步骤:转自博主 Smile_Coding 博文:https://www.cnblog ...

  5. 【Gitbook】实用配置及插件介绍

    前言 实际效果可以查看这里 github地址 配置 title 设置书本的标题 "title" : "Gitbook Use" author 作者的相关信息 & ...

  6. 针对石家庄铁道大学官网首页的UI分析

    身为一名光荣的铁大铮铮学子,我对铁大的网站首页非常的情有独钟,下面我就石家庄铁道大学的官网首页进行UI分析: 1.在首页最醒目的地方赫然写着石家庄铁道大学七个大字,让人一眼就豁然开朗. 2.网站有EN ...

  7. golang---interface结合reflect的泛型应用

    大致思路:序列化未知json放入一个interface{}中再通过反射将其内容解析出来 str1:=`{ , , , , , , "type_key": "testnow ...

  8. ELK日志系统之使用Rsyslog快速方便的收集Nginx日志

    常规的日志收集方案中Client端都需要额外安装一个Agent来收集日志,例如logstash.filebeat等,额外的程序也就意味着环境的复杂,资源的占用,有没有一种方式是不需要额外安装程序就能实 ...

  9. git工具,conflict冲突解决方法

    这篇文章需要对git具有一定的了解,并且知道如何安装git工具(其实就是上git官网下载个文件,安装) git这种版本控制工具有什么好处 第一个,方便可以多人协同开发同一个项目或系统 第二个,当你系统 ...

  10. 从入门到不放弃系列之Koa2

    一.Koa2入门 本来是想Express入门的,但是既然都是要学,干嘛不学最新的呢? 其实我想说,我本来只是想学个小程序开发,现在已经陆陆续续开了好多坑了.. 本文参考廖雪峰教程 二.Async 最新 ...