js进阶语法与应用
飞鹰3995
这个作者很懒,什么都没留下…
展开
-
js中的函数嵌套和闭包
小编已经有一段时间没有更新文章了,最近一直在考虑接下来要更新什么内容。接下来,小编会围绕以下三个方面更新文章。实际项目中遇到的问题和解决方案、Vue源码解析、代码重构、关于数据可视化。小编也会按照这个顺序,逐步的去更新。期待着一起进步。今天就先和大家一起聊一聊我理解的闭包。在聊这个问题之前,先了解一下变量的定义域。在js中,变量定义域有全局作用域和局部作用域之说。es6中新出现的变量声明关键字,就是为了解决部分变量作用域混乱引入的。全局作用域在这就不谈了。主要说说函数的作用域。一、作用域简单转载 2021-11-12 17:26:59 · 621 阅读 · 0 评论 -
ES6中神奇的const
小编在之前的文章更新过关于es6中,定义变量的关键字,let和const,今天在找资料的时候,发现了const定义变量的新特点,今天特来用一篇文章来记录下我们都知道const是用来定义常量的,定义之后不可以改变,但是这个不可改变,只限于基本数据类型。在用const定义后的基本数据类型变量,再改变的时候就会出现问题,比如constnum1=2num1=3//UncaughtTypeError:Assignmenttoconstantvariable.对于引用数据类型,主...原创 2021-08-16 22:25:34 · 118 阅读 · 0 评论 -
Vue3实现Hello和Counter
小编之前的文章都是js和ts基础,基础完事之后,是时候向前端的主流框架发起挑战了,接下来小编主要针对现在比较流行的Vue3结合实例,和大家一起探讨一下Vue的基本语法和Vue3中提供的一些新特性,希望小编可以和大家一起成长,一起在前端的路上,越走越远。我们常见的html模板,基本都是这样的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ht原创 2021-08-14 13:12:38 · 223 阅读 · 0 评论 -
ES11中的空值合并运算符
小编在自己的朋友圈和一些论坛中,都有看到一些前端或者后端被js中判断折磨到起飞,特别是针对空字符串和数字0,在js中,以下6种情况是false undefined null false 0 NaN ''或""(特别的,当字符串中间全是空格的时候,会判断为true) 为了解决这个痛点,es11中引入空值合并运算符。使用??运算符之前我们为了兼容性好一些,会写这样的代码const b = 2const a = b || 5 // 相当于给a一个原创 2021-08-06 22:15:45 · 160 阅读 · 0 评论 -
ES11中的globalThis和可选链
小编今天更新的这两个新特性主要是编码可以更方便,同时也增加了兼容性,globalThis主要是提供了一个标准的方式去获取不同环境下的全局对象。可选链主要是增加了对象中获取内容的安全性。一、globalThis对于WEB(浏览器)环境下,js中的全局变量是window/self,相信大家对于window了解的比较多,也比较熟悉,小编也是今天才知道self的这个对象,从目前来看,可以认为是一样的。下面是延时实例setTimeout(() => { console.log('lil原创 2021-07-31 15:15:34 · 345 阅读 · 0 评论 -
ES11的Promise.allSettled
小编最近因为一些自己的问题,没有更新文章。今天刚好有一点精神头,特意来更新一下,今天和大家一起探讨的是Promise对象中的allSettled方法,主要是为了解决多次异步请求的时候,中途出现失败的痛点处理。在之前的文章中,小编更新的Promise.all方法,这个主要是为了优化多次请求的情况,可以写成这样。Promise.all([ Promise.resolve({ code:200, data:[1,2,3] }), Promise.r原创 2021-07-27 22:14:45 · 406 阅读 · 0 评论 -
ES11中的bigint
上一周小编因为自己的事情,没有持续更新,还望大家谅解,趁着今天醒得早,小编继续和大家学(si)习(ke)es11中的新语法。大家还可以关注我的微信公众号,蜗牛全栈。在js中,对整数类型的数据,存在着最大极限,这个极限就是const max = 2**53 // js幂运算console.log(max) // 9007199254740992同样,为了计算的准确性,js也定义了最大安全整数,这个整数是console.log(Number.MAX_SAFE_INTEGER) // 900原创 2021-07-25 21:32:04 · 251 阅读 · 0 评论 -
ES11中matchAll
小编今天和大家继续研究es11,今天的这个方法主要是针对字符串匹配上,之前匹配字符串的时候,更多的是使用正则表达式,就像这样。大家还可以关注我的微信公众号,蜗牛全栈。const str = ` <html> <body> <div>第一个div</div> <p>这是个p</p> <div>第二个div</div>原创 2021-07-23 15:09:49 · 515 阅读 · 0 评论 -
ES10对象和Symbol扩展
今天和大家一起学习es10中对象和Symbol的扩展,虽然这两个特性在实际项目应用的较少,至少先混个脸熟,看到大佬的代码的时候,知道有这么个事,也是一件值得骄傲的事情么。大家还可以关注我的微信公众号,蜗牛全栈。一、JSONsuperseteval('var str="school";function foo(){return str;}')console.log(foo()) // schooleval('var str="school";\u2029 function foo(){re.原创 2021-07-02 08:26:55 · 116 阅读 · 0 评论 -
ES10toString()方法修订和Catch Binding
小编今天继续和大家一起探索es10中的新特性,针对第一个toString方法的修订,可以通过下面这个例子来熟悉。大家还可以关注我的微信公众号,蜗牛全栈。function foo(){ // 这是一段注释 console.log("lilei")}console.log(foo.toString()) // function foo(){// // 这是一段注释// console.log("lilei")// }今天的第二个特性,通过名称看着可能挺唬人原创 2021-07-01 08:54:04 · 114 阅读 · 0 评论 -
ES10中的对象拓展
小编前一段时间更新了一系列关于ts的语法,是看到github上面关于ts的项目越来越多,包括现在前端的主流框架,像React/Vue/Angular,但ts最终还要被编译成js执行,小编看到手上还有一些关于js的课程和资料,继续与大家探讨js中新特性,能给我们平时工作带来哪些方便。大家还可以关注我的微信公众号,蜗牛全栈。今天小编要更新的是es10对于对象的扩展,是一个在Object下面的静态方法,Object.fromEntries(),这个方法和之前的Object.entries()是两个互逆的操作。原创 2021-06-30 08:07:07 · 102 阅读 · 0 评论 -
ES9对象和Promise的扩展
今天小编更新的这篇文章相对比较好理解,一个是对对象的扩展,和之前es6中的数组扩展很类似,另外对Promise的扩展,也在query中的ajax类似,内部没有很多,所以小编将这两块内容放在一起更新。期待着大家一起进步。大家还可以关注我的微信公众号,蜗牛全栈。一、对象拓展1、es6中的数组拓展运算符const arr1 = [1,2,3]const arr2 = [4,5,6]const arr3 = [...arr1,...arr2] // [1,2,3,4,5,6]2、克隆对象原创 2021-06-29 08:50:48 · 86 阅读 · 0 评论 -
ES9中的异步迭代
从今天开始,小编和大家一起聊一聊ES9中的新特性和新语法。这些语法和新特性在小编实际项目用的时候,用到的并不多,这篇之后,小编准备把文章作为类似字典的东西,以后项目用到的,或者其他人写代码的时候,至少先混个脸熟。就像我前天看到的一句话一样,好代码50%是给机器运行的,另50%是给人看的,相信大家以后写的代码会越来越好,小编会和大家一起进步。大家还可以关注我的微信公众号,蜗牛全栈。一、同步迭代器:在之前的文章中,小编更新过一篇关于es6关于可迭代协议迭代器协议的文章,可以看看小编的这篇文章《ES6中的..原创 2021-06-28 10:47:54 · 133 阅读 · 0 评论 -
ES8中的字符串扩展
今天小编在视频中发现了es8中的字符串的拓展,这篇文章涉及到的新语法和新内容,但是个人感觉还是在一些实际中的用途,还是能方便很多的。大家还可以关注我的微信公众号,蜗牛全栈。一、padStart():字符串的实例方法,在字符串前添加指定字符串,第一个参数是必传的,将字符串扩展后的总长度,第二个参数是可选参数,不传默认是空字符串。const str = "school"console.log(str.padStart(8,"x")) // xxschool二、padEnd():字符串的实例方法,原创 2021-06-27 09:20:13 · 115 阅读 · 0 评论 -
ES8对对象的扩展
小编不知道大家的五一节过的怎么样,反正对于小编来说,收获还是有一些的,今天小编继续更新js中关于对象的一些新特性,期待着和大家一起进步。大家还可以关注我的微信公众号,蜗牛全栈。一、Object.values():获取对象内值的数组const obj = { name:"lilei", web:"www.baidu.com", course:"math"}console.log(Object.values(obj)) // ["lilei","www.baidu.com"原创 2021-06-26 09:24:07 · 99 阅读 · 0 评论 -
ES8中的Async和Await
刚接触js的时候,小编以为js就是用来做交互和效果的,后来随着接手项目的增加,才知道js有更重要的用途就是用来前后端数据交互,说到数据交互,就少不了异步的问题,之前小编也有几篇文章是说异步操作的,今天,小编和大家一起探讨现在很流行的方案,也就是之前说的generator的语法糖——async和await解决方案。大家还可以关注我的微信公众号,蜗牛全栈。一、基本用法// 返回的Promise对象async function foo(){ return "hello world" // Pr原创 2021-06-25 08:06:44 · 129 阅读 · 0 评论 -
ES7扩展
前一段时间小编一直在更新javascript es6版本的部分新语法和新特性,鉴于现在js一直在更新,接下来小编将和大家一起进步,一块探究js的新特性。今天小编就和大家一起来看看es7更新的语法和新特性。一、includes1、基本用法let arr = ['es6','es7','es8']console.log(arr.includes('es7')) // true 返回值是布尔,判断数组里面是否包含某个值2、参数:第一个参数是要查找的元素,第二个元素是从第几个元素开始查找l原创 2021-06-24 14:35:50 · 104 阅读 · 0 评论 -
ES6中的Module与Interator
小编今天在用Vue做项目的时候,发现组件中有import和export,刚好今天看到相关的语法介绍和一些实例,下面小编就和大家一起进步。对于模块化规范,在es6出现之前,有以下三种规范,分别是Common.js(Node.js)、AMD(require.js)、CMD(sea.js)。大家还可以关注我的微信公众号,蜗牛全栈。一、基本用法// module.jsexport const a = 9export const b = "abc"export const sum = (x,y) =&原创 2021-06-23 07:13:14 · 86 阅读 · 0 评论 -
ES6中的Generator函数
今天小编发现一个es6中的新概念,同时也接触到了一个新关键字yeild,下面我就简单和大家聊聊es6中的generator函数。大家还可以关注我的微信公众号,蜗牛全栈。在后续的React中间件会有相应的应用。一、函数声明:在function和函数名之间存在星号,并使用关键字yeildfunction* foo(){ for(let i = 0;i<3;i++){ console.log(i) // 什么也没输出 yield i }}con原创 2021-06-22 12:12:47 · 124 阅读 · 0 评论 -
ES6中的Promise
小编在项目中遇到这样的需求,就是很多个异步请求,下一个请求依赖上一个请求的请求结果,这个时候,在es5中的解决方案就是不停的在上一个请求成功的时候,根据返回值 ,再进行请求。倒是也能解决需求,但是写代码的时候,就会写成这样:大家还可以关注我的wei xi...原创 2021-06-21 09:31:48 · 98 阅读 · 0 评论 -
ES6中的Proxy
第一次接触proxy这个单词的时候,还是在设置浏览器代理的时候 ,今天注意到在es6新语法中,也出现了这个词,才准备研究研究这个神奇的东西是怎么用的。学习之后,在小编的简单理解,就和小区门口站岗的保安类似,满足条件才允许放行。在数据中,就是在获取值或者设置值的时候有个规则。大家也可以噶晕不住一、es5处理代理语法...原创 2021-06-20 21:32:32 · 202 阅读 · 0 评论 -
ES6中的字符串
字符串在编程语言中,一直是使用率很高的数据,虽说函数在js语言中是一等公民,但是字符串,怎么也能算得上是千年老二,下面我就一起和大家探讨一下在es6中的一些新用法和特性,特别是在字符串拼接的时候,会解放作为程序员的眼睛和双手。一、模板字符串:用`替换传统的单引号或双引号1、传统字符串拼接...原创 2021-06-19 14:27:46 · 572 阅读 · 1 评论 -
ES6中的Map
今天小编和大家一起探讨一下引用类型中的map,在其中会有一些map与数组联合应用,还有和map类似的weakmap类型的说明,这篇文章同时也增加了一些操作数组的办法和实际应用。一、map的声明原创 2021-06-18 10:14:48 · 193 阅读 · 0 评论 -
ES6中的新数据类型——Symbol
今天小编和大家来聊一聊es6中新增的一个原始数据类型Symbol。在es5中原始数据类型(基本数据类型)有以下六种:Undefind、Null、Bool、String、Number、Object。今天结合实例和大家一起探讨一下这个神奇的Symbol。大家还可以关注我的wei in x一、基本声明方式1、方式一...原创 2021-06-17 10:01:31 · 155 阅读 · 0 评论 -
ES6中的类
昨天小编更新了一下关于es5中的类的处理,也顺便将es5中类的知识和语法简单回顾一下,今天小编将es6中的与类相关的语法和大家一起探讨一下。在es6中,对类的实现主要是引入关键字class和extends。下面是一些例子。大家也ke一、类的创建...原创 2021-06-16 06:11:09 · 248 阅读 · 0 评论 -
ES5中的类
之前小编对于类和类的基本特征(所谓的封装、继承、多态)理解一直不是很到位,同时在实际项目应用中也用的比较少,今天小编就结合ES5中的基本用法和大家聊聊,希望小伙伴会在这篇文章有属于自己的收获,并能够在今后的项目中有实际应用。大家也可以关注我的微信号,一、类的基本用法...原创 2021-06-15 11:00:39 · 259 阅读 · 0 评论 -
ES6深拷贝与浅拷贝
今天小编和大家一起探讨js中深拷贝和浅拷贝,简单一点理解就是,对于引用数据类型,深拷贝是数据引用地址不同,在改变一个数据的时候,不会影响另一个数据。而浅拷贝刚好相反。两个数据引用的是同一个堆内存地址,一个数据改变的时候,会影响另一个相关的数据。在之前的章节中,小编提起过关于对象的复制的方法,Object.assign(),但是这个方法只是针对对象的浅拷贝。...原创 2021-06-14 19:04:37 · 130 阅读 · 0 评论 -
ES6对象扩展
今天小编和大家一块聊聊ES6中对对象的扩展语法,还有一些常用的语法,相信在不久的将来,肯定会在Vue中看到对象的影子。大家也可以关注我的微信公众号,蜗牛全栈。 一、属性的简洁表示法:主要针对值用变量表示,并且键和值的变量一致 1、普通对象声明let obj = { name:"lilei", age:34}console.log(obj)复制代码2、简洁表示法let name = "lilei"let age = 34let obj = { name,原创 2021-06-11 15:46:02 · 74 阅读 · 0 评论 -
ES6箭头函数
之前在看Vue2.0的时候,就被很多的箭头函数困扰,一直不知道是怎么回事,虽然箭头函数四个字在我耳边一直转圈,今天小编整理整理箭头函数里面的常见用法和表现形式,在这个Vue3.0已经到来的一段时间,希望大家也可以一起搭上箭头函数的大风飞起来。大家也可以关注我的wei xin一、es5中函数的声明方式...原创 2021-06-10 14:36:07 · 124 阅读 · 0 评论 -
扩展运算符与rest参数
今天小编来介绍一个平时接触较少的,但是却给平时编码带来很多方便的ES6语法——三个点。这三个点主要是针对数组的格式转换。一、扩展运算符:把数组或者类数组展开成逗号隔开的值实例1: function foo(a,b,c){ console.log(a,b,c)}let arr = [1,2,3]foo(...arr) // 1 2 3console.log(...arr) // 1 2 3实例2:连接两个数组 ...原创 2021-06-09 14:32:47 · 407 阅读 · 0 评论 -
ES6函数参数
在一些开发语言中,都把函数作为语言的一等公民。对于编写代码来说,函数可以很容易的把类似的代码放在一起,使用的时候统一调用,下面我就简单介绍一下ES6中,对函数参数的处理和新增内容。一、参数默认值1、es5中处理function foo(x,y){ console.log(x,y)}foo("hello") // hello undefind function foo(x,y){y=y||"world"//可以在es5中实现默认参数功能,...原创 2021-06-08 15:11:36 · 770 阅读 · 0 评论 -
ES6中的数组方法扩展
上一篇文章小编简单介绍了在ES6中,一些常用的方法和一些简单的应用,在这篇文章中,小编将针对ES6中数组常用方法进行扩展,相信经过这篇文章之后,每一位小伙伴下班时间会有所提前,就算从原来的996变成995.9也好。一、伪数组/类数组:不是真正意义上的数组,含有length属性,不具有数组的方法let oDiv = document.getElementsByTagName("div")console.log(oDiv); // HTMLCollectionlet oDiv2 = docume原创 2021-06-07 13:53:53 · 150 阅读 · 0 评论 -
ES6中的数组常用方法
数组在JS中虽然没有函数地位那么高,但是也有着举足轻重的地位,下面我就结合这ES5中的一些常用的方法,与ES6中的一些方法做一些说明和实际用途。一、ES5中数组常用方法:1、循环遍历。let arr = [1,2,3]for(let i=0;i<arr.length;i++){ console.log(i) // 1 2 3 }复制代码2、forEach:没有返回值,不能使用break和continue。只是针对每个元素调用Func。let arr = [1,2,原创 2021-06-06 15:11:31 · 196 阅读 · 0 评论