7. JavasScript 核心结构 --- 对象objects

最新推荐文章于 2024-07-02 11:49:13 发布

原创最新推荐文章于 2024-07-02 11:49:13 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

JavaScript 学习手册专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了JavaScript中的对象概念，包括如何创建、增加、删除属性，以及属性名称的定义。通过示例展示了对象属性的访问和遍历方法，并讨论了浅拷贝与深拷贝的区别。同时，还提到了如何检查对象属性是否存在以及剥离对象属性的技巧。

何为对象，对象其实可以看作为容器，是将真实世界的事物转化为代码并存储在里边。利用此容器工程师们可以根据事物的性质，功能将事物具像化。

JS中除了number，string，boolean，null，undefined，symbol之外，皆为对象。比如：array，nodelist，map，set等。

创建对象

let car = {
    name : 'ford',
    numberofEngine : 2,
    color : 'red'
    run : function(){alert("run");}
};

我们用花括号代表对象，在花括号里输入键值对代表此对象的属性与属性值。例如上边代码的name，numberofEngine，color和run。

增加对象的属性

car.isFourWheel = true

增加对象的属性也是比较简单的，如上代码，我们增加了isFourWheel属性并赋值为true。

我们也可以用同样的方法覆盖之前的属性值：

car.name = 'BMW';

这样的话我们车的名字将改为‘BMW'

删除对象的属性

delete car.isFourWheel

在对象属性前面加上delete和空格，便可将isFourWheel这个属性从car中删掉

当然我们也可以做：car.isFourWheel=undefined，同样也可以删掉isFourWheel属性，但最好不要这么做，undefined的意思是值从未定义过，而显然isFOurWheel被定义过，只不过现在想删除它。所以作为JS工程师不要将undefined赋值给任何变量。我们也可以将其设为null。但是与delete不同的是，不论设为undefined或null，这个属性还是存在的，如果想要彻底删除，还是需要delete语句。

属性名称的定义

对象的属性名称可以是字符串类型，也可以是数字，名称的定义也是根据类型不同，也有不同。

比如说我想我的属性名称“name”改为“full name”或改为“full-name”。可以看到字符串中间有空格或横杠，再用之前的方法去定义或者获取属性值就行不通了：

car.full name = "BMW"

let car = {
full name : "BMW"
}

上边的代码皆是错误的，此时定义和获取属性值需要用到中括号,如下代码：

let car = {
    'full name' : 'BMW',
    'number-of-engine' : 2
};

car['full name'] = "BMW";
car['number-of-engine'] = 3;

如果属性名字为数字，则类似：

let car = {
    12 : ‘property12’
};

car['12'] = "property12";

如果属性名是动态的是一个变量呢，那该如何定义：

let carName = "full name";

let car = {
    //在对象里声明时加中括号
    [carName]:"BMW"
};

car[carName] = "ford";

ps：对象属性的顺序是根据定义属性的先后来排的，但如果属性里有多个数字类型，则是按照数字大小排序。

遍历对象中的属性

for(const key in car)
{
    //将键值对打印出来
    console.log(key, car[key]);
}

我们用for in 循环可以将对象里的属性按顺序获得，值得注意的是我们获取属性值是用的中括号，因为此时key是变量的形式。根据上文，属性名为字符串或变量时需用中括号获取其值。

省略号拷贝对象

在之前的文章中，我解释过用省略号拷贝数组与直接赋值数组的区别，对象跟数组是一样的，对象也是引用型的，如果直接将对象赋值给另一个对象变量，那么这两变量其实指向的是同一块对象，所以用省略号才是真正的拷贝：

let car = {name : 'ford'};
let carAssigned = car;
let carCopy = {...car};

car.name = "BMW";

console.log(car.name);//BMW
console.log(carAssigned.name);//BMW
console.log(carCopy.name);//ford

值得注意的是省略号不论是拷贝数组还是对象，仅拷贝一层，如果属性里边还有属性，或数组元素是个数组，那么下一层将不会被拷贝，而是引用原来的地址：

let car = {name : {firstName: 'f', LastName : "ford"}};

let copyCar = {...car};

car.name.firstName = 'new';

console.log(copyCar.name.firstName)//new

那要怎么做呢才能深度拷贝呢？

其实也简单，将是object或是array的属性重新定义就行了：

let car = {name : {firstName: 'f', LastName : "ford"}，age:2};

let copyCar = {...car,name:{...car.name}};//将name属性覆盖为car.name的拷贝

car.name.firstName = 'new';

console.log(copyCar.name.firstName)//f

那有没有其它方法进行拷贝呢？有的：

Object.assign

此方法需传入两个或多个参数，第一个参数是拷贝到哪个object里边，第二个为要拷贝的object，剩下的参数为如果有其它要拷贝的参数。

const copyCar = Object.assign({},car);

剥离对象中的属性

当我们仅对对象中的一个或几个属性有兴趣，其他的并没什么兴趣的时候，我们可以将这几个属性剥离出来：

let {name:carName， age:carAge} = car;

上边代码我们将car中的name,age属性剥离出来了，之后我们可以直接用carName,carAge来获得属性值，而不需要car.name,car.age了。

我们仍然可以给剩下的属性赋一个变量：

let {name:carName,...otherProps} = car;

otherProps将拥有car里边除name意外的所有属性。

查看属性是否存在

if(name in car)//检查name是否是car的属性
{

}
else{
}

当然我们也可以做if（car.name）来查看是否那么是undefined，只不过这种方法更专业～。两种方法都可达到目的。