当前位置:网站首页>1、深拷贝 2、call apply bind 3、for of for in 区别
1、深拷贝 2、call apply bind 3、for of for in 区别
2022-07-07 11:27:00 【成长中的向日葵】
1、Json.parse(Json.Stringfy())无法实现函数和undefined的深拷贝,如何解决呢?
来手写个深拷贝吧
function deepClone(target) {
if (target instanceof Object) {
let dist
if (target instanceof Array) {
dist = []
} else if (target instanceof Function) {
dist = function () {
return target.call(this, ...arguments)
}
} else {
dist = {}
}
for (let key in target) {
// 过滤掉原型身上的属性
if (target.hasOwnProperty(key)) {
dist[key] = deepClone(target[key])
}
}
return dist
} else {
return target
}
}
2、call apply bind方法的使用
var obj1 = {
a: 2,
b: 3,
say: function (x, y) {
return this.a + x + y
},
}
var obj2 = {
a: 3,
b: 4,
}
var s1 = obj1.say.call(obj2, 5, 6)
var s2 = obj1.say.apply(obj2, [7, 8])
var s3 = obj1.say.bind(obj2)
console.log(s1)
console.log(s2)
console.log(s3(1, 2))
function f1(x, y) {
console.log(x + y, this)
}
f1(10, 20) //30 undefined
f1.call() //NaN undefined
f1.apply() //NaN undefined
f1.call(null, 2, 3) //5 null
f1.apply(null, [2, 3]) //5 null
var f2 = f1.bind(null)
f2(2, 3) //5 null
var obj = {
age: 15,
name: 'lalal',
}
f1.call(obj, 2, 3) //5 {age: 15, name: 'lalal'}
f1.apply(obj, [2, 3]) //{age: 15, name: 'lalal'}
var f2 = f1.bind(obj)
f2(2, 3) //5 {age: 15, name: 'lalal'}
var person = {
name: '张三',
describe: function () {
return '姓名:'+ this.name;
}
};
console.log(person.describe());//姓名:张三
var A = {
name: '张三',
describe: function () {
return '姓名:'+ this.name;
}
};
var B = {
name: '李四'
};
B.describe = A.describe;
console.log(B.describe());
// "姓名:李四"
function f() {
return '姓名:'+ this.name;
}
var A = {
name: '张三',
describe: f
};
var B = {
name: '李四',
describe: f
};
console.log(A.describe()); // "姓名:张三"
console.log(B.describe()); // "姓名:李四"
var obj1 = {
name: 'zhangjing',
aaa: function () {
console.log(this.name)
},
bbb: function () {
setTimeout(
function () {
this.aaa()
}.apply(obj1),
3000
)
},
}
obj1.bbb()//zhangjing
3、for of 和 for in 区别
1、循环数组
区别一:for in 和 for of 都可以循环数组,for in 输出的是数组的index下标,而for of 输出的是数组的每一项的值。
const arr = ["orange", "apple", "banana", "pear"];
for (let key of arr) {
console.log(key); // orange apple banana pear
}
for (let key in arr) {
console.log(key); //0 1 2 3
}
for (const [key, value] of arr.entries()) {
console.log(key, value); //0 'orange' 1 'apple' 2 'banana' 3 'pear'
}
2、循环对象
区别二 :for in可以遍历对象,for of不能遍历对象,只能遍历带有iterator接口的,例如Set,Map,String,Array
const obj = { 1: "orange", 2: "apple", 3: "banana", 4: "pear" };
for (let key of obj){
console.log(key);// Error in created hook: "TypeError: [object Object] is not iterable!"
}
for (let key in obj) {
console.log(key); // 1 2 3 4
console.log(obj[key]); // orange apple banana pear
}
3.数组对象
const fruits = [
{ 1: "orange" },
{ 2: "apple" },
{ 3: "banana" },
{ 4: "pear" },
];
for (let value of fruits) {
console.log(value); //{1: 'orange'} {2: 'apple'} {3: 'banana'} {4: 'pear'}
for (let key in value) {
console.log(key, value[key]);//1 orange 2 apple 3 banana 4 pear
}
}
总结:for in适合遍历对象,for of适合遍历数组。for in遍历的是数组的索引,对象的属性,以及原型链上的属性。
边栏推荐
- [QNX Hypervisor 2.2用户手册]6.3.4 虚拟寄存器(guest_shm.h)
- LED light of single chip microcomputer learning notes
- 【无标题】
- Per capita Swiss number series, Swiss number 4 generation JS reverse analysis
- AUTOCAD——大于180度的角度标注、CAD直径符号怎么输入?
- 一文读懂数仓中的pg_stat
- MongoDB优化的几点原则
- JNA学习笔记一:概念
- centso7 openssl 报错Verify return code: 20 (unable to get local issuer certificate)
- Sed of three swordsmen in text processing
猜你喜欢
Sample chapter of "uncover the secrets of asp.net core 6 framework" [200 pages /5 chapters]
Scripy tutorial classic practice [New Concept English]
LED light of single chip microcomputer learning notes
分布式事务解决方案
[untitled]
关于 appium 启动 app 后闪退的问题 - (已解决)
Write it down once Net a new energy system thread surge analysis
PACP学习笔记一:使用 PCAP 编程
[learning notes] agc010
ESP32 ① 编译环境
随机推荐
PACP学习笔记一:使用 PCAP 编程
详细介绍六种开源协议(程序员须知)
通过Keil如何查看MCU的RAM与ROM使用情况
Analysis of DHCP dynamic host setting protocol
regular expression
MySQL master-slave replication
Cinnamon 任务栏网速
PAcP learning note 3: pcap method description
Why can basic data types call methods in JS
[untitled]
Write it down once Net a new energy system thread surge analysis
DHCP 动态主机设置协议 分析
滑轨步进电机调试(全国海洋航行器大赛)(STM32主控)
Star Enterprise Purdue technology layoffs: Tencent Sequoia was a shareholder who raised more than 1billion
Scrapy教程经典实战【新概念英语】
About the problem of APP flash back after appium starts the app - (solved)
File operation command
Mongodb replication (replica set) summary
Per capita Swiss number series, Swiss number 4 generation JS reverse analysis
QQ的药,腾讯的票