IMAGINE

前言 记录一次在项目开发中遇到的情况。后台返回一个排好序的对象作为折线图的数据，按要求根据日期顺序进行展示。首先要清楚一点是js对象是无序的，即使后台排好了序，还是会错乱，所以需要在前端渲染前做一遍排序操作。 排序 js对象是没办法直接进行排序的，可以针对对象的某个属性或键值来排序，最后将对应的value取出来。 12345678910111213141516171819202122let obj = {20210601:{date:20210601,name:'a',age:22}，20210604:{date:20210604,name:'b',age:20},20210602:{date:20210602,name:'c',age:18},20210603:{date:20210603,name:'d',age:26}}let arr = []// 将key值排序let sortKeys = Ob ...

主要记录一下前端数组去重的几种方法，也方便后面查看。 ES6 new Set() + … || Array.fromES6 提供了新的数据结构 Set。类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，可以接受一个具有 iterable 接口数据结构作为参数（如数组，字符串），用来初始化。 不考虑兼容性，这种去重的方法代码最少。这种方法还无法去掉“{}”空对象 12345const arr = [1, 2, 3, null, "a", "b", 2, 3, null, "a"];let newArr = [...new Set(arr)]; // [1, 2, 3, null, "a", "b"]let newArr1 = Array.from(new Set(arr)); // [1, 2, 3, null, "a", "b"] ES6 new Map()ES6 提供了新的数据结构 Map 。类似于对象，也是 ...

本文集合了 ES6 至 ES11 常用到的特性，包括还在规划的 ES12。 ES6（2015）类（class）12345678910class People { constructor(name) { this.name = "a"; } console() { console.log(this.name); }}const people = new People("a");people.console(); // a 模块化（ES Module）123456// A.js 导出一个方法export const addNum = (a, b) => a + b;// B.js 导入并使用import { addNum } from "./A.js";addNum(1, 2); // 3 箭头函数12const addNum = (a, b) => a + b;addNum(1, 2); // 3 函数参数默认值 ...

