obj: object是什么意思_面试官问你JavaScript基本类型时他想知道什么?
本文原载于SegmentFault专栏"前端小将"
整理编辑:SegmentFault
面试的时候我们经常会被问答js的数据类型。大部分情况我们会这样回答包括:
1.基本类型(值类型或者原始类型): Number、Boolean、String、NULL、Undefined以及ES6的Symbol
2.引用类型:Object、Array、Function、Date等
作者曾经也是这样回答的,并且一直觉得没有什么问题。那么面试官问你Js数据类型时,他想知道什么呢?
1 、在内存中的位置不同
基本类型: 占用空间固定,保存在栈中;
引用类型:占用空间不固定,保存在堆中;
栈(stack)为自动分配的内存空间,它由系统自动释放;使用一级缓存,被调用时通常处于存储空间中,调用后被立即释放。堆(heap)则是动态分配的内存,大小不定也不会自动释放。使用二级缓存,生命周期与虚拟机的GC算法有关
当一个方法执行时,每个方法都会建立自己的内存栈,在这个方法内定义的变量将会逐个放入这块栈内存里,随着方法的执行结束,这个方法的内存栈也将自然销毁了。因此,所有在方法中定义的变量都是放在栈内存中的;栈中存储的是基础变量以及一些对象的引用变量,基础变量的值是存储在栈中,而引用变量存储在栈中的是指向堆中的数组或者对象的地址,这就是为何修改引用类型总会影响到其他指向这个地址的引用变量。
当我们在程序中创建一个对象时,这个对象将被保存到运行时数据区中,以便反复利用(因为对象的创建成本通常较大),这个运行时数据区就是堆内存。堆内存中的对象不会随方法的结束而销毁,即使方法结束后,这个对象还可能被另一个引用变量所引用(方法的参数传递时很常见),则这个对象依然不会被销毁,只有当一个对象没有任何引用变量引用它时,系统的垃圾回收机制才会在核实的时候回收它。
2、赋值、浅拷贝、深拷贝
对于基本类型值,赋值、浅拷贝、深拷贝时都是复制基本类型的值给新的变量,之后二个变量之间操作不在相互影响。
对于引用类型值,
赋值后二个变量指向同一个地址,一个变量改变时,另一个也同样改变;
浅拷贝后得到一个新的变量,这个与之前的已经不是指向同一个变量,改变时不会使原数据中的基本类型一同改变,但会改变会原数据中的引用类型数据
深拷贝后得到的是一个新的变量,她的改变不会影响元数据
- | 和原数据是否指向同一对象 | 第一层数据为基本数据类型 | 原数据中包含子对象 |
---|---|---|---|
赋值 | 是 | 改变会使原数据一同改变 | 改变会使原数据一同改变 |
浅拷贝 | 否 | 改变不会使原数据一同改变 | 改变会使原数据一同改变 |
深拷贝 | 否 | 改变不会使原数据一同改变 | 改变不会使原数据一同改变 |
var obj1 = { 'name' : 'zhangsan', 'age' : '18', 'language' : [1,[2,3],[4,5]], }; var obj2 = obj1; var obj3 = shallowCopy(obj1); function shallowCopy(src) { var dst = {}; for (var prop in src) { if (src.hasOwnProperty(prop)) { dst[prop] = src[prop]; } } return dst; } obj2.name = "lisi"; obj3.age = "20"; obj2.language[1] = ["二","三"]; obj3.language[2] = ["四","五"]; console.log(obj1); //obj1 = { // 'name' : 'lisi', // 'age' : '18', // 'language' : [1,["二","三"],["四","五"]], //}; console.log(obj2); //obj2 = { // 'name' : 'lisi', // 'age' : '18', // 'language' : [1,["二","三"],["四","五"]], //}; console.log(obj3); //obj3 = { // 'name' : 'zhangsan', // 'age' : '20', // 'language' : [1,["二","三"],["四","五"]], //};
2.1、浅拷贝
数组常用的浅拷贝方法有slice
,concat
,Array.from()
,以及es6的析构
var arr1 = [1, 2,{a:1,b:2,c:3,d:4}];var arr2 = arr1.slice();var arr3 = arr1.concat();var arr4 = Array.from(arr1);var arr5 = [...arr1];arr2[0]=2;arr2[2].a=2;arr3[0]=3;arr3[2].b=3;arr4[0]=4;arr4[2].c=4;arr5[0]=5;arr5[2].d=5;// arr1[1,2,{a:2,b:3,c:4,d:5}]// arr2[2,2,{a:2,b:3,c:4,d:5}]// arr3[3,2,{a:2,b:3,c:4,d:5}]// arr4[4,2,{a:2,b:3,c:4,d:5}]// arr5[5,2,{a:2,b:3,c:4,d:5}]
对象常用的浅拷贝方法Object.assign()
,es6析构
var obj1 = { x: 1, y: { m: 1 }};var obj2 = Object.assign({}, obj1);console.log(obj1) //{x: 1, y: {m: 1}}console.log(obj2) //{x: 1, y: {m: 1}}obj2.x=2;obj2.y.m = 2; //修改obj2.y.mconsole.log(obj1) //{x: 1, y: {m: 2}}console.log(obj2) //{x: 2, y: {m: 2}}
我们自己实现一个浅拷贝
var obj = { a:1, arr: [2,3] };var shallowObj = shallowCopy(obj);var shallowCopy = function(obj) { // 只拷贝对象 if (typeof obj !== 'object') return; // 根据obj的类型判断是新建一个数组还是对象 var newObj = obj instanceof Array ? [] : {}; // 遍历obj,并且判断是obj的属性才拷贝 for (var key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = obj[key]; } } return newObj;}
2.2、深拷贝
比较简单粗暴的的做法是使用JSON.parse(JSON.stringify(obj))
var arr = ['old', 1, true, ['old1', 'old2'], {old: 1}]var new_arr = JSON.parse( JSON.stringify(arr) );new_arr[4].old=4;console.log(arr); //['old', 1, true, ['old1', 'old2'], {old: 1}]console.log(new_arr); //['old', 1, true, ['old1', 'old2'], {old: 4}]
JSON.parse(JSON.stringify(obj))
看起来很不错,不过MDN文档 的描述有句话写的很清楚:
undefined、任意的函数以及 symbol 值,在序列化过程中会被忽略(出现在非数组对象的属性值中时)或者被转换成 null(出现在数组中时)。
但是在平时的开发中JSON.parse(JSON.stringify(obj))
已经满足90%的使用场景了。
下面我们自己来实现一个
var deepCopy = function(obj) { if (typeof obj !== 'object') return; var newObj = obj instanceof Array ? [] : {}; for (var key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key]; } } return newObj;}
3、参数的传递
所有的函数参数都是按值传递。也就是说把函数外面的值赋值给函数内部的参数,就和把一个值从一个变量赋值给另一个一样;
基本类型
var a = 2;function add(x) { return x = x + 2;}var result = add(a);console.log(a, result); // 2 4
引用类型
function setName(obj) { obj.name = 'laowang'; obj = new Object(); obj.name = 'Tom';}var person = new Object();setName(person);console.log(person.name); //laowang
很多人错误地以为在局部作用域中修改的对象在全局作用域中反映出来就是说明参数是按引用传递的。
但是通过上面的例子可以看出如果person是按引用传递的最终的person.name应该是Tom。
实际上当函数内部重写obj时,这个变量引用的就是一个局部变量了。而这个变量会在函数执行结束后销毁。(这是是在js高级程序设计看到的,还不是很清楚)
4、判断方法
基本类型用typeof
,引用类型用instanceof
特别注意
typeof null
是"object"
,null instanceof Object
是true
;
console.log(typeof "Nicholas"); // "string"console.log(typeof 10); // "number"console.log(typeof true); // "boolean"console.log(typeof undefined); // "undefined"console.log(typeof null); // "object"var items = [];var obj = {};function reflect(value){ return value;}console.log(items instanceof Array); // true;console.log(obj instanceof Object); // true;console.log(reflect instanceof Function); // true;
Object.prototype.toString.call([]).slice(8, -1)
有兴趣的同学可以看一下这个是干什么的
5、总结
欢迎关注 SegmentFault 微信公众号 :)
obj: object是什么意思_面试官问你JavaScript基本类型时他想知道什么?相关推荐
- js var是什么类型_面试官问你JS基本类型时他想知道什么?
点击上方"IT平头哥联盟",选择"置顶或者星标" 一起进步- 面试的时候我们经常会被问答js的数据类型.大部分情况我们会这样回答包括: 1.基本类型(值类型或者 ...
- java执行sql文件_面试官问你MyBatis SQL是如何执行的?把这篇文章甩给他
初识 MyBatis MyBatis 是第一个支持自定义 SQL.存储过程和高级映射的类持久框架.MyBatis 消除了大部分 JDBC 的样板代码.手动设置参数以及检索结果.MyBatis 能够支持 ...
- .jar中没有主清单属性_面试官问:为什么SpringBoot的 jar 可以直接运行?
点击上方蓝色字体,选择"设为星标" 优质文章,及时送达 来源 | https://urlify.cn/uQvIna SpringBoot提供了一个插件spring-boot-mav ...
- sql参数化还是被注入了_面试官问你 SQL 注入攻击了吗?
目录 为什么要聊 SQL 注入攻击? 什么是 SQL 注入攻击? 如何进行 SQL 注入攻击? 如何防范? 常见面试题 瞎比比 为什么要聊 SQL 注入攻击? 我这人有个想法,就是不管自己跳不跳槽,每 ...
- 16 bit float 存储_面试官问我存储金额应该用哪种数据类型,我竟这样回答
前言 最近在面试时,碰到这样一个问题:在问到项目部分时,面试官问我:你的项目中用到的分数.金额之类的数字是用的什么数据类型? 我没有过多思考脱口而出:double!随后面试官又问:为啥不用floa ...
- 简述ip地址的abc类如何划分_面试官问:讲讲IP地址的分配原理
网络模型介绍 在计算机网络中有著名的OSI七层协议体系结构,概念清楚,理论完整,但是它既复杂又不实用.TCP/IP体系结构则不同,得到了广泛的应用.最终结合OSI和TCP/IP的优点,采用了一种只有五 ...
- redis怎么修改_面试官问我Redis事务,还问我有哪些实现方式
❝ 「第12期」 距离大叔的80期小目标还有68期,今天大叔要跟大家分享的内容是 -- Reids中的事务.同样,这也是redis中重要指数为四颗星的必备基础知识点.下面一起来了解一下吧. ❞ 相信大 ...
- 冒泡排序java代码_面试官问我插入排序和冒泡排序哪个更牛逼?
(给算法爱好者加星标,修炼编程内功) 来源:小鹿动画学编程,作者:小鹿同学 写在前边 排序对于每个开发者来讲,都多多少少知道几个经典的排序算法,比如我们之前以动画形式分享的冒泡排序,也包括今天要分享的 ...
- hashmap扩容_面试官问:HashMap在并发情况下为什么造成死循环?一脸懵
这个问题是在面试时常问的几个问题,一般在问这个问题之前会问Hashmap和HashTable的区别?面试者一般会回答:hashtable是线程安全的,hashmap是线程不安全的. 那么面试官就会紧接 ...
最新文章
- 300. Longest Increasing Subsequence
- PyTorch基础-交叉熵函数mnist数据集识别-04
- 那些年,我们一起做过的性能优化
- 【Linux】一步一步学Linux——dpkg-statoverride命令(277)
- 从入门到实践,快速掌握 Nginx 研发
- react打包后图片丢失_使用 webpack 搭建 React 项目
- java biginteger 比较大小,java – 打印非常大的BigIntegers
- TR069协议与商业应用6——TR069动态库开发
- SXF2019集合遍历
- Meta-Tracker(ECCV 2018)视频目标跟踪源码运行笔记——Testing模式
- 移动通信技术的发展历程初
- Python的numpy中axis=0、axis=1、axis=2解释
- 字符串按大小写排序,大写在前,小写在后,比如AaBCcD
- java写作教程_如何编写技术教程-发布关于开发人员写作的新书
- Android官网教你如何系统学习
- 传统波束形成的算法实现
- OTT TV影音系统,不丢帧、不卡顿、不花屏
- Android ADB工具-管理设备/取设备硬件信息(一)
- 全球测试服显示服务器维护,美服8小时维护,暴雪测试角色复制 ,怀旧服最新版本即将上线...
- 13 Webpack中的配置-Externals