javascript
IT-CLASS
这个作者很懒,什么都没留下…
展开
-
Array.from(new Set)去重 与Array.map()
Array.from(new Set)去重 array.map()原创 2022-09-03 23:02:19 · 558 阅读 · 0 评论 -
Array.includes()函数
arr.includes(searchElement)原创 2022-08-28 21:22:51 · 376 阅读 · 0 评论 -
Array.find(),findIndex()
Array.find(),findIndex()原创 2022-08-28 21:13:24 · 445 阅读 · 0 评论 -
Array.from ()方法详解
Array.from ()方法详解原创 2022-08-28 21:06:20 · 233 阅读 · 0 评论 -
json数组与数组格式
json数组格式与数组原创 2022-08-28 20:56:48 · 186 阅读 · 0 评论 -
split().reverse().join()代码解析
split('').reverse().join('')原创 2022-07-31 17:28:22 · 216 阅读 · 0 评论 -
display:none、visibility:hidden 和 opacity:0 之间的区别?
三者共同点都是隐藏。不同点:一,是否占据空间display:none,隐藏之后不占位置;二,子元素是否继承display:none — 不会被子元素继承,父元素都不存在了,子元素也不会显示出。visibility:hidden—会被子元素继承,通过设置子元素visibility:visible来显示子元素。opacity:0—会被子元素继承,但是不能设置子元素opacity:0来重新显示。三,事件绑定display:none的元素都已经不再页面存在了,因此无法触发它绑定的事件。visibi原创 2021-06-17 16:16:13 · 311 阅读 · 0 评论 -
Chakra-UI 学习笔记
现代化 React UI 框架 Chakra-UIChakra-UI 介绍Chakra UI是一个简单的,模块化的易于理解的UI组件库.提供了丰富的构建React应用所需的U|组件.文档: https://next.chakra-ui.com/docs/getting-startedChakra UI内置Emotion,是CSS-IN-JS解决方案的集大成者基于Styled-Systems https://styled-system.com/支持开箱即用的主题功能默认支持白天和黑夜两种模式原创 2021-05-24 22:55:14 · 329 阅读 · 0 评论 -
css-in-js emotion
从写法上看, 侵入性比较小, 直接就是 className:import styled, { css } from 'react-emotion';const Container = styled('div')` background: #333;`const myStyle = css` color: rebeccapurple;`const app = () => (<Container> <p className={myStyle}>Hell原创 2021-05-23 22:09:20 · 186 阅读 · 0 评论 -
Formik 学习笔记
**1. Formik**1.1 Formik 介绍增强表单处理能力,简化表单处理流程官网1.2 Formik 下载npm install formik**2. Formik 增强表单**2.1 Formik 基本使用使用 formik 进行表单数据绑定以及表单提交处理import { useFormik } from 'formik'function App () { const formik = useFormik({initialValues: {username:原创 2021-05-22 15:49:15 · 362 阅读 · 0 评论 -
new Set()(ES6)
1、什么是Set()Set是es6新增的数据结构,似于数组,但它的一大特性就是所有元素都是唯一的,没有重复的值,我们一般称为集合。Set本身是一个构造函数,用来生成 Set 数据结构2、增删改查方法2.1 添加元素add添加某个值,返回 Set 结构本身,当添加实例中已经存在的元素,set不会进行处理添加let list=new Set();list.add(1)list.add(2).add(3).add(3) // 2只被添加了一次2.2 删除元素 delete删除某个值,返回转载 2021-05-22 15:38:23 · 180 阅读 · 0 评论 -
字符串的新增方法→startsWith() endsWith() Includes() repeat()
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>字转载 2021-05-21 16:37:32 · 132 阅读 · 0 评论 -
js数组中的find、filter、forEach、map四个方法的详解和应用实例
find():返回通过测试的数组的第一个元素的值在第一次调用 callback 函数时会确定元素的索引范围,因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变,那么当callback函数访问到它时,它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。语法:array.find(function(value, index, arr),thisValue)转载 2021-05-21 15:50:37 · 243 阅读 · 0 评论 -
JS数组reduce()方法详解及高级技巧
1、语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。callback (执行数组中每个值的函数,包含四个参数)1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))2、currentValue (数组中当前被处理的元素)3、ind原创 2021-05-20 15:02:47 · 97 阅读 · 0 评论 -
从深入到通俗:Object.prototype.toString.call()
一、Object.prototype.toString() 的调用对于 Object.prototype.toString() 方法,会返回一个形如 “[object XXX]” 的字符串。如果对象的 toString() 方法未被重写,就会返回如上面形式的字符串。({}).toString(); // => “[object Object]”Math.toString(); // => “[object Math]”但是,大多数对象,toString() 方法都是重写转载 2021-05-19 21:56:17 · 2767 阅读 · 0 评论 -
nuxt - nuxtServerInit & 页面渲染前的store处理 & context
nuxtServerInit 方法状态书文件中指定了nuxtServerInit方法,Nuxt,js调用它的时候会将页面的context上下文对象作为第2个参数传给它(服务端调用)[与fetch一样,不包括context.redirect和context.error方法],当我们想要将服务端的一些数据传到客户端,可以通过这个获取保存在状态中,客户端再从状态里取actions: {nuxtServerInit({ commit}, { req }) {if (req.session.user)com转载 2021-05-16 21:46:30 · 3065 阅读 · 0 评论 -
前端js中this指向及改变this指向的方法
1.this显示绑定 含义: 当一个函数没有明确的调用对象的时候, 也就是单纯作为独立函数调用的时候, 将对函数的this使用默认绑定: 绑定到全局的window对象在显式绑定下: 函数将取得在“ 包含对象“ 里的永久居住权, 一直都会” 住在这里“ 1.1 全局函数function fire() { console.log(this === window); //fire此时是全局的方法,this指向window}fire(); // 输出true1.2 函数内嵌套函数fun转载 2020-09-10 15:43:41 · 969 阅读 · 0 评论 -
javascript 创建对象常用几种方式
1.工厂模式function Person(name, age, job){var o = new Object();o.name = name;o.age = age;o.job = job;o.sayName = function(){alert(this.name);};return o;}var person = Person("Greg", 27, "Doctor");person.sayName();// Greg工厂模式虽然解决了创建多个相似对原创 2020-09-10 14:46:24 · 106 阅读 · 0 评论 -
cookie localstorage sessionstorage
一、通常我们在存储数据的方式有三种cookie sessionstorage localstorage ,那么这三种数据的存储又有什么关系呢?让我们一起来看看吧cookie:保存cookie值:var dataCookie='110'; document.cookie = 'token' + "=" +dataCookie;获取指定名称的cookie值function getCookie(name) { //获取指定名称的cookie值// (^| )name=([^;]*)(;|$转载 2020-09-10 14:36:14 · 159 阅读 · 0 评论 -
Ajax、fetch、axios
一、AjaxAjax的本质是使用XMLHttpRequest对象来请求数据,下面简单贴下原生js实现:function ajax(url, fnSucc, fnFaild){ //1.创建Ajax对象 if(window.XMLHttpRequest){ var oAjax=new XMLHttpRequest(); }else{ var oAjax=new ActiveXObject("Microsoft.XMLHTTP"); }转载 2020-09-10 11:50:47 · 104 阅读 · 0 评论 -
什么是闭包?
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。下面就是我的学习笔记,对于Javascript初学者应该是很有用的。一、变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种:全局变量和局部变量。Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。var n=999; function f1(){ alert(n); } f1(); // 999另转载 2020-09-10 11:34:54 · 123 阅读 · 0 评论 -
JS重点整理之JS原型链
对象要清楚原型链,首先要弄清楚对象:普通对象最普通的对象:有__proto__属性(指向其原型链),没有prototype属性。原型对象(person.prototype 原型对象还有constructor属性(指向构造函数对象))函数对象:凡是通过new Function()创建的都是函数对象。拥有__proto__、prototype属性(指向原型对象)。Function、Object、Array、Date、String、自定义函数特例: Function.prototype(是原型对转载 2020-09-09 14:52:27 · 220 阅读 · 0 评论 -
事件绑定、事件监听、事件委托
事件绑定要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。在JavaScript中,有三种常用的绑定事件的方法:在DOM元素中直接绑定;在JavaScript代码中绑定;绑定事件监听函数。在DOM中直接绑定事件我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、on转载 2020-09-09 13:59:56 · 162 阅读 · 0 评论 -
前端常见浏览器兼容性问题解决方案
不同浏览器的内核也不尽相同,所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎,内核更加倾向于说渲染引擎。常见的浏览器内核:不同浏览器的默认样式存在差异,可以使用 Normalize.css 抹平这些差异。1.不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。碰到频率:100%解决方案:CSS里 *{margin:0;padding:0;}备注:这个是最转载 2020-09-08 21:26:48 · 500 阅读 · 0 评论 -
总结下var、let 和 const 的区别
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>var</title> <script> window.onload = function(){ var aLi = document.getElementsByTagName('li'); for转载 2020-09-08 21:08:12 · 190 阅读 · 0 评论 -
es6中class类的理解
如果要生成一个对象实例,需要先定义一个构造函数,然后通过new操作符来完成。构造函数示例://函数名和实例化构造名相同且大写(非强制,但这么写有助于区分构造函数和普通函数)function Person(name,age) { this.name = name; this.age=age;}Person.prototype.say = function(){ return "我的名字叫" + this.name+"今年"+this.age+"岁了";}var obj=ne转载 2020-09-08 17:14:03 · 165 阅读 · 0 评论 -
判断数组的几种方法
instanceof运算符这个运算符可以判断一个对象是否是在其原型链上原型构造函数中的属性。let arr = [];console.log(arr instanceof Array); //trueconstructor这个属性是返回对象相对应的构造函数。let arr = [];console.log(arr.constructor == Array); //true数组自带的isArray方法let arr = [];console.log(Array.isArray(arr)原创 2020-09-08 16:50:52 · 533 阅读 · 0 评论 -
set、weakSet、map及weakMap 的详解
Set 和 Map 主要的应用场景在于 数据重组 和 数据储存Set 是一种叫做集合的数据结构,Map 是一种叫做字典的数据结构Set成员唯一、无序且不重复[value, value],键值与键名是一致的(或者说只有键值,没有键名)可以遍历,方法有:add、delete、hasWeakSet成员都是对象成员都是弱引用,可以被垃圾回收机制回收,可以用来保存DOM节点,不容易造成内存泄漏不能遍历,方法有add、delete、hasMap本质上是键值对的集合,类似集合可以遍历,方法很多可以转载 2020-09-08 16:36:30 · 179 阅读 · 0 评论 -
js 函数的防抖(debounce)与节流(throttle)
概念:函数防抖(debounce):触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。函数节流(throttle):高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。函数节流(throttle)与 函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。1、函数防抖(debounce)实现方式:每次触发事件时设置一个延迟调用方法,并且取消之前的延时调用方法缺点:如果转载 2020-09-07 22:15:10 · 413 阅读 · 0 评论 -
JS遍历数组的三种方法:map、forEach、filter
前端对数组进行遍历、处理,JS自带的遍历方法有很多种,往往不加留意,就可能导致知识混乱的现象。js原生自带的常用的对数组遍历处理的方法,分别为:map、forEach、filter。<1>、Js自带的map()方法1.方法概述 map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组var newArray = ["1","2","3"].map(function(e,i,arr){return parseInt(e,10)})map中回调函数中的e参数为:转载 2020-09-07 21:33:56 · 1230 阅读 · 0 评论