Lo-Dash

稀疏数组和密集数组 稀疏数组 Sparse arrays 一般来说，JavaScript 中的数组都是稀疏数组-它们可以拥有空槽，所谓空槽，指的就是数组的某个位置没有任何值，既不是 undefined ，也不是 null ，因为数组只是索引到值的简单映射。 let a = new Array(3); console.log(a); // (3) [空 × 3] console.log(a[0]); // undefined a.forEach(function (x, i) { console.log(i, x) }); // 没有打印任何东西 a.map(function (x, i) { return i }) // (3) [空 × 3] 密集数组 Dense arrays let a = Array.apply(null, Array(3)); // 相当于 Array(undefined, undefined, undefined) console.log(a); // [ undefined, undefined, undefined ] console.log(a[0]); // undefined a.forEach(function (x, i) { console.log(i+". "+x) }); // 0 undefined // 1 undefined /

问题： Why would someone prefer either the lodash.js or underscore.js utility library over the other? 为什么有人更喜欢 lodash.js 或 underscore.js 实用程序库而不是另一个？ Lodash seems to be a drop-in replacement for underscore, the latter having been around longer. Lodash似乎是下划线的替代品，后者已经存在了更长时间。 I think both are brilliant, but I do not know enough about how they work to make an educated comparison, and I would like to know more about the differences. 我认为两者都很精彩，但我对他们如何努力进行有根据的比较并不了解，我想更多地了解这些差异。 解决方案： 参考一： https://stackoom.com/question/vrJC/lodash和下划线之间的差异-关闭 参考二： https://oldbug.net/q/vrJC/Differences-between-lodash

webpack中有几个比较难懂的变量名称，可能对刚开始学习的人不是很友好，所以今天小邹就整理了一下，主要是做一个总结性的概括。 1.webpack 中，module，chunk 和 bundle 的区别是什么？ 首先我们来看一张图： 看这个图就很明白了： 对于一份同逻辑的代码，当我们手写了一个个的文件，它们无论是 ESM 还是 commonJS 或是 AMD，他们都是 module； 当我们写的 module 源文件传到 webpack 进行打包时，webpack 会根据文件引用关系生成 chunk 文件，webpack 会对这个 chunk 文件进行一些操作； webpack 处理好 chunk 文件后，最后会输出 bundle 文件，这个 bundle 文件包含了经过加载和编译的最终源文件，所以它可以直接在浏览器中运行。 一般来说一个 chunk 对应一个 bundle，比如上图中的 utils.js -> chunks 1 -> utils.bundle.js；但也有例外，比如说上图中，我就用 MiniCssExtractPlugin 从 chunks 0 中抽离出了 index.bundle.css 文件。 一句话总结： module，chunk 和 bundle 其实就是同一份逻辑代码在不同转换场景下的取了三个名字：我们直接写出来的是 module，webpack

vue3 的 reactive 和 react的useState有着根本上的不同 const { ref, reactive, watch } = require("vue"); let s1 = reactive({ x: 0 }); let s2 = reactive({ x: 0 }); let s3 = s2; watch([s1], (newS1) => { console.log("watch s1", newS1); }); watch([s2], (newS2) => { console.log("watch s2", newS2); }); watch([s3], (newS3) => { console.log("watch s3", newS3); }); setTimeout(() => { s1.x = 2; s2 = { x: 111, }; s3.x = 444; }, 1000); 上述代码的输出如下, s1的watch生效了, 而s3的修改触发了两次watch 单独设置s2并不会出现任何输出 setTimeout(() => { s2 = { x: 111, }; }, 1000); 对比react 采用的比较方式是===比较, 所以在原对象上的修改会被忽视, 而ramda每次总是返回新对象的特点正好契合react的方式 import React,

❝ 函数式编程的思维方式是把现实世界的事物和事物之间的联系抽象到程序世界(对运算过程进行抽象). (本篇文章内容输出来源:《拉钩教育大前端训练营》部分参考书籍:《JavaScript忍者秘籍》《你不知道的JavaScript 卷一》关于函数部分的讲解 进行总结) ❞ 本章重点掌握Javascript中的高阶函数知识以及函数式编程. 为什么要学习函数式编程? vue/react 开始拥抱函数式编程 函数式编程可以抛弃this 打包过程中可以更好的利用tree shaking过滤无用的代码 方便测试、方便并行处理 有很多库可以帮助我们进行函数式开发:loadsh、underscore、ramda 「什么是函数式编程」 什么是函数式编程(Functional Programming, FP):FP 是编程范式之一.(还有面向过程编程、面向对象编程) 面向对象编程的思维方式: 把现实世界中的事物抽象成程序世界中的类和对象,通过封装、继承和多态来演示事物事件的联系 函数式编程的思维方式是把现实世界的事物和事物之间的联系抽象到程序世界(对运算过程进行抽象). 程序的本质:根据输入通过某种运算获得相应的输出,程序开发过程中会涉及很多有输入和输出的函数 x ->f(联系、映射)->y,y=f(x) 函数式编程中的函数指的不是程序中的函数(方法),而是数学中的函数即映射关系,例如: y=sin(x)

