JS 笔记

已于 2022-06-30 15:21:34 修改
阅读量526 收藏
点赞数
分类专栏： 前端 笔记 文章标签： javascript
于 2021-10-09 11:47:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52438072/article/details/120667470
版权

JS笔记

不定时更新说明

本篇文章记录自己在 js 上面容易忘记的知识点或者很有用的知识，将会不定时添加新的内容。

几种深拷贝的方法

1. JSON.parse(JSON.stringify(obj))

一般情况下对普通对象需要进行深拷贝，可以使用这种方法，这是最简单且代码量最少的方法

let obj = {
  a: 1,
  b: 2,
};
let cloneObj = JSON.parse(JSON.stringify(obj));
cloneObj.a = 5;
console.log(cloneObj); // {a: 5, b: 2}
console.log(obj); // {a: 1, b: 2}

缺陷：
① 取不到值为 undefined 的 key
② 如果对象里面有函数，函数无法被拷贝下来
③ 无法拷贝对象原型链上的属性和方法
④ 如果值是 new Date() 这种类型的，拷贝出来的值是一个当前时间的一个字符串

let a = {
  name: "Jack",
  age: 18,
  hobbit: ["sing", { type: "sports", value: "run" }],
  score: {
    math: "A",
  },
  run: function () {},
  walk: undefined,
  fly: NaN,
  cy: null,
  date: new Date(),
};
let b = JSON.parse(JSON.stringify(a));
console.log(b);
// {
//     age: 18,
//     cy: null,
//     date: "2022-05-15T08:04:06.808Z"
//     fly: null,
//     hobbit: (3) ["dance", "sing", {…}],
//     name: "Jack",
//     score: {math: "A"},
// }

2. 普通递归函数实现深拷贝

function deepClone(source) {
  if (typeof source !== "object" || source == null) {
    return source;
  }
  const target = Array.isArray(source) ? [] : {};
  for (const key in source) {
    if (Object.prototype.hasOwnProperty.call(source, key)) {
      if (typeof source[key] === "object" && source[key] !== null) {
        target[key] = deepClone(source[key]);
      } else {
        target[key] = source[key];
      }
    }
  }
  return target;
}

缺陷：该方法遇到循环引用会出现栈溢出的情况，所以只适合一般的对象深拷贝，不适合嵌套循环引用的对象；
如果值是 new Date() 这种类型的，拷贝出来的值是一个空对象 {}
解决循环引用以及 Symbol 类型 ↓


function cloneDeep(source, hash = new WeakMap()) {
  if (typeof source !== 'object' || source === null) {
    return source;
  }
  if (hash.has(source)) {
    return hash.get(source);
  } else {
    hash.set(source, source);
  }
  const target = Array.isArray(source) ? [] : {};
  Reflect.ownKeys(source).forEach(key => {
    const val = source[key];
    if (typeof val === 'object' && val != null) {
      target[key] = cloneDeep(val, hash);
    } else {
      target[key] = val;
    }
  })
  return target;
}

缺陷： 如果值是 new Date() 这种类型的，拷贝出来的值是一个空对象

3. 兼容多种数据类型


const deepClone = (source, cache) => {
  if(!cache){
    cache = new Map() 
  }
  if(source instanceof Object) { // 不考虑跨 iframe
    if(cache.get(source)) { return cache.get(source) }
    let result 
    if(source instanceof Function) {
      if(source.prototype) { // 有 prototype 就是普通函数
        result = function(){ return source.apply(this, arguments) }
      } else {
        result = (...args) => { return source.call(undefined, ...args) }
      }
    } else if(source instanceof Array) {
      result = []
    } else if(source instanceof Date) {
      result = new Date(source - 0)
    } else if(source instanceof RegExp) {
      result = new RegExp(source.source, source.flags)
    } else {
      result = {}
    }
    cache.set(source, result)
    for(let key in source) { 
      if(source.hasOwnProperty(key)){
        result[key] = deepClone(source[key], cache) 
      }
    }
    return result
  } else {
    return source
  }
}

判断对象是否具有属性的5种方法

1. in

如果属性在指定对象或其原型链中，则返回 true

let obj = {
  name: "cty",
};
console.log("name" in obj); // true
console.log("toString" in obj); // true

2. Reflect.has()

该方法效果跟第一种方法 in 是一样的，在指定对象或者其原型链中都会返回 true

let obj = {
  name: "cty",
};
console.log(Reflect.has(obj, "name")); // true
console.log(Reflect.has(obj, "toString")); // true

3. hasOwnProperty()

返回一个布尔值，只是对象是否具有指定的属性作为它自己的属性，而不是继承属性，它可以正确区分对象本身属性和其原型属性

