console对象 | Object对象 | 对象探寻之一

参考链接:
[1]阮一峰,console对象
[2]阮一峰,Object对象

一.console对象

1.console.log方法支持以下占位符,不同格式的数据必须使用对应格式的占位符:

%s:字符串
%d:整数
%i:整数
%f:浮点数
%o:对象的链接
%c:CSS格式字符串

%d%i实验

console.log('%d',10);
>>>10

console.log('%i',10);
>>>10

console.log('%d',010);
>>>8

console.log('%i',010);
>>>8

console.log('%d',0x10);
>>>16

console.log('%i',0x10);
>>>16

%c

%c.png
2.console.table
console.table.png

①复合型数据转为表格显式地条件是,必须拥有主键。对于数组来说,主键就是数字键。对于对象来说,主键就是它的最外层键。

tableObject.png
3.console.count()

count方法用于计数,输出它被调用了多少次。

function greet(user){
    console.count();
    return 'hi ' + user;
}
greet('Gerg');
>>>
1
"hi Gerg"

greet('asan');
>>>
2
"hi asan"

greet('tuhao');
>>>
3
"hi tuhao"

②该方法可以接收一个字符串作为参数,作为标签,对执行次数进行分类:

function greet(user){
    console.count(user);
    return 'hi ' + user;
}
greet('Gerg');
>>>
Gerg: 1
"hi Gerg"

greet('asan');
>>>
asan: 1
"hi asan"

greet('Gerg');
>>>
Gerg: 2
"hi Gerg"
4.console.time()console.timeEnd()

①这两个方法用于计时,可以算出一个操作所花费的准确时间。

console.time('Array initialize');
var array = new Array(10000);
for(var i = array.length - 1; i >= 0; i--){
    array[i] = new Object();
};
console.timeEnd('Array initialize');
>>>Array initialize: 3.449951171875ms

time方法表示计时开始,timeEnd方法表示计时结束。它们的参数是计数器的名称。

二.Object对象

1.Object作为构造函数使用时,可以接收一个参数。如果该参数是一个对象,则直接返回这个对象;如果是一个原始类型的值,则返回该值对应的包装对象。
var person = {
    name: 'Gerg'
};
var obj = new Object(person);
obj === person;
>>>true

Object.prototype.toString.call(new Object('yyc'));
>>>"[object String]"
2.Object()

Object本身当做工具方法使用时,可以将任意值转为对象。

②如果参数是原始类型的值,Object方法返回对应的包装对象的实例。

Object()
>>>{}
Object.prototype.toString.call(Object());
>>>"[object Object]"

Object(undefined);
>>>{}
Object.prototype.toString.call(Object(undefined));
>>>"[object Object]"

Object(null);
>>>{}
Object.prototype.toString.call(Object(null));
>>>"[object Object]"

Object(123);
>>>Number {[[PrimitiveValue]]: 123}
Object.prototype.toString.call(Object(123));
>>>"[object Number]"

Object('yyc');
>>>String {0: "y", 1: "y", 2: "c", length: 3, [[PrimitiveValue]]: "yyc"}
Object.prototype.toString.call(Object('yyc'));
>>>"[object String]"

Object(false);
>>>Boolean {[[PrimitiveValue]]: false}
Object.prototype.toString.call(Object(false));
>>>"[object Boolean]"

③如果Object方法的参数是一个对象,它总是返回原对象。

var arr = [];
Object(arr);
>>>[]
Object(arr) === arr;
>>>true

var obj = {};
Object(obj);
>>>{}
Object(obj) === obj;
>>>true

var fn = function () {};
Object(fn);
>>>ƒ () {}
Object(fn) === fn;
>>>true

④利用这一点,可以写一个函数来判断一个变量是否为对象。

function isObject(value){
    return value === Object(value);
}
isObject([]);
>>>true
isObject({});
>>>true
isObject(1);
>>>false
3.Object对象的静态方法
  • 什么是静态方法?

部署在Object对象自身的方法。

3.1 Object.keys()Object.getOwnPropertyName()

①这两个方法很相似,一般用来遍历对象的属性。它们的参数都是一个对象,都返回一个数组,该数组的成员都是对象自身的(而不是继承的)所有属性名。

②那么它们有什么区别?

Object.keys方法只返回可枚举的属性名。
Object.getOwnPropertyNames方法还返回不可枚举的属性名。

var arr = ['Hello','World'];
Object.keys(arr);
>>>(2) ["0", "1"]

Object.getOwnPropertyNames(arr);
>>>(3) ["0", "1", "length"]
  • 数组的length属性是不可枚举的属性,所以只出现在Object.getOwnPropertyNames方法的返回结果中。
4.不同数据类型的Object.prototype.toString方法返回值如下:

数值:返回[object Number]
字符串:返回[object String]
布尔值:返回[object Boolean]
undefined:返回[object Undefined]
null:返回[object Null]
数组:返回[object Array]
arguments对象:返回[object Arguments]
函数:返回[object Function]
Error对象:返回[object Error]
Date对象:返回[object Date]
RegExp对象:返回[object RegExp]
其他对象:返回[object Object]

  • 也就是说,Object.prototype.toString可以得到一个实例对象的构造函数
//实例对象123
Object.prototype.toString.call(123);
//构造函数Number
>>>"[object Number]"
  • 利用这个特性,可以写一个比typeof运算符更加精确的函数
var type = function(o){
    var s = Object.prototype.toString.call(o);
    return s.match(/\[object (.*?)\]/)[1].toLowerCase();
}
type({});
>>>"object"
match.png

三.对象

1.对象字面量形式和构造形式创建的对象的区别?
  • 在对面字面量中你可以一次添加多个键/值对,但在构造形式中,你必须逐个添加属性。
2.
typeof null;
>>>"object"

原理是这样的:不同的对象在底层都以二进制表示,在JavaScript中二进制前三位都为0的话就会被判断为object类型,null的二进制表示是全0,自然前三位也是0,因此执行typeof时会返回"object"

3.字符串(基本类型):"yyc"并不是一个对象,只是一个字面量,而且是一个不可变的值。如果想在这个字面量上执行一些操作,比如获取长度、访问某个字符等,那需要将其转换为String对象。
var s = 'yyc';
s.length;
>>>3

s.indexOf('y');
>>>0
  • 不对呀,我这都没转换String对象,怎么也可以执行呀?

这是因为必要时JavaScript引擎会自动把字符串字面量转换成一个String对象。

4.访问对象的属性的两种方式:
var person = {
    name: 'Gerg'
};
//属性访问
person.name;
>>>"Gerg"

//键访问
person['name'];
>>>"Gerg"
5.可计算属性名

ES6增加了可计算属性名,可以在对象字面量形式中使用[]包裹一个表达式来当做属性名:

var prefix = 'foo';
var obj = {
    [prefix + 'bar']: 'Hello',
    [prefix + 'baz']: 'World'
};
obj['foobar'];
>>>"Hello"

obj['foobaz'];
>>>"World"
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,176评论 5 469
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,190评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,232评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,953评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,879评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,177评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,626评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,295评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,436评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,365评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,414评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,096评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,685评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,771评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,987评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,438评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,032评论 2 341

推荐阅读更多精彩内容