Javascript迭代器 {message type="info" content="我们都知道可以用 for...of... 来循环可迭代对象，例如循环"/}Array Arguments Map Set String TypedArray NodeList迭代器的工作原理创建一个指针，指向当前数据结构的起始位置第一次调用对象next方法，指针自动指向数据结构的第一个成员接下来不断调用next，指针一直往后移动，直到指向最后一个成员每调用一次next方法返回一个包含value和done属性的对象为什么Object不可以被迭代let arr = [1, 2, 3] let obj = { a: 1, b: 2, c: 3 } for(let val of arr) { console.log(val) } for(let val of obj) { console.log(val) }接着运行上面的代码，会出现以下报错信息： {callout color="#4d75ef"}可以看到，数组正常循环没有问题，但是到了obj，会报：obj is not iterable（obj不是一个可迭代对象、obj不可被迭代）这是为什么呢？将arr和obj分别使用 console.dir() 进行打印查看{/callout}{callout color="#ef4d7e"}可以看到，arr的原型上挂载着一个 Symbol[Symbol.iterator]，而obj的原型上并没有这个属性，因此这就是为什么obj不可以被迭代的原因但是如果非得让obj也成为一个 可迭代对象，如何去实现呢？此时就需要给obj身上加上一个迭代器{/callout}let obj = { a: 1, b: 2, c: 3, [Symbol.iterator]: function () { let values = Object.values(obj) let index = 0 /* 必须得return 一个对象出去 */ return { /* 这是固定写法 */ next() { if (index >= values.length) { return { done: true // 此时迭代结束，就不需要再return value出去 } } else { return { value: values[index++], done: false } } } } } } for (let item of obj) { console.log(item) }{callout color="#f0ad4e"}运行上方的代码，此时obj已经可以使用 for...of... 进行循环，并且此时的obj已经是一个可迭代对象{/callout}迭代器利用for of 自定义遍历数据let obj = { a: 1, b: 2, c: [ '小韩', '小徐', '小悦' ], [Symbol.iterator]: function () { let idx = 0; const _c = this.c return { next() { return idx < _c.length ? { value: _c[idx++], done: false } : { value: undefined, done: true } } } } } let values = obj[Symbol.iterator]() console.log(values) // 得到迭代器对象，里面含有next方法 console.log(values.next()) // done:false(表示可以继续迭代)，并且value为 小韩 console.log(values.next()) // done:false(表示可以继续迭代)，并且value为 小徐 console.log(values.next()) // done:false(表示可以继续迭代)，并且value为 小悦 console.log(values.next()) // done:true(表示迭代结束)总结{callout color="#964def"}迭代协议：规定迭代与实现的逻辑（也就是上面迭代器里的逻辑）迭代器：具体的迭代实现逻辑（也就是上面的迭代器函数）迭代对象：可被迭代的对象，已经实现[Symbol.iterator]方法的对象（就是上面加了迭代器后的obj）{/callout}

前端正则,递归面试题 - Joe老板出题 Joe博客 老板每日分享面试题，羞辱我这个前端小白，请看题！{message type="info" content="第一题 正则替换"/}题干let a = { b: 123, c: '456', e: '789' } let str = 'a{a.b}aa{a.c}aa {a.d}aaaa';本题要求： 把 str 字符串中 { a.b } 这种 替换成 a对象中对应的值本题结果： a123aa456aa {a.d}aaaa博主解题方案str.match(/{\w\.\w}/g).forEach(itm => (str = str.replace(itm, a[itm.match(/\.\w/g)[0].replace(/./, '')] || itm))) console.log(str);Joe大佬解题方案str = str.replace(/{\w\.\w}/g, ($1) => { const { groups: { key } } = /{\w\.(?<key>\w)}/.exec($1) return a[key] || $1 }) console.log(str);{callout color="#f0ad4e"}此题可看出，Joe大佬的代码运用了JS高级，博主只能勉强解出，这就是差距。{/callout}{message type="info" content="第二题 数组扁平化"/}题干const arr = [1, [2, 3, [4, [5]]], 6];本题要求： 把 arr 数组 扁平化处理本题结果： [1,2,3,4,5,6]博主解题方案let newArr = []; hanJoe(arrs); function hanJoe(arrs) { arrs.forEach(itm => (itm instanceof Array ? hanJoe(itm) : newArr.push(itm))) } console.log(newArr);Joe大佬解题方案const flat = arr => arr.reduce((prev, curr) => Array.isArray(curr) ? [...prev, ...flat(curr)] : [...prev, curr], []); console.log(flat(arr)){callout color="#f0ad4e"}此题可看出，Joe大佬再次运用了JS高级，博主的解题方案平平无奇，这就是差距。{/callout}{message type="info" content="第三题 也不知道怎么命名"/}题干function isOdd(num) { return num % 2 == 1; } function isEven(num) { return num % 2 == 0; } function isSane(num) { return isEven(num) || isOdd(num); } var values = [7, 4, '13', -9, Infinity]; var r = values.map(isSane);本题要求： 脑子里运算，并输出 r本题结果： [true,true,true,false,false]{callout color="#f0ad4e"}这题给我普及了 Array.map() ，博主不会map{/callout}{message type="info" content="第四题 运算"/}题干let res = "b" + "a" + +"a" + "a"本题要求： 脑子里运算，并输出 res本题结果： baNaNa最后{callout color="#ef4d8e"}快来插个眼吧！{/callout}