JS手撕代码

JS设计模式

JavaScript设计模式

apply、call、bind

call、apply、bind 模拟实现

async await generator

async 、await、Generator 原理实现

Promise 实现

Promise 学习笔记

类的创建与继承 new实现

JS 类的创建继承 与 new原理实现

防抖、节流 和 预加载、懒加载

防抖、节流 和 预加载、懒加载

深浅拷贝

1. 数据类型

基本数据类型

number、boolean、string、null、undefined、symbol
基本数据类型是以名值得形式存储在栈内存中的。

进行赋值操作时会新开辟一片栈内存存储新的名值。

引用数据类型

数组、对象、函数等
以上的类型会在栈内存和堆内存中分别开辟一片空间进行存储。

当直接赋值时其实是将a的堆地址赋值给了b，两者最终指向了同一个堆内存。这就是浅拷贝，带来的后果就是你在对b的元素进行操作时，同时改变了a对应的值。

2. 深拷贝方法

方法一

第一种方法简单粗暴，使用JSON.stringify和JSON.parse进行两次转换。

  let a = [1,3,5,7];
  let b = JSON.parse(JSON.stringify(a));

  b[0] = 99;
  console.log("a", a); // [1,3,5,7]
  console.log("b", b); // [99,3,5,7]

这种方法存在一种很大的缺点，转换时会自动忽略undefined，Symbol、function

方法二

用递归的方法去遍历复制所有的层级

function deepClone(obj){
   
    // 判断数据形式
    let clone = Array.isArray(obj)?[]:{
   };
    if(obj && typeof obj === "object"){
   
      for(let key in obj){
   
        if(obj.hasOwnProperty(key)){
   
          // 属性是对象则进行递归
          if(obj[key] && typeof obj[key] === "object"){
   
            clone[key] = deepClone(obj[key]);
          }else{
   
            clone[key] = obj[key];
          }
        }
      }
    }
    return clone;
  }
  
  let a = [1,3,5,7],
  b = deepClone(a);
  a[0] = 999;
  console.log(a); // [1,3,5,7]
  console.log(b); // [999,3,5,7]

数组去重

var arr = [1, 1, "true", "true", true, 15, false]
//利用ES6去重
function unique(arr) {
   
	return Array.from(new Set(arr))
}
//利用indexOf方法（该方法用于返回指定数组元素首次出现的地方，若没有则返回-1）
function unique(arr) {
   
	if(!Array.isArray(arr)) {
   
		console.log("error");
		return ;
	}
	let result = [];
	for (let i = 0; i < arr.length; i ++) {
   
		if (result.indexOf(arr[i]) == -1) {
   
			result.push(arr[i])
		}
	}
	return result;
}
//利用对象属性不能相等
function unique(arr) {
   
	if (! Array.isArray(arr)) {
   
		return
	}
	let result = [];
	let obj = {
   };
	for (let i = 0; i < arr.length; i ++) {
   
		if (!obj[arr[i]]) {
   
			result.push(arr[i])
			obj[arr[i]] = 1;
		} else {
   
			obj