走进JavaScript——重拾对象
创建对象
Object构造器的参数如果为空或null、undefined将返回一个空的Object对象,如果为其他值则调用相应的构造器,如
new Object()
// Object {}
new Object(null)
// Object {}
new Object(undefined)
// Object {}
new Object(1)
// Number {[[PrimitiveValue]]: 1}
new Object("a")
// String {0: "a", length: 1, [[PrimitiveValue]]: "a"}
new Object({})
// Object {}
new Object([1,2,3])
// [1, 2, 3]
new Object(function(){})
// function (){}
如果传递多个参数取第一个,由于使用构造器来创建对象需要判断参数所以一般比我们直接使用字面量{}创建对象要慢一些。
我们也可以自己定义一个构造器来创建对象,如下
function CreateObj(){}
var obj = new CreateObj();
obj.a = 10;
// 10
这些方法创建的对象都不是一个真正干净的对象,如果希望创建一个没有原型继承的空对象则可以使用Object.create方法
Object.create(null)
// Object {} No Properties
对象直接量
var obj = {
title: '晴天',
content: '....'
};
key可以以字符串形式来写也可以按标识符来写,一般我们会以标识符来写,当遇到需要使用一些不合法的标识符时我们会以字符串的形式来写,如:
{1:2};
{.l:1};
由于以上对象属性名是不合法的,因此我们需要使用字符串的形式来写。
{'1':2};
{'.l':1};
如果key和value名一样,value值可以不写
var a = 1;
var obj = {a};
console.log(obj);
// Object {a: 1}
如果希望key是一个变量,我们可以这样
var a = 'hello';
console.log({[a]:a});
Object {hello: "hello"}
在一个对象中不能有多个同名属性,如果相同最后一个将覆盖之前的
{
a:123,
a:456
}
// Object {a: 456}
对象不能有多个同名属性的特性,我们可以使用它来实现数组过滤重复项
var arr = [1,3,3,2,1,1],
obj = {};
arr.forEach((item)=>obj[item] = item);
console.log(obj)
// Object {1: 1, 2: 2, 3: 3}
但由于对象的储存并不是按照我们填写的顺序来的,因此对于有顺序要求的我们就不能使用上面的方式来实现了。
对象和数组在某些方面非常相似,因此只需要我们按照数组的格式来写就可以将对象转换成一个数组
Array.from({
'0':'hello',
'1':'world',
'length':2
})
// ["hello", "world"]
遍历对象
for in
var obj = {html:111,javascript:222};
for(let key in obj){
console.log(obj[key]);
}
// 111
// 222
for in会将原型继承中的值也循环出来,因此我们需要过滤一下
// 没过滤之前
Object.prototype.a = '捣乱的';
var obj = {html:111,javascript:222};
for(let key in obj){
console.log(obj[key]);
}
// 111
// 222
// 捣乱的
// 过滤之后
Object.prototype.a = '捣乱的';
var obj = {html:111,javascript:222};
for(let key in obj){
if(obj.hasOwnProperty(key)){
console.log(obj[key]);
}
}
// 111
// 222
我们也可以用for来循环对象,不过我们得先使用Object.keys来取对象的key
Object.prototype.a = '捣乱的';
var obj = {html:111,javascript:222};
var arr = Object.keys(obj);
for(let i = 0; i < arr.length; i++){
console.log(obj[arr[i]]);
}
// 111
// 222
for of
Object.prototype.a = '捣乱的';
var obj = {html:111,javascript:222};
for(let key of Object.keys(obj)){
console.log(obj[key]);
}
// 111
// 222
对象与其他值的运算
和对象、function相加会转换成字符串拼接,如果是其他值则会转换为数字
{} + null
// 0
{} + undefined
// NaN
{} + 'a'
// NaN
{} + '111'
// 111
{} + {}
// "[object Object][object Object]"
{} + [2]
// 2
{} + function(){}
// "[object Object]function (){}"
如果是相减则会将对象转换为-0(注意是-0),如果是对象减对象则是NaN
{} - ''
// -0
{} - []
// -0
{} - null
// -0
{} - undefined
// NaN
{} - {}
// NaN
{} - function(){}
// NaN
{} - 2
// -2
为什么说对象被转换成负0而不是0呢,我们用一个例子来证明
0 - 0
// 0
-0 - 0
// -0
所以说对象被转换成-0而不是0
走进JavaScript——重拾对象的更多相关文章
- 走进javascript——重拾数组
Array构造器 如果参数只有一个并且是Number类型,那么就是指定数组的长度,但不能是NaN,如果是多个会被当做参数列表. new Array(12) // (12) [undefined × 1 ...
- 走进JavaScript——重拾函数
创建函数 通过构造器的方式来创建函数,最后一个参数为函数体其他为形参 new Function('a','b','alert(a)') /* function anonymous(a,b) { ale ...
- 重拾算法之复杂度分析(大O表示法)
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- CSS魔法堂:重拾Border之——不仅仅是圆角
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- CSS魔法堂:重拾Border之——图片作边框
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
- javascript中的对象,原型,原型链和面向对象
一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...
- 重拾C
重拾C,一天一点点_10 来博客园今天刚好两年了,两年前开始学编程. 忙碌近两个月,项目昨天上线了,真心不容易,也不敢懈怠,接下来的问题会更多.这两天调试服务器,遇到不少麻烦. 刚出去溜达了一下,晚上 ...
- 【Java】 重拾Java入门
[概论与基本语法] 取这个标题,还是感觉有些大言不惭.之前大三的时候自学过一些基本的java知识,大概到了能独立写一个GUI出来的水平把,不过后来随着有了其他目标,就把这块放下了.之后常年没有用,早就 ...
- 重拾Java Web应用的基础体系结构
目录 一.背景 二.Web应用 2.1 HTML 2.2 HTTP 2.3 URL 2.4 Servlet 2.4.1 编写第一个Servlet程序 2.5 JSP 2.6 容器 2.7 URL映射到 ...
随机推荐
- java 基础知识六 字符串2
java 基础知识六 字符串2 1.String类是final类,也即意味着String类不能被继承,并且它的成员方法都默认为final方法 . String 是不可变对象,也就是一旦创建,那么整 ...
- java 基础知识二 基本类型与运算符
java 基础知识二 基本类型与运算符 1.标识符 定义:为类.方法.变量起的名称 由大小写字母.数字.下划线(_)和美元符号($)组成,同时不能以数字开头 2.关键字 java语言保留特殊含义或者 ...
- 转账示例(四):service层面实现(线程管理Connection,AOP思想,动态代理)(本例采用QueryRunner来执行sql语句,数据源为C3P0)
用了AOP(面向切面编程),实现动态代理,service层面隐藏了开启事务.1.自行创建C3P0Uti,account数据库,导入Jar包 2.Dao层面 接口: package com.learni ...
- Java --- JSP2新特性
自从03年发布了jsp2.0之后,新增了一些额外的特性,这些特性使得动态网页设计变得更加容易.jsp2.0以后的版本统称jsp2.主要的新增特性有如下几个: 直接配置jsp属性 表达式语言(EL) 标 ...
- lua 模块
lua 模块 概述 lua 模块类似于封装库 将相应功能封装为一个模块, 可以按照面向对象中的类定义去理解和使用 使用 模块文件示例程序 mod = {} mod.constant = "模 ...
- redis skiplist (跳跃表)
redis skiplist (跳跃表) 概述 redis skiplist 是有序的, 按照分值大小排序 节点中存储多个指向其他节点的指针 结构 zskiplist 结构 // 跳跃表 typede ...
- linux下安装node
经过一番的折腾终于在linux上安装了node,记录下来以免忘记 1.下载node 去官网下载最新的linux版本下对应node.js,node-v6.10.2-linux-x64.tar.gz 2. ...
- 计算机程序的思维逻辑 (82) - 理解ThreadLocal
本节,我们来探讨一个特殊的概念,线程本地变量,在Java中的实现是类ThreadLocal,它是什么?有什么用?实现原理是什么?让我们接下来逐步探讨. 基本概念和用法 线程本地变量是说,每个线程都有同 ...
- @JsonIgnoreProperties注解不起作用的问题解决
最近做的一个东西要调第三方服务接口,要参照接口文档开发,但是第三方服务的接口字段名全部都是大写,本来以为这种应该没有什么问题.但是实际开发中发现大写的字段名字去调后台接口的时候报: org.codeh ...
- 初学T4模板
1.T4模板语法 <#@ template language="C#v3.5" hostSpecific="true" debug="true& ...