js总结知识点

1：对象运用

判断是否是空对象：Object.keys(obj).length===0

value instanceof Object instanceof只能判断引用数据类型如对象数组函数

typeof value typeof不能准确判断数组，对象，null的类型，因为都会被判定为Object

aaa.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:'xiaoh'age:1} const a=Object.keys(user) console.log(keys) //['name','age']

创建一个没有原型链的干净没有任何多余属性的对象：Object.create(null)

使用场景：需要创建一个对象进行映射如键值对存储

对象的遍历：

2：数组运用

Array.isArray():判断一个变量是否是数组

forEach:不会返回任何结果,仅用于执行副作用

indexOf():用于查找特定值在数组中的索引返回索引或-1arr.indexOf(20)

findIndex(回调函数):查找数组中符合特定条件的第一个元素的索引，也可判断一个元素存不存在这个数组中返回下标如果找不到则返回-1 （callback回调函数）返回索引或-1

includes(某个元素)：用于检测数组或字符串中是否包含特定元素的方法，（数组中搜索的元素，开始搜索的索引）返回boolean

find(回调函数)是 JavaScript 数组中的一个方法，用于返回数组中满足提供的测试函数的第一个元素的值。如果没有找到满足条件的元素，则返回undefined。返回满足条件第一个元素

some(回调函数):遍历数组是否存在满足条件的列，他返回一个布尔类型 （callback回调函数）返回boolean，判断是否至少存在一个真值this.lineInfos.some((item) => item.auditResult)

every(回调函数)：检查数组中的所有元素是否满足指定的条件，所有条件都满足则返回true返回boolean

slice(开始提取的索引（能取到），结束提取的索引（取不到）)：从数组或字符串中提取部分内容的方法，返回一个新数组和字符串 不修改原数组

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):将数组里面每个元素转化为数字

3：js去除字符串的空格

取字符串的第几个字母：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 str='apple,banana,orange' const newName=replace('apple','pear') //'pear,banana,orange' //全部替换 const str='apple,banana,apple,orange' const newName=replace(/apple/g,'pear') //'pear,banana,pear,orange'

5.条件判定的方法

三木运算：{isPacked ? name + ' ✅' : name}

&&遇到false 就停。

• console.log(true && 'World'); // 'World

• expr1 && 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 三种状态，使异步代码可以链式调用，避免回调地狱，并且能够统一处理同步和异步逻辑，同时控制执行流程。

需要返回一个promise

Promise.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本身又包了一层