首页 > 其他分享 >前端面试题-js(三)

前端面试题-js(三)

时间:2023-07-11 17:33:41浏览次数:36  
标签:面试题 name 对象 前端 js let user clone 属性

1.JavaScript中的对象

JavaScript 中有八种数据类型。有七种原始类型,因为它们的值只包含一种东西(字符串,数字或者其他)。相反,对象则用来存储键值对和更复杂的实体。

对象是具有一些特殊特性的关联数组。

它们存储属性(键值对),其中:

  • 属性的键必须是字符串或者 symbol(通常是字符串)。
  • 值可以是任何类型。

我们可以用下面的方法访问属性:

  • 点符号: obj.property
  • 方括号 obj["property"],方括号允许从变量中获取键,例如 obj[varWithKey]

其他操作:

  • 删除属性:delete obj.prop
  • 检查是否存在给定键的属性:"key" in obj
  • 遍历对象:for(let key in obj) 循环。

我们在这一章学习的叫做“普通对象(plain object)”,或者就叫对象。

JavaScript 中还有很多其他类型的对象:

  • Array 用于存储有序数据集合,
  • Date 用于存储时间日期,
  • Error 用于存储错误信息。
  • ……等等。

它们有着各自特别的特性,我们将在后面学习到。有时候大家会说“Array 类型”或“Date 类型”,但其实它们并不是自身所属的类型,而是属于一个对象类型即 “object”。它们以不同的方式对 “object” 做了一些扩展。

2.对象引用和复制

   赋值了对象的变量存储的不是对象本身,而是该对象“在内存中的地址” —— 换句话说就是对该对象的“引用”。

   当一个对象变量被复制 —— 引用被复制,而该对象自身并没有被复制。

克隆与合并,Object.assign

克隆:可以创建一个新对象,通过遍历已有对象的属性,并在原始类型值的层面复制它们,以实现对已有对象结构的复制。

let user = {
  name: "John",
  age: 30
};

let clone = {}; // 新的空对象

// 将 user 中所有的属性拷贝到其中
for (let key in user) {
  clone[key] = user[key];
}

// 现在 clone 是带有相同内容的完全独立的对象
clone.name = "Pete"; // 改变了其中的数据

alert( user.name ); // 原来的对象中的 name 属性依然是 John

也可以使用 Object.assign 方法来达成同样的效果。

语法是:

 
Object.assign(dest, [src1, src2, src3...])
  • 第一个参数 dest 是指目标对象。
  • 更后面的参数 src1, ..., srcN(可按需传递多个参数)是源对象。
  • 该方法将所有源对象的属性拷贝到目标对象 dest 中。换句话说,从第二个开始的所有参数的属性都被拷贝到第一个参数的对象中。
  • 调用结果返回 dest

例如,我们可以用它来合并多个对象:

let user = { name: "John" };

let permissions1 = { canView: true };
let permissions2 = { canEdit: true };

// 将 permissions1 和 permissions2 中的所有属性都拷贝到 user 中
Object.assign(user, permissions1, permissions2);

// 现在 user = { name: "John", canView: true, canEdit: true }

如果被拷贝的属性的属性名已经存在,那么它会被覆盖:

let user = { name: "John" };

Object.assign(user, { name: "Pete" });

alert(user.name); // 现在 user = { name: "Pete" }

也可以用 Object.assign 代替 for..in 循环来进行简单克隆:

let user = {
  name: "John",
  age: 30
};

let clone = Object.assign({}, user);

它将 user 中的所有属性拷贝到了一个空对象中,并返回这个新的对象。

还有其他克隆对象的方法,例如使用 spread 语法 clone = {...user} 

深层克隆

到现在为止,我们都假设 user 的所有属性均为原始类型。但属性可以是对其他对象的引用。

例如:

 
let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

alert( user.sizes.height ); // 182

 

 

现在这样拷贝 clone.sizes = user.sizes 已经不足够了,因为 user.sizes 是个对象,它会以引用形式被拷贝。因此 clone 和 user 会共用一个 sizes:

 
let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

let clone = Object.assign({}, user);

alert( user.sizes === clone.sizes ); // true,同一个对象

// user 和 clone 分享同一个 sizes
user.sizes.width++;       // 通过其中一个改变属性值
alert(clone.sizes.width); // 51,能从另外一个获取到变更后的结果

 

 

为了解决这个问题,并让 user 和 clone 成为两个真正独立的对象,我们应该使用一个拷贝循环来检查 user[key] 的每个值,如果它是一个对象,那么也复制它的结构。这就是所谓的“深拷贝”。

我们可以使用递归来实现它。或者为了不重复造轮子,采用现有的实现,例如 lodash 库的 _.cloneDeep(obj)

