ITPub博客

首页 > 应用开发 > Html/css > 好程序员web前端培训分享JavaScript相关知识

好程序员web前端培训分享JavaScript相关知识

原创 Html/css 作者:好程序员 时间:2020-07-22 15:05:56 0 删除 编辑

  好程序员web 前端培训分享 JavaScript 相关知识 今天跟大家分享的是关于JavaScript 相关知识。正在从事 web 前端工作的小伙伴们来一起看看吧,希望能够对大家有所帮助。

   ( )JS 中基本类型和引用类型

   JavaScript 的变量中包含两种类型的值:基本类型值和引用类型值,在内存中的表现形式在于:前者是存储在栈中的一些简单的数据段,后者则是保存在堆内存中的一个对象。

   •基本类型值

   JavaScript 中基本数据类型有 String Number Undefined Null Boolean ,在 ES6 中,又定义了一种新的基本数据类型 Symbol ,所以一共有 6 种。

   基本类型是按值访问的,从一个变量复制基本类型的值到另一个变量后,这两个变量的值是完全独立的,即使一个变量改变了也不会影响到第二个变量。

   let str1 = ' 你好 ';

   let str2 = str1;

   str2 = 'hello word'console.log(str2);//'hello word'

   console.log(str1); //' 你好 '

   •引用类型值

   引用类型值是引用类型的实例,它是保存在堆内存中的一个对象,引用类型是一种数据结构,最常用的是Object,Array,Function 类型,此外还有 Date,RegExp,Error 等。

   ES6 中提供了 Set,Map2 种新的数据结构。

   ( )JS 中如何复制引用类型的

   •基本类型和引用类型赋值的差异化

   举个例子:在下面代码中,只修改了obj1 中的 name 属性,却同时改变了 ob1 obj2 中的 name 属性。

   let obj1 = {'name': ' 小明 '};

   let obj2 = obj1;obj2.name = ' 小兰 ';

   console.log(obj1); // {'name': ' 小明 '}

   console.log(obj2); // {'name': ' 小明 '}

   当变量复制引用类型值的时候,同样和基本类型值一样会将变量的值复制到新变量上,不同的是对于变量的值,它是一个指针,指向存储在堆内存中的对象。

   因为,在JS 中,堆内存中的对象无法直接访问,必须要访问这个对象在堆内存中的地址,然后再按照这个地址去获得这个对象中的值。

   ( ) 浅拷贝

   JS 中,如果属性是基本类型,拷贝的就是基本类型的值 ; 如果属性是引用类型,拷贝的就是内存地址 ; 所以如果其中一个对象改变了这个地址,就会影响到另一个对象。

   下面是JavaScript 提供的浅拷贝方法:

   Object.assign

   ES6 中拷贝对象的方法,接受的第一个参数是拷贝的目标,剩下的参数是拷贝的源对象 ;

   语法:Object.assign(target, ...sources)

   let p = { 'name': 'hello word',};

   let copyP = {};

   Object.assign(copyP, p);

   console.log(copyP);console.log(p);

   Object.assign 是一个浅拷贝,它只是在根属性 ( 对象的第一层级 ) 创建了一个新的对象,但是如果属性的值是对象的话,只会拷贝一份相同的内存地址。

   扩展运算符

   利用扩展运算符可以在构造字面量对象时,进行克隆或者属性拷贝。语法如下:

   let cloneObj = { ...obj };

   let obj = {'name': ' 星期一 ' 'college': [' 星期二 ' ' 星期三 ' ' 星期四 ']}let obj2 = {...obj};

   obj.name=' 不休息 ';//{'name': ' 不休息 ' 'college': [' 星期二 ' ' 星期三 ' ' 星期四 ']}console.log(obj);//{'name': ' 星期一 ' 'college': [' 星期二 ' ' 星期三 ' ' 星期四 ']}

   console.log(obj2);

   obj.college.push('Go');//{'name': ' 不休息 ' 'college': [' 星期二 ' ' 星期三 ' ' 星期四 ']}

   console.log(obj); //{'name': ' 不休息 ' 'college': [' 星期二 ' ' 星期三 ' ' 星期四 ']}

   console.log(obj2);

   扩展运算符和Object.assign() 存在同样的问题,对于值是对象的属性无法完全拷贝成两个不同对象 ;

   但是如果属性都是基本类型的值的话,使用扩展运算符更加简洁。

   ( ) 深拷贝

   浅拷贝只在根属性上在堆内存中创建了一个新的的对象,复制了基本类型的值,但是复杂数据类型也就是对象则是拷贝相同的地址。

   而深拷贝则是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。

   JSON.stringify

   JSON.stringify() 是目前开发过程中最常用的深拷贝方式,原理是把一个对象序列化成为一个 JSON 字符串,将对象的内容转换成字符串的形式再保存在内存中,再用 JSON.parse() 反序列化将 JSON 字符串变成一个新的对象。

   举个例子:

   let obj = { name: ' 少帅 ', age: 18, friends: [' 阿大 ', ' 阿二 '], goodF: { name: ' 水果 ', age: 19, address: ' 上海 ', pets: [{name: ' 西瓜 '}, {name: ' 苹果 '}]}, bir: new Date()};

   let newObj = JSON.parse(JSON.stringify(obj));

   obj.goodF.pets[0].name = ' 桔子 ';

   console.log(newObj);console.log(obj);

   使用JSON.stringify 实现深拷贝有几点要注意:

   1) 拷贝的对象的值中如果有函数 ,undefined,symbol ,经过 JSON.stringify() 序列化后的 JSON 字符串中这个键值对会消失 ;

   2) 无法拷贝不可枚举的属性,无法拷贝对象的原型链

   3) 拷贝 Date 引用类型会变成字符串

   4) 拷贝 RegExp 引用类型会变成空对象

   5) 对象中含有 NaN Infinity -Infinity ,则序列化的结果会变成 null

   递归实现深拷贝

   具体实现如下:

   /** * 辅助函数 , 判定是否是对象 * @param obj * @returns {boolean} */

   function isObj(obj) { return obj instanceof Object;}

   /** * 深拷贝 fromObj 面的所有属性 / , toObj 对象里面 * @param fromObj 拷贝对象 * @param toObj 目标对象 */

   function deepCopyObj2NewObj(fromObj, toObj) {

   for (let key in fromObj) {

   if(fromObj.hasOwnProperty(key)){

   let fromValue = fromObj[key]; // 如果是值类型,那么就直接拷贝赋值

   if (!isObj(fromValue)) {

   toObj[key] = fromValue;

   } else { // 如果是引用类型,那么就再调用一次这个方法, // 去内部拷贝这个对象的所有属性 // fromValue 是什么类型 , 创建一个该类型的空对象

   let tmpObj = new fromValue.constructor;

   // console.log(tmpObj); // debugger;

   deepCopyObj2NewObj(fromValue, tmpObj);

   toObj[key] = tmpObj;

   }

   }

   }}

   ( ) 总结

   1) 在日常开发中一般并不需要拷贝很多特殊的引用类型,深拷贝对象使用 JSON.stringify 是最直接和简单的方法。

   2) 实现一个完整的深拷贝是非常复杂的 , 需要考虑到很多边界情况。对于特殊的引用类型有拷贝需求的话,建议借助第三方完整的库 , 例如 lodash.js


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69913864/viewspace-2706174/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-03-20

  • 博文量
    342
  • 访问量
    154268