【重温基础】12.使用对象 上

简介: 【重温基础】12.使用对象 上


本文是 重温基础 系列文章的第十二篇。

今日感受:需要总结下2018。

这几天,重重的感冒发烧,在家休息好几天,伤···。

系列目录:

本章节复习的是JS中对象的使用,这是重点。

前置知识:

JavaScrip的设计是一个简单的基于对象的范式。

对象是一系列属性的集合,一个属性包含一个键和一个值,也叫键值对

若一个属性的值,是一个函数,则称这个属性为方法。

一个对象,可以有很多方法,就像一个杯子,可以有颜色,重量,形状等属性。

注意:

对象的名称,对大小写敏感。

1.创建对象

本文主要是复习对象的使用,至于对象的创建,下面这里简单介绍一下常见的创建对象的方法:

创建方法1

let obj = new Object();  // 声明一个空对象

创建方法2

let obj = {};            // 声明一个空对象

上面的name是对象obj中的一个属性,对应的值为"leo"

2.设置对象属性和访问属性

设置对象属性,也有两种方法:

直接设置

let obj = {};
obj.name = "leo";        // 为对象添加属性和值

创建时设置

let obj = {name : 'leo'};
obj.name = "leo";        // 为对象添加属性和值

当一个对象定义了一个属性,我们可以用点符号(.)来访问它。

obj.name; // "leo"

注意

  • 属性的另外一种写法:
let obj = {};
let n = "name";
obj[n] = "leo";   // 属性名使用变量
obj["height"] = 188;     // 字符串
obj["age" + "Is"] = 15;  // 字符串拼接
console.log(obj);
/*
obj = {
    ageIs: 15
    height: 188
    name: "leo"
}
*/
  • 属性的值也可以是个方法:
let obj = {};
obj.getTime = function(){
    return new Date();
}
obj.getTime();  // 访问属性的方法
//Wed Jan 02 2019 21:07:59 GMT+0800 (中国标准时间) 

3.枚举对象的所有属性

ECMAScript 5 开始,有三种原生的方法用于列出或枚举对象的属性:

3.1 for...in 循环

该方法依次访问一个对象及其原型链中所有可枚举的属性。

let obj = {a:1, b:2, c:3};
for (let i in obj) {
  console.log("obj." + i + " = " + obj[i]);
}
/*
"obj.a = 1"
"obj.b = 2"
"obj.c = 3"
*/

3.2 Object.keys(o)

该方法返回一个对象 o 自身包含(不包括原型中)的所有属性的名称的数组。

let obj = {a:1, b:2, c:3};
let arr = Object.keys(obj);
console.log(arr);
/*
["a", "b", "c"]
*/
arr.forEach(function(val,index,array){
  console.log("key:" + val+",val:"+obj[val])
})
/*
key:a,val:1
key:b,val:2
key:c,val:3
*/

3.3 Object.getOwnPropertyNames(o)

该方法返回一个数组,它包含了对象 o 所有拥有的属性(无论是否可枚举)的名称。

let obj = {a:1, b:2, c:3};
let arr = Object.getOwnPropertyNames(obj);
console.log(arr);
/*
["a", "b", "c"]
*/
arr.forEach(function(val,index,array){
  console.log("key:" + val+",val:"+obj[val])
})
/*
key:a,val:1
key:b,val:2
key:c,val:3
*/

4.ES6新增:对象的拓展

4.1 属性的简洁表示

let a = 'a1';
let b = { a };  // b => { a : 'a1' }
// 等同于
let b = { a : a };
function f(a, b){
    return {a, b}; 
}
// 等同于
function f (a, b){
    return {a:a ,b:b};
}
let a = {
    fun () {
        return 'leo';
    }
}
// 等同于
let a = {
    fun : function(){
        return 'leo';
    }
}

4.2 属性名表达式

JavaScript提供2种方法定义对象的属性

// 方法1 标识符作为属性名
a.f = true;
// 方法2 字符串作为属性名
a['f' + 'un'] = true;

延伸出来的还有:

