JavaScript基础知识巩固——对象篇

it2022-05-05  199

一次面试,发现自己JavaScript对象知识这一块掌握的不好,一些知识点欠缺,所以特定总结一下关于JavaScript对象的相关知识。

在JavaScript中几乎“所有的事物”都是对象,  除了原始值, 都是对象。

一、对象的定义:

JavaScript的原始值

原始值指的是没有属性或方法的值,原始数据类型指的是拥有原始值的数据。

定义了5种原始数据类型:  1. string     2.  number     3. boolean    4.  null    5.  undefined

对象是包含变量的变量

JavaScript 变量能够包含单个的值,实例:

var test = "Bob Test";

对象也是变量, 且能够包含很多的值, 值按照名称:值对的形式编写,例:

var test = {firstName: "Bob", lastName: "Tom", age: 20}

JavaScript 对象是命名值的集合,JavaScript对象中的命名值被称为属性。  

以名称值对书写的对象类似于:  C中的哈希表 和 Java中的哈希映射等;

 

对象方法

方法是可以在对象上执行的动作, 对象属性可以是原始值、其他对象以及函数;

对象方法是包含函数定义的对象属性,  JavaScript对象是被称为属性和方法的命名值的容器。

属性值firstNameBoblastNameTomage20

创建JavaScript对象    有三种方法:

1. 定义和创建单个对象,使用对象文字;

   对象文字值的是花括号 {}中的名称:值对

var obj = { firstName: "test1", lastName: "test2", age: 20 }; var obj = { firstName: "test1", lastName: "test2", age : 20 };

 

2. 定义和创建单个对象,通过关键词new;

var obj = new Object(); obj.firstName = "test1"; obj.lastName = "test2"; obj.age = 20;

3. 定义对象构建器,然后创建构造类型的对象。

    在 ES5中,还可以通过函数 Object.create()   来创建对象。

JavaScript对象是容易改变的, 它们通过引用来寻址, 而非值,  比如:

var a = Test; //不会创建Test的副本, 对a的任何改变都将改变Test,他们是相同的对象。 var obj = {firstName: "test1", age: 20 } console.log(obj.age); //20 var a = obj; a.age = 21; a.firstName = "test2"; console.log(obj); // {firstName: "test2", age: 21}

 

二、对象的属性:

属性指的是与JavaScript对象相关的值,JavaScript对象是无序属性的集合, 属性通常可以被修改、添加和删除,但是某些属性是只读的。

访问对象属性的语法是:

第一种 objectName.property      // obj.age 第二种: objectName["property"] //obj["age"] 第三种: objectName[expression] //x = "age"; obj[x] ,表达式必须计算为属性名

(1)JavaScript   for...in  语句遍历对象的属性。

for...in      循环中的代码块会为每个属性执行一次,   循环对象的属性:

var obj = {firstName: "Bob", lastName: "Tom", age: 20} for(i in obj){ console.log(i); console.log(obj[i]); } // firstName Bob lastName Tom age 20

(2)添加新属性, 通过简单的赋值,向已存在的对象添加新属性。(不能使用预留词作为属性名)

var obj = {firstName: "Bob", lastName: "Tom", age: 20} obj.size = "big"; console.log(obj); //{firstName: "Bob", lastName: "Tom", age: 20, size: "big"}

(3)删除属性, delete 关键词从对象中删除属性:

var obj = {firstName: "Bob", lastName: "Tom", age: 20, size: "big"} delete obj.lastName; console.log(obj); //{firstName: "Bob", age: 20, size: "big"}

delete 关键词会同时删除属性的值 和 属性本身, 删除之后,属性在被添加回来之前是无法使用的。

delete 操作符 被设计用于对象属性, 它对变量或 函数没有影响

delet  操作符 不应被用于预定义的 JavaScript 对象属性,这样做会使得应用程序崩溃。

 

三、对象的方法:

JavaScript 方法是能够在对象上执行的操作, JavaScript 方法是包含函数定义的属性。

 this  关键词  ,  在JavaScript中,被称为  this 的事物, 指的是拥有该JavaScript 代码的对象;

  this 的值, 在函数中使用时, 是“拥有”该函数的对象。

