那一日面朝大海-CSDN博客

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

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

2024-02-28 13:46:45 166

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

2022-06-09 09:16:32 956 1

原创 JS日常开发的写法技巧1

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

2022-02-09 16:04:55 342

原创数组常用操作总结1

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

2022-02-09 15:37:31 224

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

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

2021-12-15 17:00:58 248

原创 splice、slice和split

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

2021-12-07 13:42:36 241

原创 21最新获取url参数的方法

使用正则表达式获取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(

2021-11-15 17:30:37 276

原创 js的reduce的一些用法总结

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

2021-09-24 13:49:48 1659

原创 JS ES6展开运算符使用场景

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

2021-08-31 17:37:54 318

转载 Vue实现列表拖拽排序

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

2021-08-13 17:53:38 9599 5

转载酷炫的CSS MASK

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

2021-08-12 18:55:11 370

原创创建长度为100的数组，数值为下标

//实现方法一：循环赋值 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<.

2021-08-12 17:09:07 1114

原创 2收集常用的JS 代码片段

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

2021-08-03 14:35:32 150

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

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

2021-04-20 17:06:32 384

转载学习之webpack高级配置与优化

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

2021-04-15 15:33:36 318

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

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

2021-04-15 15:29:35 514

转载学习之webpack基础配置

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

2021-04-15 15:28:18 1048

转载复习JS 手写题

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

2021-04-09 14:36:14 141

转载 webpack基础配置详解

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

2021-03-29 11:02:15 585

原创 call、apply、bind的区别和使用

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

2021-03-17 14:34:11 154

原创一文搞懂TCP与UDP的区别

摘要：计算机网络基础引言网络协议是每个前端工程师都必须要掌握的知识，TCP/IP 中有两个具有代表性的传输层协议，分别是 TCP 和 UDP，本文将介绍下这两者以及它们之间的区别。一、TCP/IP网络模型计算机与网络设备要相互通信，双方就必须基于相同的方法。比如，如何探测到通信目标、由哪一边先发起通信、使用哪种语言进行通信、怎样结束通信等规则都需要事先确定。不同的硬件、操作系统之间的通信，所有的这一切都需要一种规则。而我们就把这种规则称为协议（protocol）。TCP/IP 是互联网相

2021-03-15 17:26:25 412

原创 Vue的EventHub组件传值方式

EventHub 是一个非常重要且常用的东西，在不相关组件通信方面有着很强大的作用。EventHub想想如果从最顶层组件传一个 data 给最底层组件，仅仅使用父子传递的方式会变得十分麻烦。而 EventHub 就是用来解决这个问题的：在需要获取 data 的组件上设置一个监听器，每次要传递 data 时，那个组件就广播这个事件并调用这些监听器。我们不难发现 EventHub 的主要功能就两个：监听和广播，当然还有去掉监听器。而 Vue 刚好给我们提供了这些功能，我们可以使用 Vue 来描述这

2021-03-08 10:23:36 458

转载 webpack性能优化：提升webpack编译速度

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

2021-03-04 09:20:28 3136 2

原创判断数据类型

判断一个值是否为数组1、数组自带方法 Array.isArray(arr);//返回true或false2、判断该变量的构造函数是否为Array3、通过Object.prototype.toString判断Object.prototype.toString.call(o) === ‘[object Array]’; //true4、通过instanceof判断5、用jQuery的方法判断（$.isArray(arr)）判断值是否为对象1、toString().

2020-12-10 14:53:36 127

转载 jQuery 事件绑定和 JavaScript 原生事件绑定

jQuery 事件绑定jQuery 中提供了四种事件监听绑定方式，分别是 bind、on，对应的解除监听的函数分别是 unbind、off。bind(event,[data],function)bind 是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数，参数的含义如下：event：事件类型，如 click、change、mouseover 等data：传入监听函数的参数，通过 event.data 取到。可选function：监听函数，可传入even.

2020-12-01 16:39:32 436

转载一行CSS分别实现10种常见布局？

01、超级小中在没有和flex grid之前，垂直居中一直不能很优雅的实现。而现在，可以结合我们grid和place-items优雅的实现同时水平居中和垂直居中。<div class="parent blue" > <div class="box coral" contenteditable> :) </div>.ex1 .parent { display: grid; place-items: center; }.

2020-11-27 13:38:49 289

原创 JS扩展运算符的一些使用(...)

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

2020-11-27 10:07:33 589

转载 2进制 , 8进制 , 10进制 , 16进制 , 介绍及相互转换及快速转换的方法

为什么要使用进制数数据在计算机中的表示，最终以二进制的形式存在 , 就是各种 <黑客帝国>电影中那些 0101010… 的数字 ;我们操作计算机 , 实际就是使用程序和软件在计算机上各种读写数据,如果我们直接操作二进制的话 , 面对这么长的数进行思考或操作，没有人会喜欢。C，C++ 语言没有提供在代码直接写二进制数的方法。用16进制或8进制可以解决这个问题。因为，进制越大，数的表达长度也就越短。之所以使用 16或8进制，而不其它的，诸如9或20进制 .

2020-11-26 19:07:19 310

原创 JS数组方法温习2

用不好数组的程序猿不是一个好猿，我说的~前段时间接手一个项目，逻辑晦涩难懂，代码庞大冗余，上手极其困难。很大的原因就是数组方法使用不熟练，导致写出了很多垃圾代码，其实很多地方稍加改动就可以变得简单高效又优雅。因此我在这里总结下数组的常用方法和奇巧淫技（奇巧淫技主要是reduce~）。数组操作首先要注意且牢记splice、sort、reverse这3个常用方法是对数组自身的操作，会改变数组自身。其他会改变自身的方法是增删push/pop/unshift/shift、填充fill和复制填充copyW.

2020-11-23 13:18:09 239

空空如也

空空如也