let a = 'hi leo';
let b = {
    [a]: true,
    ['a'+'bc']: 123,
    ['my' + 'fun'] (){
        return 'hi';
    }
};
// b.a => undefined ; b.abc => 123 ; b.myfun() => 'hi'
// b[a] => true ; b['abc'] => 123 ; b['myfun'] => ƒ ['my' + 'fun'] (){ return 'hi'; }

注意

属性名表达式不能与简洁表示法同时使用,否则报错。

// 报错
let a1 = 'aa';
let a2 = 'bb';
let b1 = {[a1]};
// 正确
let a1 = 'aa';
let b1 = { [a1] : 'bb'};

4.3 Object.is()

Object.is() 用于比较两个值是否严格相等,在ES5时候只要使用相等运算符(==)和严格相等运算符(===)就可以做比较,但是它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0

Object.is('a','a');   // true
Object.is({}, {});    // false
// ES5
+0 === -0 ;           // true
NaN === NaN;          // false
// ES6
Object.is(+0,-0);     // false
Object.is(NaN,NaN);   // true 

4.4 Object.assign()

Object.assign()方法用于对象的合并,将原对象的所有可枚举属性复制到目标对象。

基础用法

第一个参数是目标对象,后面参数都是源对象

let a = {a:1};
let b = {b:2};
Object.assign(a,b);  // a=> {a:1,b:2}

注意

  • 若目标对象与源对象有同名属性,则后面属性会覆盖前面属性。
let a = {a:1, b:2};
let b = {b:3, c:4};
Object.assign(a, b); // a => {a:1, b:3, c:4}
  • 若只有一个参数,则返回该参数。
let a = {a:1};
Object.assign(a) === a;  // true
  • 若参数不是对象,则先转成对象后返回。
typeof Object.assign(2); // 'object'
  • 由于undefinedNaN无法转成对象,所以做为参数会报错。
Object.assign(undefined) // 报错
Object.assign(NaN);      // 报错
  • Object.assign()实现的是浅拷贝。

Object.assign()拷贝得到的是这个对象的引用。这个对象的任何变化,都会反映到目标对象上面。

let a = {a: {b:1}};
let b = Object.assign({},a);
a.a.b = 2;
console.log(b.a.b);  // 2
  • 将数组当做对象处理,键名为数组下标,键值为数组下标对应的值。
Object.assign([1, 2, 3], [4, 5]); // [4, 5, 3]


目录
相关文章
|
6月前
|
编译器 C++
c++primer plus 6 读书笔记 第十章 对象和类
c++primer plus 6 读书笔记 第十章 对象和类
|
7月前
|
Python
继承概念深度解析:代码视角下的科普之旅
继承概念深度解析:代码视角下的科普之旅
32 0
|
编译器 C++
【C++从0到王者】第二十三站:多态的概念、定义以及实现
【C++从0到王者】第二十三站:多态的概念、定义以及实现
57 1
|
7月前
|
设计模式
二十三种设计模式全面解析-深入探讨状态模式的高级应用技术:释放对象行为的无限可能
二十三种设计模式全面解析-深入探讨状态模式的高级应用技术:释放对象行为的无限可能
|
7月前
|
设计模式 Java 数据库
二十三种设计模式全面解析-单例设计模式:解密全局独一无二的实例创造者
二十三种设计模式全面解析-单例设计模式:解密全局独一无二的实例创造者
|
存储 安全 Java
基础一:一切都是对象
基础一:一切都是对象
105 0
|
编译器 C++
爱上c++的第三天(核心课程):类和对象--对象特性
初始化数据,主要作用于创建对象时为对象的成员属性赋值,构造函数由系统自动调用,无需手动调用。
96 0
爱上c++的第三天(核心课程):类和对象--对象特性
|
存储 Java
Java面向对象基础(二)
Java面向对象基础(二)
174 0
Java面向对象基础(二)
|
JavaScript 安全 前端开发
【重温基础】4.函数
【重温基础】4.函数
112 0
|
JavaScript 前端开发 网络架构
【重温基础】10.数组
【重温基础】10.数组
145 0