2021年07月_觅远

原创 web前端—前端三剑客之JS-ES6(12)：Module模块

菜鸟教程：https://www.runoob.com/w3cnote/es6-module.html导出文件需要使用export或者export default命令let add= function (str) { let strarr = str.split(','); let changenum = strarr.reduce((pre,next)=>{ let num1 = Number(pre); let num2 = Number(

2021-07-26 21:22:05 115

原创 web前端—前端三剑客之JS-ES6(11)：Proxy代理

菜鸟教程：https://www.runoob.com/w3cnote/es6-reflect-proxy.html目录创建代理Proxy的拦截操作方法Proxy是在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。创建代理es6中使用代理是通过new一个代理实例对象进行操作：new Proxy(target,handler)参数说明：target：表示所要拦截（代理）的目标对象 handler：是

2021-07-25 23:21:40 491

原创 web前端—前端三剑客之JS-ES6(9)：class类、面向对象、symbol数据类型

ES6 Class 类：https://www.runoob.com/w3cnote/es6-class.htmlsymbol数据类型：https://www.runoob.com/w3cnote/es6-symbol.html目录class定义类的注意点Object.assign添加类方法实例对象注意点静态方法、私有方法和私有属性继承class定义类的注意点ES6 的class写法的几个注意点：类的所有方法都定义在类的prototype属性上面定义..

2021-07-22 21:31:38 333 1

原创 web前端—前端三剑客之JS-ES6(8)：字符串、数值

菜鸟教程：https://www.runoob.com/w3cnote/es6-string.html模板字符串相当于加强版的字符串，用反引号 `，使用场景：作普通字符串模板字符串支持多行字符串的格式换行，看起来更加简明支持插入变量和表达式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C

2021-07-22 13:27:58 143

原创 web前端—前端三剑客之JS-ES6(7)：函数参数及箭头函数

菜鸟教程：https://www.runoob.com/w3cnote/es6-function.html函数参数1、参数变量是默认声明的，所以不能用let或const再次声明,否则报错：UncaughtSyntaxError:Identifier'x'hasalreadybeendeclared function fun1(x = 1, y = 2) { // let x = 3; //参数变量是默认声明的，所以不能用let或co...

2021-07-21 23:14:01 401

原创 web前端—前端三剑客之JS-ES6(6)：对象数据结构扩展、数组方法

1、允许直接写入变量和函数，作为对象的属性和方法 let a = '孟浩然'; let b = {a}; // 允许直接写入变量和函数，作为对象的属性和方法 console.log(b); // 等同于：let b = {a:a}2、对象属性名和方法名的简写属性名：见arr2.name 方法名：见arr2.fn() \ arr2.fn(input)3、属性名或者方法名是关键字的写法：见arr2.in()4、ES...

2021-07-21 19:44:14 181

原创 web前端—前端三剑客之JS-ES6(5)：Set、WeakSet（二）

目录set的应用场景Set函数去重Set与数组的转换WeakSetWeakSet的方法set的应用场景1、实现并集（Union）、交集（Intersect）和差集（Difference）2、遍历隐射形成新的数组如果想在遍历操作中，同步改变原来的 Set 结构，目前没有直接的方法，但有两种变通方法一种是利用原 Set 结构映射出一个新的结构，然后赋值给原来的 Set 结构；一种是利用Array.from方法3、去重：见下Set函数去重S.

2021-07-19 23:05:30 185 1

原创 web前端—前端三剑客之JS-ES6(4)：Set、WeakSet（一）

目录SetSet创建Set实例的属性和方法操作方法（增删改查）遍历方法set的应用场景Set函数去重Set与数组的转换WeakSetWeakSet的方法SetSet类似于数组，但是成员的值都是唯一的，没有重复的值。 Set本身是一个构造函数，用来生成 Set 数据结构。Set创建和Map不同的是newSet()中的参数为一个数组，而不是以键值对存放的双数组。 let set1 = new Set(); let a..

2021-07-19 22:22:22 214

原创 web前端—前端三剑客之JS-ES6(3)：Map、WeakMap

目录Map创建Map结构对象Map数据结构的键名Map数据结构的属性和方法增删改查遍历Map与数组之间的转换Map转为数组数组转为MapWeakMapJavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键(ES6加入了Symbol作为属性名称)MapObject对象与Map结构对象Object 结构提供了“字符串—值”的对应; Map 结构提供了“值—值”的对应，是一种更完善的 Ha...

2021-07-19 13:43:56 187

