那一日面朝大海的博客

JavaScript 数组的索引是从0开始的，第一个元素的索引为0，最后一个元素的索引等于该数组的长度减1。在之前，我们一般使用方括号通过索引访问数组元素：array[index]，如果指定的索引是一个无效值，JavaScript 数组并不会报错，而是会返回 undefined。在大多数情况下，方括号语法是通过正索引访问数组元素的好方法。但有时我们希望从末尾而不是从头开始访问元素。例如，访问数组的最后一个元素：现在，数组提供了一个新的方法来访问数组元素：Array.prototype.at()。

1.使用 const 定义在开发中不要过度声明变量，尽量使用表达式和链式调用形式。然后一般能用 const 就不要用 let 。这种模式写多了之后，你会发现在项目中几乎找不到几个用 let 的地方：// badlet result = false;if (userInfo.age > 30) { result = true;}// goodconst result = userInfo.age > 30;复制代码在项目中很多同事都会这样写，handleForm

1创建数组创建数组是基本功，其方法主要包括以下几种：const arr = [1,2,3] // 数组字面量const arr = [,,,] // 三元素空位数组（hole array）const arr = new Array(4) // [,,,,]const arr = new Array(4,2) // [4,2]const arr = Array.of(1

1 转换布尔值除了常规的布尔值true和false之外，JavaScript还将所有其他值视为 ‘truthy’ 或**‘falsy’**。除非另有定义，否则 JavaScript 中的所有值都是'truthy'，除了0，“”，null，undefined，NaN，当然还有false，这些都是**'falsy'**我们可以通过使用负算运算符轻松地在true和false之间切换。它也会将类型转换为“boolean”。const isTrue = !0;const isFalse = !1

reduce方法是JavaScript中一个比较强大的方法，可能在平时开发中，有人根本没用过，通过下面的8个例子，学会reduce的用法以及它的常用场景。reduce方法是一个数组的迭代方法，和map、filter不同，reduce方法可缓存一个变量，迭代时我们可以操作这个变量，然后返回它。这是我大白话的解释，可能还是不容易理解，下面看例子吧1. 数组累加数组累加是项目经常遇到的，比如计算商品总价等，使用reduce就可以一行代码搞定，而且不用定义外部变量，reduce是完全无副作用的函数。

