字符串的方法subString 字符串的方法subString<script> let str = '今天是星期四'; let newStr = str.substring(1, 3); console.log(str);//今天是星期四 console.log(newStr);//天是</script>变量.subString(start, end)代表的是:从下标start开始,将字符串截取到end的位置,不包括end的位置;...
字符串的方法substr 字符串的方法substr今天在项目中用到了,所以简单的记录一下 <script> let str = '今天的天气比较不错。'; let newStr = str.substr(1,3); console.log(str, newStr)//今天的天气比较不错。 天的天 </script>变量.substr(start, length)代表的是:从下标为start的位置开始,将字符串截取length个。...
随机打乱数组 随机打乱数组在这里利用到的Math对象中的random方法来进行<script> let arr = [11, 22, 88, 55, 34, 90, 99, 56, 66]; function randomArr(arr){ arr.sort(() => { return Math.random() - 0.5 }) return arr } let newArr = randomArr(arr);
去除数组对象中相同的项 去除数组对象中相同的项<script> let arr = [ { name: 'xiaoli', age: 11 }, { name: 'xiaolili', age: 12 }, { name: 'xiaolili', age: 12 } ] function handleArr(arr) {
节流和防抖的详细介绍 节流和防抖防抖和节流:限制函数的执行次数;(1)节流:如果你持续触发事件,每隔一段时间,只执行一次事件;应用场景DOM元素的拖拽功能实现射击游戏计算鼠标移动的距离监听scroll滚动事件利用时间戳进行节流的方式<body> <div id="box"></div> <button id="btn">点击取消节流</button> <script> // 第一次触发,最后不会被调用触发的函数 /
手写一个简单的bind函数 手写一个简单的bind函数Function.prototype._bind = function() { //将伪数组转化成真数组,这样的话就可以使用真数组的方法 let args = Array.prototype.slice.call(arguments); let _this = args.shift(); let _self = this;//保存当前函数的this return function() { return _self.apply(_
将数组转化成字符串的两种方法 将数组转化成字符串的两种方法let arr = [1,2,8,9,'西瓜'];console.log(arr.toString());//将数组转化为字符串console.log(arr.toString() === arr.join());//两种方式都可以转化成字符串,并且转化之后是相等的,trueconsole.log(arr.join(' '));//1 2 8 9 西瓜,每个项之间以空格进行分隔console.log(arr.join());//1,2,8,9,西瓜,按照原本的样子进行输
find和findIndex的区别 find和findIndex的使用let arr = [11,22,3,88]let result = arr.find(item => item >= 22)//22 找到第一个满足添加的元素,如果说:没有符合条件的元素,那么返回undefined;console.log(result,'最后打印的数据');let nodata = arr.find(item => item <= 2);console.log(nodata);//undefinedlet index
数组的扁平化 数组的扁平化概念:数组扁平化是指将一个多维数组变为一维数组第一种方式:利用reducefunction fun(arr) { // 高阶函数 return arr.reduce((result,item) => { return result.concat(Array.isArray(item) ? fun(item) : item) },[])}第二种方式function fun(arr) { return arr.toStrin
微任务和宏任务的详细解说 微任务和宏任务的详细解说(1)宏任务分类:setTimeout setInterval requestAnimationsFrame宏任务所处的队列就是宏任务队列第一个宏任务队列只有一个任务:执行主线程的js代码宏任务队列可以有多个当宏任务队列中的任务执行完以后会查看是否有微任务队列,如果有先执行微任务队列中的任务,如果没有就查看是否有宏任务队列(2)微任务分类:new Promise().then)(回调) process.nextTick微任务所处的队列就是微任务队列只有一个微任务
字符串转化为数组的两种方法 字符串转化为数组的两种方法<script> let str = 'ababscsi'; let arr = str.split(''); let arr2 = [...str]; console.log(arr);//['a', 'b', 'a', 'b', 's', 'c', 's', 'i'] console.log(arr2);//['a', 'b', 'a', 'b', 's', 'c', 's', 'i']</script>
判断数组最深有几层 判断数组最深有几层 <script> let arr = [11, 22, [44, 55,[66, 88,[22,99]]],100]; let number = 1; function arrSum(arr) { if(!Array.isArray(arr)) return; for(let i = 0; i < arr.length; i ++ ){ if(Array.isArray(arr[i])) {
使用fetch实现文件下载 使用fetch实现文件下载这个过程其实就是使用Fetch去模拟a标签的下载过程,代码示例如下:<script> fetch('http://somehost/somefile.zip').then( res => res.bob() ).then(blob => { let a = document.createElement('a'); let url = window.URL.createObjectURL(blob);
对于跨域的深度理解 跨域的深度理解为了安全着想浏览器会设置同源安全策略即不在同一个域名下的资源就不能够互相访问要解决这个问题方法有很多 ,但大致分为两类:1、是服务端进行设置默认允许某些域名跨域访问2、从客户端入手想办法绕开同源安全策略主要介绍从客户端入手,用代理的方式实现跨域访问的原理举个例子:用node起了一个localhost:8080的服务器,那么在这个服务器下访问的网页也就是默认在8080这个域下面,假设服务端所在的域是www.njc.com,这样通过ajax发送请求的话,由客户端直接传过去的就是一个
函数中的剩余参数rest 函数中的剩余参数<script> function fun(name, age, ...arr) { console.log(...arr);//11 22 33 44 66 88 console.log(arr);//[11, 22, 33, 44, 66, 88] return { name, age, arr } } let {name, age, arr} = fun
原生js中attributes属性 原生js中attribute属性<div id="box" title="盒子" class="big"></div><script> let box = document.getElementById('box'); let attrs = box.attributes; console.log(attrs); /* NamedNodeMap 0: id 1: title 2: class cl
闭包的两种表现形式 闭包概念:一个函数和它的周围状态的引用捆绑在一起的组合代码示例:<script> // 1、函数作为返回值 function test() { const a = 1; return function() { console.log('a', a); } } const f = test(); const a = 2; f();//a 1 // 2、函数作为参数传入 fu
react项目打包 react项目打包npm run build会生成一个build文件夹,打包后的内容都在这里面了要是自己想要看打包生成的项目,此时可以使用一个库serve全局安装此库npm i serve -g运行的时候,直接serve 后面跟上文件夹的名称...
react之懒加载lazyLoad react之懒加载lazyLoad路由组件的懒加载lazyLoadimport {lazy, Suspense} from 'react'//1、通过React的lazy函数配合import()函数动态加载路由组件 ===》 路由组件代码会被分开打包const Login = lazy(() => import('@/pages/Login'))//2、通过<Suspense>指定在加载得到路由打包前显示一个自定义loading界面<Suspense fallback
react之hooks react之hooks1、state Hookstate Hook让函数组件也可以有state状态,并进行状态数据的读写操作语法:const [xxx,setXxx] = React.useState(initValue);useState()说明: 参数:第一次初始化指定的值在内部操作; 返回值:包含2个元素的数组,第一个为内部当前的状态,第二个为更新状态值的函数useXxx()的2种写法: setXxx(newValue):参数为非函数的值,直接指定新的状态值,内部用