原创 web前端—前端三剑客之JS-ES6(2)：解构赋值

目录数组的解构赋值注意点解析不成功与不完全解析解析赋值要求指定默认值惰性求值对象的解构赋值示例嵌套字符串的解构赋值数值和布尔值的解构赋值函数参数的解构赋值解构赋值的常见应用场景变量交换从函数返回多个值函数参数的定义提取JSON数据ES6 允许按照一定模式从数组和对象中提取值后对变量进行赋值，这被方式称为解构(解析结构的意思)。数组的解构赋值注意点1、赋值等号的左右侧的数组结构需要一致,这个叫做”模式匹配” ...

2021-07-17 15:42:05 615 1

原创 web前端—前端三剑客之JS-ES6(1)：声明变量之let

参考菜鸟教程：https://www.runoob.com/w3cnote/es6-let-const.htmlhttps://www.runoob.com/js/js-let-const.htmllet是es6中的一个新的特性，和var一样，let也是用来定义变量的，但与var之间也有一些区别。let是一个块级作用域，可以解决变量作用域的问题：1、内部变量覆盖外部变量问题 <script> var s...

2021-07-16 19:35:07 343

原创 web前端—前端三剑客之JS(19)：正则

参考python正则：https://blog.csdn.net/JBY2020/article/details/109005585菜鸟教程：https://www.runoob.com/js/js-regexp.html3wschool：https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp文件：链接，提取码：jbb0目录表达式的创建正则表达式标志符正则表达式的使用调用RegExp对象的相关方法调用String对..

2021-07-15 17:04:45 134

原创 web前端—前端三剑客之JS(18)：DOM

见：https://blog.csdn.net/JBY2020/article/details/109864650https://blog.csdn.net/JBY2020/article/details/110148757文档链接：https://pan.baidu.com/s/1SWN_X7Irg3k29dnKFoYalA提取码：jbb0目录DOMDOM节点的属性和方法操作DOM节点对象HTML DOMHTMLElement 对象CSS样式E...

2021-07-12 16:39:09 168

原创 html快速生成标签：tab或回车快速补全标签或css样式

1、快速生成html结构输入 html: 或者 ! 后，回车或tab2、快速格式化代码：右键格式化文档或者直接快捷键shift+alt+f3、快速补全css及标签，css只举例几个常用的。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="...

2021-07-12 00:01:00 3387 1

原创 web前端—前端三剑客之JS(17)：重定向方法——call、apply、bind

菜鸟教程：https://www.runoob.com/w3cnote/js-call-apply-bind.htmlcall、apply、bind区别：相同点：call、apply、bind都可以改变this的指向不同点：call和apply都可以立马执行函数；bind函数不会立马执行,会返回一个新的函数call和apply的区别：传入参数的不同call传入任意多个参数：第一个参数为重定向后this指向的对象，之后的参数可以更任意多个 apply传入两个参数：第一个参数...

2021-07-11 21:10:23 442

原创 web实例（一）：抽奖

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D..

2021-07-11 01:00:20 3841 1

原创 web前端—前端三剑客之JS(16)：移动端事件

触摸式设备也拥有鼠标事件目录移动端的主要事件移动端事件的触发对象移动端事件对象的位置属性移动端事件的触发顺序其他事件对象阻止浏览器默认行为移动端的主要事件touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。 touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault() 可以阻止滚动。 touchend：当手指从屏幕上移开时触发。 touchcancel：当系统停止跟踪触摸时触发。...

2021-07-10 15:44:22 485

原创 web前端—前端三剑客之JS(15)：BOM之事件类型、鼠标事件、键盘事件

鼠标键盘事件：https://blog.csdn.net/JBY2020/article/details/110148757目录三种事件类型事件绑定事件监听事件委托鼠标事件焦点事件点击及移动事件滚轮事件键盘事件键码表三种事件类型事件绑定Obj.on+事件名称=function(){}特点：事件绑定同一个对象只能给同一个事件绑定唯一一个事件处理函数.如果绑定第二个,第一个会被清除掉.因为本质上只是给对象的on事件属性上添加了一个函数事.

2021-07-07 23:54:03 486

原创 web前端—前端三剑客之JS(14)：BOM之location对象、history对象、事件冒泡和事件捕捉

目录location对象history对象事件冒泡和事件捕捉参见：https://blog.csdn.net/JBY2020/article/details/110149966location对象BOM对象中最有用的对象之一，它提供了与当前窗口中加载的文档有关的信息，以及一些导航功能。 location 对象很特别，它既是window对象的属性，也是document 对象的属性，即window.location和document.location引用的是同一个对象。loaca