使用 const 声明的对象也是可以被修改的

通过引用对对象进行存储的一个重要的副作用是声明为 const 的对象 可以 被修改。

例如:

 
const user = {
  name: "John"
};

user.name = "Pete"; // (*)

alert(user.name); // Pete

 

 

看起来 (*) 行的代码会触发一个错误,但实际并没有。user 的值是一个常量,它必须始终引用同一个对象,但该对象的属性可以被自由修改。

换句话说,只有当我们尝试将 user=... 作为一个整体进行赋值时,const user 才会报错。

也就是说,如果我们真的需要创建常量对象属性,也是可以的,但使用的是完全不同的方法。 

总结

对象通过引用被赋值和拷贝。换句话说,一个变量存储的不是“对象的值”,而是一个对值的“引用”(内存地址)。因此,拷贝此类变量或将其作为函数参数传递时,所拷贝的是引用,而不是对象本身。

所有通过被拷贝的引用的操作(如添加、删除属性)都作用在同一个对象上。

为了创建“真正的拷贝”(一个克隆),我们可以使用 Object.assign 来做所谓的“浅拷贝”(嵌套对象被通过引用进行拷贝)或者使用“深拷贝”函数,例如 _.cloneDeep(obj)

 

标签:面试题,name,对象,前端,js,let,user,clone,属性
From: https://www.cnblogs.com/liqinzhen/p/17545400.html

相关文章

  • 前端色环制作的方式
    需求背景最近有个项目中有个功能需要在浏览器上实现图片颜色任意变化,并且不会出现卡顿,要向德芙一样的丝滑思路最开始的思路使用canvas+js的方式实现github地址:https://github.com/miniflycn/JsCV这个方式好处就是canvase绘制的图片不会失真,缺点就是图像越精细,变动越大,canvas......
  • js中字符串的方法
    字符串的17种方法。。。。。。length:返回字符串的长度。conststr="Hello,World!";console.log(str.length);//输出13charAt(index):返回指定索引位置的字符。conststr="Hello,World!";console.log(str.charAt(4));//输出oconcat(str1,str2,...):连接两个或多......
  • nvm安装node报错Get "https://nodejs.org/dist/latest/SHASUMS256.txt": dial tcp 104
    windows上通过nvm管理node版本,在本地安装了nvm后,通过nvm安装node,报错了,信息:Couldnotretrievehttps://nodejs.org/dist/latest/SHASUMS256.txt.Gethttps://nodejs.org/dist/latest/SHASUMS256.txt:dialtcp104.20.23.46:443:i/otimeout 有了这样的信息,我......
  • Qt QJsonDocument以及与QJsonArray、QJsonObject、QJsonValue的关联
    0、说明QJsonDocument类提供了read/writeJSON文档的方法。用QJsonDocument::fromJson()方法,可以从将一个JSON文件(或者QByteArray数据)转换为QJsonDocument,用QJsonDocument::toJson()则能起到相反的用法。在此过程中的语法解析是很高效的,并且可以将JSON转换为Qt使用的二......
  • js 检测文本是否溢出
    自定义指令的方式手写实现/***检测文本是否溢出*参考https://github.com/ElemeFE/element/blob/dev/packages/table/src/table-body.js#L241*@param{*}e*@returns*/functionisEllipsis(e){returnnewPromise(resolve=>{constel=window.event......
  • go语言-不同类型转换为JSON格式数据
    1.将结构体转换为JSON:packagemainimport( "encoding/json" "fmt")typePersonstruct{ Namestring Ageint Emailstring}funcmain(){ person:=Person{Name:"Alice",Age:25,Email:"[email protected]"} ......
  • JS基础
    js基础之前学习的都忘了,重来一,js简介ECMAscript是javascript标准,所以一般情况下我们认为这是一个意思实际上javascript要更大一些完整的javascript实现应该由以下三个部分构成ECMAscriptDOMBOM构成 js的特点:解释型语言类似于java和c语言的结构动态语言基......
  • 细节决定成败,聊聊JS的类型(下)
    讲完了基本类型,我们来介绍一个现象:类型转换。因为JS是弱类型语言,所以类型转换发生非常频繁,大部分我们熟悉的运算都会先进行类型转换。大部分类型转换符合人类的直觉,但是如果我们不去理解类型转换的严格定义,很容易造成一些代码中的判断失误。其中最为臭名昭著的是JavaScript......
  • 【JavaScript】js 处理复制函数实现
    consthandleCopy=()=>{if(!keywordList.value.length)returnElMessage.warning('没有数据');consttext=JSON.stringify(keywordList.value);constinput=document.createElement('input');input.setAttribute('readonly......
  • web前端 第四天总结
    案例1:盒子模型<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</ti......