那一日面朝大海的博客

【代码】javaScript遍历对象、数组总结温故。

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

正文简写技巧当同时声明多个变量时，可简写成一行//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(

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

目录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

本文将介绍 CSS 中一个非常有意思的属性 mask 。顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。其实 mask 的出现已经有一段时间了，只是没有特别多实用的场景，在实战中使用的非常少，本文将罗列一些使用 mask 创造出来的有意思的场景。语法最基本，使用 mask 的方式是借助图片，类似这样： 1 2 3 4 5 {

//实现方法一：循环赋值 var arr1 = new Array(100); for(var i=0;i<arr1.length;i++){ arr1[i] = i; } console.log(arr1); //实现方法二：push方法实现 var arr2 = new Array(); for(var i=0;i<.

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..

面试当中几乎每次都会问到一个js中关于call、apply、bind的问题，比如…如何利用call、apply来做继承 apply、call、bind的区别和主要应用场景首先，要明白这三个函数的存在意义是什么？答案是：改变函数执行时的上下文，再具体一点就是改变函数运行时的this指向。有了这个认识，接下来我们来看一下,怎么使用这三个函数。let obj = {name: 'tony'}; function Child(name){ this.name = name;