- 博客(34)
- 收藏
- 关注
RSS订阅原创 ES7新增特性array.includes以及指数运算符
在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为 -1。在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true， 否则返回false。指数（乘方）exponentiation运算符在ES7之前，计算数字的乘方需要通过 Math.pow 方法来完成,在ES7中，增加了 ** 运算符，可以对数字来计算乘方。...
2022-06-28 10:47:32
483
1
原创 ES6新增数据结构Set与Map（包括WeakMap/Set等)
ES6之前，我们存储数据的结构主要有两种:数组、对象。在ES6中新增了另外两种数据结构:Set、Map，以及它们的另外形式WeakSet、WeakMap。功能：数组去重Set的属性对Set进行遍历Set中添加对象WeakSet的作用和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。对象的引用在 JavaScript 中是强引用，也就是时，那么这个变量或常量就是强引用，这个对象就不会被回收。如果对象若被弱引用所引用，则被认为是不可访问（或弱可访问）的，并因
2022-06-28 10:29:47
399
原创 Vue快速入门demo（计数器）并对比React
Vue与React本质上是一个javascript库，不用想的特别复杂，我们就把它理解成一个已经帮助我们封装好的库。npm下载量这里有个地方可以简写计数器，如果用传统的dom开发传统的dom开发我们也称之为命令式编程，用户给予指令，机器一步一步做。计数器，使用vue开发Vue与React采用的是声明式编程。直接将内容写在template里面，甚至连高亮都没有，这样非常糟糕！所以我们可以采取以下的方式。或者采取这样的方式,包裹一个template标签，注意，template会被渲染，但是没有任
2022-06-26 11:27:30
267
原创 JS中新增的数据类型Symbol
Symbol是ES6中新增的一个基本数据类型，翻译为符号。在ES6之前，对象的属性名都是字符串形式，那么很容易造成属性名的冲突。比如原来有一个对象，我们希望在其中添加一个新的属性和值，但是我们在不确定它原来内部有什么内容的情况下， 很容易造成冲突，从而覆盖掉它内部的某个属性，比如开发中我们使用混入，那么混入中出现了同名的属性，必然有一个会被覆盖掉。Symbol就是为了解决上面的问题，用来生成一个独一无二的值。...
2022-06-25 14:31:46
372
原创 ES6中的展开运算符
可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开，还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。
2022-06-25 12:05:26
926
原创 ES6中函数的默认参数与剩余参数
在ES6之前，我们编写的函数参数是没有默认值的，所以我们在编写函数时，如果有下面的需求之前我们是这么做的。这种写起来很麻烦，而且代码阅读性比较差，更糟糕的是它有bug。关于bug:比如传0进去，它会默认当初false，指向或后面的表达式，这里就还是aaa。给对象传默认值注意点1：有默认值的形参最好放最后注意点2：有默认值的length属性函数的剩余参数ES6中引用了rest parameter，可以将不定数量的参数放入到一个数组中。如果最后一个参数是 … 为前缀的，那么它会将剩余的参数放到
2022-06-24 22:36:17
157
原创 ES6的模板字符串
在ES6之前，如果我们想要将字符串和一些动态的变量(标识符)拼接到一起，是非常麻烦和丑陋的。首先，我们会使用 `` 符号来编写字符串，称之为模板字符串。其次，在模板字符串中，我们可以通过 ${expression} 来嵌入动态的内容。标签模板字符串模板字符串还有另外一种用法:标签模板字符串(Tagged Template Literals)。...
2022-06-24 21:34:02
689
原创 ES6中的解构语法
ES6中新增了一个从数组或对象中方便获取数据的方法，称之为解构Destructuring。我们可以划分为数组的解构和对象的解构。知识点：对象的解构知识点:
2022-06-24 09:21:27
220
原创 ES6新特性之字面量增强写法
ES6中对 对象字面量 进行了增强，称之为 Enhanced object literals(增强对象字面量)。字面量的增强主要包括以下几个部分：
2022-06-24 09:00:39
168
原创 探讨JS中的多态
维基百科对多态的定义:多态(英语:polymorphism)指为不同数据类型的实体提供统一的接口，或使用一个单一的符号来表示多个不同的类型。这看起来还是非常抽象的！不同的数据类型进行同一个操作，表现出不同的行为，就是多态的体现。从这个定义来看JS是一定存在多态的。传统面向对象的多态是由三个前提组成的。下面我们来看一个案例JS的多态JS的多态相对传统面向对象的原因如JAVA而言，没有那么复杂。JS中当对不同的数据类型执行同一个操作时，如果表现出来的行为不一样，那么就是多态的体现 。这其实就是一种多态的表
2022-06-23 19:50:18
1739
原创 ES6中类的使用
按照构造函数形式创建类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解。在ES6(ECMAScript2015)新的标准中使用了class关键字来直接定义类。但是类本质上依然是前面所讲的构造函数、原型链的语法糖而已。所以学好了构造函数、原型链更有利于我们理解类的概念和继承关系。那么如何来使用class来定义一个类呢？可以观察一下类的特点，它也是有原型的。类的构造方法通过类的构造方法，可以把值传入类中。这里和构造函数有些许不同，是依靠来实现的。类中方法的定义类中的方法主要有普通方法，访问器方
2022-06-22 12:41:36
1525
原创 JS中原型的一些判断方法
判断某个属性是否在自己上面，而不是在原型上（hasOwnProperty）var obj = { name : 'why', age : 18}var info = Object.create(obj,{ //第二个属性传的是属性描述符 address:{ value:'北京市', enumerable:true }})console.log(info); //{ address: '北京市' } console.log(inf
2022-06-22 08:42:05
1016
原创 JS中的继承（下）
这种模式要从道格拉斯·克罗克福德(Douglas Crockford，著名的前端大师，JSON的创立者)在2006年写的一篇文章说起: Prototypal Inheritance in JavaScript(在JS中使用原型式继承)。在这篇文章中，它介绍了一种继承方法，而且这种继承方法不是通过构造函数来实现的.为了理解这种方式，我们先再次回顾一下JavaScript想实现继承的目的:重复利用另外一个对象的属性和方法。以我上一篇文章中的例子来说，也就是student对象的原型指向了person对象。没读过
2022-06-21 20:50:17
123
原创 JS中的继承（上）
因为一个类（构造函数）中可能存在大量公用的属性和方法，利用对象的继承可以简化代码。如下的案例如何实现继承呢？利用原型链，解决方案1可以利用原型链，只需一行代码,大家画个内存图就很好理解了。该方案的弊端打印stu对象，继承属性看不到比如stu.name，因为原型上的属性是打印不了的。如果创建出两个stu对象，两个对象会相互影响，看下面的代码在实现类的过程中都没有传参数，因为无法传参（子类创建出的实例属性无法传到父类中）。constructor stealing(借用构造函数)，解决方案
2022-06-21 18:23:39
81
原创 JS中的原型链(超清晰理解)
原型链，所有的原型构成了一个链条，这个链条我们称之为原型链（prototype chain)。如果我们执行下面这段代码,因为没有定义address这个属性，程序结果理所当然的是undefined。这个时候经历了什么呢？JS引擎线从Obj.address里寻找，发现没有找到，然后接着去找obj.__ proto __ 里面寻找，发现还是没找到，所以结果为undefined。我们可以给obj.__ proto __ 赋值或者这样接着套娃js引擎会顺着这些原型不断的往上找，直到address这个属性。这些
2022-06-20 22:44:21
17238
原创 docker中image的基础使用
docker的镜像的或许方式主要由如下几种：最有名的就是docker hub了。还要一个就是红帽旗下的quay.lo。如果是个人用户使用dockerhub的时候会有一些限制（传输速率，拉取次数）。dockerhub官网在docker hub中rigistry有两种一种是verified content(官方认证的)，还有一种是community(社区的)。尽量拉取官方认证的。像官网这样，docker pull nginx就可以拉取了。查看所有的镜像删除镜像显示某镜像的详细信息导出镜像导
2022-06-20 17:25:47
783
原创 docker中container的基础使用
docker的镜像与容器docker的镜像，其实是一种read-only（只读）文件，这个文件包含文件系统，源码，库文件，依赖，工具等一些运行application所需要的文件。容器container其实是一个运行中的docker image，它其实是复制了image并在image最上层加上了一层read-write。一个image可以创建多个container。docker image我们可以自己去制作，也可以从registry（资源网站）上拉取，registry中最有名的就是docker hub了
2022-06-19 21:07:17
1174
原创 三种系统下Docker的安装
容器(container)指的是一种技术，而Docker只是容器技术的实现，Docker也是容器技术中最成功的一种实现。过多的概念这里不太多赘述，笔者主要在这里讲解一下docker的安装。https://www.docker.com/products/docker-desktop/ 下载docker桌面版，在终端中输入docker version可以查看到类似如下的信息即为安装成功。https://get.docker.com/ 用户将上面的shell脚本下下来就可以了在windows上进行安装
2022-06-19 18:21:33
485
原创 JS批量创建对象的方案与构造函数
如果我们现在希望创建一系列的对象:比如Animal对象，Person对象，采取什么样的方式比较好呢。本文列举常见的几种方向并详细分析它们的优劣性。这个方法是最好想到，也是最常见的。不过效率极低，创建同样的对象时，用户需要编写重复的代码。工厂模式创建对象工厂模式其实是一种常见的设计模式，通常我们会有一个工厂方法，通过该工厂方法我们可以产生想要的对象。工厂模式的缺点如果读者运行代码1后，会发现typeof打印的是Object。工厂模式的缺点在于类型问题，只能打印Object，而不能确定是哪个Object
2022-06-16 11:35:47
349
原创 JS中对象的原型与函数的原型
JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]]（原型），这个特殊的对象它要么为 ，要么就是对另一个对象的引用。该对象被称为“原型”。每个对象都有[[prototype]],这个属性可以称之为对象的原型!!!（隐式原型） (看不到，不改，不用)查看对象的原型那要如何查看这个原型呢？早期的ECMA是没有规范如何去查看[prototype]]。有两种方式。浏览器给我们的对象中提供了一个属性，可以让我们查看一下这个原型对象。不过一般在测试阶段才会这么用。方式二 ES5提供
2022-06-14 16:58:05
692
原创 对象属性描述符的一些补充
在我的上一篇文章里介绍过了对象属性描述符，没看过的同学可以在这里访问JS中的对象属性修饰符，全篇干货。本文是是对于对象属性描述符以及对象方法的一些补充。如果用户希望获取某一特定属性，或者所有的属性描述符可以参考代码1不过像这种代码一般只有框架的源码才会出现。下面是关于对象一些方法的补充禁止对象配置/禁止删除对象里面的属性冻结对象，使其不能修改这也就是使writable属性变为false...
2022-06-12 14:35:45
54
原创 JS中的对象属性修饰符（Object.defineProperty）
如果我们希望对JS中的一个属性进行比较精确的操作控制就需要使用到，通过属性描述符可以精确的添加或者修改对象的属性。属性描述符需要使用 Object.defineProperty 来对属性进行添加或者修改。Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。它可以接受三个参数它的返回值属性描述符分为数据属性以及存取属性。数据描述符不可以有与。表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性
2022-06-08 19:19:36
866
原创 JS函数的柯里化
只传递给函数一部分参数来调用它，让它返回一个函数去处理剩余的参数，这个过程就称之为柯里化。这里sumKe就是sum1的柯里化实现使用箭头函数简化sumKe函数柯里化的好处职责单一在函数式编程中，我们往往希望一个函数处理的问题竟可能的单一，而不是讲一大堆的过程交给一个函数来处理。要符合设计模式中的单一职责原则。我们可以将每次传入的参数在单一的函数中进行处理，处理完后在下一个函数中再使用处理后的结果。我们对上面的代码1做一个修改，传入的参数分别‘x + 2’ ，‘y * 2’, ‘z ** 2(z
2022-06-06 16:52:42
975
原创 JS中的箭头函数
函数式编程中有一个非常重要的概念叫纯函数（pure function），javascript符合函数式编程的范式，所以也就有纯函数的概念。在React开发中，纯函数是被多次体积的，react就要求组件必须像是一个纯函数，redux中有一个reducer的概念，也要求必须是一个纯函数。如果我们在执行一个函数时，除了返回函数值之外，还对调用函数产生了附加的影响。（比如修改了参数，修改了全局变量等），这就是造成了副作用。纯函数在执行的过程中就是不能产生这与的副作用，因为副作用往往是bug的温床，很不好。首先来看s
2022-06-06 16:15:38
1024
原创 JS中的纯函数
函数式编程中有一个非常重要的概念叫纯函数（pure function），javascript符合函数式编程的范式，所以也就有纯函数的概念。在React开发中，纯函数是被多次体积的，react就要求组件必须像是一个纯函数，redux中有一个reducer的概念，也要求必须是一个纯函数。如果我们在执行一个函数时，除了返回函数值之外，还对调用函数产生了附加的影响。（比如修改了参数，修改了全局变量等），这就是造成了副作用。纯函数在执行的过程中就是不能产生这与的副作用，因为副作用往往是bug的温床，很不好。首先来看s
2022-06-05 17:00:24
1488
1
原创 JS中的this到底指的哪？
this到底指的是哪，这个问题困扰了不少前端工程师。笔者在开发Vue项目的时候，时常因为this碰到各种奇奇怪怪的问题。今天笔者会通过本文细致的剖析this。在浏览器中this指向的是window,大家可以自行测试。在node环境中，this指向的是{} 。但是，开发中很少直接在全局作用于下去使用this，通常都是在函数中使用。所有的函数在被调用时，都会创建一个执行上下文，这个执行上下文中存放着函数的调用栈，AO对象等，（不了解这些概念的可以去看看笔者之前的文章）。this也是这些记录中的一个（执行上下文
2022-06-04 20:39:16
170
原创 JS中闭包是个啥？
闭包的英文叫做closure，也就是关闭的意思。它来自于Scheme这个编程语言，js在设计中也大量的借鉴了Schema在计算机科学和javascript中都有对它的定义。这个程序就构成了闭包。foo函数执行完以后，FEC（函数执行栈）将此函数立刻释放。但foo这个函数的AO中仍然保存了一个变量name以及foo的地址。fn在调用的时候，实际上调用了bar函数，这个函数在找name变量的时候顺着parentscope（作用域链）向上找到了foo函数AO中的name。并使用了它的值。（如果你看不懂我在文章
2022-06-02 18:18:13
162
原创 webpack小demo教你快速上手loader
loader是webpack中非常重要的一个部分。本文会以最简单的css-loader为例，教大家最快上手loader。
2022-03-30 15:53:50
673
原创 小demo快速上手webpack
本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具，本文通过一个小demo教大家快速上手webpack
2022-03-27 23:11:43
744
原创 JS的内存管理
什么是内存管理不管使用什么样的编程语言，在代码的执行过程中，都需要给它分配内存。有些语言会让我们手动管理，有些会自动帮助我们管理内存。内存管理的生命周期分配申请你需要的内存（申请）使用分配的内存不需要使用时，对其进行释放 （防止栈用尽等问题）不同编程语言一、三步的不同实现手动管理：比如C,C++ 需要手动给管理（maloc和free函数）自动管理：比如Java,JS,Python会自动帮助我们管理JS的内存管理一般而言JS在定义变量时就帮助我们自动分配内存了。JS的基本数据类型会在执
2022-03-16 18:15:15
997
原创 通过一道题 了解函数执行和作用域链
引言：在我的前一篇文章里，提到了变量在JS里是如何被存储的。本文会接着介绍函数在JS里存储的一个过程。通过文本，你会了解到作用域链、AO等概念。
2022-03-14 16:31:20
299
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人