\n {/* 下拉菜单内容 */}\n

\n );\n}\n```\n\n2. 在下拉组件的父元素上监听点击事件，当点击区域不在下拉组件及其父元素内时，触发关闭下拉组件的操作。具体实现如下：\n\n```jsx\nimport React, { useState } from 'react';\n\nfunction Dropdown(props) {\n const [isOpen, setIsOpen] = useState(false);\n\n function toggleDropdown() {\n setIsOpen(!isOpen);\n }\n\n function handleClickOutside(event) {\n if (!event.target.closest('.dropdown')) {\n setIsOpen(false);\n }\n }\n\n return (\n

\n \n {isOpen && setIsOpen(false)} />}\n

\n );\n}\n```\n\n在上述代码中，我们在 `Dropdown` 组件的根元素上添加了点击事件处理程序 `handleClickOutside`，当点击区域不在 `.dropdown` 元素内时，触发关闭下拉组件的操作。由于 `DropdownMenu` 组件位于 `Dropdown` 组件内部，因此当点击下拉菜单时，事件会冒泡到 `Dropdown` 组件，从而不会触发关闭操作。\n\n3. 除了上述方法外，还可以使用 `useRef` 钩子来监听鼠标点击事件。具体实现可以在下拉组件的根元素上使用 `ref` 属性来获取 DOM 元素的引用，然后在组件挂载时使用 `addEventListener` 方法绑定 `mousedown` 事件，最后在事件处理函数中判断鼠标点击的位置是否在下拉组件内，如果不在，则关闭下拉组件。\n\n示例代码如下：\n\n```jsx\nimport { useRef, useState, useEffect } from 'react';\n\nfunction Dropdown() {\n const [isOpen, setIsOpen] = useState(false);\n const dropdownRef = useRef(null);\n\n useEffect(() => {\n function handleClickOutside(event) {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {\n setIsOpen(false);\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [dropdownRef]);\n\n return (\n

\n \n {isOpen && (\n

Option 1
Option 2
Option 3

\n )}\n

\n );\n}\n```\n\n这种方法可以在组件内部处理点击事件，不需要将事件处理函数传递给父组件。但是相对而言代码会比较繁琐，需要手动处理事件绑定和解绑。\n\n",{"_58":318,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/245/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/245/timeline",{"_58":321,"_60":61,"_62":322,"_64":323,"_66":324,"_68":325,"_70":326,"_72":327,"_74":328,"_76":329,"_78":330,"_111":331,"_131":132,"_133":24,"_134":-5,"_135":334,"_137":335,"_159":152,"_153":337,"_155":338,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":339,"_170":340,"_176":341,"_178":342,"_190":344,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/243","https://api.github.com/repos/pro-collection/interview-question/issues/243/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/243/comments","https://api.github.com/repos/pro-collection/interview-question/issues/243/events","https://github.com/pro-collection/interview-question/issues/243",1650984812,"I_kwDOJGDC6c5iaAds",243,"[webpack] webpack 是如何给 web 应用注入环境变量的，原理是啥",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[332,333],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":305,"_72":306,"_58":307,"_117":308,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":336,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-02T15:11:38Z","2023-04-02T15:11:39Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"Webpack 可以通过 DefinePlugin 插件给 web 应用注入环境变量。该插件会在编译过程中替换掉代码中指定的变量，以实现在运行时替换成环境变量的值。\n\n在 webpack 的配置文件中，需要先引入该插件，然后将需要注入的环境变量通过该插件进行配置。例如：\n\n```javascript\nconst webpack = require('webpack');\n\nmodule.exports = {\n // 其他配置\n plugins: [\n new webpack.DefinePlugin({\n 'process.env': {\n NODE_ENV: JSON.stringify('production')\n },\n API_URL: JSON.stringify('http://api.example.com')\n })\n ]\n};\n```\n\n上述配置中，定义了两个需要注入的变量，分别是 `process.env.NODE_ENV` 和 `API_URL`。其中，`process.env.NODE_ENV` 是一个常用的环境变量，用来标识当前是开发环境还是生产环境；`API_URL` 是一个自定义的环境变量，用来存储 API 的地址。\n\n在代码中使用这些环境变量时，只需要直接引用即可：\n\n```javascript\nif (process.env.NODE_ENV === 'production') {\n console.log('当前为生产环境');\n}\n\nfetch(API_URL + '/users')\n .then(response => response.json())\n .then(data => console.log(data));\n```\n\nWebpack 在编译时会将这些变量替换成对应的值，例如：\n\n```javascript\nif ('production' === 'production') {\n console.log('当前为生产环境');\n}\n\nfetch('http://api.example.com' + '/users')\n .then(response => response.json())\n .then(data => console.log(data));\n```\n\n通过这种方式，我们就可以在代码中方便地使用环境变量，同时保证了在不同环境下都能正确地使用相应的变量值。",{"_58":343,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/243/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/243/timeline",{"_58":346,"_60":61,"_62":347,"_64":348,"_66":349,"_68":350,"_70":351,"_72":352,"_74":353,"_76":354,"_78":355,"_111":356,"_131":132,"_133":24,"_134":-5,"_135":369,"_137":370,"_159":152,"_153":383,"_155":384,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":385,"_170":386,"_176":387,"_178":388,"_190":390,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/242","https://api.github.com/repos/pro-collection/interview-question/issues/242/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/242/comments","https://api.github.com/repos/pro-collection/interview-question/issues/242/events","https://github.com/pro-collection/interview-question/issues/242",1650979765,"I_kwDOJGDC6c5iZ_O1",242,"[Redux] react-redux 是如何更新到 UI 的, 写一下这部分的核心源码",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[357,364],{"_70":358,"_72":359,"_58":360,"_117":361,"_119":362,"_121":24,"_122":363},5252532904,"LA_kwDOJGDC6c8AAAABORNKqA","https://api.github.com/repos/pro-collection/interview-question/labels/web%E6%A1%86%E6%9E%B6","web框架","CB446E","web 框架相关知识",{"_70":365,"_72":366,"_58":367,"_117":368,"_119":129,"_121":24,"_122":130},5312726360,"LA_kwDOJGDC6c8AAAABPKnFWA","https://api.github.com/repos/pro-collection/interview-question/labels/%E8%85%BE%E8%AE%AF","腾讯",[],{"_58":371,"_68":372,"_62":373,"_70":374,"_72":375,"_74":376,"_76":377,"_122":378,"_147":379,"_149":380,"_151":152,"_131":132,"_153":381,"_155":382,"_157":-5,"_158":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/4","https://github.com/pro-collection/interview-question/milestone/4","https://api.github.com/repos/pro-collection/interview-question/milestones/4/labels",9124550,"MI_kwDOJGDC6c4AizrG",4,"资深","资深级别面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},50,"2023-03-06T15:00:45Z","2025-07-06T12:02:25Z","2023-04-02T14:58:02Z","2023-04-02T14:58:03Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### react-redux 和 redux 的关系\n\nRedux 和 React-Redux 是两个独立的库，但它们通常一起使用，因为 Redux 库本身并不针对 React，而是一个通用的状态管理库，而 React-Redux 则是一个用于将 Redux 集成到 React 应用程序中的库。\n\nReact-Redux 提供了一组 React 组件和钩子，使得在 React 应用程序中使用 Redux 变得更加容易。它提供了一个 `Provider` 组件，可以将 Redux store 注入到整个 React 应用程序中，并且可以使用 `connect` 函数将组件连接到 Redux store，使它们可以访问和修改 store 中的数据。\n\n使用 React-Redux，我们可以将 Redux 的状态管理能力与 React 的组件化能力结合起来，使得应用程序的状态可以很方便地被管理和共享，并且组件也可以方便地访问和修改应用程序的状态。\n\n### react-redux 是如何集成到 UI 的？\n\n`react-redux` 提供了两个主要的组件 `Provider` 和 `connect`，它们用于将 Redux 状态管理与 React 组件相结合。\n\n首先，使用 `Provider` 组件将 Redux store 传递给整个应用程序。可以将 `` 组件作为最高层的组件，这样在应用程序中的所有组件中都可以访问到 Redux store。\n\n下一步，使用 `connect` 函数连接 Redux store 和组件。`connect` 函数是一个高阶函数，它接收两个参数：`mapStateToProps` 和 `mapDispatchToProps`，并返回另一个函数，这个函数接受一个组件作为参数，并返回一个增强版的组件。\n\n`mapStateToProps` 函数用于从 Redux store 中获取需要的 state 数据，并将其映射到组件的 props 上。`mapDispatchToProps` 函数用于将 action creator 映射到组件的 props 上，这样组件就可以直接调用 action creator 发起 action，而不需要手动分发 dispatch。\n\n使用 `connect` 函数生成的增强版组件可以访问到 Redux store 中的 state 和 dispatch，并将它们作为 props 传递给原始组件。在组件中，可以直接使用这些 props 来获取和更新 state，以及发起 action。当组件中的 state 或 props 发生变化时，`connect` 函数会自动更新组件，以反映最新的 state 和 props。\n\n通过这种方式，`react-redux` 让我们可以在 React 组件中使用 Redux 进行状态管理，实现了 Redux 和 React 的无缝集成。\n\n### 简单写一下更新 UI 核心代码实现\n\nreact-redux 是基于 React 和 Redux 的，主要用于将 Redux 的状态管理功能集成到 React 应用程序中。它主要包括两个部分：Provider 和 connect。\n\nProvider 组件是 react-redux 的核心，它将 Redux 的 store 作为 props 传递给 React 组件，并通过 React 的上下文（Context）使得后代组件能够访问到 store。\n\nconnect 函数用于连接 React 组件与 Redux store，返回一个新的组件。该函数的主要作用是在组件中提供 mapStateToProps 和 mapDispatchToProps 函数，从而使组件能够从 Redux store 中读取数据，并向 store 分发 action。\n\n下面是一个简单的实现，用于说明 react-redux 是如何集成到 UI 的：\n\n```javascript\n// Provider.js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nexport const StoreContext = React.createContext();\n\nexport default function Provider(props) {\n const { store, children } = props;\n return (\n \n {children}\n \n );\n}\n\nProvider.propTypes = {\n store: PropTypes.object.isRequired,\n children: PropTypes.any,\n};\n\n// connect.js\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { StoreContext } from './Provider';\n\nexport default function connect(mapStateToProps, mapDispatchToProps) {\n return function wrapWithConnect(WrappedComponent) {\n class Connect extends React.Component {\n componentDidMount() {\n const { store } = this.context;\n this.unsubscribe = store.subscribe(this.handleChange.bind(this));\n }\n\n componentWillUnmount() {\n this.unsubscribe();\n }\n\n handleChange() {\n this.forceUpdate();\n }\n\n render() {\n const { store } = this.context;\n const props = {\n ...this.props,\n ...mapStateToProps(store.getState(), this.props),\n ...mapDispatchToProps(store.dispatch, this.props),\n };\n return ;\n }\n }\n\n Connect.contextType = StoreContext;\n Connect.propTypes = {\n store: PropTypes.object,\n };\n Connect.displayName = `Connect(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;\n\n return Connect;\n };\n}\n```\n\n这里的 Provider 组件用于将 Redux 的 store 传递给 React 组件：\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { createStore } from 'redux';\nimport { Provider } from 'react-redux';\nimport App from './App';\nimport rootReducer from './reducers';\n\nconst store = createStore(rootReducer);\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);\n```\n\n而 connect 函数用于将 React 组件连接到 Redux store：\n\n```javascript\nimport React from 'react';\nimport { connect } from 'react-redux';\nimport { increment } from './actions';\n\nfunction Counter(props) {\n const { count, increment } = props;\n return (\n

Count: {count}

\n \n

\n );\n}\n\nconst mapStateToProps = state => {\n return {\n count: state.count,\n };\n};\n\nconst mapDispatchToProps = dispatch => {\n return {\n increment: () => dispatch(increment()),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Counter);\n```\n",{"_58":389,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/242/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/242/timeline",{"_58":392,"_60":61,"_62":393,"_64":394,"_66":395,"_68":396,"_70":397,"_72":398,"_74":399,"_76":400,"_78":401,"_111":402,"_131":132,"_133":24,"_134":-5,"_135":405,"_137":406,"_159":152,"_153":408,"_155":409,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":410,"_170":411,"_176":412,"_178":413,"_190":415,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/241","https://api.github.com/repos/pro-collection/interview-question/issues/241/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/241/comments","https://api.github.com/repos/pro-collection/interview-question/issues/241/events","https://github.com/pro-collection/interview-question/issues/241",1650975637,"I_kwDOJGDC6c5iZ-OV",241,"[Redux] 简单实现一下核心源码",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[403,404],{"_70":358,"_72":359,"_58":360,"_117":361,"_119":362,"_121":24,"_122":363},{"_70":365,"_72":366,"_58":367,"_117":368,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":407,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-02T14:46:40Z","2023-04-02T15:04:35Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"实现 Redux 的源码主要包括以下几个步骤：\r\n\r\n1. 实现 createStore 函数，创建 store 对象，该函数接收一个 reducer 函数作为参数，返回一个对象。\r\n2. 在 createStore 函数内部，定义一个 state 变量来存储当前的状态值，定义一个 listeners 数组来存储所有的监听函数。\r\n3. 实现 getState 方法，返回当前的状态值。\r\n4. 实现 dispatch 方法，接收一个 action 对象作为参数，将当前的状态值和 action 对象传给 reducer 函数，更新状态值。然后遍历 listeners 数组，调用所有的监听函数。\r\n5. 实现 subscribe 方法，接收一个监听函数作为参数，将该函数添加到 listeners 数组中，以便在状态更新时调用。\r\n6. 实现 combineReducers 函数，将多个 reducer 函数合并成一个 reducer 函数。\r\n7. 在 createStore 函数内部，将传入的 reducer 函数或者合并后的 reducer 函数赋值给一个内部的 currentReducer 变量。\r\n8. 在 dispatch 方法内部，将 currentReducer 赋值给一个局部变量，以保证在 reducer 函数中调用 dispatch 方法时可以获取到最新的 reducer 函数。\r\n\r\n下面是代码实现：\r\n\r\n```javascript\r\n// 实现 createStore 函数\r\nfunction createStore(reducer) {\r\n let state;\r\n const listeners = [];\r\n\r\n function getState() {\r\n return state;\r\n }\r\n\r\n function dispatch(action) {\r\n state = reducer(state, action);\r\n for (let i = 0; i < listeners.length; i++) {\r\n listeners[i]();\r\n }\r\n }\r\n\r\n function subscribe(listener) {\r\n listeners.push(listener);\r\n }\r\n\r\n dispatch({});\r\n\r\n return {\r\n getState,\r\n dispatch,\r\n subscribe\r\n };\r\n}\r\n\r\n// 实现 combineReducers 函数\r\nfunction combineReducers(reducers) {\r\n return function(state = {}, action) {\r\n const nextState = {};\r\n for (const key in reducers) {\r\n nextState[key] = reducers[key](state[key], action);\r\n }\r\n return nextState;\r\n };\r\n}\r\n```\r\n\r\n在使用时，可以先定义 reducer 函数：\r\n\r\n```javascript\r\nfunction todos(state = [], action) {\r\n switch (action.type) {\r\n case \"ADD_TODO\":\r\n return [\r\n ...state,\r\n {\r\n id: action.id,\r\n text: action.text,\r\n completed: false\r\n }\r\n ];\r\n case \"TOGGLE_TODO\":\r\n return state.map(todo =>\r\n todo.id === action.id ? { ...todo, completed: !todo.completed } : todo\r\n );\r\n default:\r\n return state;\r\n }\r\n}\r\n\r\nfunction visibilityFilter(state = \"SHOW_ALL\", action) {\r\n switch (action.type) {\r\n case \"SET_VISIBILITY_FILTER\":\r\n return action.filter;\r\n default:\r\n return state;\r\n }\r\n}\r\n```\r\n\r\n然后将它们传入 combineReducers 函数，创建一个 reducer 函数：\r\n\r\n```javascript\r\nconst reducer = combineReducers({\r\n todos,\r\n visibilityFilter\r\n});\r\n```\r\n\r\n最后调用 createStore 函数，创建一个 store 对象：\r\n\r\n```javascript\r\nconst store = createStore(reducer);\r\n```\r\n\r\n现在就可以使用 store 对象来获取状态值、派发 action、监听状态变化了。\r\n\r\n\r\n可以参考文档: https://juejin.cn/post/6844903785689546760",{"_58":414,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/241/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/241/timeline",{"_58":417,"_60":61,"_62":418,"_64":419,"_66":420,"_68":421,"_70":422,"_72":423,"_74":424,"_76":425,"_78":426,"_111":427,"_131":132,"_133":24,"_134":-5,"_135":430,"_137":431,"_159":152,"_153":433,"_155":434,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":435,"_170":436,"_176":437,"_178":438,"_190":440,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/240","https://api.github.com/repos/pro-collection/interview-question/issues/240/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/240/comments","https://api.github.com/repos/pro-collection/interview-question/issues/240/events","https://github.com/pro-collection/interview-question/issues/240",1650974107,"I_kwDOJGDC6c5iZ92b",240,"[Redux] 的存储过程",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[428,429],{"_70":358,"_72":359,"_58":360,"_117":361,"_119":362,"_121":24,"_122":363},{"_70":365,"_72":366,"_58":367,"_117":368,"_119":129,"_121":24,"_122":130},[],{"_58":247,"_68":248,"_62":249,"_70":250,"_72":251,"_74":252,"_76":253,"_122":254,"_147":432,"_149":256,"_151":152,"_131":132,"_153":257,"_155":258,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-04-02T14:42:37Z","2023-04-02T14:42:38Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"Redux 的存储过程可以简单地分为以下几个步骤：\n\n1. Action Creator 函数被调用，生成一个 Action 对象；\n2. Action 对象被传递给 Store.dispatch() 方法；\n3. Redux Store 调用 Reducer 函数，将当前的 State 和 Action 作为参数传入；\n4. Reducer 函数根据 Action 的类型，生成一个新的 State；\n5. Redux Store 将新的 State 存储下来，用于下一次的状态更新；\n6. 组件通过调用 Store.subscribe() 方法，监听 Store 中 State 的变化；\n7. 当 State 发生变化时，Store 会通知所有的订阅者，订阅者会重新渲染相应的组件。\n\n这个过程可以简单地描述为：Action -> Reducer -> Store -> View。其中，Action 是一个纯对象，它描述了发生的事件；Reducer 是一个纯函数，它接收当前的 State 和 Action，返回一个新的 State；Store 是将 Action 和 Reducer 结合起来的对象，它维护了应用程序的 State；View 则是 React 组件，它通过 Store.subscribe() 方法监听 State 的变化，根据 State 的变化重新渲染页面。",{"_58":439,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/240/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/240/timeline",{"_58":442,"_60":61,"_62":443,"_64":444,"_66":445,"_68":446,"_70":447,"_72":448,"_74":449,"_76":450,"_78":451,"_111":452,"_131":132,"_133":24,"_134":-5,"_135":455,"_137":456,"_159":152,"_153":458,"_155":459,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":460,"_170":461,"_176":462,"_178":463,"_190":465,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/239","https://api.github.com/repos/pro-collection/interview-question/issues/239/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/239/comments","https://api.github.com/repos/pro-collection/interview-question/issues/239/events","https://github.com/pro-collection/interview-question/issues/239",1648001921,"I_kwDOJGDC6c5iOoOB",239,"如何在前端团队快速落地代码规范",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[453,454],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":365,"_72":366,"_58":367,"_117":368,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":457,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-30T17:10:42Z","2023-03-31T01:22:24Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"// todo 待整理\r\n\r\n- https://juejin.cn/post/7033210664844066853\r\n- https://juejin.cn/post/7007419705543622669\r\n- https://juejin.cn/post/7167707693333872647\r\n- https://juejin.cn/post/6844904142289240071\r\n",{"_58":464,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/239/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/239/timeline",{"_58":467,"_60":61,"_62":468,"_64":469,"_66":470,"_68":471,"_70":472,"_72":473,"_74":474,"_76":475,"_78":476,"_111":477,"_131":132,"_133":24,"_134":-5,"_135":480,"_137":481,"_159":152,"_153":483,"_155":484,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":485,"_170":486,"_176":487,"_178":488,"_190":490,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/238","https://api.github.com/repos/pro-collection/interview-question/issues/238/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/238/comments","https://api.github.com/repos/pro-collection/interview-question/issues/238/events","https://github.com/pro-collection/interview-question/issues/238",1647970228,"I_kwDOJGDC6c5iOge0",238,"如何保证用户的使用体验",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[478,479],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":365,"_72":366,"_58":367,"_117":368,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":482,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-30T16:47:54Z","2023-03-30T16:47:55Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"【如何保证用户的使用体验】这个也是一个较为复杂的话题，这个也不是问题了，这个算是话题吧；\n\n主要从以下几个方面思考问题：\n\n1. 性能方向的思考\n\n2. 用户线上问题反馈，线上 on call 的思考\n\n3. 用户使用体验的思考，交互体验使用方向\n\n4. 提升用户能效方向思考\n",{"_58":489,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/238/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/238/timeline",{"_58":492,"_60":61,"_62":493,"_64":494,"_66":495,"_68":496,"_70":497,"_72":498,"_74":499,"_76":500,"_78":501,"_111":502,"_131":132,"_133":24,"_134":-5,"_135":505,"_137":506,"_159":152,"_153":508,"_155":509,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":510,"_170":511,"_176":512,"_178":513,"_190":515,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/237","https://api.github.com/repos/pro-collection/interview-question/issues/237/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/237/comments","https://api.github.com/repos/pro-collection/interview-question/issues/237/events","https://github.com/pro-collection/interview-question/issues/237",1646077597,"I_kwDOJGDC6c5iHSad",237,"canvas 与 svg 在可视化领域优劣如何",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[503,504],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":365,"_72":366,"_58":367,"_117":368,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":507,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-29T15:42:42Z","2023-10-11T03:08:31Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"SVG、Canvas和WebGL在可视化方向各有优劣，具体如下：\r\n\r\n**SVG（Scalable Vector Graphics）：**\r\n\r\n- 优势：\r\n1. 矢量图形：SVG 使用矢量图形描述，图形会根据缩放和放大而保持清晰，适用于需要无损放大的情况。\r\n2. 文本处理：SVG 对于文本处理较好，可以方便地添加和编辑文本。\r\n3. 简单图形绘制：SVG 支持直接绘制基本图形，如矩形、圆形、线条等，方便快速绘制简单图表。\r\n\r\n- 劣势：\r\n1. 复杂图形处理：当图形复杂度较高时，SVG 的性能会受到影响，特别是在处理大量数据时。\r\n2. 动画效果：SVG 的动画效果相对较弱，复杂的动画效果可能导致性能下降。\r\n\r\n**Canvas：**\r\n\r\n- 优势：\r\n1. 像素级控制：Canvas 提供了像素级别的控制，可以绘制复杂的图形和图表。\r\n2. 性能较好：Canvas 可以通过 JavaScript 直接操作像素，适用于处理大量数据和复杂图形的场景。\r\n3. 动画效果：Canvas 可以通过 JavaScript 控制每一帧的绘制，实现复杂的动画效果。\r\n\r\n- 劣势：\r\n1. 缩放和放大：Canvas 绘制的图形是像素级别的，当需要缩放和放大时会导致图形模糊。\r\n2. 文本处理：相对于 SVG，Canvas 对于文本处理较为复杂，需要手动进行字体设置和绘制。\r\n\r\n**WebGL（Web Graphics Library）：**\r\n\r\n- 优势：\r\n1. 3D 图形渲染：WebGL 可以进行硬件加速的 3D 图形渲染，适用于创建复杂的 3D 场景和效果。\r\n2. 性能优异：WebGL 可以充分利用 GPU 的并行计算能力，具有较好的性能表现。\r\n\r\n- 劣势：\r\n1. 学习成本高：WebGL 使用 OpenGL ES 的接口，对于开发者要求一定的图形学和计算机图形学的知识。\r\n2. 兼容性问题：WebGL 需要浏览器支持，并且在某些设备和浏览器上可能存在兼容性问题。\r\n\r\n综上所述，选择适合的技术取决于具体的需求，如图形复杂性、数据量大小、动画效果的需求、对文本处理的要求等。在实际开发中，也可以结合使用不同的技术来满足不同的需求。\r\n\r\n\r\n**表格对比**\r\n\r\n|特性|Canvas|SVG|\r\n|---|---|---|\r\n|图形质量|像素级别的图形，适合绘制大量复杂动态的图形|矢量图，图形不会失真，适合绘制静态图形|\r\n|图形渲染|快速渲染，适合处理大量图形数据|慢速渲染，适合处理小规模静态图形|\r\n|交互性|事件处理复杂，需要手动编写交互逻辑|事件处理简单，内置事件处理机制|\r\n|动画效果|动画效果需要手动实现，实现复杂动画困难|内置 SMIL 动画支持，可实现较复杂动画效果|\r\n|浏览器支持|除 IE8 及以下版本外，其他浏览器都支持|除 IE9 及以下版本外，其他浏览器都支持|\r\n|适用场景|处理大量动态图形，如游戏开发、数据可视化等|绘制简单静态图形，如图标、线条、文字等|\r\n",{"_58":514,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/237/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/237/timeline",{"_58":517,"_60":61,"_62":518,"_64":519,"_66":520,"_68":521,"_70":522,"_72":523,"_74":524,"_76":525,"_78":526,"_111":527,"_131":132,"_133":24,"_134":-5,"_135":529,"_137":530,"_159":152,"_153":532,"_155":533,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":534,"_170":535,"_176":536,"_178":537,"_190":539,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/236","https://api.github.com/repos/pro-collection/interview-question/issues/236/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/236/comments","https://api.github.com/repos/pro-collection/interview-question/issues/236/events","https://github.com/pro-collection/interview-question/issues/236",1646069439,"I_kwDOJGDC6c5iHQa_",236,"babel 的工作流程是如何的？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[528],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":531,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-29T15:37:34Z","2023-03-29T15:37:35Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"Babel 是一个 JavaScript 编译器，它的主要功能是将新版本的 JavaScript 代码转换成向后兼容的代码。Babel 的工作流程可以简单概括为以下几个步骤：\n\n1. 解析：将 JavaScript 代码解析成 AST（抽象语法树）。\n\n2. 转换：对 AST 进行遍历，进行代码转换。\n\n3. 生成：将转换后的 AST 生成 JavaScript 代码。\n\n具体来说，Babel 的工作流程如下：\n\n1. Babel 使用 babylon 解析器将 JavaScript 代码解析成 AST，babylon 是一个基于 AST 的 JavaScript 解析器。\n\n2. Babel 使用 babel-traverse 遍历器对 AST 进行遍历，找到需要转换的节点，进行转换。\n\n3. Babel 使用 babel-core 转换器将 AST 转换成 JavaScript 代码。babel-core 是 babel 的核心模块，它包含了所有的转换器和插件。\n\n4. Babel 使用 babel-generator 生成器将转换后的 AST 生成 JavaScript 代码。babel-generator 是一个将 AST 转换成 JavaScript 代码的工具。\n\n在整个流程中，Babel 还会使用 babel-preset-env、babel-plugin-transform-runtime、babel-polyfill 等插件和工具来完成更加复杂的任务，如将 ES6 模块转换成 CommonJS 模块，使用 Polyfill 来实现一些新的 API 等。\n\n需要注意的是，Babel 的转换过程是有损的，转换后的代码不一定与原始代码完全相同，也可能存在性能问题。因此，在使用 Babel 进行转换时，需要谨慎选择转换的规则和插件，以确保转换后的代码正确、高效。",{"_58":538,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/236/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/236/timeline",{"_58":541,"_60":61,"_62":542,"_64":543,"_66":544,"_68":545,"_70":546,"_72":547,"_74":548,"_76":549,"_78":550,"_111":551,"_131":132,"_133":24,"_134":-5,"_135":558,"_137":559,"_159":152,"_153":561,"_155":562,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":563,"_170":564,"_176":565,"_178":566,"_190":568,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/235","https://api.github.com/repos/pro-collection/interview-question/issues/235/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/235/comments","https://api.github.com/repos/pro-collection/interview-question/issues/235/events","https://github.com/pro-collection/interview-question/issues/235",1646064267,"I_kwDOJGDC6c5iHPKL",235,"[webpack] 什么情况下 webpack treeShaking 会失效？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[552,553],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},{"_70":554,"_72":555,"_58":556,"_117":557,"_119":129,"_121":24,"_122":130},5326133419,"LA_kwDOJGDC6c8AAAABPXZYqw","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B0%8F%E7%B1%B3","小米",[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":560,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-29T15:34:25Z","2023-03-29T15:34:26Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 以下是一些可能导致 webpack tree shaking 失效的情况\n\n1. 代码中使用了动态引入（Dynamic Imports）的语法，这种情况下，webpack 无法确定哪些代码会被使用，因此不会进行 tree shaking。\n\n2. 代码使用了函数式编程的方式，比如使用了 map、filter、reduce 等高阶函数，而这些函数很难通过静态分析确定代码的执行路径，所以可能会导致 tree shaking 失效。\n\n3. 代码中使用了 webpack 无法识别的模块系统，比如使用了 AMD 或者 CommonJS 的语法，这种情况下 webpack 也无法进行 tree shaking。\n\n4. 代码使用了 side effect，比如改变全局变量或者函数的参数，这种情况下 webpack 也无法进行 tree shaking。\n\n### 函数式编程的方式 filter 为何会导致无法 tree shaking\n\n函数式编程中常常使用高阶函数来组合函数，这种组合方式常常需要使用传递函数作为参数的方式，例如 map、filter 等高阶函数。这种情况下，如果参数传递的是一个函数表达式或者函数声明，那么无法进行 treeshaking。\n\n举个例子：\n\n```js\n// 代码中定义了一个 sum 函数\nfunction sum(a, b) {\n return a + b;\n}\n\n// 调用了 lodash 库的 filter 函数，传递一个匿名函数表达式作为参数\nimport { filter } from 'lodash';\n\nconst arr = [1, 2, 3, 4, 5];\nconst result = filter(arr, item => {\n if (item > 10) return sum(item, 1)\n else return item;\n});\n```\n上述代码中，使用了 lodash 库的 filter 函数，并且传递了一个匿名函数表达式作为参数。由于函数表达式无法被静态分析，不知道 sum 是否会被调用，因此无法进行 treeshaking，最终导致整个 sum 函数也被打包进了最终的代码中。\n\n### 为什么 commonjs 模块化会导致无法 tree shaking\n\nCommonJS 模块化语法是 Node.js 中的模块化规范，其使用了 `require()` 导入模块，使用 `module.exports` 或 `exports` 导出模块。它采用的是动态导入（require()）和同步加载的方式，这种导入方式无法在编译时确定所依赖的模块，因此在 Webpack 进行 Tree Shaking 时，这种导入方式的模块会被认为无法被静态分析，因而会被排除掉。\n\n相反，ES6 模块化语法采用的是静态导入的方式，例如 `import foo from './foo.js'`，可以在编译时分析出所依赖的模块，因此支持 Tree Shaking。\n\n因此，如果要使用 Tree Shaking，建议采用 ES6 模块化语法。如果必须使用 CommonJS 模块化规范，可以尝试使用动态导入`（import()）`语法，或者采用其他工具或手动实现 Tree Shaking。\n\n\n### side effect 是什么，为何会导致无法 tree shaking\n\n在编写 JavaScript 代码时，如果一个函数除了返回值外，还对外部的变量产生了其他的影响，比如修改了全局变量、读写了文件等操作，那么这个函数就被称为有“副作用”（side effect）。因为这种函数并不是纯函数，它可能会影响其他部分的代码执行结果，不便于优化和调试。\n\n在 Tree Shaking 的过程中，webpack 将模块打包成单独的 JavaScript 文件，它会从模块中找出哪些代码没有被使用到，并删除这些代码。但是，如果模块中存在带有副作用的代码，这些代码虽然没有被使用到，但它们仍然会被保留下来，因为这些代码可能会对其他部分的代码产生影响，因此不能简单地删除。这也是为什么带有副作用的代码会导致无法 Tree Shaking 的原因。\n\n",{"_58":567,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/235/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/235/timeline",{"_58":570,"_60":61,"_62":571,"_64":572,"_66":573,"_68":574,"_70":575,"_72":576,"_74":577,"_76":578,"_78":579,"_111":580,"_131":132,"_133":24,"_134":-5,"_135":583,"_137":584,"_159":152,"_153":586,"_155":587,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":588,"_170":589,"_176":590,"_178":591,"_190":593,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/232","https://api.github.com/repos/pro-collection/interview-question/issues/232/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/232/comments","https://api.github.com/repos/pro-collection/interview-question/issues/232/events","https://github.com/pro-collection/interview-question/issues/232",1646029883,"I_kwDOJGDC6c5iHGw7",232,"使用同一个链接，如何实现 PC 打开是 web 应用、手机打开是一个 H5 应用？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[581,582],{"_70":114,"_72":115,"_58":116,"_117":118,"_119":120,"_121":24,"_122":123},{"_70":554,"_72":555,"_58":556,"_117":557,"_119":129,"_121":24,"_122":130},[],{"_58":371,"_68":372,"_62":373,"_70":374,"_72":375,"_74":376,"_76":377,"_122":378,"_147":585,"_149":380,"_151":152,"_131":132,"_153":381,"_155":382,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-29T15:15:05Z","2023-03-29T15:15:06Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"可以通过根据请求来源（User-Agent）来判断访问设备的类型，然后在服务器端进行适配。例如，可以在服务器端使用 Node.js 的 Express 框架，在路由中对不同的 User-Agent 进行判断，返回不同的页面或数据。具体实现可以参考以下步骤：\n\n1. 根据 User-Agent 判断访问设备的类型，例如判断是否为移动设备。可以使用第三方库如 ua-parser-js 进行 User-Agent 的解析。\n\n2. 如果是移动设备，可以返回一个 H5 页面或接口数据。\n\n3. 如果是 PC 设备，可以返回一个 web 应用页面或接口数据。\n\n具体实现方式还取决于应用的具体场景和需求，以上只是一个大致的思路。",{"_58":592,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/232/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/232/timeline",{"_58":595,"_60":61,"_62":596,"_64":597,"_66":598,"_68":599,"_70":600,"_72":601,"_74":602,"_76":603,"_78":604,"_111":605,"_131":132,"_133":24,"_134":-5,"_135":607,"_137":608,"_159":152,"_153":610,"_155":611,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":612,"_170":613,"_176":614,"_178":615,"_190":617,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/231","https://api.github.com/repos/pro-collection/interview-question/issues/231/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/231/comments","https://api.github.com/repos/pro-collection/interview-question/issues/231/events","https://github.com/pro-collection/interview-question/issues/231",1646026621,"I_kwDOJGDC6c5iHF99",231,"不用使用 vue-cli ，如何创建一个完整的 vue 工程？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[606],{"_70":209,"_72":210,"_58":211,"_117":212,"_119":213,"_121":24,"_122":214},[],{"_58":371,"_68":372,"_62":373,"_70":374,"_72":375,"_74":376,"_76":377,"_122":378,"_147":609,"_149":380,"_151":152,"_131":132,"_153":381,"_155":382,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-29T15:13:13Z","2023-03-29T15:13:14Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"这个一个较为复杂和庞大的话题，不能称之为问题，只能说它是一个话题。 \n\n主要涉及到的话题如下：\n\n1. vue 工程初始化\n2. 测试集成 \n3. UI 库绑定、基础组件使用\n4. 开发流程\n5. 代码规范（甚至包含 commit 规范）\n6. 多人协作与工作流\n7. 构建问题\n8. 上线流程\n9. 线上日志与用户反馈问题排查\n10. 性能保证\n",{"_58":616,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/231/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/231/timeline",{"_58":619,"_60":61,"_62":620,"_64":621,"_66":622,"_68":623,"_70":624,"_72":625,"_74":626,"_76":627,"_78":628,"_111":629,"_131":132,"_133":24,"_134":-5,"_135":637,"_137":638,"_159":152,"_153":640,"_155":641,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":642,"_170":643,"_176":644,"_178":645,"_190":647,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/228","https://api.github.com/repos/pro-collection/interview-question/issues/228/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/228/comments","https://api.github.com/repos/pro-collection/interview-question/issues/228/events","https://github.com/pro-collection/interview-question/issues/228",1646013118,"I_kwDOJGDC6c5iHCq-",228,"单线程的 nodejs 是如何充分利用计算机 CPU 资源的呢？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[630],{"_70":631,"_72":632,"_58":633,"_117":634,"_119":635,"_121":24,"_122":636},5232525911,"LA_kwDOJGDC6c8AAAABN-ICVw","https://api.github.com/repos/pro-collection/interview-question/labels/Nodejs","Nodejs","AC3F88","Nodejs 研究",[],{"_58":247,"_68":248,"_62":249,"_70":250,"_72":251,"_74":252,"_76":253,"_122":254,"_147":639,"_149":256,"_151":152,"_131":132,"_153":257,"_155":258,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-29T15:06:05Z","2023-03-29T15:06:06Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"虽然 Node.js 是单线程的，但是它能够充分利用计算机的 CPU 资源的原因在于其采用了事件驱动和异步 I/O 的方式来处理请求，而不是采用阻塞式 I/O 的方式。这使得 Node.js 能够在处理一个请求时不会因为等待 I/O 操作而阻塞，从而可以处理更多的请求。\n\n具体来说，当 Node.js 启动一个程序时，会创建一个事件循环，不断地从事件队列中取出一个事件，然后调用相应的回调函数来处理该事件。当有新的请求到来时，Node.js 会将其添加到事件队列中，等待事件循环处理。同时，Node.js 还采用了非阻塞式 I/O 的方式，即在等待 I/O 操作时不会阻塞其他代码的执行，从而能够更好地利用 CPU 资源。\n\n此外，Node.js 还采用了基于事件的回调机制来处理异步请求，这种机制可以避免线程切换和上下文切换带来的开销，提高 CPU 利用率。因此，虽然 Node.js 是单线程的，但是它能够充分利用计算机 CPU 资源，处理更多的请求。",{"_58":646,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/228/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/228/timeline",{"_58":649,"_60":61,"_62":650,"_64":651,"_66":652,"_68":653,"_70":654,"_72":655,"_74":656,"_76":657,"_78":658,"_111":659,"_131":132,"_133":24,"_134":-5,"_135":668,"_137":669,"_159":152,"_153":671,"_155":672,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":673,"_170":674,"_176":675,"_178":676,"_190":678,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/227","https://api.github.com/repos/pro-collection/interview-question/issues/227/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/227/comments","https://api.github.com/repos/pro-collection/interview-question/issues/227/events","https://github.com/pro-collection/interview-question/issues/227",1646006770,"I_kwDOJGDC6c5iHBHy",227,"进程、线程、协程分别是什么概念？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[660,667],{"_70":661,"_72":662,"_58":663,"_117":664,"_119":665,"_121":24,"_122":666},5232521368,"LA_kwDOJGDC6c8AAAABN-HwmA","https://api.github.com/repos/pro-collection/interview-question/labels/JavaScript","JavaScript","A4D8FB","JavaScript 语法部分",{"_70":554,"_72":555,"_58":556,"_117":557,"_119":129,"_121":24,"_122":130},[],{"_58":247,"_68":248,"_62":249,"_70":250,"_72":251,"_74":252,"_76":253,"_122":254,"_147":670,"_149":256,"_151":152,"_131":132,"_153":257,"_155":258,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-29T15:03:05Z","2023-03-29T15:03:06Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 进程（Process）和线程（Thread）\n进程（Process）和线程（Thread）是操作系统中的重要概念。\n\n**进程是指计算机中已经运行的程序，它是操作系统资源分配的最小单位**。进程拥有独立的内存空间和系统资源，如打开的文件、网络连接等。在操作系统中，每个进程都拥有一个唯一的标识符，称为进程ID。\n\n**线程是进程中的执行单元**，一个进程可以包含多个线程，它们共享进程的内存空间和系统资源。线程是CPU调度的最小单位，它可以看作是进程中的一个独立执行流程。与进程不同的是，线程没有自己的系统资源，只有一部分与进程共享的资源。在操作系统中，每个线程都拥有一个唯一的标识符，称为线程ID。\n\n可以将进程和线程的关系类比为一家工厂。工厂代表一个进程，工厂中的工人代表线程。每个工人负责自己的一部分工作，但是他们共享工厂的资源，如原材料、设备等。\n\n总的来说，进程和线程都是操作系统资源分配和调度的基本单位，它们之间的关系是多对一的，即多个线程可以属于同一个进程，共享进程的资源。\n\n### 协程（Coroutine）\n协程（Coroutine）是一种用户态的轻量级线程，也称为协作式多任务处理，与传统的抢占式多任务处理方式不同，协程的调度不由系统来控制，而是由程序员自己控制。在协程内部，程序可以自己决定在何处挂起、何时恢复执行。协程可以有效地避免多线程并发操作时出现的死锁、竞争、状态同步等问题，同时协程又可以充分利用 CPU 资源，提高程序执行效率。\n\n在协程中，所有任务共享一个线程，通过在任务之间切换来实现并发，这种方式可以避免线程切换时的性能损耗，也可以避免线程之间的同步问题。协程主要有以下特点：\n\n- 协程是一种轻量级的线程，其切换过程不需要操作系统介入，而是在用户态实现的。\n- 协程是一种非抢占式调度方式，需要程序员显式地让出执行权。\n- 协程可以共享全局变量等状态信息，但是需要程序员自己管理状态同步。\n\n协程在很多语言中都得到了广泛的应用，例如 Python 中的 asyncio、Lua 中的 coroutine 等。在前端领域中，JavaScript 的 Generator 函数就是一种协程实现方式。\n",{"_58":677,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/227/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/227/timeline",{"_58":680,"_60":61,"_62":681,"_64":682,"_66":683,"_68":684,"_70":685,"_72":686,"_74":687,"_76":688,"_78":689,"_111":690,"_131":132,"_133":24,"_134":-5,"_135":693,"_137":694,"_159":152,"_153":696,"_155":697,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":698,"_170":699,"_176":700,"_178":701,"_190":703,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/226","https://api.github.com/repos/pro-collection/interview-question/issues/226/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/226/comments","https://api.github.com/repos/pro-collection/interview-question/issues/226/events","https://github.com/pro-collection/interview-question/issues/226",1645983060,"I_kwDOJGDC6c5iG7VU",226,"前端动画有哪些实现方式？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[691,692],{"_70":661,"_72":662,"_58":663,"_117":664,"_119":665,"_121":24,"_122":666},{"_70":241,"_72":242,"_58":243,"_117":244,"_119":129,"_121":24,"_122":130},[],{"_58":247,"_68":248,"_62":249,"_70":250,"_72":251,"_74":252,"_76":253,"_122":254,"_147":695,"_149":256,"_151":152,"_131":132,"_153":257,"_155":258,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-29T14:51:14Z","2023-03-29T14:51:16Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 主要的实现方式\n\n**JS 的实现方式**\n\n- 通过定时器(`setTimeout`, `setInterval`)来间隔改变元素样式\n- requestAnimationFrame\n\n**CSS 3**\n\n- 过度动画：transition\n- animation 动画\n\n**HTML 5**\n\n- Canvas\n- WebGL\n- svg\n\n\n### requestAnimationFrame\n\n`window.requestAnimationFrame()` 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。\n\n当你准备更新动画时你应该调用此方法。这将使浏览器在下一次重绘之前调用你传入给该方法的动画函数 (即你的回调函数)。回调函数执行次数通常是**每秒 60 次**，但在大多数遵循 W3C 建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。\n\n回调函数会被传入 **DOMHighResTimeStamp** 参数，**DOMHighResTimeStamp**指示当前被 `requestAnimationFrame()` 排序的回调函数被触发的时间。在同一个帧中的多个回调函数，它们每一个都会接受到一个相同的时间戳，即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数，单位毫秒，最小精度为 1ms(1000μs)。\n\n**使用语法**： `window.requestAnimationFrame(callback);`\n\n参数：下一次重绘之前更新动画帧所调用的函数 (即上面所说的回调函数)。该回调函数会被传入 `DOMHighResTimeStamp` 参数，该参数与 `performance.now()` 的返回值相同，它表示 `requestAnimationFrame()` 开始去执行回调函数的时刻。\n\n使用示范：\n```html\n

\n\n```\n\n\n### transition\n\n|属性名|说明|\n|---|---|\n|transition|用于简写设置四个过渡属性，包括：transition-property, transition-duration, transition-timing-function 和 transition-delay|\n|transition-property|规定应用过渡效果的 CSS 属性的名称，多个属性用逗号分隔，如：`transition-property: width, height;`，表示在 width 和 height 发生改变时会应用过渡效果|\n|transition-duration|规定过渡效果的持续时间，如：`transition-duration: 1s;`，表示过渡效果持续时间为 1 秒|\n|transition-timing-function|规定过渡效果的时间曲线，即过渡效果的速度变化。常用的值包括：`linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, `cubic-bezier(n,n,n,n)`|\n|transition-delay|规定过渡效果何时开始，如：`transition-delay: 1s;`，表示在 1 秒之后开始应用过渡效果|\n\n\n可以通过设置不同的 transition 属性，来实现各种各样的过渡效果。例如：\n\n```css\ncssCopy codediv {\n width: 100px;\n height: 100px;\n background-color: red;\n transition: width 1s ease-in-out;\n}\n\ndiv:hover {\n width: 200px;\n}\n```\n\n上述代码表示当鼠标悬停在 div 元素上时，它的宽度会从 100px 变为 200px，过渡效果会持续 1 秒，且速度曲线为缓进缓出。\n\n\n### animation\n\n下面是 CSS3 animation 的属性表格：\n\n|属性|描述|\n|---|---|\n|animation-name|规定需要绑定到选择器的 keyframe 名称。|\n|animation-duration|规定动画完成一个周期所花费的秒或毫秒。|\n|animation-timing-function|规定动画的速度曲线。|\n|animation-delay|规定在动画开始之前的延迟。|\n|animation-iteration-count|规定动画应该播放的次数。|\n|animation-direction|规定是否应该轮流反向播放动画。|\n|animation-fill-mode|规定当动画不播放时（当动画完成之前，或当动画被暂停时），要应用到元素的样式。|\n|animation-play-state|规定动画是否正在运行或已暂停。|\n|animation|是 animation 属性的一个简写属性，包含六个独立属性。|\n\n\n其中，animation-name、animation-duration、animation-timing-function 是必须要指定的属性。其他属性都是可选的。通过这些属性，我们可以实现更加灵活的动画效果。\n\n一个使用 `animation` 的例子是实现旋转动画。例如，可以创建一个带有 CSS 类名 `.rotate` 的 `div` 元素，并使用以下样式：\n\n```css\ncssCopy code.rotate {\n animation: spin 2s linear infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n```\n\n这将在 `div` 元素上应用一个旋转动画，持续时间为 2 秒，并且以线性方式无限循环。在 `@keyframes` 规则中定义了旋转动画的动画过程。在 `from` 和 `to` 关键帧中，定义了元素旋转的起始和结束状态。在 `animation` 属性中，指定了动画名称、持续时间、时间函数和动画播放次数等参数。\n\n\n### Canvas 实现动画\nCanvas 可以通过一帧帧的绘制来实现动画。具体来说，可以通过 `requestAnimationFrame` 方法在浏览器下一次重绘之前执行指定的回调函数来不断地更新 Canvas 上的内容，从而实现动画效果。\n\n以下是 Canvas 实现动画的一般流程：\n\n1. 获取 Canvas 对象和上下文对象\n\n首先，需要获取 Canvas 对象和上下文对象。\n\n```javascript\nconst canvas = document.getElementById('myCanvas');\nconst ctx = canvas.getContext('2d');\n```\n\n2. 设置动画帧数和初始状态\n\n为了实现动画，需要对 Canvas 进行重绘。重绘的次数由动画的帧数决定，通常设置为每秒 60 帧。\n\n同时，还需要设置 Canvas 的初始状态，包括背景颜色、形状、大小等。\n\n3. 定义动画函数\n\n动画函数中主要包含两个部分：更新状态和绘制图形。更新状态指更新 Canvas 上的图形的位置、大小、颜色等属性，绘制图形指将更新后的图形绘制到 Canvas 上。\n\n```javascript\nfunction animate() {\n // 更新状态\n // ...\n\n // 绘制图形\n // ...\n}\n```\n\n4. 使用 requestAnimationFrame 方法执行动画\n\n最后，可以使用 `requestAnimationFrame` 方法不断执行动画函数，从而实现动画效果。\n\n```javascript\nfunction animate() {\n // 更新状态\n // ...\n\n // 绘制图形\n // ...\n\n // 递归调用 requestAnimationFrame 方法执行动画\n requestAnimationFrame(animate);\n}\n\n// 启动动画\nrequestAnimationFrame(animate);\n```\n\n在动画函数中更新状态和绘制图形后，调用 `requestAnimationFrame` 方法递归执行动画函数，从而实现不断更新和绘制的动画效果。\n\n\n### svg 实现动画\n\nSVG（可缩放矢量图形）是一种使用 XML 描述 2D 图形的格式，它可以使用 CSS 和 JavaScript 进行动画操作。在 SVG 中，可以使用两种技术实现动画，分别是 SMIL（Synchronized Multimedia Integration Language）和 JavaScript。\n\n下面举一个使用 JavaScript 实现 SVG 动画的例子。假设有一个圆形，当鼠标悬停在圆形上时，圆形会变为红色并且向右移动：\n\nSVG 代码：\n\n```svg\n\n```\n\nCSS 代码：\n\n```css\n#circle {\n transition: fill 0.3s ease;\n}\n```\n\nJavaScript 代码：\n\n```js\nvar circle = document.getElementById('circle');\n\ncircle.addEventListener('mouseover', function() {\n circle.setAttribute('fill', 'red');\n circle.setAttribute('cx', '70');\n});\n```\n\n上面的代码中，通过给圆形添加 mouseover 事件监听器，当鼠标悬停在圆形上时，修改圆形的 fill 属性为红色，并将圆心的 x 坐标改为 70。由于圆形在 CSS 中定义了过渡效果，因此圆形会平滑地变为红色并向右移动。\n",{"_58":702,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/226/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/226/timeline",{"_58":705,"_60":61,"_62":706,"_64":707,"_66":708,"_68":709,"_70":710,"_72":711,"_74":712,"_76":713,"_78":714,"_111":715,"_131":132,"_133":24,"_134":-5,"_135":718,"_137":719,"_159":152,"_153":721,"_155":722,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":723,"_170":724,"_176":725,"_178":726,"_190":728,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/225","https://api.github.com/repos/pro-collection/interview-question/issues/225/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/225/comments","https://api.github.com/repos/pro-collection/interview-question/issues/225/events","https://github.com/pro-collection/interview-question/issues/225",1644225189,"I_kwDOJGDC6c5iAOKl",225,"ES6 代码转成 ES5 代码的实现思路是什么？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[716,717],{"_70":661,"_72":662,"_58":663,"_117":664,"_119":665,"_121":24,"_122":666},{"_70":241,"_72":242,"_58":243,"_117":244,"_119":129,"_121":24,"_122":130},[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":720,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-28T15:43:52Z","2023-03-28T15:43:53Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"ES6 代码转成 ES5 代码的实现思路主要是通过使用 Babel 这样的工具来实现。Babel 是一个广泛使用的 JavaScript 编译器，可以将 ES6 代码转换成向后兼容的 ES5 代码，从而在现有的浏览器和环境中运行。其主要实现思路如下：\n\n1. 词法分析：Babel 首先会将输入的代码进行词法分析，将代码分割成一个个词法单元。\n\n2. 语法分析：接下来 Babel 会对分割后的词法单元进行语法分析，生成抽象语法树(AST)。\n\n3. 转换：通过对 AST 进行遍历和修改，Babel 将 ES6 代码转换成 ES5 代码。\n\n4. 代码生成：最后，Babel 会根据转换后的 AST 生成可运行的 ES5 代码。\n\n在转换过程中，Babel 会根据预定义的插件和预设对代码进行转换。插件和预设可以分别处理一些特定的语法和功能，如箭头函数、类和模块等。同时，Babel 还支持开发者自定义插件和预设来处理更加特殊和个性化的需求。",{"_58":727,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/225/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/225/timeline",{"_58":730,"_60":61,"_62":731,"_64":732,"_66":733,"_68":734,"_70":735,"_72":736,"_74":737,"_76":738,"_78":739,"_111":740,"_131":132,"_133":24,"_134":-5,"_135":743,"_137":744,"_159":152,"_153":756,"_155":757,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":758,"_170":759,"_176":760,"_178":761,"_190":763,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/224","https://api.github.com/repos/pro-collection/interview-question/issues/224/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/224/comments","https://api.github.com/repos/pro-collection/interview-question/issues/224/events","https://github.com/pro-collection/interview-question/issues/224",1644220683,"I_kwDOJGDC6c5iANEL",224,"对象取值中 a.b.c.d 和 a['b']['c']['d'] 有何区别？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[741,742],{"_70":661,"_72":662,"_58":663,"_117":664,"_119":665,"_121":24,"_122":666},{"_70":365,"_72":366,"_58":367,"_117":368,"_119":129,"_121":24,"_122":130},[],{"_58":745,"_68":746,"_62":747,"_70":748,"_72":749,"_74":195,"_76":750,"_122":751,"_147":752,"_149":753,"_151":152,"_131":132,"_153":754,"_155":755,"_157":-5,"_158":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/1","https://github.com/pro-collection/interview-question/milestone/1","https://api.github.com/repos/pro-collection/interview-question/milestones/1/labels",9124541,"MI_kwDOJGDC6c4Aizq9","初","初级面试问题",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},79,"2023-03-06T14:59:51Z","2024-11-22T14:22:55Z","2023-03-28T15:40:55Z","2023-03-28T15:40:57Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 使用区别\n\n在 JavaScript 中，对象的取值可以使用两种方式，即使用点号（.）和使用方括号（\\[\\]）。对于对象的多层嵌套属性，可以使用两种方式分别取值，例如：\n\n```css\ncssCopy codevar obj = {a: {b: {c: {d: 123}}}};\nvar d1 = obj.a.b.c.d;\nvar d2 = obj['a']['b']['c']['d'];\n```\n\n这两种方式获取的结果是相同的，都是 123。其中，使用点号取值的方式称为“点操作符”，使用方括号取值的方式称为“方括号操作符”。\n\n两种方式的区别在于：\n\n1. 点操作符必须使用标识符作为属性名，而方括号操作符可以使用任何字符串作为属性名。\n2. 点操作符在代码书写上更加简洁直观，而方括号操作符可以动态地构造属性名。\n\n因此，在使用时应根据具体的情况选择合适的方式。例如，如果属性名是固定的，建议使用点操作符；如果属性名需要根据变量或其他动态条件构造，则需要使用方括号操作符。\n\n### 性能区别\n\n在对象属性的取值操作中，使用点号`.`和中括号`[]`两种方式都能取到相应的属性值，它们在性能上也有些许的差别。\n\n一般情况下，使用点号`.`来获取属性的性能要高于中括号`[]`，因为在解析的过程中使用点号`.`可以直接根据属性名获取到对应的属性值，而中括号`[]`需要先进行解析里面的属性名，然后再去查找相应的属性值，因此多了一个解析的过程。\n\n但是在以下两种情况下，只能使用中括号`[]`来获取属性值：\n\n1. 属性名包含特殊字符或者是关键字，比如 a\\['class'\\]。\n2. 属性名是动态生成的，比如 a\\[`${name}`\\]。\n\n在这两种情况下，使用点号`.`将会出现语法错误，只能使用中括号`[]`来获取属性值。",{"_58":762,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/224/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/224/timeline",{"_58":765,"_60":61,"_62":766,"_64":767,"_66":768,"_68":769,"_70":770,"_72":771,"_74":772,"_76":773,"_78":774,"_111":775,"_131":132,"_133":24,"_134":-5,"_135":783,"_137":784,"_159":152,"_153":786,"_155":786,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":787,"_170":788,"_176":789,"_178":790,"_190":792,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/223","https://api.github.com/repos/pro-collection/interview-question/issues/223/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/223/comments","https://api.github.com/repos/pro-collection/interview-question/issues/223/events","https://github.com/pro-collection/interview-question/issues/223",1644213421,"I_kwDOJGDC6c5iALSt",223,"介绍下如何实现 token 加密？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[776],{"_70":777,"_72":778,"_58":779,"_117":780,"_119":781,"_121":24,"_122":782},5232529101,"LA_kwDOJGDC6c8AAAABN-IOzQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E7%BD%91%E7%BB%9C","网络","1A8829","web 网络相关",[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":785,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-28T15:36:35Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"Token 是一种常用的身份验证机制，通常被用于 Web 应用程序的用户身份验证。Token 的生成和使用可以使用加密技术来增强安全性，下面介绍一下如何实现 Token 加密。\n\nToken 加密一般有两个步骤：\n\n1. 生成 Token\n2. 加密 Token\n\n### 1. 生成 Token\n\n在生成 Token 时，需要将用户的一些信息进行组合，生成一个字符串，该字符串通常包括以下信息：\n\n1. 用户的唯一标识（如用户 ID）\n2. 时间戳\n3. 有效期\n\n这些信息可以用分隔符分隔开，如用“.”分隔。\n\n### 2. 加密 Token\n\n加密 Token 有多种方式，下面介绍两种常用的方式：\n\n#### 1. 对称加密\n\n对称加密是指加密和解密使用同一密钥的加密算法。对称加密的优点是加解密速度快，缺点是密钥传输容易被截获，从而影响安全性。\n\n常用的对称加密算法有 DES、3DES、AES 等。\n\n#### 2. 非对称加密\n\n非对称加密是指加密和解密使用不同密钥的加密算法。非对称加密的优点是密钥传输安全，缺点是加解密速度较慢。\n\n常用的非对称加密算法有 RSA、DSA 等。\n\n一般情况下，为了兼顾安全性和效率，通常采用混合加密，即先使用非对称加密算法对 Token 进行加密，再使用对称加密算法对加密后的 Token 进行加密。\n\n综上所述，实现 Token 加密的关键在于对 Token 的生成和加密，需要根据具体业务需求来选择合适的加密算法和加密方式。",{"_58":791,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/223/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/223/timeline",{"_58":794,"_60":61,"_62":795,"_64":796,"_66":797,"_68":798,"_70":799,"_72":800,"_74":801,"_76":802,"_78":803,"_111":804,"_131":132,"_133":24,"_134":-5,"_135":813,"_137":814,"_159":195,"_153":816,"_155":817,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":818,"_170":819,"_176":820,"_178":821,"_190":823,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/222","https://api.github.com/repos/pro-collection/interview-question/issues/222/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/222/comments","https://api.github.com/repos/pro-collection/interview-question/issues/222/events","https://github.com/pro-collection/interview-question/issues/222",1644202166,"I_kwDOJGDC6c5iAIi2",222,"给定两个数组，写一个方法来计算它们的交集？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[805,806,807],{"_70":661,"_72":662,"_58":663,"_117":664,"_119":665,"_121":24,"_122":666},{"_70":365,"_72":366,"_58":367,"_117":368,"_119":129,"_121":24,"_122":130},{"_70":808,"_72":809,"_58":810,"_117":811,"_119":213,"_121":24,"_122":812},5931045040,"LA_kwDOJGDC6c8AAAABYYSQsA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0/%E7%AE%97%E6%B3%95","代码实现/算法","代码实现或者算法实现",[],{"_58":247,"_68":248,"_62":249,"_70":250,"_72":251,"_74":252,"_76":253,"_122":254,"_147":815,"_149":256,"_151":152,"_131":132,"_153":257,"_155":258,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-28T15:30:22Z","2025-07-22T04:21:24Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"可以使用 ES6 的 Set 数据结构来实现数组交集。\n\n首先，将一个数组转化为 Set，然后遍历另一个数组，将数组中存在于 Set 中的元素存入结果数组中。\n\n以下是一个示例代码：\n\n```javascript\nfunction intersection(nums1, nums2) {\n const set1 = new Set(nums1);\n const res = [];\n\n for (let num of nums2) {\n if (set1.has(num)) {\n res.push(num);\n }\n }\n\n return res;\n}\n```\n\n使用示例：\n\n```javascript\nconst nums1 = [1, 2, 2, 1];\nconst nums2 = [2, 2];\n\nconsole.log(intersection(nums1, nums2)); // [2]\n```\n\n该算法的时间复杂度为 O(m+n)，其中 m 和 n 分别为两个数组的长度。",{"_58":822,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/222/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/222/timeline",{"_58":825,"_60":61,"_62":826,"_64":827,"_66":828,"_68":829,"_70":830,"_72":831,"_74":832,"_76":833,"_78":834,"_111":835,"_131":132,"_133":24,"_134":-5,"_135":838,"_137":839,"_159":152,"_153":841,"_155":842,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":843,"_170":844,"_176":845,"_178":846,"_190":848,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/221","https://api.github.com/repos/pro-collection/interview-question/issues/221/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/221/comments","https://api.github.com/repos/pro-collection/interview-question/issues/221/events","https://github.com/pro-collection/interview-question/issues/221",1644198247,"I_kwDOJGDC6c5iAHln",221,"箭头函数为何不能作为构造函数使用？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[836,837],{"_70":661,"_72":662,"_58":663,"_117":664,"_119":665,"_121":24,"_122":666},{"_70":365,"_72":366,"_58":367,"_117":368,"_119":129,"_121":24,"_122":130},[],{"_58":247,"_68":248,"_62":249,"_70":250,"_72":251,"_74":252,"_76":253,"_122":254,"_147":840,"_149":256,"_151":152,"_131":132,"_153":257,"_155":258,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-28T15:27:58Z","2023-03-28T15:27:59Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"在箭头函数中，`this`指向的是定义时所在的对象，而不是使用时所在的对象。换句话说，**箭头函数没有自己的this，而是继承父作用域中的this**。\n\n看个例子:\n\n```javascript\nvar person = {\n name:'张三',\n age:18,\n getName:function(){\n console.log('我的名字是：'+this.name)\n },\n getAge:()=>{\n console.log('我的年龄是：'+this.age)\n }\n}\n\nperson.getName() // 我的名字是张三\nperson.getAge() // 我的年龄是undefined\n\n```\n\n`person.getName()`中`this`指向函数的调用者，也就是`person`实例，因此`this.name = \"张三\"`。\n\n`getAge()`通过箭头函数定义，而箭头函数是没有自己的`this`，会继承父作用域的`this`，因此`person.getAge()`执行时，此时的作用域指向`window`，而`window`没有定义`age`属性，所有报`undefined`。\n\n从例子可以得出：**对象中定义的函数使用箭头函数是不合适的**。\n\n\n**先解答下标题问题，为啥箭头函数不能作为构造函数？**\n\n```javascript\n// 构造函数生成实例的过程\nfunction Person(name,age){\n this.name = name\n this.age = age\n}\nvar p = new Person('张三',18)\n\n//new关键字生成实例过程如下\n// 1. 创建空对象p\nvar p = {}\n// 2. 将空对象p的原型链指向构造器Person的原型\np.__proto__ = Person.prototype\n// 3. 将Person()函数中的this指向p\n// 若此处Person为箭头函数，而没有自己的this，call()函数无法改变箭头函数的指向，也就无法指向p。\nPerson.call(p)\n\n```\n\n构造函数是通过new关键字来生成对象实例，生成对象实例的过程也是通过构造函数给实例绑定this的过程，而箭头函数没有自己的this。创建对象过程，`new` 首先会创建一个空对象，并将这个空对象的`__proto__`指向构造函数的`prototype`，从而继承原型上的方法，但是箭头函数没有`prototype`。因此不能使用箭头作为构造函数，也就不能通过new操作符来调用箭头函数。\n",{"_58":847,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/221/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/221/timeline",{"_58":850,"_60":61,"_62":851,"_64":852,"_66":853,"_68":854,"_70":855,"_72":856,"_74":857,"_76":858,"_78":859,"_111":860,"_131":132,"_133":24,"_134":-5,"_135":868,"_137":869,"_159":152,"_153":871,"_155":872,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":873,"_170":874,"_176":875,"_178":876,"_190":878,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/220","https://api.github.com/repos/pro-collection/interview-question/issues/220/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/220/comments","https://api.github.com/repos/pro-collection/interview-question/issues/220/events","https://github.com/pro-collection/interview-question/issues/220",1644139904,"I_kwDOJGDC6c5h_5WA",220,"`opacity: 0`、`visibility: hidden`、`display: none` 有啥区别，主要使用场景是啥子？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[861],{"_70":862,"_72":863,"_58":864,"_117":865,"_119":866,"_121":24,"_122":867},5232524505,"LA_kwDOJGDC6c8AAAABN-H82Q","https://api.github.com/repos/pro-collection/interview-question/labels/CSS","CSS","A46719","CSS 相关问题",[],{"_58":247,"_68":248,"_62":249,"_70":250,"_72":251,"_74":252,"_76":253,"_122":254,"_147":870,"_149":256,"_151":152,"_131":132,"_153":257,"_155":258,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-28T14:59:48Z","2023-03-28T14:59:49Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"`opacity: 0`、`visibility: hidden`、`display: none` 都可以使元素不可见，但它们之间有一些区别。\n\n* `opacity: 0`：设置元素透明度为0，元素依然占据原来的空间，并且可以接收到鼠标事件。通常用于实现淡出效果。\n* `visibility: hidden`：元素不可见，但是仍然占据原来的空间，并且可以接收到鼠标事件。常用于实现菜单的展开和收起。\n* `display: none`：元素不可见，且不占据空间，也不接收鼠标事件。通常用于实现元素的隐藏和显示。\n\n因为这三种属性的区别，它们在使用场景上也有所不同：\n\n* `opacity: 0`：适用于需要实现淡出效果的场景，比如弹出层的显示和隐藏。\n* `visibility: hidden`：适用于需要占据原来空间的元素，但不需要显示的场景，比如菜单的展开和收起。\n* `display: none`：适用于需要完全隐藏元素的场景，比如实现一个开关，点击开关后可以隐藏或者显示某个元素。",{"_58":877,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/220/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/220/timeline",{"_58":880,"_60":61,"_62":881,"_64":882,"_66":883,"_68":884,"_70":885,"_72":886,"_74":887,"_76":888,"_78":889,"_111":890,"_131":132,"_133":24,"_134":-5,"_135":893,"_137":894,"_159":152,"_153":896,"_155":897,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":898,"_170":899,"_176":900,"_178":901,"_190":903,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/218","https://api.github.com/repos/pro-collection/interview-question/issues/218/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/218/comments","https://api.github.com/repos/pro-collection/interview-question/issues/218/events","https://github.com/pro-collection/interview-question/issues/218",1644123075,"I_kwDOJGDC6c5h_1PD",218,"对象引用类问题：以下代码的执行结果是什么，并解释原因",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[891,892],{"_70":661,"_72":662,"_58":663,"_117":664,"_119":665,"_121":24,"_122":666},{"_70":305,"_72":306,"_58":307,"_117":308,"_119":129,"_121":24,"_122":130},[],{"_58":247,"_68":248,"_62":249,"_70":250,"_72":251,"_74":252,"_76":253,"_122":254,"_147":895,"_149":256,"_151":152,"_131":132,"_153":257,"_155":258,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-28T14:50:37Z","2023-03-28T14:50:38Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"### 代码如下，请问执行结果\n```js\nvar a = {n: 1};\nvar b = a;\na.x = a = {n: 2};\n\nconsole.log(a.x) \t\nconsole.log(b.x)\n```\n\n### 执行结果和原因\n\n结果是 `undefined` 和 `{n: 2}`。\n\n这段代码可以分解为以下步骤：\n\n1. 创建一个对象 `a`，属性 `n` 的值为 `1`。\n2. 将变量 `b` 指向 `a`，`b` 现在也引用了这个对象。\n3. 执行赋值语句 `a.x = a = {n: 2}`，其中 `a.x` 引用的是对象 `a` 的 `x` 属性，但是此时 `a` 的值被重新赋值为一个新的对象 `{n: 2}`。\n4. 所以现在 `a` 引用的是 `{n: 2}`，而 `b` 仍然引用原始的对象 `{n: 1}`，且其 `x` 属性被赋值为 `{n: 2}`。\n5. 所以 `console.log(a.x)` 结果为 `undefined`，因为 `a` 引用的对象没有 `x` 属性；而 `console.log(b.x)` 结果为 `{n: 2}`，因为 `b` 引用的对象的 `x` 属性被赋值为 `{n: 2}`。\n",{"_58":902,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/218/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/218/timeline",{"_58":905,"_60":61,"_62":906,"_64":907,"_66":908,"_68":909,"_70":910,"_72":911,"_74":912,"_76":913,"_78":914,"_111":915,"_131":132,"_133":24,"_134":-5,"_135":918,"_137":919,"_159":152,"_153":921,"_155":922,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":923,"_170":924,"_176":925,"_178":926,"_190":928,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/217","https://api.github.com/repos/pro-collection/interview-question/issues/217/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/217/comments","https://api.github.com/repos/pro-collection/interview-question/issues/217/events","https://github.com/pro-collection/interview-question/issues/217",1644109965,"I_kwDOJGDC6c5h_yCN",217,"[Vue] 响应式原理中 Object.defineProperty 有什么缺陷",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[916,917],{"_70":358,"_72":359,"_58":360,"_117":361,"_119":362,"_121":24,"_122":363},{"_70":365,"_72":366,"_58":367,"_117":368,"_119":129,"_121":24,"_122":130},[],{"_58":247,"_68":248,"_62":249,"_70":250,"_72":251,"_74":252,"_76":253,"_122":254,"_147":920,"_149":256,"_151":152,"_131":132,"_153":257,"_155":258,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-28T14:43:24Z","2024-04-13T14:00:17Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"Vue 2 中使用`Object.defineProperty`来实现其响应式系统存在一些限制和问题：\r\n\r\n1. **深度检测**：\r\n Vue 2中对于对象的处理是递归的；对于每个属性，Vue会逐层使用`Object.defineProperty`将其转换成 getter/setter。这样，当你访问或修改嵌套较深的属性时（如`a.b.c`），Vue已经提前将`a`、`a.b`和`a.b.c`的属性转换为响应式，能够追踪它们的变化。\r\n\r\n2. **数组限制**：\r\n `Object.defineProperty`无法检测到数组索引的变化，因此Vue重写了数组的变异方法（如`push`、`pop`、`splice`等）来实现对数组的响应式监听。\r\n\r\n3. **对象属性添加或删除的限制**：\r\n 因为`Object.defineProperty`只能在初始化的时候应用于属性，当你在一个已经创建的Vue实例上添加新属性时，这个新属性是非响应式的。如果你想要它是响应式的，需要使用`Vue.set()`或`this.$set()`方法添加新属性。\r\n\r\n4. **性能问题**：\r\n 因为`Object.defineProperty`是递归地对对象的每一个属性进行处理，所以在处理具有大量属性或深层嵌套对象时，可能会有较大的性能开销。\r\n\r\n关于处理`a.b.c`类型的属性，Vue 2内部会递归地遍历对象`a`的所有属性，为它们各自使用`Object.defineProperty`定义getter和setter。如果`b`是`a`的属性，那么同样会针对`b`做这样的处理，以及它的所有属性，包括`c`等。这样，在访问或修改`a.b.c`时，Vue可以追踪到这些变化并触发相关的更新。\r\n\r\n```javascript\r\nfunction defineReactive(obj, key, val) {\r\n Object.defineProperty(obj, key, {\r\n enumerable: true,\r\n configurable: true,\r\n get: function reactiveGetter() {\r\n // 依赖收集等操作\r\n return val;\r\n },\r\n set: function reactiveSetter(newVal) {\r\n if (newVal === val) return;\r\n val = newVal;\r\n // 触发更新视图等操作\r\n }\r\n });\r\n\r\n // 如果val本身还是对象，则递归处理\r\n if (typeof val === 'object') {\r\n reactive(val);\r\n }\r\n}\r\n\r\nfunction reactive(obj) {\r\n for (let key in obj) {\r\n defineReactive(obj, key, obj[key]);\r\n }\r\n}\r\n```\r\n\r\n在上面的`reactive`函数中，我们将一个对象转换成响应式对象。这是Vue内部实现响应式的简化版原理。不过，Vue的响应式系统要复杂得多，它还涉及依赖收集和派发更新等机制。",{"_58":927,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/217/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/217/timeline",{"_58":930,"_60":61,"_62":931,"_64":932,"_66":933,"_68":934,"_70":935,"_72":936,"_74":937,"_76":938,"_78":939,"_111":940,"_131":132,"_133":24,"_134":-5,"_135":943,"_137":944,"_159":152,"_153":946,"_155":947,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":948,"_170":949,"_176":950,"_178":951,"_190":953,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/216","https://api.github.com/repos/pro-collection/interview-question/issues/216/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/216/comments","https://api.github.com/repos/pro-collection/interview-question/issues/216/events","https://github.com/pro-collection/interview-question/issues/216",1644105792,"I_kwDOJGDC6c5h_xBA",216,"实现 (5).add(3).minus(2) 功能",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[941,942],{"_70":661,"_72":662,"_58":663,"_117":664,"_119":665,"_121":24,"_122":666},{"_70":305,"_72":306,"_58":307,"_117":308,"_119":129,"_121":24,"_122":130},[],{"_58":247,"_68":248,"_62":249,"_70":250,"_72":251,"_74":252,"_76":253,"_122":254,"_147":945,"_149":256,"_151":152,"_131":132,"_153":257,"_155":258,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-28T14:41:08Z","2023-03-28T14:41:09Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"可以通过在 Number 原型上定义 add 和 minus 方法来实现该功能，代码如下：\n\n```javascript\nNumber.prototype.add = function(num) {\n return this + num;\n};\n\nNumber.prototype.minus = function(num) {\n return this - num;\n};\n\nconsole.log((5).add(3).minus(2)); // 输出6\n```\n\n上述代码中，通过在 Number.prototype 上定义 add 和 minus 方法，实现了将数字类型的值转换为 Number 对象，并且可以链式调用这两个方法。最终返回的结果是一个数值类型的值。",{"_58":952,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/216/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/216/timeline",{"_58":955,"_60":61,"_62":956,"_64":957,"_66":958,"_68":959,"_70":960,"_72":961,"_74":962,"_76":963,"_78":964,"_111":965,"_131":132,"_133":24,"_134":-5,"_135":967,"_137":968,"_159":152,"_153":970,"_155":971,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":972,"_170":973,"_176":974,"_178":975,"_190":977,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/215","https://api.github.com/repos/pro-collection/interview-question/issues/215/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/215/comments","https://api.github.com/repos/pro-collection/interview-question/issues/215/events","https://github.com/pro-collection/interview-question/issues/215",1644102532,"I_kwDOJGDC6c5h_wOE",215,"[Vue] 双向绑定和单向数据流原则是否冲突？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[966],{"_70":358,"_72":359,"_58":360,"_117":361,"_119":362,"_121":24,"_122":363},[],{"_58":247,"_68":248,"_62":249,"_70":250,"_72":251,"_74":252,"_76":253,"_122":254,"_147":969,"_149":256,"_151":152,"_131":132,"_153":257,"_155":258,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-28T14:39:19Z","2023-03-28T14:43:42Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"Vue 的双向绑定和单向数据流原则不冲突，因为它们是针对不同的场景和目的而提出的。\n\nVue 的双向绑定是指，在模板中通过 `v-model` 指令可以实现表单元素和组件数据之间的双向绑定，当表单元素的值发生变化时，组件数据也会同步更新；反过来，当组件数据发生变化时，表单元素的值也会同步更新。这种双向绑定的机制可以减少手动编写事件监听器的工作量，提高代码的可读性和可维护性。\n\n而单向数据流原则是指，在 Vue 应用中，数据的流动是单向的，即自上而下单向流动。父组件通过 props 把数据传递给子组件，子组件通过 $emit 事件把数据传递给父组件或者其他祖先组件。这种单向数据流的机制使得数据的变化更加可控和可预测，方便进行状态管理和调试。\n\n双向绑定和单向数据流原则虽然在实现机制上有所不同，但它们都是为了解决不同的问题和提高代码的可维护性和可读性。在实际开发中，可以根据实际情况选择合适的机制来使用。",{"_58":976,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/215/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/215/timeline",{"_58":979,"_60":61,"_62":980,"_64":981,"_66":982,"_68":983,"_70":984,"_72":985,"_74":986,"_76":987,"_78":988,"_111":989,"_131":132,"_133":24,"_134":-5,"_135":996,"_137":997,"_159":152,"_153":999,"_155":1000,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":1001,"_170":1002,"_176":1003,"_178":1004,"_190":1006,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/214","https://api.github.com/repos/pro-collection/interview-question/issues/214/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/214/comments","https://api.github.com/repos/pro-collection/interview-question/issues/214/events","https://github.com/pro-collection/interview-question/issues/214",1642403596,"I_kwDOJGDC6c5h5RcM",214,"this指向与对象继承数组方法：输出以下代码执行的结果并解释为什么？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[990,991],{"_70":661,"_72":662,"_58":663,"_117":664,"_119":665,"_121":24,"_122":666},{"_70":992,"_72":993,"_58":994,"_117":995,"_119":129,"_121":24,"_122":130},5316900032,"LA_kwDOJGDC6c8AAAABPOl0wA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BA%AC%E4%B8%9C","京东",[],{"_58":139,"_68":140,"_62":141,"_70":142,"_72":143,"_74":144,"_76":145,"_122":146,"_147":998,"_149":150,"_151":152,"_131":132,"_153":154,"_155":156,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-27T16:13:39Z","2023-03-27T16:13:40Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"#### 代码如下\n```js\nvar obj = {\n '2': 3,\n '3': 4,\n 'length': 2,\n 'splice': Array.prototype.splice,\n 'push': Array.prototype.push\n}\nobj.push(1);\nobj.push(2);\nconsole.log(obj);\n```\n执行结果如何，为什么？\n\n\n#### 执行结果\n代码的执行结果是：\n\n```perl\nperlCopy code{ '2': 1, '3': 2, length: 4, splice: [Function: splice], push: [Function: push] }\n```\n\n在代码中，我们创建了一个名为 `obj` 的对象，它包含了一些属性和方法：\n\n* `2` 和 `3` 是对象的属性名，对应的属性值分别为 `3` 和 `4`。\n* `length` 属性的值为 `2`。\n* `splice` 和 `push` 是对象的两个方法，它们均继承自 `Array.prototype`。\n\n接下来，我们先调用了 `obj.push(1)` 方法，将值 `1` 加入到了 `obj` 对象中，此时 `obj` 对象的状态如下所示：\n\n```perl\nperlCopy code{ '2': 1, '3': 4, length: 3, splice: [Function: splice], push: [Function: push] }\n```\n\n接着，我们又调用了 `obj.push(2)` 方法，将值 `2` 加入到了 `obj` 对象中，此时 `obj` 对象的状态如下所示：\n\n```perl\nperlCopy code{ '2': 1, '3': 2, length: 4, splice: [Function: splice], push: [Function: push] }\n```\n\n可以看出，`obj` 对象的属性值发生了变化。这是因为在调用 `obj.push(1)` 方法时，由于 `obj` 对象继承了 `Array.prototype.push` 方法，因此 `push` 方法中的 `this` 指向的是 `obj` 对象本身，因此将值 `1` 加入到了 `obj` 对象的第二个属性位置上（即 `obj[2] = 1`）。而在调用 `obj.push(2)` 方法时，`push` 方法同样将值 `2` 加入到了 `obj` 对象的第三个属性位置上（即 `obj[3] = 2`）。因此最终得到的 `obj` 对象的状态为 `{ '2': 1, '3': 2, length: 4, splice: [Function: splice], push: [Function: push] }`。\n\n#### 追问：上面的代码中 obj.push(1)，为什么会加入到第二个属性位置上？\n\n在 JavaScript 中，数组是一种特殊的对象，其属性名是非负整数，称之为索引(index)，因此可以通过数组语法来访问这些属性。另外，对于非数组对象，其属性名可以是任意字符串。\n\n在给数组对象添加属性时，如果属性名是非负整数，那么会被当作数组元素，会自动维护 `length` 属性；如果属性名是其他字符串，那么则被当作普通的对象属性。\n\n根据这个规则，上述代码中的 `obj` 对象添加了两个属性 `2: 3` 和 `3: 4`，它们的属性名都是非负整数，因此被当作数组元素，被计入了 `length` 属性。而在执行 `obj.push(1)` 时，会向数组中添加一个新的元素，该元素的下标是数组的 `length` 属性值，也就是 `2`，因此添加到了第二个属性位置上。接着执行 `obj.push(2)` 时，同样会向数组中添加一个新的元素，该元素的下标是 `3`，也就是数组的第三个属性位置上。\n\n最终，输出结果为：\n\n```perl\nperlCopy code{ '2': 1, '3': 2, length: 4, splice: [Function: splice], push: [Function: push] }\n```\n\n其中，属性 `2` 和 `3` 被分别赋值为 `1` 和 `2`，而原来的值被覆盖了。因此，最终的结果是 `{ '2': 1, '3': 2, length: 4, splice: [Function: splice], push: [Function: push] }`。\n",{"_58":1005,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/214/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/214/timeline",{"_58":1008,"_60":61,"_62":1009,"_64":1010,"_66":1011,"_68":1012,"_70":1013,"_72":1014,"_74":1015,"_76":1016,"_78":1017,"_111":1018,"_131":132,"_133":24,"_134":-5,"_135":1020,"_137":1021,"_159":195,"_153":1023,"_155":1024,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":1025,"_170":1026,"_176":1027,"_178":1028,"_190":1030,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/213","https://api.github.com/repos/pro-collection/interview-question/issues/213/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/213/comments","https://api.github.com/repos/pro-collection/interview-question/issues/213/events","https://github.com/pro-collection/interview-question/issues/213",1642380409,"I_kwDOJGDC6c5h5Lx5",213,"https 的证书验证过程是什么样的",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[1019],{"_70":777,"_72":778,"_58":779,"_117":780,"_119":781,"_121":24,"_122":782},[],{"_58":247,"_68":248,"_62":249,"_70":250,"_72":251,"_74":252,"_76":253,"_122":254,"_147":1022,"_149":256,"_151":152,"_131":132,"_153":257,"_155":258,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-27T16:00:36Z","2023-09-16T16:59:45Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"HTTPS的证书验证过程通常包括以下几个步骤：\n\n1. 客户端向服务端发起HTTPS请求，服务端将其公钥证书发送给客户端。\n2. 客户端接收到服务端的证书后，首先验证证书是否过期，如果过期，则证书无效，验证失败；如果证书未过期，则进行下一步。\n3. 客户端使用CA证书（如系统内置的或者从服务端获取）对服务端证书进行验证，以确定该证书是否是由受信任的CA颁发的。如果验证失败，则证书无效，验证失败；如果验证成功，则进行下一步。\n4. 客户端生成一个随机值，使用服务端公钥进行加密，并将加密后的随机值发送给服务端。\n5. 服务端接收到客户端的随机值后，使用私钥进行解密，得到随机值。服务端再将随机值作为密钥，使用对称加密算法加密需要传输的数据，并发送给客户端。\n6. 客户端接收到服务端发送的加密数据后，使用随机值进行解密，得到明文数据。\n\n以上就是HTTPS证书验证的一般流程。客户端验证服务端证书的方式是通过验证证书的数字签名来确定证书的合法性，如果数字签名验证失败，则证书无效，验证失败。",{"_58":1029,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/213/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/213/timeline",{"_58":1032,"_60":61,"_62":1033,"_64":1034,"_66":1035,"_68":1036,"_70":1037,"_72":1038,"_74":1039,"_76":1040,"_78":1041,"_111":1042,"_131":132,"_133":24,"_134":-5,"_135":1045,"_137":1046,"_159":152,"_153":1048,"_155":1049,"_158":-5,"_162":163,"_106":-5,"_164":-5,"_165":1050,"_170":1051,"_176":1052,"_178":1053,"_190":1055,"_192":-5,"_193":-5,"_194":195},"https://api.github.com/repos/pro-collection/interview-question/issues/212","https://api.github.com/repos/pro-collection/interview-question/issues/212/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/212/comments","https://api.github.com/repos/pro-collection/interview-question/issues/212/events","https://github.com/pro-collection/interview-question/issues/212",1642321847,"I_kwDOJGDC6c5h49e3",212,"[3, 15, 8, 29, 102, 22].sort(), 结果是多少，为什么？",{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},[1043,1044],{"_70":661,"_72":662,"_58":663,"_117":664,"_119":665,"_121":24,"_122":666},{"_70":992,"_72":993,"_58":994,"_117":995,"_119":129,"_121":24,"_122":130},[],{"_58":247,"_68":248,"_62":249,"_70":250,"_72":251,"_74":252,"_76":253,"_122":254,"_147":1047,"_149":256,"_151":152,"_131":132,"_153":257,"_155":258,"_157":-5,"_158":-5},{"_80":81,"_70":82,"_72":83,"_84":85,"_86":28,"_58":87,"_68":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":102,"_66":103,"_104":105,"_106":107,"_108":109,"_110":24},"2023-03-27T15:26:57Z","2023-03-27T15:26:59Z",{"_167":152,"_168":152,"_169":152},{"_172":152,"_173":152,"_174":152,"_175":152},"输出结果为：\n```js\n[102, 15, 22, 29, 3, 8]\n```\n\n原因：\n`Array.prototype.sort()` \n\n如果没有指明 compareFn ，那么元素会按照转换为的字符串的诸个字符的 Unicode 位点进行排序。例如 \"Banana\" 会被排列到 \"cherry\" 之前。当数字按由小到大排序时，9 出现在 80 之前，但因为（没有指明 compareFn），比较的数字会先被转换为字符串，所以在 Unicode 顺序上 \"80\" 要比 \"9\" 要靠前。\n\n如果指明了 compareFn ，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素：\n\n如果 compareFn(a, b) 大于 0，b 会被排列到 a 之前。\n如果 compareFn(a, b) 小于 0，那么 a 会被排列到 b 之前；\n如果 compareFn(a, b) 等于 0，a 和 b 的相对位置不变。备注：ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；\n\n参考文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\n",{"_58":1054,"_181":152,"_182":152,"_183":152,"_184":152,"_185":152,"_186":152,"_187":152,"_188":152,"_189":152},"https://api.github.com/repos/pro-collection/interview-question/issues/212/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/212/timeline","pagination",{"_1058":1059,"_167":1060},"value",28,32,"actionData","errors"]