ES6
文章平均质量分 63
ES6
Southern Wind
前端
展开
-
策略模式——多重if-else解决方案
策略模式 💤:是一种行为设计模式,它允许你在运行时根据不同情况选择不同的算法或行为。设计模式 🤌:就是提前第一次了解全过程,第二次直接规划不必要的坑。原创 2023-10-16 15:54:06 · 1132 阅读 · 0 评论 -
ES6——类的创建、添加以及继承
目录一、创建类和对象二、类中添加其方法三、类的继承super()方法四、子类继承父类的方法同时扩展自己的方法五、super关键字调用父类的普通函数六、使用类的注意事项使用类的注意事项总结:1. 在 ES6 中的类没有变量提升,必须先定义类,才能通过类实例化对象。2. 类里面的共有的属性和方法一定要加this使用。3.constructor 里面的this 指向的是创建的实例对象,方法里面的this 指向的是这个方法的调用者。原文链接一、创建类和对象...原创 2021-10-10 11:54:16 · 1625 阅读 · 0 评论 -
用ES5(JavaScript)和ES6面向对象的方式做出选项卡
效果如图所示:ES5:<!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">.原创 2021-10-09 17:02:27 · 181 阅读 · 0 评论 -
ES6——生成器解决回调地狱
生成器一般用于解决回调地狱问题生成器写法:function *(){}函数名前面有一个* 调用next()方法开始执行函数 yield为暂停 使生成器函数执行暂停,yield关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的return关键字例:function * gen(){ console.log('My name is NanChen'); } let iterator = gen() iterator.n..原创 2021-10-08 16:18:37 · 206 阅读 · 0 评论 -
ES6——import和export的用法(8种)
转载链接import和export的方法是基于服务器端环境方可使用可以启动服务器 下面是安装以及使用步骤:1、安装php应用程序安装包可自行从外面下载2、提前安装了phpstudy 安装好之后会有一个www文件夹 3、把内容放入该文件夹中我的文件夹叫exportandimport 4、里面有一个index.js 和一个index.html 把下方的源代码粘贴到对应的文件中即可使用方法:输入网址:http://localhost/exportandi...转载 2021-10-08 15:06:40 · 3055 阅读 · 0 评论 -
ES6——迭代器
迭代器(iterator):是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署lterator接口,就可以完成遍历操作。迭代器对象一旦被建立,就可以通过显式的重复调用next(),或者使用JavaScript的 for…in 和 for each 循环隐式调用。本内容只介绍next();const arr = ['111', '222', '333'] for (let item of arr) { console.log(item) } let i原创 2021-10-08 14:39:54 · 88 阅读 · 0 评论 -
ES6——数据类型之 (Symbol)
Symbol是ES6的新的一种基本数据类型,是目录特点不能与其他的数据进行比较以及运算(唯一性)隐藏性,for···in不能访问一种类似于字符串的数据类型Symbol()函数会返回Symbol类型的值,该类型具有静态属性和静态方法。每个从Symbol()返回的Symbol值都是唯一的。一个Symbol值能作为对象属性的标识符;这是该数据类型仅有的目的。其特点:1、Symbol的值是唯一的,用来解决命名冲突的问题2、Symbol值不能与其他数据进行运算3、Symbo原创 2021-10-08 14:22:35 · 290 阅读 · 0 评论 -
ES6——(assign)合并对象
既然有合并数组的方法,那么也有合并对象的方法Object.assign()Object.assign():合并对象合并对象的两种方法:<script> // assign合并对象 // ES6中如何让数组合并 var a = { a:'Nan', } var b = { b:'Chen' } var c = {原创 2021-10-08 13:45:25 · 1135 阅读 · 0 评论 -
ES6——String 的扩展方法
模板字符串es6新增的一种创建字符串的方式使用反引号(``)定义之前JavaScript创建变量的写法:let name = 'Nanchen';console.log(name); //Nanchen输出如下:使用反引号定义的写法let name = `Nanchen`;console.log(name); //Nanchen效果如下图:模板字符串中可以解析变量传统的做法需要用大量的""(引号)和 + 来拼接字符串才能得到想要的模板...原创 2021-09-29 20:52:09 · 164 阅读 · 0 评论 -
ES6——find()、findindex()、indexof、includes()以及some
findlet ary = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 3, name: '李四' } ]; /* let target = ary.find((item,index)=>item.name === '李四2'); */ let target = ary.find(原创 2021-09-28 08:56:28 · 1295 阅读 · 0 评论 -
ES6——call和apply以及bind的区别
call()、 apply()、 bind() 都是用来重定义this这个对象的看段代码:语法格式:fn.call(obj, 4,2)fn.apply(obj, [4, 2])fn.bind(obj, 4, 2)()fn.bind(obj, [4, 2])()第一个参数都是this的指向对象var obj = { name: 'Nanchen' } function fn(a, b) { console.log(this); //此...原创 2021-09-28 08:27:12 · 675 阅读 · 0 评论 -
ES6——类数组转换为数组的几种方法以及for of、forin、for Each的区别
一、什么是类数组? JavaScript中有一些看起来像却又不是数组的对象,叫做类数组。二、什么是类数组对象?只包含使用从0开始的,并且是自然递增的整数作为键,还定义了length用来表示元素个数的对象,通常就认为是类数组对象。具有:指向对象元素的数字索引下标,以及 length 属性告诉我们对象的元素个数;不具有:比如像push 、 forEach 以及 indexOf 等数组对象具有的方法;例如:var obj = { 0: 'a', 1: 'b', 2:.原创 2021-09-27 14:20:28 · 1421 阅读 · 0 评论 -
ES6——箭头函数以及this指向
以前JavaScript写法:function sum(num1, num2) { return num1 + num2; }ES6箭头函数的写法:const sum =(num1,num2)=>{ return num1 + num2; }更简化的写法const sum = (num1, num2) => num1 + num2;简单理解的办法就是将function简化为const,sum(num1,num2)简化成sum=(num...原创 2021-09-23 11:30:41 · 971 阅读 · 0 评论 -
ES6——解构赋值和剩余参数
ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。以前的写法:let obj = {username:'JavaScript123',pwd:'123456'};let username = obj.username;let pwd = obj.pwd;console.log(username原创 2021-09-23 08:49:10 · 1020 阅读 · 0 评论 -
ES6——let、const
什么是ES6ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等等,而 ES2015 则是正式名称,特指该年发布的正式版本的语言标准。为什么使用 ES6 ?每一次标准的诞生都意味着语言的完善,功能的加强。JavaScript语言本身也有一些令人不满意的地方。 变量提升特性增加了.原创 2021-09-22 19:08:54 · 121 阅读 · 0 评论 -
JavaScript——this的指向问题
this指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁例子1: function a(){ var user = 'nihao'; console.log(this.user); //undefind console.log(this); //window } a();上面的this最终指向的是调用它的对象,它的调用对象其实是wind.原创 2021-09-22 14:06:13 · 462 阅读 · 2 评论