定义 在数学中的解释是，两个集合X和Y的笛卡尓积（Cartesian product），又称直积，表示为X × Y，第一个对象是X的成员而第二个对象是Y的所有可能有序对的其中一个成员。 假设集合A={a, b}，集合B={0, 1, 2}，则两个集合的笛卡尔积为{(a, 0), (a, 1), (a, 2), (b, 0), (b, 1), (b, 2)}。 简单来说就是多组数据的排列组合 应用场景 在电商项目中，常用于商品SKU的订单组合；根据商品的子类型和不同颜色尺寸生成n种可能的组合 MySql的多表查询 生成坐标……. js代码1234567891011121314151617181920function cartesianProduct (array) { if (array.length < 2) return array[0] || []; return [].reduce.call(array, function (col, set) { var res = []; col.forEach(f ...

基本概念chrome 扩展是什么？一个应用（扩展）其实是压缩（.crx 后缀）在一起的一组文件，包括 HTML，CSS，Javascript 脚本，图片文件，还有其它任何需要的文件。 应用（扩展）本质上来说就是 web 页面，它们可以使用所有的浏览器提供的 API，从 XMLHttpRequest 到 JSON 到 HTML5 全都有。 应用（扩展）可以与 Web 页面交互，或者通过 content script 或 cross-origin XMLHttpRequests 与服务器交互。应用（扩展）还可以访问浏览器提供的内部功能，例如标签或书签等。 chrome 扩展用处增强浏览器的功能，可以向页面注入 js 脚本作一些操作，实现属于自己的“定制版”浏览器。提供了很多 API 供我们来使用： 标签 书签 Cookies Events 开发者工具 历史记录 插件管理 视窗等等… 开发与调试Chrome 插件没有严格的项目结构要求，只要保证本目录有一个 manifest.json 即可，也不需要专门的 IDE，普通的 web 开发工具即可。从右上角菜单->更多工具->扩 ...

JavaScript 中的 async/await 是 AsyncFunction 特性 中的关键字。目前为止，除了 IE 之外，常用浏览器和 Node (v7.6+) 都已经支持该特性。具体支持情况可以在这里查看。 async 和 await 在干什么任意一个名称都是有意义的，先从字面意思来理解。async 是“异步”的简写，而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。 另外还有一个很有意思的语法规定，await 只能出现在 async 函数中。然后细心的朋友会产生一个疑问，如果 await 只能出现在 async 函数中，那这个 async 函数应该怎么调用？ 如果需要通过 await 来调用一个 async 函数，那这个调用的外面必须得再包一个 async 函数，然后……进入死循环，永无出头之日…… 如果 async 函数不需要 await 来调用，那 async 到底起个啥作用？ async 起什么作用这个问题的关键在于，async 函数是怎么处理 ...

axios 的封装在 vue 项目中，和后台交互获取数据这块，我们通常使用的是 axios 库，它是基于 promise 的 http 库，可运行在浏览器端和 node.js 中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换 json、客户端防御 XSRF 等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用 axios 库。如果还对 axios 不了解的，可以移步axios 文档。 安装1npm install axios; // 安装axios 引入在项目的 src 目录中，新建一个 request 文件夹，然后在里面新建一个 http.js 和一个 api.js 文件。http.js 文件用来封装我们的 axios，api.js 用来统一管理我们的接口。 12345// 在http.js中引入axiosimport axios from "axios"; // 引入axiosimport QS from "qs"; // 引入qs模块，用来序列化post类型的数据// element的me ...

浏览器工作流程话不多说，先来看个图： 从上面这个图中，我们可以看到那么几个事： 浏览器会解析三个东西： 一个是 HTML/SVG/XHTML，事实上，Webkit 有三个 C++的类对应这三类文档。解析这三种文件会产生一个 DOM Tree。 CSS，解析 CSS 会产生 CSS 规则树。 Javascript 脚本，主要是通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree（CSS 规则树）。 解析完成后，浏览器引擎会通过 DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree（渲染树）。 注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。CSS 的 Rule Tree 主要是为了完成匹配并把 CSS Rule 附加上 Rendering Tree 上的每个 Element（元素）。也就是 DOM 节点。也就是所谓的 Frame（框架）。然后，计算每个 Frame（也就是每个 Eleme ...

React 简介背景React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在 2013 年 5 月开源了。 react 是什么？React 是一个用于构建用户界面的 JavaScript 库。用于构建快速、高效的用户界面；它是一个轻量级库，遵循组件化设计模式、声明式编程范式以及函数式编程概念。它使用虚拟 DOM 来有效地操作 DOM；遵循从高阶组件到低阶组件的单向数据流。 在整个 Web 应用的 MVC 架构中，你可以将 React 看作为视图层，并且是一个高效的视图。React 提供了和以往不一样的方式来看待视图，它以组件开发为基础。对 React 应用而言，你需要分割你的页面，使其成为一个个的组件。也就是说，你的应用是由这些组件组合而成的。你可以通过分割组件的方式去开发复杂的页面或某个功能区块，并且组件是可以被复用的。这个过程大概类似于用乐高积木去拼装不同的物体。 特点 采用组件化模式、声明式编码；提高开发效率和组件复用率 ...

在 js 做遍历数组的时候会用到很多数组的遍历方法，例如 for 循环、forEach 之类的方法，今天主要来说说 forEach 方法的一些坑。来看一下这段代码： 1234567let arr = [1, 2];arr.forEach((item, indec) => { arr.splice(index, 1); console.log("执行"); // 输出了几次？？？});console.log(arr); // arr ???? 上述代码中，循环体内“执行”打印了几次？arr 的输出是多少？👌 好，我们带着这些疑问继续往下看。 forEach 参数与 for 循环一样，forEach 也属于完整遍历数组的方法，并会对数组每项元素执行提供的回调函数，一个完整的 forEach 应该是这样，我们一一解释回调函数的参数，与后方的 this 有何作用。arr.forEach(function(self,index,arr){},this) **self**：数组当前遍历的元素，默认从左往右依次获取数组元素 ...