js总结知识点

1对象运用判断是否是空对象Object.keys(obj).length0value instanceof Object instanceof只能判断引用数据类型如对象数组函数typeof value typeof不能准确判断数组对象null的类型因为都会被判定为Objectaaa.toString():将数组或者对象转化为字符串 始终用逗号分隔join(-):数组转化成字符串添加连字符可以自定义分割符JSON.stringify():将对象转化成字符串JSON.parse():将字符串转换为对象Object.value(obj):将对象的value值转化为数组Object.keys(obj):将对象的key转化为数组Array.from():将对象转换成数组JSON.stringify(..., null, 2)将数组转化为格式化null表示不使用替换函数2表示每层缩进两个空格以便于阅读。Object.keys:获取对象所有可枚举属性的名称并以数组的形式返回这写名称const user{name:xiaohage:1} const aObject.keys(user) console.log(keys) //[name,age]创建一个没有原型链的干净没有任何多余属性的对象Object.create(null)使用场景需要创建一个对象进行映射如键值对存储对象的遍历方法是否包含原型是否包含Symbol是否包含不可枚举for...in✅默认包含❌❌Object.keys()❌❌❌Object.values()❌❌❌Object.entries()❌❌❌Reflect.ownKeys()❌✅✅2数组运用Array.isArray():判断一个变量是否是数组forEach:不会返回任何结果,仅用于执行副作用indexOf():用于查找特定值在数组中的索引返回索引或-1arr.indexOf(20)findIndex(回调函数):查找数组中符合特定条件的第一个元素的索引也可判断一个元素存不存在这个数组中返回下标如果找不到则返回-1 callback回调函数返回索引或-1includes(某个元素)用于检测数组或字符串中是否包含特定元素的方法数组中搜索的元素开始搜索的索引返回booleanfind(回调函数)是 JavaScript 数组中的一个方法用于返回数组中满足提供的测试函数的第一个元素的值。如果没有找到满足条件的元素则返回undefined。返回满足条件第一个元素some(回调函数):遍历数组是否存在满足条件的列他返回一个布尔类型 callback回调函数返回boolean判断是否至少存在一个真值this.lineInfos.some((item) item.auditResult)every(回调函数)检查数组中的所有元素是否满足指定的条件所有条件都满足则返回true返回booleanslice(开始提取的索引能取到结束提取的索引取不到)从数组或字符串中提取部分内容的方法返回一个新数组和字符串 不修改原数组splice(从哪个下标开始删除几个要插入的新元素(插在下标之前))用于删除元素、插入元素this.tableData.splice(index, 1)删除一行修改原数组replace(被替换的字符’替换的字符‘) 返回一个新字符串NodeList对象是节点的集合是一个类似数组的对象节点一般通过document.qureySelectAll返回的可以通过Array.from(document.qureySelectAll())把他转换成数组然后通过forEach遍历 例如数组的合并去重方法new Set([...数据1...数据2...数据3]) //返回的是一个set对象[...new Set([...数据1...数据2...数据3])] //返回的是一个数组对象赋值合并方法Object.assign(target,obj1,obj2) //后面的值会覆盖前面的值前提是数据都初始化为一个对象split:将字符串根据分隔符分成多个字符串再返回一个数组flat():平铺数组 flat(3):展开多层嵌套数组map(Number):将数组里面每个元素转化为数字3js去除字符串的空格取字符串的第几个字母key[0]截取字符串的方法str.substr(start,length) 取左边不取右边substr()方法的两个参数是start和length而substring()方法的参数是start和end。如果substr()的start索引为负数它将循环到字符串的末尾而substring()会将其限制为0。1.去除字符串中所有空格string.replace(/\s*/g, );2.去除字符串俩头的空格str.replace(/^\s*|\s*$/g, );3.去除字符串头部空格str.replace(/^\s*/g, );4.去除字符串尾部空格str.replace(/\s*$/g, );reduce(回调函数初始值)累加计算总和回调函数可以接收三个参数上一次回调函数返回的结果当前元素的 值索引位置数组去重的方法newSet(arr) set会自动去除重复元素4.数值的转换Number( ):将参数转化为数字类型他可以用于将字符串、布尔值、对象转换为数字console.log(Number(123)); // 123 console.log(Number(123.45)); // 123.45 console.log(Number(123abc)); // NaN (不是有效的数字) console.log(Number(true)); // 1 (true 转换为 1) console.log(Number(false)); // 0 (false 转换为 0) console.log(Number(null)); // 0 (null 转换为 0) console.log(Number(undefined)); // NaN (undefined 转换为 NaN)parseInt()函数将字符串解析为整数。它可以处理以不同进制表示的数字但会忽略字符串中的小数点和其他非数字字符。可以通过第二个参数指定解析的基数进制。console.log(parseInt(123)); // 123 console.log(parseInt(123.45)); // 123 (忽略小数部分) console.log(parseInt(123abc)); // 123 (忽略后面的非数字字符) console.log(parseInt(0x10)); // 16 (十六进制表示的 16) console.log(parseInt(10, 2)); // 2 (二进制表示的 10) console.log(parseInt(10, 8)); // 8 (八进制表示的 10) console.log(parseInt(10, 10)); // 10 (十进制表示的 10)parseFloat() 函数将字符串解析为浮点数。与parseInt() 不同parseFloat() 可以处理小数点并且会忽略字符串中的其他非数字字符直到遇到非法字符为止。console.log(parseFloat(123)); // 123 console.log(parseFloat(123.45)); // 123.45 console.log(parseFloat(123.45abc)); // 123.45 (忽略后面的非数字字符) console.log(parseFloat(0.1)); // 0.1 console.log(parseFloat(1e2)); // 100 (科学计数法表示的 100) console.log(parseFloat(10.1234e2)); // 1012.34 (科学计数法表示的 1012.34)replace替换固定字符串const strapple,banana,orange const newNamereplace(apple,pear) //pear,banana,orange //全部替换 const strapple,banana,apple,orange const newNamereplace(/apple/g,pear) //pear,banana,pear,orange5.条件判定的方法三木运算{isPacked ? name ✅ : name}遇到false 就停。console.log(true World); // Worldexpr1 expr2 如果expr1是假值false, 0, , null, undefined, NaN就直接返回expr1||遇到true 就停。expr1 || expr2 如果expr1是真值就直接返回expr1??返回第一个不是null和undefined的值JS 运算顺序运算符 () ||console.log(true || false false) //true//|| 和 - 一起用时优先级会出问题- 的优先级 || {{ (row.receiveQuantity||0 - row.returnQuantity||0).toFixed(3) }}遍历的方法//1.for循环遍历 for (let i 0; i arr.length; i) { console.log(arr[i]); } //for...of for (const item of arr) { console.log(item); } //for...in for (const key in obj) { console.log(key, obj[key]); }异步编程Promise 是用来管理异步操作的让异步代码可以按“同步思维”去写并且可控、可组合作用1.管理异步状态pending → fulfilled / rejected//登陆接口 this.$ajax({ url: /login, method: post, data: form }) .then(res { console.log(登录成功) }) .catch(err { console.log(登录失败) })2.解决回调地狱问题getUser() .then(user getRole(user.id)) .then(role getMenu(role.id)) .then(menu { console.log(menu) })3.统一同步/异步4.支持链式调用5.控制流程//弹窗确认 onOk: () { return this.$ajax(/save) } 效果:点击确定 → 等接口完成 → 再关闭弹窗 //防止重复提交 onSubmit: () { return this.saveRequest() }Promise 是一种用于管理异步操作的对象它通过维护 pending、fulfilled、rejected 三种状态使异步代码可以链式调用避免回调地狱并且能够统一处理同步和异步逻辑同时控制执行流程。需要返回一个promisePromise.resolve(1)等价于new Promise((resolve){resolve(1)})async function fn(){}等价于 function fn(){return Promise.resolve(undefined)}区别const p Promise.resolve(1)Promise.resolve(p) //返回的是p本身new Promise(resolve{resolve(p)}) //p本身又包了一层写法状态new Promise(() {})pending不会变new Promise(resolve resolve())fulfilledasync function默认返回 fulfilledasync 报错rejected