那一日面朝大海的博客

javaScript遍历对象、数组总结温故

AN0692 — Wed, 28 Feb 2024 13:46:45 +0800

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

获取数组元素新方法：array.at()

AN0692 — Thu, 09 Jun 2022 09:16:32 +0800

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

JS日常开发的写法技巧1

AN0692 — Wed, 09 Feb 2022 16:04:55 +0800

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

数组常用操作总结1

AN0692 — Wed, 09 Feb 2022 15:37:31 +0800

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

常用提升效率的JS简写技巧

AN0692 — Wed, 15 Dec 2021 17:00:58 +0800

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

splice、slice和split

AN0692 — Tue, 07 Dec 2021 13:42:36 +0800

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

21最新获取url参数的方法

AN0692 — Mon, 15 Nov 2021 17:30:37 +0800

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

js的reduce的一些用法总结

AN0692 — Fri, 24 Sep 2021 13:49:48 +0800

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

JS ES6展开运算符使用场景

AN0692 — Tue, 31 Aug 2021 17:37:54 +0800

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

Vue实现列表拖拽排序

AN0692 — Fri, 13 Aug 2021 17:53:38 +0800

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

18?"Anadult":...

js实现图片懒加载（lazyLoad）的思路

AN0692 — Tue, 20 Apr 2021 17:06:32 +0800

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

学习之webpack高级配置与优化

AN0692 — Thu, 15 Apr 2021 15:33:36 +0800

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

学习之webpack原理解析与实现一个简单的webpack

AN0692 — Thu, 15 Apr 2021 15:29:35 +0800

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

学习之webpack基础配置

AN0692 — Thu, 15 Apr 2021 15:28:18 +0800

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

复习JS 手写题

AN0692 — Fri, 09 Apr 2021 14:36:14 +0800

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

webpack基础配置详解

AN0692 — Mon, 29 Mar 2021 11:02:15 +0800

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

call、apply、bind的区别和使用

AN0692 — Wed, 17 Mar 2021 14:34:11 +0800

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