创建对象

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——重拾对象的更多相关文章

  1. 走进javascript——重拾数组

    Array构造器 如果参数只有一个并且是Number类型,那么就是指定数组的长度,但不能是NaN,如果是多个会被当做参数列表. new Array(12) // (12) [undefined × 1 ...

  2. 走进JavaScript——重拾函数

    创建函数 通过构造器的方式来创建函数,最后一个参数为函数体其他为形参 new Function('a','b','alert(a)') /* function anonymous(a,b) { ale ...

  3. 重拾算法之复杂度分析(大O表示法)

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  4. CSS魔法堂:重拾Border之——不仅仅是圆角

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  5. CSS魔法堂:重拾Border之——图片作边框

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  6. javascript中的对象,原型,原型链和面向对象

    一.javascript中的属性.方法 1.首先,关于javascript中的函数/“方法”,说明两点: 1)如果访问的对象属性是一个函数,有些开发者容易认为该函数属于这个对象,因此把“属性访问”叫做 ...

  7. 重拾C

    重拾C,一天一点点_10 来博客园今天刚好两年了,两年前开始学编程. 忙碌近两个月,项目昨天上线了,真心不容易,也不敢懈怠,接下来的问题会更多.这两天调试服务器,遇到不少麻烦. 刚出去溜达了一下,晚上 ...

  8. 【Java】 重拾Java入门

    [概论与基本语法] 取这个标题,还是感觉有些大言不惭.之前大三的时候自学过一些基本的java知识,大概到了能独立写一个GUI出来的水平把,不过后来随着有了其他目标,就把这块放下了.之后常年没有用,早就 ...

  9. 重拾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映射到 ...

随机推荐

  1. 找到一个新的超好用的U盘启动制作工具了

    有同事叫帮装电脑,弄个U盘说制作一个启动盘,结果一搜,出了“雨林木风”的主页. 太好用了,高手的产物,比以前找的方便一百倍.又简单,又实用,同步又下载好GHO文件.唯一 的问题是XP中用的GHO,好多 ...

  2. Jquery对raido的一些操作方法

    raido 单选组radio:   $("input[type=radio][checked]").val(); 获  取一组radio被选中项的值 var item = $('i ...

  3. struts2 之 【struts2简介,struts2开发步骤,struts2详细配置,struts2执行流程】

    入门框架学习避免不了的问题: 1. 什么是框架? 简单的说,框架就是模板,模子,模型.就是一个可重用的半成品. 2. 如何学习框架? 学习框架其实就是学习规则,使用框架就是遵循框架的规则,框架是可变的 ...

  4. canvas与svg区别

    canvas与svg区别 和SVG比起来有两个弱点,一个是画布里的内容是独立的,不能当成html元素:二是CANVAS是属于位图格式,而SVG是矢量图,可以平滑放大. HTML5的canvas画出来的 ...

  5. HDU 2846 Trie查询

    给出若干模式串,再给出若干询问串,求每个询问串作为多少个模式串的子串出现. 如果一个串是另一个串的子串,则一定是另一个串某个前缀的后缀或者某个后缀的前缀.根据字典树的性质,将模式串的每一个后缀插入字典 ...

  6. 使用vue-cli构建多页面应用+vux(二)

    当我们安装好vue-cli完整的项目以后,我们开始对它进行改造,此处参考了简书某个作者的,附上原文链接 http://www.jianshu.com/p/43697bdee974以及此文例子地址htt ...

  7. AJAX应用案例之省市联动

    jsp 主要是要注意多Document的操作 <%-- Created by IntelliJ IDEA. User: YuWenHui Date: 2017/4/23 0023 Time: 1 ...

  8. eharts入门篇一

    1.导入文件样式 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本. 2,引入 ECharts 文件  < ...

  9. Unix系统操作指令汇总

    一.目录及文件操作命令 1.1 ls 语法: ls [-RadCxmlnogrtucpFbqisf1] [目录或文件--] 说明: ls 命令列出指定目录下的文件,缺省目录为当前目录 ./,缺省输出顺 ...

  10. JavaScript中var变量引用function与直接声明function

    今天在h5开发app的过程中遇到了一个js问题,function的执行问题 在js中声明函数function有这两种方法 var A=function(){...} 或者 function A(){. ...