2021-07-07 19:26:24 111

原创 web前端—前端三剑客之JS(13)：BOM基础、浏览器窗口

菜鸟教程：https://www.runoob.com/js/js-window.htmlBOM基础BOM（browser Object Model）是浏览器对象模型。在浏览器中window就是BOM的核心。window:代表整个浏览器窗口(window是BOM中一个对象，并且是最顶层的对象) 。这个对象下有很多方法：alert/prompt/confirm/close/open内置的的对象：1.history(就是我们常说的历史记录)...

2021-07-06 21:07:42 581 1

原创 web前端—前端三剑客之JS(12)：字符串

3wschool：字符串、字符串方法菜鸟教程：JavaScript 字符串length属性：返回字符串中字符得长度，只能读不能改。charAt(索引值)：获取字符串中索引对应的子字符串，只可获取不可修改concat()：括号中的参数为要拼接的对象，和+的拼接结果一样，拼接后返回新的字符串。indexOf()：括号中的参数是要查找的子字符串，在字符串中查询某字符是否存在，存在返回下标，不存在返回-1，如果有多个参数字符，只返回第一个的下标。lastIndexOf().

2021-07-05 23:59:40 262

原创 web前端—前端三剑客之JS(11)：日期时间

目录创建当前时间对象创建指定时间的日期对象日期时间对象方法3wschool：https://www.w3school.com.cn/js/index.asp菜鸟教程：https://www.runoob.com/js/js-tutorial.html创建当前时间对象见：https://blog.csdn.net/JBY2020/article/details/109864650要创建一个日期对象，使用new 操作符和Date 构造函数即可，如下所示。var nowti..

2021-07-05 19:07:42 416 2

原创 web前端—前端三剑客之JS(9)：math对象、定时器、延时器、this指向

目录数学对象Math定时器与延时器this的指向数学对象MathMath之对象的属性(基本常量)Math之方法(取最大, 最小值) console.log(Math.max(1,2,-5,8,666)); // 最大值 console.log(Math.min(1,2,-5,8,666)); // 最小值Math之方法(取整)将小数值舍入为整数的几个方法：Math.ceil()、Math.floor()和Math...

2021-07-04 19:04:30 309 2

原创 web前端—前端三剑客之JS(8)：数组(二)的高级方法之迭代与归并

sort()按照数值大小排序的方法sort()方法可以传入一个参数, 该参数必须为一个函数(被称为比较函数),比较函数接收两个参数。特别注意, 任意两个数组项目的排列顺序是由返回参数决定的参数有三类, 负数, 正数和0 , 不论比较算法是啥, 反正数组最后的排序结果就按照参数所规定的的来。如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回0，如果第一个参数应该位于第二个之后则返回一个正数。...

2021-07-04 09:38:15 117

原创 web前端—前端三剑客之JS(7)：数组(一)

目录创建数组数组对象的检测数组的操作方法数组的高级方法见：https://blog.csdn.net/JBY2020/article/details/109864650创建数组1、使用构造函数创建var arr= new Array();// 使用Array 构造函数括号中参数说明：如果没有参数，表示创建的是一个空的数组对象。如果参数为一个number类型的整数，表示创建一个固定长度的数组对象，这个整数表示的就是数组的长度length。如果是其他非数...

2021-07-03 19:26:51 83

原创 web前端—前端三剑客之JS(6)：对象

目录对象种类创建对象的方式对象属性操作对象属性的特性JS中的其他对象类型对象：对象是属性的无序集合，每个属性都是一个名/值对。属性名称是一个字符串。学习对象的目的函数式编程是一个面向过程的编程呢个，代码比较松散，相当于python中的def。使用对象编程是面向对象编程，面向对象代码具有“低耦合，高内聚”的特征，相当于python 中的class。参见：https://blog.csdn.net/JBY2020/article/details/109864650.

2021-07-03 13:58:32 94

原创 web前端—前端三剑客之JS(5)：函数

目录函数(function)的特征JavaScript函数的定义JavaScript函数调用JavaScript函数参数JavaScript函数的返回值JavaScript函数变量作用域JavaScript函数之匿名函数学习函数是为了便于方法的封装和复用参见：https://blog.csdn.net/JBY2020/article/details/109864650函数(function)的特征函数(function)是一段可执行的JS代码，其具备以下特征

2021-07-02 15:45:13 77

北冥有鱼的博客