盒马生鲜实战

一、JSON对象的key；

题目：

写个转换函数，把一个JSON对象的key从下划线形式（Pascal）转换到小驼峰形式（Camel）

function converter(obj) {

for(key in obj){

 let reg = /_([a-zA-Z])/g;

  let result = key.replace(reg, function (a,b) {

return b.toUpperCase()

});

return `{${result+':'+obj[key]}}`

}

}

console.log( converter({"a_bc_def_aaa": 1111}))

精简版--->

function pascalToCamel(obj) {

return Object.keys(obj).reduce((camelObj, key) => {

    const camelKey = key.replace(/_([a-z])/g, (match, p1) => p1.toUpperCase());

    camelObj[camelKey] = obj[key];

return camelObj;

}, {});

}

难点：

正则、对象循环；主要难点在于理解replace方法中使用的正则表达式。正则表达式/_[a-z]/g匹配任何下划线后跟一个小写字母。replace方法然后用大写字母替换下划线和小写字母。

二、数组拍平函数；

题目：

不使用数组的arr.flat() API,自己实现一个数组拍平函数，需要支持任意层级，默认展开一层，第二个参数支持控制层级；

function flatten(arr, depth = 1) {

return arr.reduce((acc, val) => {

return acc.concat(depth > 1 && Array.isArray(val) ? flatten(val, depth - 1) : val);

}, []);

}

难点：利用reduce排平数组、递归函数。

三、数组转二层树状结构；

题目：

产出一个数组，将输入数组转化为二层树状结构，把parendId为0的输入项添加到输出数组第一层，每个节点的children存放的是parendId与该节点的Id相同。注意，二层结构，children中的项不再有children。

function transformToTree(arr) {

  const map = new Map();

return arr.reduce((result, item) => {

    const { id, parentId } = item;

    const treeItem = map.get(id) || { children: [] };

    treeItem.children = map.get(id)?.children;

map.set(id, { ...item, children: treeItem.children });

if (parentId === 0) {

      result.push(treeItem);

} else {

if (!map.has(parentId)) {

map.set(parentId, { children: [] });

}

map.get(parentId).children.push(treeItem);

}

return result;

}, []);

}

难点： 弄懂 构造函数 Map 与高阶函数 reduce。

四、包的依赖项有循坏依赖吗？

题目：

实现一个方法，检查一个npm 包的依赖项中有没有存在循坏依赖。不用考虑版本，只考虑包名即可。入参pkgs为项目中所有的依赖（包括子依赖），返回boolean。

function hasCircularDependency(pkgs) {

  const visited = new Set();

  const inProgress = new Set();

function visit(pkg) {

if (visited.has(pkg)) {

return false;

}

if (inProgress.has(pkg)) {

return true;

}

    inProgress.add(pkg);

    const dependencies = pkgs[pkg] || {};

for (const dep in dependencies) {

if (visit(dep)) {

return true;

}

}

    inProgress.delete(pkg);

    visited.add(pkg);

return false;

}

for (const pkg in pkgs) {

if (visit(pkg)) {

return true;

}

}

return false;

}

// 精简版！

function hasCircularDependency(pkgs) {

  const dependencies = [];

for (const pkg of Object.values(pkgs)) {

if (pkg.dependencies) {

      dependencies.push(...Object.keys(pkg.dependencies));

}

}

  const tree = transformToTree(dependencies.map((dep) => ({ id: dep, parentId: 0 })));

  const visited = new Set();

  const dfs = (node) => {

if (visited.has(node.id)) {

return true;

}

    visited.add(node.id);

return node.children.reduce((res, child) => res || dfs(child), false);

};

return tree.reduce((res, node) => res || dfs(node), false);

}