来源 | http://www.fly63.com/article/detial/1192 在使用 JavaScript 时，我们常常要写不少的条件语句。这里有五个小技巧，可以让你写出更干净、漂亮的条件语句。 1、使用 Array.includes 来处理多重条件 举个栗子 ： // 条件语句 function test ( fruit ) { if (fruit == 'apple' || fruit == 'strawberry' ) { console .log( 'red' ); } } 乍一看，这么写似乎没什么大问题。然而，如果我们想要匹配更多的红色水果呢，比方说『樱桃』和『蔓越莓』？我们是不是得用更多的 || 来扩展这条语句？ 我们可以使用 Array.includes重写以上条件句。 function test ( fruit ) { // 把条件提取到数组中 const redFruits = [ 'apple' , 'strawberry' , 'cherry' , 'cranberries' ]; if (redFruits.includes(fruit)) { console .log( 'red' ); } } 我们把红色的水果（条件）都提取到一个数组中，这使得我们的 代码 看起来更加整洁。 2、少写嵌套，尽早返回 让我们为之前的例子添加两个条件：

分享分享自己收藏的学习资料，有需要的朋友可以找我获取 根据自身面试经历整理以及不断收集的（珍藏版） 【推荐】2020年最新Java电子书集合.pdf(吐血整理) >>> https://www.cnblogs.com/xiaogeng88/p/12692306.html 这篇文章主要记录一下平时自己实践得到的, 博客中学习的以及在一些项目源码中看到的 javascript 技巧。有些东西可以说是奇淫技巧，有些可能是 ES6+ 中一些比较具有实用性的新语法。 && 和 || 的妙用 有时候我们需要在某个函数或变量为 true 时执行另外一个函数。例如: 1 2 3 4 5 6 7 8 const task1 = () => { console.log( '执行 task1' ); return Math.random() >= 0.5 ; } const task2 = () => console.log( 'task1 执行成功后执行 task2' ); if (task1()) task2(); 复制代码 上面的 if 语句可以使用 && 直接简写为: 1 2 task1() && task2(); 复制代码 如果还要在 task1 失败(也就是task1返回false)后执行 task3, 可以使用: 1 2 3 const task3 = () => console.log(

1、v-prop vue框架子组件是不允许修改父组件传进来的props值。 v-prop是实现一个子组件可以修改父组件prop传进来值的指令，修改属性后，子组件的props的值更新，但是不影响父组件原来的值。 微信小程序子组件可以修改父组件传进来prop值。 2、实现 import _ from 'lodash' // 注册一个全局自定义指令 `v-prop` Vue.directive('prop' , { // 只调用一次，指令第一次绑定到元素时调用。 bind(el,binding,vnode){ // 指令参数 const dataName = binding.arg; vnode.componentInstance[dataName] = binding.value; }, // update钩子函数 update(el,binding,vnode){ log(el,binding,vnode, 'el,binding,vnode' ) // 指令参数 const dataName = binding.arg; // 说明父组件的绑定值发生了更新 // 父组件data中仅传入的值发生改变时，才更新子组件内容 // 父组件data中其他值的改变，不会重新渲染子组件 if (! _.isEqual(binding.value, binding.oldValue)) {

转载请注明出处： 葡萄城官网 ，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 原文出处：https://wanago.io/2018/08/13/webpack-4-course-part-seven-decreasing-the-bundle-size-with-tree-shaking/ 在本次Webpack 4教程中，我们会更进一步讲述项目优化。我们会学习什么是 tree shaking 以及如何使用它。你会找到让Webpack 4中 tree shaking 运作起来所需要的东西，并知道怎样从中受益。开始吧！ 首先，让我们来回答什么是tree shaking以及它带来什么好处。我们常常在文件中使用具名引入（named imports），这些引入的文件里有其他导出（exports）。在某些情况下，我们并没有引入所有的导出，但Webpack仍会把整个模块都导入进来。这种情况下就需要使用 tree shaking 了，因为它能帮助我们去除掉用不到的代码。因此打包后的体积能显著下降。 如果你想了解更多关于improts和exports的内容，请查看我们的 第一部分-入口、输出和ES6模块 。 为了让 tree shaking 起作用，你需要满足一些配置要求。首先，必须使用ES 6模块，而不是使用诸如 CommonJS 的模块处理方式。如果你在使用Babel

实现这三个功能的踩坑记录。 1. 需求 在Vue中，有一个input， 双击时编辑文本，点击该input节点外的其他地方，则取消编辑。 那么这里有三个要实现的地方 第一是双击显示编辑框。 第二是自动聚焦点击的显示框。 第三是点击编辑框外的地方，隐藏编辑框。 一二点都是在startPipeLineNameEdit这个method中去实现。 2. 实现双击显示编辑框 思路： 使用两个span包含双击前和双击后的代码，用isEditingPipeLineName这个变量去控制显示与否。(PipeLineName与我写的当前组件有关)。 然后绑定一个双击时的事件@dblclick="startPipeLineNameEdit"。 父组件BoardArea大致代码 //PipeLine是子组件，可见可以有很多个子组件实例，因为v-for了一个数组 <PipeLine v-for="pipeLine in wrappedPipeLineList" :pipeLine="pipeLine" class="pipe-line-item" :key="pipeLine.id" /> 子组件PipeLine大致代码 <span v-show="!isEditingPipeLineName"> ..未双击前 <span @dblclick="startPipeLineNameEdit"></span>