【笔记】再学JavaScript ES(6-10)全版本语法
文章平均质量分 85
程序边界
step by step, all the way up!
展开
-
【笔记】再学JavaScript ES(6-10)全版本语法-真香!!
文章目录序课程体系笔记序工作之余,用了半个月的时间学习完了慕课网的《再学JavaScript ES(6-10)全版本语法》这门课程,学习过程中反观在工作中用到的那些ES6-ES10中的语法,感觉醍醐灌顶,同时一些晦涩难懂的语法内容并不是学习完一遍就能记得住的,包括记下的这些笔记,过一段时间后再看还会有一些打壳儿,这说明学习完之后还需要在实际工作中主动去使用这些新的特性和功能,共勉之!课程体系摘自慕课网笔记...原创 2020-06-05 14:33:21 · 3933 阅读 · 6 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——构建环境
文章目录一、Webpack1.简介(1)入口(entry)(2)出口(output)(3)loader(4)插件(plugins)(5)模式2.实际操作二、Babel1.简介2.工作原理3.选择场景4.安装工具5.配置文件三、Eslint1.规则2.插件3.配置4.实际操作webpack 中文文档 | webpack 中文网npm | build amazing thingsBabel 中文网 · Babel - 下一代 JavaScript 语法的编译器ESLint - Pluggable原创 2020-06-05 13:48:38 · 657 阅读 · 0 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——在Vue中的实战
文章目录一、Vue项目安装1.安装依赖2.创建项目3.运行项目4.安装eslint二、本地自定义mock三、使用axios四、创建组件并获取展示数据五、在实际场景中使用Proxy六、一、Vue项目安装1.安装依赖cnpm i -g @vue/cli@3.11.0cnpm i -g @vue/cli-service-global@3.12.02.创建项目vue create vue-lesson -dcd vue-lesson3.运行项目npm run serve4.安装eslin原创 2020-06-05 09:46:32 · 687 阅读 · 0 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——ES10新增
文章目录一、JSON二、Array1.Array.flat2.Array.flatMap三、String1.空格替换(首/尾)2.字符串中提取匹配项到指定数组中四、Object1.fromEntries案例1案例2练习五、Function六、try&catch七、BigInt八、Symbol.Description九、标准 globalThis 对象十、哈希标签#ES10对原型对象能力进行了增强一、JSON// ES10之前就有,bug:超出Unicode展示错误,例如0xD800-0xDF原创 2020-06-04 14:22:15 · 995 阅读 · 0 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——ES9新增
文章目录一、for await of——异步遍历1.集合异步遍历2.自定义可遍历数据结构异步遍历二、Promise.finally三、Object.rest&spread——对象合并(类浅拷贝)1.rest2.spread四、RegExp新增1.dotAll2.命名分组捕获3.后行断言后行断言练习题一、for await of——异步遍历1.集合异步遍历function gen (time) { return new Promise(resolve => { setTime原创 2020-06-03 18:22:18 · 507 阅读 · 1 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——ES8新增
文章目录一、比Promise更优雅的异步方式:Async/Await1.回顾Promise和Generator2.Async/Await案例二、ES8新增对Object快速遍历方法1.遍历与筛选2.整体转为可遍历对象三、ES8新增对String补白的方式四、ES8中获取Object数据的描述符一、比Promise更优雅的异步方式:Async/Await1.回顾Promise和Generator回调地狱&异步操作(Promise/then/resolve/reject/catch/all/r原创 2020-06-03 11:31:27 · 474 阅读 · 2 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——ES7新增
文章目录一、判断数组中元素是否存在新增Array.prototype.includes()与includeOf对比+0 === -0对复杂数组判断两种都不行二、指数运算一、判断数组中元素是否存在新增Array.prototype.includes()作用:查找一个值是否在数组里(的某个位置),返回booleanconst arr = [1, 2, 3]console.log( arr.includes(2), // true arr.includes(6), // false arr原创 2020-05-30 16:19:45 · 386 阅读 · 0 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——模块化设计(导入&导出)
文章目录模块化设计(导入&导出)导出导入问题解决模块化设计(导入&导出)导出// 各种类型的变量导出export const string1 = 'export const'export let string2 = 'export let'export var string3 = 'export var'export const number = 123export const boolean = trueexport const array = [1, 2, 3]ex原创 2020-05-29 18:18:30 · 371 阅读 · 0 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——Iterator
文章目录Iterator(遍历器)ES5ES6(使用Generator)差异对比Iterator(遍历器)主要遍历对象是数组和对象,ES6又新增了Map和Set,还可以遍历由这四种类型自定义的数据结构比如下面这种:ES5// 创建可遍历对象obj,将所需遍历内容以此对象属性(键值对)形式存放let obj = { allArrays: { arr: ['Aaa', 'Bbb', 'Ccc'], set: new Set(['Ddd', 'Eee', 'Fff', 'Ggg']原创 2020-05-28 22:19:03 · 378 阅读 · 0 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——Generator(案例:抽奖&斐波那契数列)
文章目录一、Generator1.引入案例:让遍历停下来ES5ES62.一、Generator1.引入案例:让遍历停下来ES5function loop () { for (let i = 0; i < 5; i++) { console.log(i) }}loop()ES6function * loop () { for (let i = 0; i < 5; i++) { yield console.log(i) }}const l =原创 2020-05-28 13:28:34 · 566 阅读 · 0 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——Proxy代理
文章目录一、Proxy一、Proxy原创 2020-05-25 19:30:44 · 386 阅读 · 2 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——反射机制及应用
文章目录Reflect1.案例:四舍五入2.案例:获得时间戳3.案例:对象操作(1)对象增加属性(2)对象删除属性(3)对象读写属性(4)获取对象属性描述(5)读写对象原型链上的方法(6)判断对象是否有某个属性(7)判断对象是否可拓展(冻结、密封)Reflect1.案例:四舍五入{ let price = 91.5 // ES5 console.log( price = price > 100 ? Math.floor.apply(null, [price])原创 2020-05-24 14:54:29 · 418 阅读 · 0 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——回调地狱&异步操作(Promise/then/resolve/reject/catch/all/race)
文章目录一、callback二、Promise三一、callback回调地狱:回调函数需要依赖上一层的回调执行完,所以形成了层层嵌套的关系最终形成回调地狱,无疑是不利于阅读与维护的一种形式。setTimeout(function (name) { let catList = name + ' ' setTimeout(function (name) { catList += name + ' ' setTimeout(function (name) { catLi原创 2020-05-23 21:15:56 · 500 阅读 · 0 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——模板字符串、解构赋值
文章目录一、模板字符串二、解构赋值1.Array2.String3.Number & Bollean4.Set5.Map6.使用rest参数7.Object8.参数解构赋值9.案例10.妙用(1)交换变量的值(2)加载模块一、模板字符串/** * 模板字符串 */// ES5var retailPrice = 20var wholesalePrice = 16var type = 'retail'var showTxt = ''if (type === 'retail') {原创 2020-05-22 22:00:10 · 511 阅读 · 0 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——ES6新增的y、u修饰符、flags 属性
文章目录一、一、原创 2020-05-22 13:22:08 · 949 阅读 · 1 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——对象属性、Set、Map、对象拷贝
文章目录一、对象属性二、Set数据结构三、Map数据结构四、对象拷贝一、对象属性/** 对象属性*/let x = 1, y = 2, z = 3, w = 4let obj = { x: x, // ES5写法 y, // ES6简略写法(属性名与携带value的变量名一致) [w + z]: 6, // ES6给对象的动态属性赋值写法, 支持表达式 f () {} // 支持函数属性(ES5不支持异步函数,ES6支持)}obj[z] = 5 // ES5给对象的动态属性原创 2020-05-20 16:19:50 · 470 阅读 · 0 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——参数、箭头函数
文章目录一、参数默认值1.ES52.ES6二、处理不定参数1.ES52.ES6三、rest参数的逆运算1.ES52.ES6四、ES6的箭头函数一、参数默认值1.ES5/** ES5参数默认值*/function f (x, y, z) { if (y === undefined) { y = 7 } if (z === undefined) { z = 42 } return x + y + z}console.log(f(1)) // 50cons原创 2020-05-20 11:58:14 · 442 阅读 · 0 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——Class
文章目录一、类的声明1.ES5的做法2.ES6的做法二、属性读写三、类的静态方法1.ES5中类的静态方法2.ES6中类的静态方法四、类的继承1.ES5中类的继承2.ES6中类的继承一、类的声明1.ES5的做法/** ES5类的声明 */// 每个子类特有的属性或方法写到父类的内部let Animal = function (type) { this.type = type}// 共有方法挂到父类的原型链上Animal.prototype.eat = function () {原创 2020-05-19 23:13:29 · 672 阅读 · 2 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——Array(遍历、转换、创建、查找)
文章目录一、数组遍历二、伪数组转换为数组1.什么是伪数组伪数组定义常见的伪数组伪数组判断2.ES5的做法3.ES6新增的做法三、创建一个新数组四、查找元素一、数组遍历const arr = [1, 2, 3, 4, 5]arr.a = 6/** 1.for 循环*/for (let i = 0; i < arr.length; i++) { console.log(arr[i])}/** 2.forEach 循环* *适用于全部遍历,不支持break和continue*原创 2020-05-19 13:06:51 · 733 阅读 · 0 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——作用域、let&const
文章目录一、作用域1.全局作用域2.函数作用域(局部作用域)3.块状作用域(ES6新增)4.动态作用域二、let&const1.let2.const三、经典面试题一、作用域新建static/lesson2-1.jstouch static/lesson2-1.js1.全局作用域定义在最外部,全局可用,可跨文件,跨函数使用(经过eslint会受影响导致不能使用)在最外部,通过var定义的全局变量具有全局作用域不加任何关键字的变量也具有全局作用域不同的一点是,不加任何关原创 2020-05-18 19:50:42 · 665 阅读 · 2 评论 -
【笔记】再学JavaScript ES(6-10)全版本语法——课程介绍与环境搭建
文章目录一、课程导学二、环境准备1.为什么需要单独准备环境?2.Node 安装3.创建项目初始化项目启动项目访问项目4.编辑器配置AtomVSCodesettings.json一、课程导学一定要在解决问题的过程中养成使用新知识的思维习惯二、环境准备1.为什么需要单独准备环境?2.Node 安装【笔记】Node.js概述和开发环境搭建3.创建项目初始化项目npx es10-cli create projectName或是两步分开执行:cnpm i es10-cli -ge原创 2020-05-17 22:31:52 · 1055 阅读 · 0 评论