难点： 这个函数的难点在于如何判断依赖关系是否存在循环依赖。函数使用了深度优先搜索算法来判断依赖关系是否存在循环依赖。具体来说，函数首先将依赖关系转换成树形结构，然后对树进行深度优先搜索，如果搜索到了已经访问过的节点，则说明存在循环依赖。函数使用了一个visited集合来记录已经访问过的节点，如果搜索到了已经访问过的节点，则说明存在循环依赖。

五、实现随机隐藏

题目

一个1到10的json数组， 每30秒随机隐藏两位数。

// 定义隐藏数字的函数

function hideNumbers(num) {

var indexes = []; // 存储要隐藏的数字的位置

while (indexes.length < num) {

var index = Math.floor(Math.random() * arr.length); // 随机选择一个位置

if (!indexes.includes(index)) { // 如果该位置没有被选过，则将其添加到indexes数组中

      indexes.push(index);

}

}

for (var i = 0; i < indexes.length; i++) {

    arr[indexes[i]] = ''; // 将选中的位置上的数字设置为空字符串

}

}

// 每30秒执行一次隐藏数字的函数

setInterval(function() {

var num = Math.floor(Math.random() * 2) + 2; // 随机选择要隐藏的数字个数（2或3）

hideNumbers(num);

  console.log(arr); // 输出当前的数组

}, 30000);

六、实现 emit 方法

题目：

2023 - 11 - 27：实现 emit 方法，其中 on 方法用于添加事件监听器，off 方法用于移除事件监听器，emit 方法用于触发事件，once 方法用于添加一次性事件监听器。

作用： 父子组件通信： 在Vue中，父组件可以通过props向子组件传递数据，但子组件要向父组件传递数据，就需要使用emit。自定义事件： emit 允许在子组件中定义自定义事件，并在合适的时机触发这些事件。父组件监听这些事件，从而知道子组件的状态或执行一些操作。 重要性： 组件解耦： 使用 emit 可以使组件更加独立和可复用。子组件不需要关心父组件的具体实现，只需要在特定情况下发送一个事件，而父组件负责监听这个事件并处理相应逻辑。响应式更新： Vue的响应式系统会负责追踪数据的变化，但只有通过 props 传递的数据才会被追踪。如果子组件的某个状态需要影响父组件，可以通过 emit 触发事件，从而实现响应式更新。

class EventEmitter {

constructor() {

this.events = {};

}

on(eventName, listener) {

if (!this.events[eventName]) {

this.events[eventName] = [];

}

this.events[eventName].push(listener);

}

off(eventName, listener) {

if (this.events[eventName]) {

this.events[eventName] = this.events[eventName].filter(

        existingListener => existingListener !== listener

);

}

}

emit(eventName, ...args) {

if (this.events[eventName]) {

this.events[eventName].forEach(listener => {

        listener.apply(this, args);

});

}

}

once(eventName, listener) {

const onceWrapper = (...args) => {

      listener.apply(this, args);

this.off(eventName, onceWrapper);

};

this.on(eventName, onceWrapper);

}

}

const eventEmitter = new EventEmitter();

相关知识

盒马生鲜
盒马的“新零售”会是生鲜电商的一剂强心针吗？
借力生鲜仓，卖菜的盒马跑通了鲜花生意
盒马生鲜、叮咚买菜…卖生鲜的也开始卖花了？白菜价vs仪式感，生鲜零售跨界鲜花电商
盒马押宝花卉供应链，鲜花会是一门好生意吗？
零售新物种盒马，也想做“卖花西施”？
盒马将与亚洲最大花卉拍卖市场合作：拟建立盒马鲜花供应链公司
盒马将与亚洲最大花卉拍卖市场合作 拟建立盒马鲜花供应链公司
盒马的阳谋，要让这届年轻人真正实现鲜花自由
“卷王”盒马们让买花和买菜一样便宜

网址: 盒马生鲜实战 https://www.huajiangbk.com/newsview1443916.html

上一篇: 【大花投生鲜超市】地址详情,位置

下一篇: 生鱼片的做法,生鱼片的菜品特点,