自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(325)
  • 资源 (1)

原创 vue-router中嵌套路由的路径关系

这是一个嵌套路由,router中的属性name,path,redirect,children,index等都是固定的属性,这上面的name_CN只是一个数组中的临时的名字,实际上并不是路由的path关键字,后面会赋值给path。子路由的路径拼接再父路由path上面,即使redirect进行路径的重定向。也就是说,重定向并未改变path属性的值,那么子路由的path绝对路径=父路由path+子路由相对路径path...

2020-10-20 17:10:16 6

转载 vue中引入路径@的用法,@实际上=/src目录

一、Vue文件中引用路径的介绍1、路径 ././当前文件同级目录2、路径 …/…/当前文件上一级目录3、@符号@ 的作用是在你引入模块时,可以使用 @ 代替 /src 目录(是固定的),避免易错的相对路径。二、Vue中使用1. vue.config.js配置文件中使用 chainWebpack(config) { config.resolve.alias .set('@', resolve('src')) .set('assets', res

2020-10-20 16:19:19 30

原创 网络请求axios

一、网络请求:1.ajax:基于XMLHttpRequest(XHR),缺点是配置和调用方式太混乱,封装过程复杂,bug出现频率高。2.jQuery-Ajax:封装更好,使用更加方便。但是vue项目中不需要jQuery,若只是网络请求使用该方式那么需要引用一个jQuery,因此没有必要引用该重量级的框架。3.vue-resource:vue1.x版本的时候官方推出,但是在vue2.0宣布退出并且不再更新。因此许多特新不能同步新版本,功能也落后。4.axios:vue2.0之后官方宣布使用的方

2020-10-19 15:57:48 16

原创 ES6 Module语法的特点,export和import的用法,import加载整个模块,export default用法,export .... from ...的复合写法,新增的动态加载函数

历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的import,甚至就连 CSS 都有@import。在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务

2020-10-13 11:53:22 23

原创 前端三大框架:angular、React、Vue

前端三大主流框架的区别(一)、(二)、(三)前端三大框架,适用什么场景?三大框架的特点、优点、缺点三大框架的表格对比

2020-09-24 15:36:51 14

原创 ES6,Class的进阶(继承) extends、super关键字,Object.getPrototypeOf(),类的prototype 属性和__proto__属性,.实例的__proto__属性

1.class的继承:extends关键字Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。class Point {}// ColorPoint 继承自 Point class ColorPoint extends Point {}(1)子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行

2020-09-22 23:30:07 25

原创 ES6,代替对象原型的class基本语法(特点、constructor、添加、存取、5大注意),添加static的静态方法和静态属性,实例属性的写法,加#号的私有方法和属性,new.target方法

JavaScript 语言中,生成实例对象的传统方法是通过构造函数。function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = new Point(1, 2);Object.keys(Point.prototype)// ["toString"] 方法

2020-09-22 10:54:30 36

原创 ES6,新写法的Promise对象。两个特点,then、catch、finally实例方法,all、race、allSettled、any、resolve、reject、try对象方法,以及应用

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。...

2020-09-16 15:15:32 24

原创 ES6,对象的新增方法:Object.is(),Object.assign(),Object.keys、values、entries()、fromEntries()、获取属性、原型对象操作方法

1. Object.is()ES5比较两个运算符是否相等,有两种运算符:相等运算符和严格相等运算符。缺点:前者会自动转数据类型,后者的NaN不等于自身,以及+0等于-0。所以缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。ES6 提出“Same-value equality”(同值相等)算法,用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。不同之处只有两个:一是+0不等于-0,二是NaN等于自身。

2020-09-11 14:47:46 33

原创 OWASP Top10 Web应用中最常见的10大漏洞

Official OWASP Top 10 Document Repository§OWASP Top 10 2017 (PDF)§OWASP T10 Wiki homepage§OWASP 2017 Summit Outcomes

2020-09-10 10:42:26 46

原创 ES6,对象的扩展:对象属性名的两种表示方法、属性的枚举和遍历及规则,super关键字,对象的扩展运算符、链判断运算符、Null判断运算符

1.属性名的两种表示方法(1)简洁表示法ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。简洁表示法的特点是在对象定义中直接使用变量名。对于属性:变量foo直接写在大括号里面。这时,属性名就是变量名, 属性值就是变量值。对于方法:可以省略function关键字,方法名即函数名。注意,简写的方式不能用作构造函数,会报错。属性的简写const foo = 'bar';const baz = {foo};// 等同于const baz = {foo: foo};

2020-09-09 17:30:47 38

原创 ES6,数组的新增方法,其中7个数组的实例方法,数组的扩展运算符和将其他类数组对象转为数组,数组空位的处理对比。

1.扩展运算符(三个点)好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用。如果扩展运算符后面是一个空数组,则不产生任何效果。注意,只有函数调用时,扩展运算符才可以放在圆括号中,否则会报错。console.log(...[1, 2, 3]) // 1 2 3console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5(...[1, 2]) // Uncaught SyntaxError: Unexpected numb

2020-09-07 18:02:15 34

原创 ES6 函数参数(默认值的设置,默认值位置,参数作用域),函数的2个属性(name和length),箭头函数的4大注意事项

1.函数参数的默认值ES5,默认值的写法:function log(x, y) { y = y || 'World'; // 改进为if (typeof y === 'undefined') { y = 'World';} console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello WorldES6 允许为函数的参数设

2020-09-03 21:30:16 40

原创 ES6,Number类型和新增的BigInt数据类型,以及数值精度丢失的问题

目录一、Number数据对象的ES6新方法二、数值的精度四、Math对象的拓展五、BigInt 数据类型一、Number数据对象的ES6新方法1.Number.isFinite()用来检查一个数值是否为有限的(finite),即不是Infinity。注意,如果参数类型不是数值,Number.isFinite一律返回false。Number.isFinite(15); // trueNumber.isFinite(0.8); // trueNumber.isFin..

2020-09-03 21:00:24 146

原创 ES6,字符串一些新增方法:检查是否存在; repeat(); 首尾填充; 首尾去不可见的空白符号

ES5的一些字符串方法1.includes(), startsWith(), endsWith()传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。includes():返回布尔值,表示是否找到了参数字符串。支持第二个参数,表示开始搜索的位置。 startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。支持第二个参数,表示开始搜索的位置。 endsWith():返回布尔值,表示参数字符串是否在原字

2020-09-03 11:32:59 32

原创 ES6,解构赋值的6大种类,解构赋值中圆括号的注意事项以及解构赋值的常见7大应用

数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值 圆括号问题 用途

2020-09-02 16:01:33 39

原创 ES6,块级作用域(let和const的详解),全局对象逐渐脱钩顶层对象属性,使用globalThis对象指向顶层对象,

ES6声明变量有6种方法:var、function、let、const、class、importES5声明变量有2种方法:var、function目录let命令:块级作用域:const命令:顶层对象属性和全局变量的关系:globalThis对象:let命令:声明变量,只在let命令所在的代码块内有效。在let命令所在的代码块内有效。特别的对于for循环,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域 不存在变量提升,它所声明的变量一定要

2020-09-02 15:57:37 61

原创 underscore单独对Object对象的函数,函数的链式调用

underscore单独对Object对象的函数的官方文档underscore的链式调用chain_.chain(obj)Returns a wrapped object. Calling methods on this object will continue to return wrapped objects until value is called.value_.chain(obj).value()Extracts the value of a wrapped object.因为

2020-09-02 10:04:30 33

原创 underscore单独提供的许多高阶函数Functions

functions的官方文档1.bind当用一个变量fn指向一个对象的方法时,直接调用fn()是不行的,因为丢失了this对象的引用。用bind可以修复这个问题。'use strict';var s = ' Hello ';s.trim(); // 输出'Hello'var fn = s.trim;fn(); // Uncaught TypeError: String.prototype.trim called on null or undefined// 正确的是调用cal

2020-09-02 09:43:56 42

原创 underscore库单独对Array的方法(详见参考文档)

underscore为Array提供了许多工具类方法,可以更方便快捷地操作Array。

2020-09-02 09:25:47 16

原创 underscore第三方库对collections(集合类对象)进行高阶函数的使用:map,filter,every,some,max,min,groupBy,shuffle,sample

Array有map()和filter()方法,而Object没有这些方法;同时,低版本的浏览器例如IE6~8也没有这些方法。方法一,自己把这些方法添加到Array.prototype中,然后给Object.prototype也加上map()等类似的方法,具体使用函数共用。方法二,直接找一个成熟可靠的第三方开源库,使用统一的函数来实现map()、filter()这些操作。方法二,选择的第三方库就是underscore。不仅可以作用Array,还可以Object。在node.js的命令行中或者V

2020-09-01 21:39:02 40

原创 异步处理出现的错误原因和解决方法

JavaScript引擎是一个事件驱动的执行引擎,代码总是以单线程执行,而回调函数的执行需要等到下一个满足条件的事件出现后,才会被执行。function printTime() { console.log('It is time!');}setTimeout(printTime, 1000); // setTimeout()函数可以传入回调函数,并在指定若干毫秒后执行console.log('done');// 运行结果 done It is time! 中间隔了1s时间

2020-09-01 20:05:20 148

转载 进程,单线程,多线程之间的比较和举例

什么是进程?当一个程序开始运行时,它就是一个进程,进程包括运行中的程序和程序所使用到的内存和系统资源。而一个进程又是由多个线程所组成的。什么是线程?线程是程序中的一个执行流,每个线程都有自己的专有寄存器(栈指针、程序计数器等),但代码区是共享的,即不同的线程可以执行同样的函数。什么是多线程?多线程是指程序中包含多个执行流,即在一个程序中可以同时运行多个不同的线程来执行不同的任务,也就是说允许单个程序创建多个并行执行的线程来完成各自的任务。多线程的好处:可以提高CPU的利用率。在多线程..

2020-09-01 17:10:20 87

原创 Error对象的处理,派生的6大类型,自定义error信息,以及Error的传递路径

在执行JavaScript代码的时候,有些情况下会发生错误。第一类是语法错误,此类错误会导致整个js文件无法执行。另一类错误统称为异常,例如,网络连接中断,读取不存在的文件,没有操作权限等;此类错误不影响错误前的代码执行。对于第一种错误,要修复程序。对于第二种错误,我们需要处理它,并可能需要给用户反馈。目录try ... catch ... finally错误对象(标准内置对象之一)常见6大错误类型throw语句抛出错误Error的传播路径使用错误处理逻辑:try ...

2020-09-01 16:25:57 50

原创 浏览器的6大常用对象:window、navigator、screen、location、document、history

浏览器对象模型(Browser Object Model (BOM)):允许 JavaScript 与浏览器对话。不同的浏览器对JavaScript支持的差异主要是,有些API的接口不一样,比如AJAX,File接口。对于ES6标准,不同的浏览器对各个特性支持也不一样。在编写JavaScript的时候,就要充分考虑到浏览器的差异,尽量让同一份JavaScript代码能运行在不同的浏览器中。浏览器提供6大对象提供JavaScript获取:window、navigator、screen、location

2020-08-31 17:37:23 64

原创 this关键字全面剖析

this绑定对象的四条规则及优先级,箭头函数this不可主动修改,一般函数和变量的this,对象方法函数的this,原型链上的this,构造函数上的this

2020-08-31 15:31:20 55

原创 对象原型的继承(使用构造函数,中间空函数,可选的数据封装表达)

上一篇说的是类和实例之间的关系类的继承:当定义一个class的时候,可以从某个现有的class继承,新的class称为子类(Subclass),而被继承的class称为基类、父类或超类(Base class、Super class)。继承有什么好处?最大的好处是子类获得了父类的全部功能。继承的第二个好处需要我们对代码做一点改进。类和类之间的关系。JavaScript由于采用原型继承,我们无法直接扩展一个Class,因为根本不存在Class这种类型。原型继承的方式:1.定义新的构造函数,并在.

2020-08-31 09:16:59 49

原创 面向对象的类和实例对应原型链,普通函数和构造函数,函数方法的共用,原型的设置初始化值

JavaScript不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程。JavaScript的原型链和Java的Class区别就在,它没有“Class”的概念,所有对象都是实例,所谓继承关系不过是把一个对象的原型指向另一个对象而已。前面所讲,JavaScript对象包括了数组Array,函数function,{}对象。JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象。,在原型对象中定义的方法,对于每个对象是通用的。例如,创建一个Array对象:va

2020-08-27 19:43:44 64

原创 JSON:一种速度快的,标准的,序列化的数据交换格式(字符串)

JSON(JavaScript Object Notation)是一种数据交换格式。在JSON出现之前,大家一直用XML来传递数据。因为XML是一种纯文本格式,所以它适合在网络上交换数据。XML本身不算复杂,但是,加上DTD、XSD、XPath、XSLT等一大堆复杂的规范以后,任何正常的软件开发人员碰到XML都会感觉头大了,最后大家发现,即使你努力钻研几个月,也未必搞得清楚XML的规范。JSON 类似 XML,因为:JSON 和 XML 都是“自描述的”(人类可读的) JSON 和 XML 都

2020-08-27 15:30:56 70

原创 字符串高效的、能复用的、简练的操作:RegExp(正则表达式)

字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在。比如判断一个字符串是否是合法的Email地址,虽然可以编程提取@前后的子串,再分别判断是否是单词和域名,但这样做不但麻烦,而且代码难以复用。正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则,凡是符合规则的字符串,我们就认为它“匹配”了,否则,该字符串就是不合法的。正则表达式也是用字符串表示的,所以,要首先了解如何用字符来描述字符。创建正则表达式对象的语法如下:va

2020-08-27 11:36:37 81

原创 Date对象的创建方式和具有的方法,时间戳的概念,时间戳转换成Date对象

在JavaScript中,Date对象用来表示日期和时间。var snow = Date(); // 得到的是string类型,当前时间snow; // "Wed Aug 26 2020 17:09:08 GMT+0800 (中国标准时间)"var now = new Date(); // 前面加new关键字表示创建对象,得到的是object类型now; // Date Wed Aug 26 2020 17:09:48 GMT+0800 (中国标准时间)now.getFullYear(

2020-08-26 17:47:13 65

原创 箭头函数和匿名函数的异同

ES6标准新增了一种新的函数:Arrow Function(箭头函数)。属于函数,所以不需要分号结尾。函数调用的时候才需要分号结尾。箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种只包含一个表达式,连{ ... }和return都省略掉了。还有一种可以包含多条语句,这时候就不能省略{ ... }和return;对于对象的返回,一定要加上小括号。// 一个参数,只包含一个表达式x => x * xfunction(x){return x*x;} // 匿名函数//

2020-08-26 16:48:48 108 2

原创 Array的高阶函数:map、reduce、filter、sort,every,find,findIndex,forEach

map函数:小写,和之前的Map数据类型不一样,这个是函数。map()方法定义在JavaScript的Array中,我们调用Array的map()方法,传入我们自己的函数,就得到了一个新的Array作为结果:'use strict';function pow(x) { return x * x;}var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];var results = arr.map(pow); // 返回平方[1, 4, 9, 16, 25, 36

2020-08-26 16:13:35 71

原创 对象的方法(函数),初识this关键字

如果一个函数不是 JavaScript 对象的方法,那么它就是全局对象的函数。var xiaoming = { name: '小明', birth: 1990, age: function () { var y = new Date().getFullYear(); return y - this.birth; }};age的value是一个对象的方法,它在内部使用了一个this关键字xiaoming.age; // functi.

2020-08-26 09:20:29 48

原创 javascript的介绍,变量let和var声明,变量作用域,解构赋值

JavaScript除了语法上有点像Java,其他部分基本上没啥关系。ECMAScript是一种语言标准,而JavaScript是网景公司对ECMAScript标准的一种实现。由于JavaScript的标准——ECMAScript在不断发展,最新版ECMAScript 6标准(简称ES6)已经在2015年6月正式发布了。ECMAScript第一版标准发布于:1997年JavaScript代码的处理方式:1.直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到<head&gt

2020-08-25 16:57:26 40

原创 Iterable类型的遍历

为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型。具有iterable类型的集合可以通过新的for ... of循环来遍历。用法如下:var a = ['A', 'B', 'C'];var s = new Set(['A', 'B', 'C']);var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);for (var x of a) { // 遍历Array console.lo

2020-08-25 15:55:03 80

原创 对象的拓展:ES6的新数据类型Map和Set,解决键值JS中对象键只能为字符串的不合理性

JavaScript的对象有个小问题,就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。为了解决这个问题,最新的ES6规范引入了新的数据类型Map。Map初始化Map需要一个二维数组,或者直接初始化一个空Map。var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);var m = new Map(); // 空MapMap具有以下方法:m.set('Adam', 67); //

2020-08-25 15:33:52 47

原创 循环,4种方式

JavaScript 支持不同类型的循环:for - 多次遍历代码块 for/in - 遍历对象属性 while - 当指定条件为 true 时循环一段代码块 do/while - 当指定条件为 true 时循环一段代码块, 需要分号结尾for 循环的语法如下:for (语句 1; 语句 2; 语句 3) { 要执行的代码块}语句 1 在循环(代码块)开始之前执行。语句 2 定义运行循环(代码块)的条件。语句 3 会在循环(代码块)每次被执行后执行。for循环的3.

2020-08-25 14:39:08 72

原创 条件判断:if else switch

JavaScript把null、undefined、0、NaN和空字符串''视为false,其他值一概视为true。判断语句的结尾不使用分号;if 语句:if (条件) { 如果条件为 true 时执行的代码} else 语句: else 语句来规定假如条件为 false 时的代码块。if (条件) { 条件为 true 时执行的代码块} else { 条件为 false 时执行的代码块}else if 语句:使用 else if 来规定当首个条.

2020-08-25 11:21:50 57

原创 对象,对象属性和方法

JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成。对象也是变量。语法 var object_name = {key:value, key:value,...};JavaScript用一个{...}表示一个对象,键值对以xxx: xxx形式申明,用,(逗号)隔开。注意,最后一个键值对不需要在末尾加,(逗号),如果加了,有的浏览器(如低版本的IE)将报错。var person = {firstName:"Bill", lastName:"Gates", age:62, eye

2020-08-25 10:59:24 85

机器学习与安全第三章,异常检测

这是machine learning and security 的第三章节内容,从个人的角度进行筛选去除比较多的臃肿内容提取出来的精华

2020-07-29

空空如也

空空如也
提示
确定要删除当前文章?
取消 删除