let obj = {
  name: "cty",
};
console.log(obj.hasOwnProperty("name")); // true
console.log(obj.hasOwnProperty("toString")); // false

但是这个方法有个缺陷，如果对象是用 Object.create(null) 创建的话，这个方法就不能使用了，要报错

let obj = Object.create(null);
obj.name = "cty";
console.log(obj.hasOwnProperty("name")); // 报错

在这里插入图片描述

4. Object.prototype.hasOwnProperty.call()

解决第三种方法的缺陷很简单，就是使用 Object.prototype.hasOwnProperty.call() 方法，该方法直接调用内置的有效用函数，跳过原型链

let obj = Object.create(null);
obj.name = "cty";
console.log(Object.prototype.hasOwnProperty.call(obj, "name")); // true
console.log(Object.prototype.hasOwnProperty.call(obj, "toString")); // false

5. Object.hasOwn()

由于前面几种方式都不太优雅，ES2022有一个新的提议：Object.hasOwn()
如果指定的对象具有指定的属性作为自己的属性，则返回 true，如果属性是继承而来或者不存在，则返回 false

let obj = Object.create(null);
obj.name = "cty";
console.log(Object.hasOwn(obj, "name")); // true
console.log(Object.hasOwn(obj, "toString")); // false

JS 数组 reduce() 方法

reduce() 方法实现的东西有时候可以用 for 循环或者 forEach() 方法实现，但是为什么要用 reduce() 方法呢？
答案是：有时候用 reduce() 方法可以简化代码，亦或许是显得逼格更高？

语法：
reduce 为数组中每个元素依次执行回调函数，不包括数组中被删除或者从未被赋值的元素
接受两个参数：
1. 回调函数：回调函数接受四个参数
2. 初始值：可有可无，如果指定初始值，第一次调用回调函数的时候 pre 的值为该初始值，cur 从数组第一个元素开始，即从数组索引为0开始执行回调函数；如果不指定初始值，则从索引为1开始执行回调函数，数组第一个元素的值赋给 pre 作为初始值。回调函数执行返回的值作为下一次执行回调函数的 pre 值

	arr.reduce((pre, cur, index, arr)=>{}, [initialValue])
	// pre：开始执行回调函数的初始值（指定的初始值或者上一次执行回调函数的返回值，
	//      第一次执行回调函数时，若欸没有指定初始值，则初始值为数组第一个元素的值）
	// cur：当前数组元素的值（第一次执行回调函数时，若没有指定初始值，则cur为数组中第二个元素的值）
	// index：当前执行回调函数时的数组索引值
	// arr：调用reduce方法的数组

注意： 如果数组为空，没有指定初始值的情况下会报错，制定了初始值就不会报错，所以一般来说我们指定一个初始值会更加安全。

reduce 的简单用法：

数组求和、数组求乘积

	let arr = [1,2,3,4,5]
	let sum = arr.reduce((pre, cur)=>{return pre + cur})
	let mul = arr.reduce((pre, cur)=>{return pre*cur})
	console.log(sum, mul) // 15 120

reduce 的高级用法：

  1. 计算数组中每个元素出现的次数
	let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']
	let result = names.reduce((pre, cur)=>{
	    if (cur in pre) pre[cur]++
	    else pre[cur] = 1
	    return pre
	}, {})
	console.log(result) // {Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
  1. 数组去重
	let arr = [1,2,3,4,4,1]
	arr = arr.reduce((pre, cur)=>{
	    if(!pre.includes(cur)) pre.push(cur)
	    return pre
	}, [])
	console.log(arr) // [1, 2, 3, 4]
  1. 将二维数组转换成一维数组
	let arr = [[0, 1], [2, 3], [4, 5]]
	arr = arr.reduce((pre, cur)=>{
	    return pre.concat(cur)
	}, [])
	console.log(arr) // [0, 1, 2, 3, 4, 5]
  1. 将多维数组转换成一维数组
	let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
	const newArr = function(arr) {
	    return arr.reduce((pre, cur)=>{
	        return pre.concat(Array.isArray(cur)?newArr(cur):cur)
	    }, [])
	}
	console.log(newArr(arr)) // [0, 1, 2, 3, 4, 5, 6, 7]
  1. 对象里的属性求和
	let result = [
	    {
	        subject: 'math',
	        score: 10
	    },
	    {
	        subject: 'chinese',
	        score: 20
	    },
	    {
	        subject: 'english',
	        score: 30
	    }
	]
	
	let sumScore = result.reduce((pre, cur)=>{
	    return pre + cur.score
	}, 0)
	
	console.log(sumScore) // 60

JS 数组 Array.flat() 扁平化处理

