前端学习杂记(JS)

这篇博文是自己在工作中学到的关于JS的之前不知道的新知识。
将其记录下来并分享出来

处理一个对象内的数据的方法

Object.entries(data).forEach([key, value]) => {
	// dosomething
	}
// Object.entries(data)  data为我们要处理的对象 返回一个数组每项为对象键值对组成的数组的二维数组 如：
const data = {
	name: 'Alan',
	age: 18
	}
Object.entries(data) = [ [ 'name', 'Alan' ], [ 'age', 18 ] ]
数组方法——forEach([key, value])中[key,value]表示将二维数组每一项的键值解构出来 方便对键值做处理

柯里化函数

柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术
写代码的技巧目的有两个：一是提高程序性能，二是使代码模块化，减少耦合增强其可维护性。柯里化的作用很明显是属于第二种。

const f = (first) => (second) => {
  return first + second + 6
}
const F = f (5)  		// second + 11
F(9) 		// 20

代码技巧

user.name == null  
//这个判断表达式当 user.name为undefined或null时都成立
// 因为undefined ==null 因此当属性需要有同时有undefined和null判断时可简写成如此

arr=[{name: 'john', id: 1}, {name: 'mike', id: 2}]
arr.map((item) => item.id) 		//[1,2]
// map方法对数组中每个元素调用函数并返回符合结果的数组。
// 若返回一个对象
arr.map((item) => {
userName: item.name + item.id,
id: item.id,
  }
)
// 上面这样写是错误的 
// JavaScript 会把 { 作为函数体的开始，而不是对象的开始。解决方法是将它们包装在正常括号中：
arr.map((item) => ({
userName: item.name + item.id,
id: item.id,
 }))

杂记

文本域输入的用换行符分割的字符串获得数组 e.target.value.split(String.fromCharCode(10))
const num = num | 0 (对num取整对技巧) [｜ 位运算符文档地址](https://www.w3school.com.cn/js/js_bitwise.asp)
ECMAScript规定 undefined == null 这是规定  不需要解释
比较相等时 先把==两边的值转换为数字再比较 
如： 'aa'== true //false
这里相当于 Number('aa') == Number(true)  即NaN == 1 //false

window.decodeURIComponent(url)   //解码被编码的url

写判断数据为string时,对数据执行JSON.parse()操作  要用try，catch。  parse普通字符串会报错

document.getSelection()  //获取页面上用户选择的文本

new URLSearchParams() //JS新api  创建一个url对象 对象的toString()方法生成可直接拼接到url后面的查询参数

NaN.toFixed(2) //返回到是“NaN”  一个字符串

JavaScript权威指南 笔记
函数体内部的变量都可以保存在函数作用域内，这种特性叫做闭包
闭包原理：函数的执行依赖于变量作用域，这个作用域是在函数定义时决定的。而不是在函数调用时决定的

对事件写防抖 节流时 注意事件会丢失
  debounce(func: any, wait: number) {
    var timeout: any;
    return function(event: any) {
      var context = this;
      event.persist && event.persist();  //这里保留事件 事件不会丢失
      if (timeout) clearTimeout(timeout);
      timeout = setTimeout(() => {
        func.apply(context, [event]);
      }, wait);
    };
  }