JavaScript
文章平均质量分 83
记录日常js学习的点滴
老Chen先生
这个作者很懒,什么都没留下…
展开
-
JS学习笔记——数据未加载时,内容高度不确定的展开收起按钮显隐问题
今天同事问了我一个问题,有一个“展开—收起”的按钮,如果数据部分高度超过某个临界值,就展示这个按钮;如果数据部分高度没有超过某个临界高度,就不展示。但是最开始页面加载时,数据还没有请求回来,无法得知具体高度。而在日常开发中,我们也经常会遇到有些区块内容可以展开收起的需求,例如以下这两种:固定高度式:对于内容固定,高度固定的情况,很好实现,可以一开始就显示展开/收起按钮,点击切换区块的高度即可。非固定高度式:而对于内容多少不固定,最终高度也不一定的情况,则稍显复杂,难点在于:内容未超出规原创 2022-01-07 22:16:14 · 394 阅读 · 0 评论 -
JS学习笔记——前端的webview是什么东西
1、webview是什么?作用是什么?和浏览器有什么关系?先放一段基本定义:A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web page原创 2021-12-08 22:26:48 · 5429 阅读 · 0 评论 -
JS学习笔记——new Date()日期格式处理
在日常开发过程中,我们常常用到日期或者时间戳,所以我索性就把这个知识点汇总一下,写篇博客记录。1、new Date() 参数格式new Date() 的参数可以为整数,也可以为字符串,但格式必须正确new Date()不传参数时,默认获取的是当前日期new Date()//Mon Dec 06 2021 21:32:28 GMT+0800 (中国标准时间)new Date(1137075575000)//Thu Jan 12 2006 22:19:35 GMT+0800 (中国标准时间)原创 2021-12-06 21:33:29 · 21284 阅读 · 1 评论 -
JS学习笔记——正则表达式面试题(永不停更)
1、匹配用尖括号括起来的以a开头的字符串var str = "this is a <a herf='www.baidu.com'>,not a <img src='xxx'>";var reg = /<a[^>]+>/g;console.log(str.match(reg));//["<a herf='www.baidu.com'>"]2、匹配xxyy模式var reg = /(\w)\1(\w)\2/g;3、- 转 驼峰:the-f原创 2021-11-23 19:07:14 · 1897 阅读 · 0 评论 -
JS学习笔记——从入门到熟练掌握正则表达式(全网最细的讲解含元字符、修饰符、正则方法、特殊用法)
不管是在平时工作学习中,还是面试中,经常会碰到使用正则表达式的场景,平时对这方面没有下功夫,都是用的时候现查先用,过后就忘了,所以想写一篇博客来记录学习一下正则表达式。1、什么是正则正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换2、正则的定义在创建正则表达式的时候有两种方法:2.1、RegExp构造函数var pattern = new R原创 2021-11-08 22:30:04 · 414 阅读 · 1 评论 -
JS学习笔记——事件循环机制Event loop(面试必问)
不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序。Event Loop 这个概念相信大家或多或少都了解过,但是有一次被一个小伙伴问到它具体的原理的时候,感觉自己只知道个大概印象,于是计划着写一篇文章,用输出倒逼输入,让自己重新学习这个概念,同时也能帮助更多的人理解它。1、JavaScript单线程先简单介绍几个相关概念:进程: cpu资源分配的最小单位(是能拥有资源和独立运行的最小单位)。比如你正在运原创 2021-10-30 11:58:47 · 916 阅读 · 1 评论 -
JS学习笔记——一道有趣的JavaScript连等=赋值面试题
1、面试题今天无意中在网上看到一道面试题,据说是阿里的(我也无从考证),题目如下var a = {n: 1}var b = aa.x = a = {n: 2}console.log(a.n, b.n)console.log(a.x, b.x)先说答案a.n = 2 b.n = 1a.x = undefined b.x = {n: 2}不出所料,我答错了,于是便上网找解析,看了好多文章,感觉猜想和说法都是五花八门,我也是捉摸了好久,才理解过来。2、连等=执行顺序假设有一句原创 2021-10-28 19:28:31 · 454 阅读 · 0 评论 -
JS学习笔记——由setTimeout面试题引出的浏览器(内核)渲染进程话题
1、setTimeout面试题这几天看到一个有趣的问题,是关于setTimeout的,题目如下:问:是页面是先渲染出1000个元素,还是控制台先打印出数据?如果渲染1000000个元素,谁先进行?<div id="app"></div><script> window.onload = function () { let startTime = +new Date(); let oApp = document.getEleme原创 2021-10-25 23:39:38 · 421 阅读 · 0 评论 -
计算机知识——JavaScript中常用的&和&&、|和||的用法和区别
今天突然碰到&符号,但是平时&&符号用的多了,突然忘了&符号怎么用,记得大学时候上课这些都学过,哎,真是好记性不如烂笔头,虽然看着简单,但是长时间不用也会忘,索性写篇博客记录一下。1、&...原创 2021-10-12 11:58:08 · 1143 阅读 · 1 评论 -
JS学习笔记——JavaScript中字符串的常用方法和基本使用
在上篇的文章中,我简单的将JavaScript中数组的方法进行了总结,这些内容对工作或者面试都有用,同时自己也有许多收获,这篇我们就对JavaScript中字符串的常用方法和使用进行总结1、slice语法:字符串.slice(start,end)参数:start(必填):表示开始截取的索引位置(可以为负数)end(可选):表示结束截取的索引位置(如果第二个参数不存在,则表示截取到字符串末尾)(可以为负数)????【 注:包前不包后】功能:提取字符串的某个部分返回值:返回被提取的新的字符原创 2021-10-12 10:30:47 · 320 阅读 · 1 评论 -
JS学习笔记——JavaScript中数组的常用方法和基本使用
在平时工作和学习中,我们常常面对的就是对于数组、对象和字符串的处理,这些知识散而碎,所以我就想抽个空来总结一下,今天这篇先来聊聊前端中关于数组(Array)的一些方法的使用(本文会持续更新)...原创 2021-09-28 23:01:57 · 433 阅读 · 3 评论 -
JS学习笔记——return、break和continue的使用和区别
平时在一些循环或者函数的使用中,我们经常用到return、break和continue,但会出现用错的地方,所以今天就来总结一下。1、三者比较在 break,continue和return 三个关键字中, break,continue是看做一类的,return 是函数返回语句,但是返回的同时也将函数停止。相同之处:三个都会将此时进行的语句停止。不同之处:break:是立即结束当前语句,并跳出当前语句,进行下个语句执行continue:是停止当前语句,并从头执行该语句return:停止函数原创 2021-09-27 16:59:25 · 2666 阅读 · 2 评论 -
JS学习笔记——高级编程中compose函数的介绍和基本实现
1、前言在之前探讨redux的中间件的时候,applyMiddleware源码中有遇到过compose()函数,当时不太明白起作用,所以就上网好好查了一下,做了个总结。2、普通函数在函数式编程当中有一个很重要的概念就是函数组合, 实际上就是把处理数据的函数像管道一样连接起来, 然后让数据穿过管道得到最终的结果。例1:const fn1 = (x) => x + 10;const fn2 = (x) => x * 10;const fn3 = (x) => x - 10;co原创 2021-09-23 17:52:26 · 4377 阅读 · 0 评论 -
JS学习笔记——JavaScript中常用的typeof、instanceof和Object.prototype.toString()等方法基础介绍
今天浏览博客时,看到一篇JS中对类型判断讲解的文章,感觉写的听好,正好平时在工作中也经常遇到判断类型的情况,所以就想记录一下。1、typeof众所周知,js是一门弱语言,它在声明变量时无需确定变量的类型,js在运行时会自动判断。那么如何判断一个变量的类型呢,js提供了typeof运算符。1.1、typeof的作用typeof运算符:是用来检测一个变量的类型, 把类型信息当作字符串返回,值包括如下6种:undefined:表示未定义的变量或值boolean:表示布尔类型的变量或值string:原创 2021-09-21 19:12:34 · 386 阅读 · 0 评论 -
计算机相关知识——前端Base64编码解码的基础使用
1、前言在我之前的博客中,介绍有关ASCII的相关知识计算机相关知识——字符编码中ASCII、Unicode和UTF-8的相关知识也略微提及了Base64的概念,但没有细说,这期来简单聊聊Base64。2、为什么使用Base64我们知道,Ascii码的128~255之间的值是不可见字符。在网络上交换数据时,比如从A地传到B地,往往要经过多个路由设备,由于不同的设备对字符的处理方式有一些不同,这样那些不可见字符就有可能被处理错误,这是不利于传输的。所以就先把数据转为Base64编码,统统变成可见原创 2021-09-15 20:31:18 · 1705 阅读 · 0 评论 -
计算机相关知识——字符编码中ASCII、Unicode和UTF-8的相关知识
1、位计算机存储信息的最小单位,称之为位(bit),音译比特,二进制的一个“0”或一个“1”叫一位。2、字节字节(Byte) 是一种计量单位,表示数据量多少,它是计算机信息技术用于计量存储容量的一种计量单位,8个二进制位组成1个字节,而8个二进制位就可以组合出256种状态。所以一个字节一共可以用来表示256种不同的状态,每一个状态对应一个符号,就是256个符号,从00000000到111111113、字符字符是指计算机中使用的文字和符号,比如“1、2、3、A、B、C、~!·#¥%…*()+”等等。原创 2021-09-15 07:54:41 · 673 阅读 · 0 评论 -
JS学习笔记——window对象的函数btoa和atob
的点点滴滴原创 2021-09-14 16:23:38 · 21505 阅读 · 1 评论 -
JS学习笔记——前端关于File、Blob、FileReader和ArrayBuffer的相关概念知识
1、前提这几天在开发过程中,遇到了下载文件问题,其中服务端返回二进制文件流,需要前端自己对二进制文件流进行转换,用到了new Blob()方式,便上网查阅相关资料。2、Blob对象2.1、概念介绍Blob 全称:Binary Large Object(二进制大型对象)Blob 对象是一个前端的一个专门用于支持文件操作的二进制对象,表示一个二进制文件的数据内容。通常用来读写文件,比如一个图片文件的内容就可以通过 Blob 对象读写。在JS中,有两个构造函数:File 和 Blob,而File继承了原创 2021-09-14 10:12:21 · 3397 阅读 · 2 评论 -
JS学习笔记——前端下载普通excel文件和二进制文件的区别
1、前提这几天项目开发,有个需求点是有两个按钮点击事件,点击时分别需要下载和导出excel文件,两个都是GET接口请求方式,不过区别是:一个是后端直接给接口地址,前端不用传参数给后端,后端直接返回一个excel文件(这种是文件上传到资源服务器上,后端只保存了文件地址,前端拿到后端返回的文件地址直接下载)一个是后端给了接口地址,同时前端需要给后端传一些参数字段,后端返回的不是一个excel文件,而是返回二进制流,需要前端自己转换(这种是文件就存在后端服务器上(通常是临时根据前端参数动态生成,用完就删除原创 2021-09-07 10:47:30 · 1444 阅读 · 3 评论 -
JS学习笔记——使用window.location得到的各部分参数的含义
在平常的项目开发过程中,我们会经常从URL中解析各种数据信息,所以我们对window.location获取到的URL中的各种字段含义进行解析。1、url拆解通常我们所说的URL,即统一资源定位符(Uniform Resource Locator, URL) ,对于一个完整的URL,由这几个部分构成:scheme://host:port/path?query#fragmentscheme(通信协议):常用的http,ftp,maito等host(主机+端口):服务器(计算机)域名系统 (DNS原创 2021-09-05 11:00:19 · 10251 阅读 · 1 评论 -
js学习笔记——关于对象内某属性更新,对象是否重新更新问题
1、问题描述今天在做项目过程中,处理一个对象时,遇到一个问题:页面渲染时要依赖于某个对象的属性,这个属性是个数组。最开始该数组为空,useEffect中请求完ajax后,拿到接口返回的数据,对该对象中的属性重新set,但是发现render函数中的数据仍然是空数组,对象好像并没有因此变化。所以想亲自尝试一下。2、更新对象的属性import React , {useState,useEffect} from 'react';const Demo = () => { const [arr,原创 2021-08-28 21:28:48 · 1035 阅读 · 0 评论 -
JS学习笔记——项目文件夹中package.json文件的配置解析
1、概述总要在项目开发中,每个项目的根目录下面,一般都会有一个package.json文件,这个文件定义了这个项目所需的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。我们可以通过npm install命令来自动下载所需要的配置文件,也就是项目所需的运行和开发环境。下面是一个最简单的package.json文件,只定义两项元数据:项目名称和项目版本。{ "name" : "xxx", "version" : "0.0.0",}package.json文件就是一个JSON原创 2021-08-17 15:00:47 · 1829 阅读 · 0 评论 -
JS学习笔记——关于try finally异常机制的基础介绍和使用
前提通常我们在代码中捕获错误异常,使用的是try{ }catch{ }机制,今天在看项目时,突然发现里面使用try{ }finally{ }捕获异常,这种方法之前使用的还不是很多,所以也查了资料,深入研究研究。try finally(1)语法异常机制中还有一个重要的部分,就是finally。catch后面可以跟finally语句,语法如下所示:try{ //可能抛出异常}catch(Exception e){ //捕获异常}finally{ //不管有无异常都执行}原创 2021-08-07 13:22:09 · 2271 阅读 · 0 评论 -
JS学习笔记——异步回调中Async Await和Promise区别
1、前提js的同步和异步问题通常是指ajax的回调。如果是同步调用,程序在发出ajax调用后就会暂停,直到远程服务器产生回应后才会继续运行;而如果是异步调用,程序发出ajax调用后不会暂停,而是立即执行后面的代码,服务器返回信息后会自动触发回调函数进行处理。相比较而言,异步调用的性能最佳,程序不会出现卡顿的现象,而同步调用则通常用于需要立即获得结果并实时处理的情况。2、正文promise是ES6,async/await是ES7async await 它是基于promise的,为什么es6新增了这原创 2021-07-16 17:59:13 · 2473 阅读 · 3 评论 -
JS学习笔记——Object.is到底是何物
Object.is() 方法确定两个值是否是相同的值。1、Object.is的背景ES5比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===)。他们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0。JavaScript缺乏一种运算,在所有环境中,只要两个值是一样的,他们就应该相等。ES6提出“Same-value equality”(同值相等)算法,用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较原创 2021-07-07 21:53:19 · 2122 阅读 · 0 评论 -
Js学习笔记——URL转码和解码的问题处理
【前提须知】ASCII码在计算机内部,所有的信息最终都表示为一个二进制的字符串。每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种 状态,这被称为一个字节(byte)。也就是说,一个字节一共可以用来表示256种不同的状态,每一个状态对应一个符号,就是256个符号,从 0000000到11111111。上个世纪60年代,美国制定了一套字符编码,对英语字符与二进制位之间的关系,做了统一规定。这被称为ASCII码,一直沿用至今。ASCII码一共规定了128个字符的编码,比如空格原创 2021-06-09 11:16:55 · 454 阅读 · 0 评论 -
JS学习笔记——JavaScript中this的指向问题(包含js中所有情况)
在js中有一个东西一直折磨的我头疼,终于下定决心好好总结一波this的各种情况。普通函数中的this console.log(this);//window function fn(){ console.log(this); } fn(); //windowES5中非严格模式,普通代码全局中的this和函数中的this都指向window;ES6中严格模式,全局中this仍然指向window,函数中this原创 2020-08-15 23:55:37 · 409 阅读 · 0 评论 -
JS学习笔记——简述javascript中运算符优先级
运算符优先级(从上向下优先级依次降低)(1) . [ ] ( ) 字段访问、数组下标、函数调用以及表达式分组(2)++(一元运算符) --(一元运算符) -(负号) ~(位运算符) !(逻辑运算符) delete new typeof void 一元运算符、返回数据类型、对象创建、未定义值(3) * / %(算术运算符) 乘法、除法、取模(原创 2020-07-13 00:52:51 · 246 阅读 · 0 评论