一. 0.1 + 0.2 ！= 0.3 的小数精度问题
0.1 + 0.2 ！= 0.3 的小数精度问题.。
这是因为ECMAScript 中的 Number 类型遵循 IEEE 754 标准，使用 64 位固定长度来表示。
- IEEE 754标准
- 符号位：1位
- 指数位：11位
- 尾数位：52位
0.1 和 0.2 用二进制表示的话一般是无限循环的二进制数，相加后后面会截取一部分，并不是完整的相加结果，所以精度会丢失。
二. Symbol 的特性
- 独一无二
- 原始类型
- 不可枚举
let sym1 = Symbol()
let sym2 = Symbol()
console.log(sym1 === sym2) // false
typeof Symbol() === 'symbol'
typeof SYmbol('zb') === 'symbol'
- 当使用 Symbol 作为 对象属性时，可以保证对象不出现重名属性，调用 for-in 是不能将其枚举出来的，调取 Object.getOwnPropertyNames 、Object.keys() 也不能获取 Symbol 属性。
- 可以调用 Object.getOwnPropertySymbols()用于专门获取 Symbol 属性。
/*
* @Description:
* @Autor: zhangbing
* @Date: 2021-08-04 19:58:12
* @LastEditors: zhangbing
* @LastEditTime: 2021-08-04 20:01:48
*/
var obj = {
name: 'zhangsan',
[Symbol('names')]: 'lisi'
}
console.log(Object.getOwnPropertyNames(obj)); //[ 'name' ]
console.log(Object.keys(obj)); // [ 'name' ]
for(let k in obj) {
console.log(k) // name
}
console.log(Object.getOwnPropertySymbols(obj)); // [ Symbol(names) ]
三. 防抖
<!--
* @Description:
* @Autor: zhangbing
* @Date: 2021-08-05 20:21:00
* @LastEditors: zhangbing
* @LastEditTime: 2021-08-05 20:27:36
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.wrapper {
height: 2000px;
background-color: pink;
}
</style>
</head>
<body>
<div class="wrapper">123</div>
<script>
function debounce(fn, delay) {
let timer = null
return function () {
let self = this
const args = Array.prototype.slice.call(arguments)
clearTimeout(timer)
timer = setTimeout(function () {
fn.apply(self, args)
}, delay)
}
}
window.onscroll = debounce(function () {
console.log('滑动了')
}, 500)
</script>
</body>
</html>
四. 节流
<!--
* @Description:
* @Autor: zhangbing
* @Date: 2021-08-05 20:21:00
* @LastEditors: zhangbing
* @LastEditTime: 2021-08-05 20:32:57
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.wrapper {
height: 2000px;
background-color: pink;
}
</style>
</head>
<body>
<div class="wrapper">123</div>
<script>
function throttle(fn, delay) {
let prevTime = new Date()
return function() {
let curTime = new Date()
if(curTime - prevTime >= delay) {
fn.apply(this, arguments)
prevTime = curTime
}
}
}
window.onscroll = throttle(function () {
console.log('滑动了')
}, 500)
</script>
</body>
</html>
五、装箱与拆箱
/*
* @Description:
* @Autor: zhangbing
* @Date: 2021-08-04 20:17:24
* @LastEditors: zhangbing
* @LastEditTime: 2021-08-05 20:40:20
*/
let str = '1224354657'
console.log(str.substring(2,4)); // 24
const obj = {
valueOf: () => {
console.log('valueOf'); return 1234},
toString: () => {
console.log('toString');
return 'zhangbing'
}
}
console.log(obj - 1); // valueOf 1233
console.log(`${
obj}hello`); // toString zhangbinghello
const a = {
count: 1,
valueOf: function() {
return this.count++
}
}
if(a ==1 && a == 2 && a == 3) {
console.log('true'); // true
} else {
console.log('false');
}