flat() 方法创建一个新数组，其中所有子数组元素都以递归的方式连接到该数组中，直到达到指定的深度，如果指定的深度为 Infinity，则不用考虑嵌套的深度，该方法会递归处理完所有深度的子数组。
flat() 方法不支持 IE 浏览器

const arr1 = [1, 2, [3, 4, [5, 6], 7, 8]] 
console.log(arr1.flat()) // [ 1, 2, 3, 4, [ 5, 6 ], 7, 8 ]
console.log(arr1.flat(2)) // [ 1, 2, 3, 4, 5, 6, 7, 8 ]
console.log(arr1.flat(Infinity)) // [ 1, 2, 3, 4, 5, 6, 7, 8 ]

内存管理机制

JavaScript 解释器有自己的内存管理机制，可以自动对内存进行垃圾回收。这意味着程序可以按需创建对象，程序员则不必担心这些对象的销毁和内存回收。当不再有任何引用指向一个对象，解释器就知道这个对象没用了，然后自动回收它所占的内存资源。

Math类常用的的方法

Math.pow(2, 53)		// 2 的 53 次幂
Math.round(0.6)		// 四舍五入 1
Math.ceil(0.6)		// 向上取整 1
Math.floor(0.6)		// 向下取整 0
Math.abs(-5)		// 求绝对值 5
Math.max(x, y, z)	// 返回 x, y, z 中的最大值
Math.min(x, y, z)	// 返回 x, y, z 中的最小值
Math.random()		// 生成 [0, 1) 的随机数
Math.PI				// Π，圆周率
Math.E				// e，自然对数的底数
Math.sqrt(3)		// 3 的平方根
Math.pow(3, 1/3)	// 3 的立方根	
Math.sin(0)			// 三角函数，还有 Math.cos， Math.atan 等
Math.log(10)		// 10 的自然对数
Math.log(100)/Math.LN10 // 以 10 为底 100 的对数，这里值为 2
Math.log(512)/Math.LN2 // 以 2 为底 512 的对数，这里值为 9
Math.exp(3) 		// e 的 3 次幂

JS排序sort函数

array.sort(fun)：参数fun可选，规定排序顺序，必须是函数。

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序，而不是按照数值大小排序。

如果想按照其他规则进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
简单点就是：比较函数两个参数a和b，返回a-b 升序，返回b-a 降序

1. 数组元素排序

在这里插入图片描述

2. 根据数组中对象的某个属性排序

在这里插入图片描述

3. 根据数组中对象的多个属性值排序

在这里插入图片描述

?? 与 || 的区别

使用 | | 时，将前面的值转换成布尔类型，若为 true 则返回前面的值，若为 false 则返回后面的值。
使用 ?? 时，只有前面的值为 null 或者 undefined 时，才会返回后面的值。

举例：

let [a, b, c, d] = [0, 1, null, undefined]
console.log(a ?? 'cty')
console.log(b ?? 'cty')
console.log(c ?? 'cty')
console.log(d ?? 'cty')
console.log('****************')
console.log(a || 'cty')
console.log(b || 'cty')
console.log(c || 'cty')
console.log(d || 'cty')

测试结果：
在这里插入图片描述

字符串大小写转换

字符串转换成小写： str.toLowerCase()
字符串转换成大写： str.toUpperCase()
这两个方法只返回转换过后的字符串，并不会修改原字符串的值。

字符串替换

常规替换： str.replace(‘要替换的字符串’, ‘用于替换的字符串’)
正则替换： str.replace(/要替换的字符串/g, ‘用于替换的字符串’)
注意：第一种常规替换只能替换字符串中第一次出现的替换项，第二种是加了全局标识的正则替换则会替换字符串中出现的全部替换项

