es6(四) （包含深浅拷贝）
1.Set
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>集合</title> </head> <body> <script> //创建一个 Set let s = new Set(); let s2 = new Set([1,2,3,4,5,5]); //自动去重 //属性 // console.log(s2.size);// length //方法 //添加 // s2.add(6); //删除 // s2.delete(1); //检测是否存在 // console.log(s2.has(20));// have 有 //清空 // s2.clear(); // console.log(s2); //遍历Set // for(let v of s2){ // console.log(v); // } </script> </body> </html>
2.set集合实践
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实践</title> </head> <body> <script> let arr = [1, 2, 10, 1, 3, 5, 2, 3]; let arr2 = [1, 4, 6, 8, 10]; //1. 数组去重 // let s = new Set(arr); // let newArr = [...s]; // console.log(newArr); //2. 交集 // let inter = [...new Set(arr)].filter(function(item){ // let s = new Set(arr2); // return s.has(item); // }); // let inter = [...new Set(arr)].filter(item => new Set(arr2).has(item)); //3. 并集 // let union = [...new Set([...arr, ...arr2])]; // console.log(union); //4. 差集 // let diff = [...new Set(arr2)].filter(item => !(new Set(arr).has(item))); // console.log(diff); </script> </body> </html>
3.对象申明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>对象声明</title> </head> <body> <script> //通过构造函数创建对象 // function Phone(brand, price){ // this.brand = brand; // this.price = price; // } // Phone.prototype.call = function(someone){ // console.log("我可以打电话给" + someone); // } // //实例化 // const huawei = new Phone("华为", 1999); // huawei.call("赵丽颖");// 朋友圈 class Phone{ //构造方法 // 1. 名字固定的 // 2. 构造方法只能有一个 constructor(brand, price){ this.brand = brand; this.price = price; } //声明实例对象的方法 call(someone){ console.log(`我可以给${someone}打电话`); } } //实例化对象 let oppo = new Phone('oppo', 999); console.log(oppo); oppo.call('刘渊') </script> </body> </html>
4.对象静态属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>静态成员</title> </head> <body> <script> //静态成员 // function Phone(brand, price){ // this.brand = brand; // this.price = price; // } // Phone.name = "手机"; // Phone.change = function(){ // console.log("改变了世界"); // } // Phone.change(); //class 版本 class Phone{ constructor(brand, price){ this.brand = brand; this.price = price; } //添加静态成员 static name = "手机"; static change(){ console.log("我改变了人们的通信习惯") } } //static 成员是属于类这个对象的 Phone.change(); console.log(Phone.name); //实例对象 let xiaomi = new Phone('小米', 699); console.log(xiaomi.name); </script> </body> </html>
对象继承
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>对象继承</title> </head> <body> <script> //对象的继承 //普通手机 // function Phone(brand, price){ // this.brand = brand; // this.price = price; // } // Phone.prototype.call = function(){ // console.log("我可以打电话哦!!!"); // } // //智能手机 // function SmartPhone(brand, price, screen, pixel){ // //调用父类函数实现属性的初始化 // Phone.call(this, brand, price); // //设置当前独有的属性 // this.screen = screen; // this.pixel = pixel; // } // SmartPhone.prototype = new Phone; // SmartPhone.prototype.constructor = SmartPhone; // SmartPhone.prototype.playGame = function(){ // console.log("可以玩游戏"); // } // SmartPhone.prototype.learn = function(){ // console.log("可以学习"); // } // //实例化对象 // let chuizi = new SmartPhone('锤子',2499, '5inch', '500w'); // chuizi.call(); // console.log(chuizi); class Phone{ //父类初始化 constructor(brand, price){ this.brand = brand; this.price = price; } call(){ console.log("我可以打电话"); } } class SmartPhone extends Phone{ //子类初始化 constructor(brand, price, screen, pixel){ //调用父类的 constructor 初始化brand 和 price 属性 super(brand, price); //初始化子类的属性 this.screen = screen; this.pixel = pixel; } //方法的添加 playGame(){ console.log("我可以玩游戏"); } takePhoto(){ console.log("我可以拍照") } //重写 call(){ console.log("我可以进行视频通话!!"); } } let onePlus = new SmartPhone("1+", 2569, '4.7inch', '500w'); console.log(onePlus); //调用子类的方法 onePlus.takePhoto(); onePlus.call(); </script> </body> </html>
对象扩展
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>对象扩展</title> </head> <body> <script> //1. 判断两个值是否完全相等 === // console.log(Object.is(10, 10)); // console.log(Object.is(10, '10')); // console.log(Object.is(NaN, NaN));// true //2. Object.assign 对象的合并 // let c1 = { // port: 8000, // root: 'c:/abc' // }; // let c2 = { // port: 7000, // root: 'd:/eaf', // name: 'c2' // }; // Object.assign(c1, c2); // console.log(c1) //3. 直接修改 __proto__ 设置原型 let a = {name:"abc"}; let b = {age:20}; a.__proto__ = b; console.log(a); </script> </body> </html>
浅拷贝
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浅拷贝</title> </head> <body> <script> //1. 直接复制，引用数据类型地址也复制了 // let arr = [1,2,3]; // let newArr = arr; // newArr[0] = 5211314; // console.log(arr); // console.log(newArr); //2. 数组 // var arr = [1,2,3,4,{name:'尚硅谷'}]; // 1> concat,修改基本数据类型，旧数组不影响原数组 // 修改引用数据类型的属性，旧数组影响原数组 // 修改引用数据类型地址，旧数组不影响原数组 // var newArr = [].concat(arr); //数组连接 newarr[0]=9; // newarr[3]={age:15} newarr[3].name='li' console.log(arr) console.log(newarr) // 2> slice，修改基本数据类型，旧数组不影响原数组 // 修改引用数据类型的属性，旧数组影响原数组 // 修改引用数据类型地址，旧数组不影响原数组 // var newArr = arr.slice(0); //数组分割 // 3> 扩展运算符,修改基本数据类型，旧数组不影响原数组 // 修改引用数据类型的属性，旧数组影响原数组 // 修改引用数据类型地址，旧数组不影响原数组 // var newArr = [...arr]; // newArr[4].name = "atguigu"; // console.log(arr) // console.log(newArr); //3. 对象 // assign, 对于引用类型数据，属性修改，新旧数组指引的是同一个地址 let school = { name: "atguigu", cities: ['北京','上海','深圳'] }; let newSchool = {}; Object.assign(newSchool, school); newSchool.cities[0] = "BEIJING"; console.log(newSchool) console.log(school); </script> </body> </html>
深拷贝
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>深拷贝-JSON</title> </head> <body> <script> //声明一个对象 let school = { name: "尚硅谷", cities: ['深圳','上海','北京'], change: function(){ console.log("可以改变你!!"); } }; //1. JSON.stringify 将对象转为字符串,新旧对象改变了，互相不影响 let str = JSON.stringify(school); //2. JSON.parse 将字符串转为对象 let newSchool = JSON.parse(str); //注意: JSON 不能转化对象的方法数据 newSchool.cities[0] = 'SHENZHEN'; console.log(school); //{name: "尚硅谷", cities: Array(3), change: ƒ} console.log(newSchool); //{name: "尚硅谷", cities: Array(3)} </script> </body> </html>
递归实现深拷贝
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>递归实现深拷贝 - 思路</title> </head> <body> <script> let school = { name: "尚硅谷", cities: ['深圳','上海','北京'], founder:{ name: "刚哥", age: 43 }, change: function(){ console.log("可以改变你!!"); } }; let arr = [1,2,3, {name:'abc'}]; //1. 创建一个空的对象 let newSchool = {};// // let newSchool = [];// //拷贝第一个基本数据类型的属性 newSchool['name'] = school['name']; //拷贝第二个 // newSchool['cities'] = school.cities; newSchool['cities'] = []; newSchool['cities'][0] = school['cities'][0]; newSchool['cities'][1] = school['cities'][1]; newSchool['cities'][2] = school['cities'][2]; //拷贝第三个 newSchool['founder'] = {}; newSchool['founder'].name = school['founder'].name; newSchool['founder'].age = school['founder'].age; //拷贝第四个 newSchool['change'] = school['change'].bind(newSchool); console.log(school) console.log(newSchool); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>深拷贝</title> </head> <body> <script> let school = { name: "尚硅谷", cities: ['深圳', '上海', '北京'], founder: { name: "刚哥", age: 43 }, change: function () { console.log("可以改变你!!"); } }; //声明函数 function deepClone(data) { //创建一个容器存放所有的属性 let type = getDataType(data); //创建容器 let container; if (type === 'Object') { container = {}; } else if (type === "Array") { container = []; } else { return data; } //遍历 for...in 也能遍历数组 for (let i in data) { //判断 data[i] 的类型 let type = getDataType(data[i]); if (type === 'Object' || type === 'Array') { //递归调用 // container[i] = deepClone(data[i]); container[i] = deepClone(data[i]); }else if(type === 'Function'){ //函数类型 container[i] = data[i].bind(container); }else{ //基本数据类型 container[i] = data[i]; } } return container; } let newSchool = deepClone(school); newSchool.cities[0] = "BEIJING"; newSchool.founder.age = 18; console.log(newSchool); console.log(school); //用来获取数据的类型 // **Object.toString() : ** 返回 “[Object type]”,type 是对象的类型。 function getDataType(data) { let result = Object.prototype.toString.call(data).slice(8, -1); return result; } </script> </body> </html>
