我不知道的知识（2020 - 长期）

[yaogengzhu]

我不知道的知识

Q：为啥js中 typeof null 是“object" A：在js中2进制的前三位为0的话，都会被判定为对象，而null 的二进制表示全部为0 .因此typeof null 为object

Q: 对象中的 . 和 [] 有啥区别 A: 对象中，我们经常使用到 obj.a = 2 或者 obj['a'] 之类的，两者的区别在于.是属性访问的方式（属性访问），对于[]而言，是访问对象的键（键访问）

Q: 你知道如何使一个对象可以使用for....of吗？ A： ---- 可以通过Object.defineProperty 添加一个@@iterator 迭代器方法

var obj = { a: 1, b: 2, c:3}
Object.defineProperty( obj, Symbol.iterator, {
    enumerable: false,
    writeable: false,
    configurable: true,
    value: function() {
        let o = this
        let idx = 0
        let ks = Object.keys(o)
        return {
            next: function() {
                return {
                    value: o[ks[inex++]],
                    done: idx > ks.length
                }
            }
        }
    }
})

// 使用
const it = obj[Symbol.iterator]()
it.next() // 可以访问

Q：介绍构造函数与委托、class 与 委托 A： ----📋

// 对象的方式 与 委托
const Foo = {
    init: function(name) {
        this.name = name
    },
    identity: function() {
        return this.name
    }
}
const Bar = Object.create(Foo)
Bar.say = function() {
    console.log('hello', this.identity() + '.')
}
const b1 = Object.create(Bar)
const b2 = Object.create(Bar)
b1.init('王者')
b2.init('zyg')
b1.say()
b2.say()

// 函数 与 委托
function Foo(name) {
    this.name = name
}

Foo.prototype.identity = function() {
    return this.name
}

function Bar(name) {
    Foo.call(this, name)
}

Bar.prototype = Object.create(Foo.prototype)

Bar.prototype.say = function() {
    console.log('longfeng' + this.identity() + '----')
}

const b1 = new Bar('zyg')
b1.say()

[yaogengzhu]

Q: 如何清除webpack打包的一些无用信息

// 首先安装相关插件
npm i -D friendly-errors-webpack-plugin node-notifier

// 配置信息
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
export default {
    ....
   plugins: [
        new FriendlyErrorsWebpackPlugin({
          compilationSuccessInfo: {
            messages: [`Your application is running here: http://${config.dev.devServer.host}:${config.dev.devServer.port}`],
          },
          onErrors: config.dev.notifyOnErrors
              ? utils.createNotifierCallback()
              : undefined,
          clearConsole: true,
          }
        ),
  ]
  ...
}

[yaogengzhu]

Q: 如何清除webpack打包的一些无用信息

// 首先安装相关插件
npm i -D friendly-errors-webpack-plugin node-notifier

// 配置信息
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
export default {
    ....
   plugins: [
        new FriendlyErrorsWebpackPlugin({
          compilationSuccessInfo: {
            messages: [`Your application is running here: http://${config.dev.devServer.host}:${config.dev.devServer.port}`],
          },
          onErrors: config.dev.notifyOnErrors
              ? utils.createNotifierCallback()
              : undefined,
          clearConsole: true,
          }
        ),
  ]
  ...
}

补充

• 这个在webpack其实有相应的配置

devServer: {
      port: 8000,
      stats: 'normal', // 处理输出的一些信息
      historyApiFallback: true, // 处理BowerRouter
      compress: true,
 },

[yaogengzhu]

Q：关于Object的一些新增方法你知道哪些？

A: 新增方法补充了

• Object.keys() // 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。
• Object.values() // 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值
• Object.entries() // 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

// Object.keys() 和 Object.values() 返回的数组可 供for...of循环使用。

let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };

for (let key of keys(obj)) {
  console.log(key); // 'a', 'b', 'c'
}

for (let value of values(obj)) {
  console.log(value); // 1, 2, 3
}

for (let [key, value] of entries(obj)) {
  console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}

Tip

Object.values('foo')
// ['f', 'o', 'o']

[yaogengzhu]

Q: 什么是可枚举属性 A：我们知道js中对象的属性有个叫可枚举的标志，通常情况下它的值是true。但是当通过Object.defineProperty定义的对象属性，这个标志的默认值是false。

[yaogengzhu]

Q: 微任务和宏任务

JS中的微任务和宏任务

宏任务

• 新程序或子程序被直接执行
• 事件的回调函数
• setTimeout() 和 setInterval()

微任务

• Promise.then() .catch() finally()
• process.nextTick()

eventloop 事件循环队列, 不断循环机制，寻找可以执行的任务（微任务队列清空后，才会执行宏任务）

宏任务 会被加入宏任务队列 微任务 会被加入任务队列中

console.log(1)
setTimeout(() => {
    console.log(2)
}, 0)
Promise.resolve().then(() => {
    console.log(3)
})
console.log(4)

Promise.resolve().then(() => {
    console.log(5)
})

setTimeout(() => {
    console.log(6)
    console.log(7)
}, 0);

Promise.resolve().then(() => {
    console.log(8)
})

调用栈被清空以后，事件就会优先寻找微任务队列的任务，也就是说每次宏任务结束后 事件循环就会先执行微任务，直到微任务队列的任务被执行完成后，才会执行下一轮宏任务。

[yaogengzhu]

Q: 如何判断一个对象中是否存在该属性？ A: 判断对象自身的一些属性是否存在 。该方法会忽略掉那些从原型上继承的属性。

hasOwnProperty() 方法会返回一个布尔值。指示对象自身属性中是否存在指定的属性是否有指定的键。

const obj = {}
obj.a = 1
obj.hasOwnProperty('a') // true

值得注意的是：hasOwnProperty 这个属性名。并没有被保护，可能作为其他的对象的属性名存在，就需要外部的hasOwnProperty 来获得正确的结果。

Object.prototype.hasOwnProperty.call(obj, 'a') // true