- 博客(25)
- 收藏
- 关注
RSS订阅原创 Generator 函数知多少(es6)
ES6 总结系列之 Generator 函数的语法 篇1. 何为 GeneratorGenerator 函数是 ES6 提供的一种异步编程解决方案，执行 Generator 函数的会返回一个遍历器对象，Generator 函数是一个状态机，封装了多个内部状态。与传统函数不同的是，传统函数一旦运行就不能停止，一次性执行完；而 Generator 函数类似于将函数分割成多个‘小函数’，可将一个函数实现分步执行2. 基本用法Generator 函数的 function 和关键字之间有一个*ES
2020-09-16 16:35:42
87
1
原创 正则表达式(规则)，原来可以这么简单（js）
javascript系列之 正则表达式(规则) 篇今天我们来聊聊正则表达式的匹配规则，会从修饰符、元字符、量词、贪婪与非贪婪、括号、字符集、反向引用这几方面来了解掌握正则表达式1.正则表达式的修饰符(可组合使用)i (ignoreCase) 忽略大小写g (global) 全局匹配，匹配全部符合条件的子串var str = "BBQ"var reg1 = /b/str.replace(reg1, 'a') // BBQ //大小写不匹配，所以没替换为 'a'var reg2 =
2020-09-09 16:53:45
346
原创 正则表达式(方法)，原来可以这么简单（js）
javascript系列之 正则表达式(方法) 篇这篇文章将介绍关于正则表达式的一系列匹配规则，会从基础语法、RegExp 对象方法，RegExp 属性，以及支持正则表达式的 String 对象的方法入手，一步步的了解和掌握正则表达式定义正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。基础语法创建一个正则表达式//1. 字面
2020-09-08 16:50:52
126
原创 你真的了解Class继承吗？(es6)
ES6总结系列之 Class的继承 篇ES6之前我们经常通过修改原型链的方法来实现继承，ES6的 Class 提供了更为便利、清晰的方法来实现继承，让我们来看下吧1. 基本用法通过 extends 关键字来实现继承class Point { /* ... */ }class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 调用父类的constructor(x, y) this.col
2020-09-07 15:22:04
96
原创 你真的了解class吗（下）
ES6总结系列之 Class（下） 篇这篇文章我们来继续来聊聊class的基础用法，没看过上篇的小伙伴可以先看看Class的基本语法上(es6)，再来看这篇比较容易入手。1. 静态方法静态方法即在类的方法前加上static关键字class Foo { static classMethod() { return 'hello'; }}Foo.classMethod() // 'hello'var foo = new Foo();foo.classMethod()// T
2020-09-06 21:21:22
114
原创 你真的了解class 吗？(es6)
ES6总结系列之 class(上) 篇1.何为classES6 的 class 完全可以看作构造函数的另一种写法，使用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致class 也可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已2.基本用法我们先来看一个例子class Point { constructor(x, y) { this.x = x; this.y = y;
2020-09-03 16:30:19
139
原创 new的模拟实现(javascript)
# javascript系列之 new的模拟实现 篇new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。## 1. new的基本用法使用 new 操作符后返回一个新对象，且该对象为对应构造函数的实例。该对象可以访问构造函数里的属性和构造函数的原型里的属性#### 1. 构造函数无返回值时function Person (name, age) { this.nam
2020-08-27 19:02:17
147
原创 bind的模拟实现
javascript系列之 bind的模拟实现 篇1. bind的基本用法bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。–MDN//bind绑定 this 指向var bar = { age: 18}function foo(name, sex) { console.log(name); console.log(sex); consol
2020-08-27 00:40:38
174
原创 call和apply的模拟实现(javascript)
javascript系列之 call和apply的模拟实现 篇call和apply异同同： 改变函数this指向异： 传参列表不同（call传参是逐个传递，apply传参是以数组的方式传递）call用法例子var bar = { age: 18}function foo(name, sex) { console.log(name) console.log(sex) console.log(this.age)}foo.call(bar, 'Joker',
2020-08-26 00:27:49
171
原创 严格模式（javascript）
JavaScript系列之 严格模式 篇何为严格模式JavaScript 严格模式（strict mode）即在严格的条件下运行。为什么使用严格模式消除代码运行的一些不安全之处，保证代码运行的安全提高编译器效率，增加运行速度为未来新版本的Javascript做好铺垫严格模式使代码向更合理，更安全，更严谨方向发展基本用法1.为整个js代码开启严格模式所有语句之前放一个特定语句 “use strict”; （或 ‘use strict’;）"use strict";'use str
2020-08-12 11:04:35
97
原创 数组去重(javascript篇)
javascript系列之 数组去重 篇本篇将介绍4种数组去重的方法，其他的基本都大同小异1.利用Set、Map数据结构利用Set、Map数据结构成员的值都是唯一的特点//Setfunction dedupe (arr) { return [...new Set(arr)];}function dedupe (arr) { return Array.from(new Set(arr));}//Mapfunction deeupe (arr) { let map = new
2020-08-09 12:11:01
102
原创 对象的新增方法（es6）
ES6总结系列之 对象的新增方法 篇1. Object.is() --比较两个值是否相等Same-value equality(同值相等)Object.is()与严格相等（===）的不同只有两处:+0不等于-0Object.is(+0, -0) //false+0 === -0 //trueNaN等于自身Object.is(NaN, NaN) //trueNaN === NaN //false2. Object.assign() --
2020-08-08 12:48:40
512
原创 对象的扩展(es6)
ES6总结系列之 对象的扩展 篇1. 属性、方法简洁表示法属性简写const foo = 'bar';const baz = {foo}; //属性名就是变量名, 属性值就是变量值baz // {foo: "bar"}// 等同于const baz = {foo: foo};方法简写const obj = { method () { return 'Hello!' }}//等同于const obj = { method: function () {
2020-08-08 12:19:50
181
原创 AJAX、JSONP
1.AJAX含义Asynchronous JavaScript and XML(AJAX)异步的 JavaScript 和 XMLAJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。基本用法1.创建 XMLHttpRequest 实例var xhr = new XMLHttpRequest()var xhr = new ActiveXObject("Microsoft.XMLHTTP") //（IE5 和 IE6）使用 ActiveX 对象2.使用 open 方法，初
2020-08-07 22:43:17
83
原创 Promise对象(es6)
ES6总结系列之 Promise对象 篇1. 含义何为 Promise?Promise 是异步编程的一种解决方案Promise 简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果Promise 两个特点:①对象的状态不受外界影响，只有异步操作的结果，可以决定当前是那种状态pending(进行中), fulfilled(已成功), rejected(已失败)②状态只改变一次，状态转变只有两种可能，改变后称resolved(定型)1)pending -->
2020-08-07 22:41:02
91
原创 防抖 (debounce)、节流 (throttle)
防抖 (debounce)与节流 (throttle)频繁的事件触发，会消耗很多的资源，甚至出现卡顿现象。解决这个问题一般有防抖(debounce)和节流(throttle)两个方案1.防抖 (debounce)原理：只以最后一次触发的时间为准，延迟n秒后才执行。如果延迟n秒的时间内又触发事件，则以新的事件为时间基准，延迟n秒再执行应用场景：登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用
2020-08-06 17:26:22
136
原创 Set和Map数据结构(es6)
ES6总结系列之 Set和Map数据结构 篇1. Set基本用法1)ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。2)Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。Set本身是一个构造函数，用来生成 Set 数据结构。// 例一const set = new Set([1, 2, 3, 4, 4]);[...set]// [1, 2, 3, 4]// 例二const items = new
2020-08-06 15:41:15
102
原创 事件处理模型--冒泡、捕获
事件冒泡1.当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window（自底向上）demo1后面的demo可以结合这个图更好理解htmlhtml代码：<div class="grandfather"> <div class="father"> <div class="child"></div> </div></div> css代码：.grandfather{ .
2020-08-05 20:31:34
218
原创 Symbol(es6)
ES6总结系列之 Symbol 篇ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。可以从根本上防止属性名的冲突，Symbol 值通过Symbol函数生成let s = Symbol();typeof s// "symbol"1.Symbol是第七种数据类型，前六种为：underfined, null,String, Boolean, Number, Object2.Symbol函数前不能使用new命令，否则会报错。这是因为生成的 Symbol 是一个原始类型的值，不是对
2020-08-05 15:35:48
226
原创 数组的扩展(es6)
ES6总结系列之 数组的扩展 篇1.扩展运算符(…)①扩展运算符(spread)好比rest参数的逆运算，将一个数组转化为逗号分隔的参数序列，可以想象成去掉中括号[]console.log(...[1, 2, 3])// 1 2 3②扩展运算符后面还可以放置表达式const arr = [ ...(x > 0 ? ['a'] : []), 'b',];③可以实现数组深拷贝const a1 = [1, 2];// 写法一const a2 = [...a1];// 写
2020-08-04 10:21:04
107
原创 函数的扩展（es6）
ES6总结系列之 函数的扩展 篇函数参数默认值参数变量是默认声明的，所以不能用let或const再次声明function foo(x = 5) { let x = 1; // error const x = 2; // error var x = 3; //不报错}使用参数默认值时，函数不能有同名参数// 不报错function foo(x, x, y) { // ...}// 报错function foo(x, x, y = 1) { // ...}参数
2020-08-03 22:01:13
117
原创 深入了解模板字符串（ES6）
深入了解模板字符串这次将给大家带来模板字符串用法和几大注意要点用法模板字符串由一对反引号标识符组成，${}为取值表达式let name = "Tony";let age = 18 ;name+"今年"+age+"岁" ;//"Tony今年18岁"等价于`${name}今年${age}岁了`;//"Tony今年18岁"我们用传统写法表达字符串和变量的拼接写法非常冗余，ES6的...
2020-04-05 00:30:06
140
原创 你真的了解变量的解构赋值吗（ES6篇）
ES6总结系列之 变量的解构赋值 篇变量的解构赋值：分解一个对象的结构，对变量进行赋值，前提：等号两边的模式相同数组的解构赋值可从数组中提取值，按照对应位置，对变量赋值let [a,b,c] = [1,2,3]; //a=1,b=2,c=3let [ , ,c] = [1,2,3]; //省略赋值 c=3let [a, [[b], c]] = [1, [[2], 3]];/...
2020-04-03 17:35:27
87
原创 一分钟掌握CSS之BFC，margin塌陷
一分钟入门并掌握CSS之BFC，margin塌陷大家好，我是YoursJoker，想要走出大山的一个小菜鸟，今天将用简单易懂的语言，让大家快速了解和掌握CSS中的BFC和margin塌陷（本人新手一枚，各位大佬们多多包涵）何为BFCBFC就是块级格式化上下文block formatting contextBFC特性：BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的...
2020-04-02 02:12:32
144
原创 ES6系列之let，const
大家好我是YoursJoker，一个知道很多关于鲁迅名言的前端小萌新，可能鲁迅不会承认（哈哈）个人Blog：https://yoursjoker.github.io/ 刚建立，求有空大佬们过来提提意见github:https://github.com/YoursJoker 欢迎star（目前是真空的，我会加油逐步完善）let命令和const命令ES6新增的let命令和const命令和var...
2020-03-31 20:03:12
380
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人