JavaScript及ES6
文章平均质量分 83
该专栏主要讲解JavaScript高级用法和ES6语法
向歌啊
此人写了一点东西
展开
-
节流与防抖函数
节流或防抖 作用: 限制函数执行的次数 1. 防抖 通过 setTimeout 的方式,在一定的时间间隔内,将多次触发变成一次触发。 防抖函数我感觉可以理解为一个升降梯,在电梯门关闭之前,只要有人来,就重新等待相同间隔时间。 这里我们使用点击按钮来模拟防抖函数的作用 当用户点击提交按钮后,触发 debonce()函数 这里使用定时器箭头函数,使用 fn.apply()绑定 this,此时 this 指向按钮实例。 通过 arguments 传递剩余参数 <!DOCTYPE html> <原创 2021-12-05 22:12:54 · 620 阅读 · 0 评论 -
ES6---(4)async的用法
一、async简介 1、async函数的基本用法 async function f() { // return await 'hello async'; let s = await "hello async"; let data = await s.split(''); return data; } 使异步操作更加方便,会等待一个await执行完后再执行下一个。 会返回一个Promise对象。 没有显式return,相当于return Promise.resolve(undefined);原创 2021-09-24 08:04:13 · 94 阅读 · 0 评论 -
ES6---(3)Promise对象
一、Promise对象介绍 ES6原生提供了Promise对象,它表示未来要发生的事件,相当于一个容器,保存着异步操作的一些结果。各种异步操作都可以用同样的方法进行处理。 特点: 对象的状态不受外界影响 处理异步操作 三个状态:Pending(进行) Resolved(成功) Rejected(失败) 一旦状态改变,就不会再次改变,任何时候都可以得到这个结果 二、基本使用 可以使用new来创建一个Promise对象的一个实例。 let prom = new Promise(function(re原创 2021-09-24 08:03:37 · 128 阅读 · 0 评论 -
ES6---(2)迭代器和生成器
一、迭代器 iterator 迭代器是ES6提供的一种接口,为不用的数据结构提供统一的访问机制。 迭代器是一个接口,能快捷的访问数据,通过Symbol.iterator来创建迭代器 通过迭代器的next()获取迭代后的结果 迭代器是用于遍历数据结构的指针 用法: const items = ['a', 'b', 'c']; let ite = items[Symbol.iterator](); console.log(ite.next()); // done: false(遍历是否完成) value:原创 2021-09-23 21:08:32 · 165 阅读 · 0 评论 -
ES6---(1)新增语法及扩展方法
一、关键字 1、let关键字 特性: let声明的变量只在所处于的块级有效 // let变量具有块级作用域,即在{}里面生效 if (true) { let a = 10; } console.log(a); // not defined 不存在变量提升 // let 不存在变量提升 console.log(a); let a = 100; 暂时性死区 var tmp = 123; if (true) {原创 2021-09-23 21:08:15 · 467 阅读 · 1 评论 -
JavaScript高级---(8)正则表达式
一、概述 正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。在 JavaScript中,正则表达式也是对象。 正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等 。 二、正则表达式的使用 1、创建 在 JavaScript 中,可以通过两种方式创建一个正则表达式。原创 2021-09-23 21:07:58 · 210 阅读 · 0 评论 -
JavaScript高级---(7)浅拷贝与深拷贝
一、浅拷贝 在JavaScript中,分为简单数据类型(数字、字符等)和复杂数据类型(对象、数组等),一般简单数据类型被存储在栈内存;而复杂数据类型存储在堆内存,其地址存储在栈内存里面。 所以一般将复杂数据类型赋值给其他变量的时候,一般是将其地址复制,如果对赋值后的数据进行操作,很容易改变原本的复杂数据类型。 我们举个例子,首先定义一个对象,里面有两个简单数据类型和另一个对象 var obj = { id: 1, name: "andy",原创 2021-09-23 21:07:41 · 982 阅读 · 0 评论 -
JavaScript高级---(6)闭包
闭包是纯函数式编程语言的传统特性之一。通过将闭包视为核心语言构件的组成部分,JavaScript语言展示了其与函数式编程语言的紧密联系。由于能够简化复杂的操作,闭包在主流JavaScript库以及高水平产品代码中日益流行起来。 一、变量的作用域 在介绍闭包之前,我们先理解JavaScript的变量作用域。变量的作用域分为两种:全局变量和局部变量。 1、全局变量 var n = 999; //全局变量 function f1() { a = 100;原创 2021-09-23 21:07:26 · 78 阅读 · 0 评论 -
JavaScript高级---(5)ES5严格模式
一、严格模式 JavaScript 除了提供正常模式外,还提供了严格模式(strict mode)。ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式,即在严格的条件下运行 JS 代码。 严格模式在 IE10 以上版本的浏览器中才会被支持,旧版本浏览器中会被忽略。 严格模式对正常的 JavaScript 语义做了一些更改: 消除了 Javascript 语法的一些不合理、不严谨之处,减少了一些怪异行为。 消除代码运行的一些不安全之处,保证代码运行的安全。 提高编译器效率,增加运行速度原创 2021-09-23 21:07:08 · 127 阅读 · 0 评论 -
JavaScript高级--- (4)改变函数内部this指向的方法
一、一般函数内部this指向 如下图: 二、改变函数内部this指向的方法 JavaScript 为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部 this 的指向问题,常用的有 bind()、call()、apply() 三种方法。让我们依次来看看它们之间的区别吧。 1、call()方法 使用方法: fun.call(thisArg, arg1, arg2, …) thisArg:在 fun 函数运行时指定的 this 值 arg1,arg2:传递的其他参数 返回值就是函数的返回值,因为它就是原创 2021-09-23 21:06:37 · 210 阅读 · 0 评论 -
JavaScript高级--- (3)ES5新方法,数组、字符串、对象
一、数组方法 1、forEach()方法,遍历数组元素 用法:array.forEach(function(currentValue,index,arr)) currentValue:数组当前项的值 index:数组当前项的索引 arr:数组对象本身 var arr = [1, 2, 3, 4]; var sum = 0; arr.forEach(function(value, index, array) { // console.log(`${i原创 2021-09-23 21:06:12 · 149 阅读 · 0 评论 -
JavaScript高级---(2)构造函数和原型、继承
一、构造函数和原型 1、概述 在ES6之前,对象并不是基于类创建的,而是构造函数来定义对象及其特征。 构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。 而new在执行时会有四件事情: 在内存中创建一个新的空对象。 让 this 指向这个新的对象。 执行构造函数里面的代码,给这个新对象添加属性和方法。 返回这个新对象(所以构造函数里面不需要 return)。 静态成员及实例成员 静态成原创 2021-09-23 21:05:44 · 157 阅读 · 0 评论 -
JavaScript高级---(1)面向对象编程
一、面向对象编程POP(Process-oriented programming) 面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。 1、举例理解 我们举个例子: 把大象装进冰箱。 面向过程的编程方式是: 打开冰箱门–>把大象放进去–>关上冰箱门 面向对象则是先抽象出对象,然后再找出对象的属性方法: 1、大象: 进去 2、冰箱 打开 关闭 2、面向对象编程的特性 封装性 继承性 多态性 3、面向对象编程的优缺点 优点:易维护、易复用、易扩展,由于面向对象有封装、继承、原创 2021-09-23 20:56:57 · 110 阅读 · 0 评论