JavaScript、ES6
文章平均质量分 66
注重基础,打好基础,成就未来!
前端杂货铺
软件工程本 for QTU,校级奖学金 & 科技创新奖学金获得者。第十三届蓝桥杯-Web应用开发-山东省二等奖。 CSDN前端领域优质创作者,阿里云社区专家博主。目前效力于中国工业软件事业!
展开
-
ES6 —— 类和对象
文章目录一、创建类和生成实例二、类的继承一、创建类和生成实例通过 class 关键字创建,类名首字符大写。类里面有 constructor 函数,可以接受传递过来的参数,同时返回实例对象。constructor 函数 只要 new 生成实例时,就会自动调用这个函数,如果不写这个函数,类也会自动生成这个函数。生成实例 new 不能省略。 // 1.创建类 class class Star { constructor(name, age){ th原创 2022-04-25 20:28:55 · 371 阅读 · 0 评论 -
ES6 —— 函数进阶
文章目录一、函数的定义方式二、函数的调用方式三、函数内 this 的指向四、改变函数内部 this 指向一、函数的定义方式函数声明方式 function 关键字(命名函数) function fn() {}函数表达式(匿名函数) let fn = function() {}new Function('参数1', '参数2', '参数3') let f = new Function('a', 'b', 'console.log(a + b)') f(1, 2) //3原创 2022-04-27 21:54:06 · 641 阅读 · 0 评论 -
ES9 新特性 ------ 扩展运算符
在ES9 中 为对象提供了像数组一样的 rest 参数和扩展运算符。… 扩展运算符…user 涵盖了对象里面 username 之后的键值 function connect({host, port, ...user}){ console.log(host) console.log(port) console.log(user) } connect({ host:'127.0.0.1', port:原创 2022-03-06 09:40:33 · 1336 阅读 · 0 评论 -
ES6 ------ 基础(四)
SetES6 提供了新的数据结构 Set(集合)。它类似于数组,但成员的值都是唯一的,集合实现了 Iterator 接口,所以可以使用 扩展运算符 和 for...of进行遍历集合的属性和方法。1.声明一个set // 声明一个 set let s = new Set() console.log(s, typeof s);2. set 里写入数据 let s2 = new Set(['喜洋洋','沸羊羊','喜洋洋']) console.log(s2);原创 2022-03-05 12:10:13 · 385 阅读 · 0 评论 -
ES6 —— 递归
文章目录一、什么是递归?二、利用递归求数学题三、利用递归遍历数据四、浅拷贝和深拷贝一、什么是递归?如果一个函数在内部可以调用其本身,那么这个函数就是递归函数。简单理解:函数内部自己调用自己,这个函数就是递归函数。 let num = 1 function fn(){ console.log('打印六次') if(num == 6){ return //递归里面必须加退出条件 } num++原创 2022-04-30 20:44:07 · 2381 阅读 · 0 评论 -
ES10 ------ 扩展方法
对象扩展方法 Object.fromEntries()Object.fromEntries() 将二维数组转换为对象。二维数组 const result = Object.fromEntries([ ['name','理工大学'], ['xueke','前端,java,大数据'] ]) console.log(result)Map const m = new Map() m.set('name','理工大学') cons原创 2022-03-06 10:26:17 · 454 阅读 · 0 评论 -
ES7 新特性 ------ includes 和 **
includes包含返回 true,不包含返回 false const classic = ['西游记','红楼梦','三国演义','水浒传'] console.log(classic.includes('西游记')) //true console.log(classic.includes('活着'))// falsex**yx 的 y 次方console.log( 2 ** 10) // 1024等价于console.log(Math.pow(2,10)) // 1024原创 2022-03-05 17:47:13 · 408 阅读 · 0 评论 -
ES6 ------ let 和 const 关键字
let 和 const 关键字 及其 案例原创 2022-03-01 20:18:09 · 369 阅读 · 0 评论 -
ES6 ------ const关键字
const 用于声明 常量1.一定要赋初始值 const A会报 Missing initializer in const declaration(常量声明中缺少初始值设定项) 错误2.一般常量使用大写(潜规则),小写也不会报错 const A = 100 const b = 2003.常量的值不能修改 const A = 100 A = 200会报 Assignment to constant variable.(Assignment to constant variable.赋原创 2022-01-19 15:37:37 · 360 阅读 · 0 评论 -
ES6 ------ 基础(六)—— 模块化
模块化模块化是指将一个打的程序文件,拆分成许多小的文件,然后将小文件组合起来。模块化的好处:防止命名冲突、代码复用、高维护性ES6 模块化语法模块功能主要由两个命令构成:export 和 importexport 命令用于规定模块的对外接口import 命令用于输入其他模块提供的功能模块化暴露方式一、分别暴露:在每一句前都加上 export在 js 文件夹下 创建 Demo.js 文件 export let school = '北京大学' export functio原创 2022-03-05 17:29:50 · 662 阅读 · 0 评论 -
ES6 —— 严格模式
文章目录一、什么是严格模式?一、什么是严格模式?在严格的条件下允许 JS 代码。消除了 JavaScript 语法的一些不合理、不严谨之处,减少了一些怪异行为。原创 2022-04-28 16:17:30 · 2425 阅读 · 0 评论 -
ES6 —— 闭包
文章目录一、变量作用域二、什么是闭包?一、变量作用域变量根据作用域的不同分为两种:全局变量和局部变量。函数内部可以使用全局变量。函数外部不可以使用局部变量。当函数执行完毕,本作用域内的局部变量会销毁。二、什么是闭包?闭包(closure)指有权访问另一个函数作用域中变量的函数。简单理解:一个作用域可以访问另外一个函数内部的局部变量。 // fun 这个函数作用域 访问了另外一个函数 fn 里面的局部变量 num function fn(){ let num原创 2022-04-28 17:47:45 · 1118 阅读 · 1 评论 -
ES11 ------ 新增属性
私有属性 ‘#’ class Person{ // 公有属性 name // 私有属性 #age #weight // 构造方法 constructor(name,age,weight){ this.name = name this.#age = age this.#weight = weight }原创 2022-03-06 12:13:02 · 533 阅读 · 0 评论 -
ES6 ------ 基础(三)——Promise 基本使用
Promise 基本使用Promise 是 ES6 引入的解决异步编程的新解决方案。语法上 Promise 是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果。Promise 构造函数:Promise(excutor){}Promise.prototype.then 方法Promise.prototype.catch 方法 // 实例化 Promise 对象 const p = new Promise(function(resolve,reject){原创 2022-03-03 20:28:22 · 486 阅读 · 0 评论 -
ES5 —— 新增方法【Object.defineProperty()】
文章目录一、数组方法二、Object.defineProperty()一、数组方法迭代(遍历)方法:forEach()、map()、filter()、some()、every()。forEach() array.forEach(function(currentValue, index, arr))currentValue:数组当前项的值index:数组当前项的索引arr:数组对象本身 let arr = [1, 2, 3] let sum = 0 arr.fo原创 2022-04-27 20:13:18 · 723 阅读 · 2 评论 -
ES6 —— 通过价格 / 名字查询商品(filter 和 some 的使用)
初始化渲染页面按价格区间搜索对应产品按商品名称查询商品<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content.原创 2022-04-27 16:28:46 · 668 阅读 · 0 评论 -
ES6 ------ 基础(一)
变量的解构赋值ES6 允许按照一定模式从数组和对象中提取值,对变量进行赋值,这被称为解构赋值。数组的解构 const F4 = ['小沈阳','刘能','赵四','宋小宝'] let [xiao, liu, zhao, song] = F4 console.log(xiao) //小沈阳 console.log(liu) //刘能 console.log(zhao) //赵四 console.log(song) /原创 2022-03-02 15:59:48 · 716 阅读 · 0 评论 -
ES6 ------ let实践案例
实现效果: 点击div框, 切换颜色css代码 .item{ width:90px; height: 40px; display: inline-block; border: 2px lightblue solid; }html代码 <div class="container"> <h2>点击切换颜色</h2><hr/>原创 2022-01-19 12:10:36 · 464 阅读 · 0 评论 -
ES6 —— 正则表达式
文章目录一、正则表达式概述二、正则表达式的特点三、正则表达式的创建四、测试正则表达式 test五、正则表达式的组成一、正则表达式概述什么是正则表达式:用于匹配字符串中字符组合的模式。在 JavaScript 中,正则表达式也是对象。正则表达式通常用来检索、替换那些符合某个模式(规则)的文本。例如验证表单(匹配)、过滤页面中的一些敏感词(替换)、从字符串中获取我们想要的特定部分(提取)。二、正则表达式的特点灵活性、逻辑性和功能性非常的强。可以迅速地用极简单的方式达到字符串的复杂控制。邮箱原创 2022-04-30 21:58:09 · 1682 阅读 · 0 评论 -
ES6 —— 箭头函数
ES——箭头函数,阮一峰大佬分析。转载 2022-03-16 16:56:00 · 667 阅读 · 0 评论 -
ES6 —— 高阶函数
文章目录一、什么是高阶函数?一、什么是高阶函数?高阶函数是对其他函数进行操作的函数,它 接收函数作为参数 或 将函数作为返回值输出。函数可以作为参数传递 function fn(a, b, callback){ console.log(a + b) callback && callback() } fn(1, 2, function(){ console.log('最后被调用') })将函数作为返回原创 2022-04-28 17:04:09 · 586 阅读 · 0 评论 -
ES6 ------ 基础(二)
ES6 ------ 基础(二)SymbolSymbol 原始数据类型, 表示独一无二的值 。特点:Symbol 的值是唯一的,用来解决命名冲突的问题。Symbol 值不能与其他数据进行运算。Symbol定义的对象属性不能使用 for…in 循环遍历, 但是可以使用Reflect.ownKeys来获取对象的所有键名。创建 Symbol let s = Symbol() console.log(s, typeof s) //Symbol() 'symbol' let s2 =原创 2022-03-03 11:35:18 · 658 阅读 · 1 评论 -
ES8 新特性 ------ async 和 await
ES8 新特性 —— async 、await原创 2022-03-05 20:51:43 · 509 阅读 · 0 评论 -
ES6 —— 构造函数和原型
文章目录1、利用构造函数创建对象2、实例成员和静态成员3、构造函数原型对象 prototype4、对象原型 `__proto__`1、利用构造函数创建对象构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量附初始值,它总与 new 一起使用。我们可以把对象中一些公共属性和方法抽取出来,然后封装到这个函数里面。new 在执行时会做的四件事情:在内存中创建一个新的空对象。让 this 指向这个新的对象。执行构造函数里面的代码,给这个新对象添加属性和方法。返回这个新对象(所以构原创 2022-04-25 21:53:32 · 2431 阅读 · 1 评论 -
ES6 ------ 基础(五)
数值扩展Number.EPSILON(接近于2.2E-16) 是 JavaScript 表示的最小精度。 function equal(a,b){ if(Math.abs(a-b) < Number.EPSILON){ return true }else{ return false } } console.log(0.1 + 0.2 === 0.3) // false con原创 2022-03-05 16:34:49 · 612 阅读 · 0 评论 -
JavaScript —— JSchallenger Objects 对象练习(测试一下你的 JS 对象基础)【专题三】
文章目录JavaScript 对象练习1. 键值对,去掉键的引号2. 数组 a 和数组 b,创建一个键 a 和相应值 b 属性的对象,并返回3. 以数组的形式返回对象的键4. 返回对象 value 值的总和5. 返回除键值为 b 的原始对象JavaScript 对象练习1. 键值对,去掉键的引号 Test: myFunction('a', 'b') Expected: {a: 'b'} Test: myFunction('b', 'w') Expected: {b: 'w'}可以使用 []原创 2022-05-12 21:29:41 · 720 阅读 · 0 评论 -
JavaScript —— JSchallenger Arrays 数组练习(测试一下你的 JS 数组基础)【专题二】
文章目录JavaScript 数组练习1. 返回数组 a 的第 n 个元素2. 删除数组 a 的前三个元素,并返回结果3. 提取数组 a 的后三个元素,并返回结果4. 提取数组 a 的前三个元素,并返回结果5. 以数组 a 和 数字 n 为参数,返回 a 的最后 n 个元素6. 以数组 a 和 数组 b 为参数,清除 a 中出现的所有 b(2 和 '2'没区别的情况下),过滤后返回数组JavaScript 数组练习1. 返回数组 a 的第 n 个元素 Test: myFunction([1, 2,原创 2022-05-11 21:56:49 · 1109 阅读 · 3 评论 -
JavaScript —— JSchallenger Basics 基础练习(测试一下你的 JS 基础)【专题一】
JavaScript ------ JS 基础练习(测试一下你真的了解JS吗?)【一】JavaScript 基础将两个数字相加:myFunction(1,2) 预期值 3 function myFunction(a, b){ return a + b }原创 2022-03-08 20:13:52 · 801 阅读 · 0 评论 -
ES6 —— 继承
文章目录一、call() 方法的使用二、借用构造函数继承父类型属性三、利用原型对象继承方法四、类的本质一、call() 方法的使用call():调用这个函数,并且修改函数运行时的 this 指向。语法:fun.call(thisArg, arg1, arg2, ...)this.Arg:当前调用函数 this 的指向对象arg1, arg2:传递的其他参数 //ES5 直接调用 function fn(){ console.log('I want to eat.'原创 2022-04-26 21:49:45 · 2534 阅读 · 0 评论 -
JavaScript 核心基础(类型、值和变量)
JavaScript 核心基础(类型、值和变量)第一章: 类型、值和变量文章目录JavaScript 核心基础(类型、值和变量)1.1 概述与定义1.2.1 整数字面量1.2.2 浮点字面量1.2.3 JavaScript 中的算术1.2.4 二进制浮点数与舍入错误1.2.5 通过 BigInt 表示任意精度整数1.2.6 日期和时间1.3 文本1.3.1 字符串字面量1.1 概述与定义JavaScript 类型:原始类型和对象类型。原始类型:数值、字符串、布尔值。对象类型:在 Ja原创 2022-04-14 18:33:06 · 939 阅读 · 0 评论 -
JavaScript —— 生成随机数
JavaScript 生成随机数原创 2022-03-31 20:36:04 · 10561 阅读 · 2 评论 -
JavaScript —— 字符串(String)对象
字符串对象原创 2022-03-15 11:32:23 · 993 阅读 · 0 评论 -
JavaScript —— 数组(Array) 对象
创建一个数组常规方式: var myCars = new Array() myCars[0] = 'Saab' myCars[1] = 'Volvo' console.log(myCars[1]) // Volvo简洁方式: var myCars = new Array('Saab','Volvo','BMW') console.log(myCars[1]) // Volvo字面表达式: var myCars = ['Saab','Volvo','原创 2022-03-14 20:51:43 · 1829 阅读 · 0 评论 -
JavaScript —— 对象
JavaScript —— 对象(及原型对象)原创 2022-03-14 15:43:28 · 1098 阅读 · 0 评论 -
正则表达式 ------ 正则表达式(基础)
正则表达式(基础)转载 2022-03-08 21:23:31 · 328 阅读 · 0 评论