js中的数组遍历是项目中经常用到的，在这里将几种方法做个对比。for循环：使用频率最高，也是最基本的一种遍历方式。let arr = ['a','b','c','d','e'];for (let i = 0, len = arr.length; i < len; i++) { console.log(i); // 0 1 2 3 4 console....

正文简写技巧当同时声明多个变量时，可简写成一行//Longhandlet x;let y = 20; //Shorthandlet x, y = 20;复制代码利用解构，可为多个变量同时赋值//Longhandlet a, b, c;a = 5;b = 8;c = 12;//Shorthandlet [a, b, c] = [5, 8, 12];复制代码巧用三元运算符简化if else//Longhand let marks = 26; l

核心slice：截取功能 截取数组为主，也可以截取字符串 返回新的数组，包含截取的元素 不改变原数组 splice()：数组增删查改 只能对数组增删查改，字符串无效 返回新的数组，内容是被删除的元素 会改变原数组 split：字符串 => 数组 字符串的方法，不是数组的方法。 返回一个字符串数组。 join：数组 => 字符串slice()核心从数组中截取任意个元素，返回结果为新的数组 不改变原数组。语法：新数组 = 原数组.

使用正则表达式获取url温故而知新，先上一下我们常规使用正则表达式去获取url参数的代码function getParams(url, params){ var res = new RegExp("(?:&|/?)" + params + "=([^&$]+)").exec(url); return res ? res[1] : '';}// url: xx.com?id=2&isShare=trueconst id = getParams(

目录1. 添加属性 2. 合并多个对象 3. 移除对象属性 4.动态移除属性 5. 调整属性顺序 6. 设置属性默认值 7: 属性重命名 8. 还有更秀的操作1. 添加属性复制对象的同时，为其添加新的属性。例子中复制了user对象到userWithPass，并添加了password属性。 1 2 3 4 5 const user = { id: 110, name: 'Kayson Li'} const

在业务中列表拖拽排序是比较常见的需求，常见的JS拖拽库有Sortable.js，Vue.Draggable等，大多数同学遇到这种需求也是更多的求助于这些JS库，其实，使用HTML原生的拖放事件来实现拖拽排序并不复杂，结合Vue的transition-group,还能快速的给排序添加过渡动画。HTML5拖放API设置元素为可拖放让一个元素能被拖放需要设置 draggable 属性为true(文本、图片和链接的draggable默认就是true)<div draggable="tru

1、单行 If-Else 语句这是许多编程语言的共同特征。你可以使用三元运算符用一行代码编写整个语句，而不是在多行上编写 if-else。例如：constage=12;letageGroup;//LONGFORMif(age>18){ageGroup="Anadult";}else{ageGroup="Achild";}//SHORTHANDageGroup=age>18?"Anadult":...

一.什么是懒加载？懒加载突出一个“懒”字，懒就是拖延迟的意思，所以“懒加载”说白了就是延迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。二.为什么要懒加载？懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以，我们需要懒加载，

一、打包多页面应用所谓打包多页面，就是同时打包出多个html页面，打包多页面也是使用html-webpack-plugin，只不过，在引入插件的时候是创建多个插件对象，因为一个html-webpack-plugin插件对象只能打包出一个html页面。如:module.exports = { entry: { index: "./src/index.js", // 指定打包输出的chunk名为index foo: "./src/foo.js" // 指定打包输

一、简介本文主要讲述的是webpack的工作原理，及其打包流程，一步步分析其打包过程，然后模拟实现一个简单的webpack，主要是为了更深刻地了解其打包流程，为了充分体现其山寨的意义，故名称定为web-pack。二、webpack的一些特点webpack的配置文件是一个.js文件，其采用的是node语法，主要是导出一个配置对象，并且其采用commonjs2规范进行导出，即以module.exports={}的方式导出配置对象，之所以采用这种方式是为了方便解析配置文件对象，webpack会找到配置

一、webpack 简介本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。简单说，webpack可以看做是一个模块打包机，主要作用就是:分析你的项目结构，找到JavaScript模块以及一些浏览器不能直接运行的拓展语言(sass、less、typesc.

数据类型判断typeof 可以正确识别：Undefined、Boolean、Number、String、Symbol、Function 等类型的数据，但是对于其他的都会认为是 object，比如 Null、Date 等，所以通过 typeof 来判断数据类型会不准确。但是可以使用 Object.prototype.toString 实现。functiontypeOf(obj){letres=Object.prototype.toString.call(obj).split('...

WebPack是什么定义：WebPack是模块打包工具。原理：分析项目结构，找到JavaScript模块以及其他浏览器不能直接运行的模块（Scss，TypeScript等），转换并打包为浏览器可以识别并运行的格式，让浏览器使用。image.png工作流程：1、通过配置找到给定的入口文件（如index.js）2、从入口文件开始分析并处理项目所有的依赖模块，并递归地构建一个依赖关系图（dependency graph）。webpack把所有的文件都当做模块。* JavaScr..

1：最喜欢的一款 Winter is Coming (Light) 权力的游戏联名款哈哈 开个玩笑2：Dracula Official官方吸血鬼主题，很漂亮3：One DarkBimbo简约而现代的神奇海洋主题...

本篇文章主要记录下一次webpack的性能优化现状随着项目不断发展壮大，组件数量开始变得越来越多，项目也开始变得庞大，webpack编译的时间也会越来越久，我们现在的项目编译一次在40s ——70s之间，这是一个效率非常低下的操作。优化的手段有很多，之前项目原本已经做了很多，本文从缓存的角度进行优化讲解以下仅介绍几种缓存相关的优化手段，包括 babel-loader的cacheDirectory cache-loader dll动态链接库 Ha...

随ES2015出来，...扩展运算符也被利用起来扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。...运算符主要用于数组和对象的一些操作。函数调用function push(array, ...items) { array.push(...items);}function add(x, y) { return x + y;}const numbers = [4, 38];add(...numb.

  对于喜欢逛CSDN的人来说，看别人的博客确实能够对自己有不小的提高，有时候看到特别好的博客想转载下载，但是不能一个字一个字的敲了，这时候我们就想快速转载别人的博客，把别人的博客移到自己的空间里面，当然有人会说我们可以收藏博客啊，就不需要转载，(⊙o⊙)… 也对。。 实现   因为我自己当初想转载的时候却不知道该怎么转载，所以学会了之后就把方法写出来，帮助那些想转载却不知道该怎么转载的人（大神勿笑）。   我们首先打开要转载的博客，然后鼠标右键就会出现下面的菜单： ...