实例:

var obj = { firstName: "Bob", lastName: "Tom", age: 20, testName: function () { //创建对象方法 return this.firstName + " 对象方法的测试 " + this.lastName; } } console.log(obj.testName()); //obj.testName() 访问对象方法

四、JavaScript对象访问器(Getter  和 Setter)

ES5 (2009年)引入了Getter 和 Setter ,它们允许你定义对象访问器。

var obj = { firstName: "Bob", lastName: "Tom", age: 20, set first(first){ //使用first属性来设置firstName属性的值 this.firstName = first; }, get last(){ //使用last属性来获取lastName属性的值 return this.lastName; } } //使用setter来设置对象属性 obj.first = "BobSetter方法测试"; console.log(obj.firstName); //BobSetter方法测试 console.log(obj.last); //Tom

使用 getter 和 setter 时,JavaScript 可以确保更好的数据质量;优点:

1. 提供了更简洁的语法                 2. 允许属性和方法的语法相同

3. 可以确保更好的数据质量          4. 有利于后台工作

Object.defineProperty()    方法也可以用于添加 Getter 和 Setter。

 

五、对象构造器

 创建相同类型的许多对象的 “蓝图”, 创建一种“对象类型”的方法,是使用对象构造器函数。

以下这个函数Obj()   就是对象构造器函数, 通过 new关键词调用构造器函数可以创建相同类型的的对象。

function Obj(first, last, age) { this.firstName = first; this.lastName = last; this.age = age; } var test = new Obj("Marin", "Tom", 19); var test2 = new Obj("Stike", "Mary", 20);

六、 对象原型

所有的JavaScript对象都从原型继承属性和方法。

你无法为已有的对象构造器添加新属性:

function Obj(first, last, age) { this.firstName = first; this.lastName = last; this.age = age; } var test = new Obj("Marin", "Tom", 19); var test2 = new Obj("Stike", "Mary", 20); Obj.play = "swim"; console.log(test.firstName + " 测试添加 " + test.play); //输出==》 Marin 测试添加 undefined

如果要向构造器中添加一个新的属性,则必须把它添加到构造器函数中。

function Obj(first, last, age) { this.firstName = first; this.lastName = last; this.age = age; this.play = "swim"; } var test = new Obj("Marin", "Tom", 19); var test2 = new Obj("Stike", "Mary", 20); Obj.play = "swim"; console.log(test.firstName + " 测试添加 " + test.play); //输出==》 Marin 测试添加 swim

原型继承: 所有JavaScript 对象都从原型继承属性和方法;

日期对象都继承自Date.prototype,数组对象继承自Array.prototype

Object.prototype 位于原型继承链的顶端。

使用prototype 属性, 可以为对象构造器添加新的属性。

function Obj(first, last, age) { this.firstName = first; this.lastName = last; this.age = age; } var test = new Obj("Marin", "Tom", 19); Obj.prototype.play = "sleep"; console.log(test.play); //sleep

 

七、操作对象的一些小技巧:

(1)动态的去更改对象的key

const testKey = 'test'; let obj = { firstName: "Mr", lastName: "Bob", age: 20, [testKey]: '测试' } console.log(obj); //{firstName: "Mr", lastName: "Bob", age: 20, test: "测试"}

(2)判断对象的数据类型

//用Object.prototype.toString 配合闭包来实现对象数据类型的判断 function Test(type){ return function(num){ return `[object ${type}]` === Object.prototype.toString.call(num) } } console.log(Test('Number')(100));

(3)使用 ...  运算符合并对象或数组中的对象

const obj1 = { firstName: 'Tom心累', age: 22 } const obj2 = { firstName: 'Mary', address: '广东' } const mergeObj = {...obj1, ...obj2}; console.log(mergeObj); //{firstName: "Mary", age: 22, address: "广东"}

(4)检查某对象中是否含有某个属性

var obj3 = { name: 'Jerry', age: 20 } console.log(obj3.hasOwnProperty('name')); // true console.log('name' in obj3); //true console.log(obj.hasOwnProperty('valueOf')); //false, 因为valueOf继承自原型链 console.log('valueOf' in obj); //true

 


最新回复(0)