如此~如此~
关注
专栏目录
Object.prototype.hasOwnProperty.call()
Damien_J_Scott的博客
03-04 8339
之前判定是否含有该key的方法一直是 !!obj[key],后面看到了更加规范的,记录下 JavaScript中Object对象原型上的hasOwnProperty()用来判断一个属性是定义在对象本身而不是继承自原型链。 从console的test可以看出来,它可以判定该key是否存在于object中.但是既然这样可以实现,为什么还要使用Object.prototype.hasOwnProperty.call(),这么复杂的写法呢. 这个test可以看出来,明明a是object的属性,为什么返回.
JavaScript中sort()函数
最新发布
wangshiqi666的博客
04-28 8184
sort()函数
JS的sort函数
m0_49765699的博客
03-30 1250
JavaScript中的sort函数可以用来对数组进行排序。默认情况下，sort函数将数组中的元素转换为字符串，并按照Unicode码点的顺序进行排序。
狂神说系列 JavaScript笔记
06-15
【狂神说系列 JavaScript笔记】是一份全面且深入的JavaScript学习资源，旨在帮助开发者和初学者深入理解这门广泛应用于Web开发的脚本语言。这份笔记涵盖了JavaScript的基础语法、核心概念以及高级特性，旨在构建一个...
js笔记js笔记js笔记js笔记
03-07
js笔记js笔记js笔记js笔记
javascript笔记
04-20
javascript学习笔记，从actionScript转到前端开发，偏重于前端理论基础，供参考
javaScript笔记
08-15
自己整理的javaScript部分笔记，认为比较有用的。。。。。。。。。。。。。。。。。。。。
JavaScript笔记
03-18
老杜JavaScript视频笔记，（自行添加、省略了部分）
Object.hasOwnProperty.call(object, key) 是什么意思
qq_43071951的博客
02-28 4971
Object.hasOwnProperty.call(object, key)
遍历JS Object的方法
Guoye的专栏
08-14 1万+
遍历JS Object的方法1.Object.keys2. for in 1.Object.keys const body = { hot: false, id: 5, news: true, topice: 1 } // 遍历对象body，并对值进行更改，并不能对id进行修改。 Object.keys(body).forEach((key, index) => { if (key != 'id') { body[key] = body[key] ? 1 : 0; } }) c
JS常用的循环遍历和它们的特性
无知的圆的博客
08-19 398
目录JS常用的循环遍历for、forEach、for ...of for…insome everyfilter、mapfind、findIndexreduce、reduceRight参考文章 JS常用的循环遍历 for、forEach、for …of for…in for 通常用于数组的循环 可以随时跳出循环，用break或者continue const list = [1, 2, 3, 4, 5, 6, 7, 8, , 10, 11]; let len = list.length; for
玩转数组高级技法，成为JS高手
JackChan
01-03 227
玩转数组高级技法，成为JS高手
你不知道的十个 JS 小技巧
uuuyy_的博客
12-30 1746
总结了一些开发常用的 JS 小技巧，让你的代码更优雅！ 1. 使用 const 定义 在开发中不要过度声明变量，尽量使用表达式和链式调用形式。然后一般能用const就不要用let。这种模式写多了之后，你会发现在项目中几乎找不到几个用let的地方： // bad let result = false; if (userInfo.age > 30) { result = true; } // good const result = userInfo.age > 30;...
let 连续复制_【进阶4-4期】Lodash是如何实现深拷贝的
weixin_36166752的博客
01-14 243
引言在上一篇文章中介绍了如何实现一个深拷贝，分别说明了对象、数组、循环引用、引用丢失、Symbol和递归爆栈等情况下的深拷贝实践，今天我们来看看 Lodash如何实现上述之外的函数、正则、Date、Buffer、Map、Set、原型链等情况下的深拷贝实践。本篇文章源码基于Lodash4.17.11 版本。整体流程入口入口文件是cloneDeep.js，直接调用核心文件baseClon...
【JS】JS脚本中JSON对象未定义
非正常人研究室
04-08 2500
场景 在使用java的js脚本引擎执行脚本的时候，发现js报错，JSON对象未定义。而我需要用JSON.parse()去解析json字符串。 原因 JS引擎太低了，不存在JSON对象，所以要么不用，要么自己定义。 解决 脚本github地址：json2.js 如果是前端，只需要在执行脚本之前引入这个json2.js脚本就可以了。 但是我的是后端，所以一开始查找资料是怎么在js脚本中引入其他js脚本...
JavaScript 数组排序函数sort（）的使用
oiooio11的博客
12-27 3777
简介   sort（）方法是js中对于数组进行排序的函数。其可以方便快捷的实现对于数组的排序而不用我们自己编写排序方法。注：sort（）函数会直接改变原数组。 1.纯字符串数组排序 let myArray = ["people","person","apple","ziv"] console.log(myArray.sort()) // 打印结果[ 'apple', 'people', 'person', 'ziv' ]   其对于字符串数组直接按照字典顺序进行排序。注意：大小写字母也会影响排序结果，大
JS的sort方法
热门推荐
胡图图的博客
12-03 1万+
Array.prototype.sort() sort()方法采用原地算法对数组进行排序，并返回数组。默认排序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。 用法 语法：arr.sort([compareFunction(a, b)]) 参数：用来指定按某种顺序进行排列的函数。如果省略，元素按照转换后的字符串的各字符的Unicode位点进行排序。 比较函数的参数： a：第一个用于比较的元素 b：第二个用于比较的元素 描述 如果没有指定比较函数，那么数组按照转换后的字符串的各
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值