ES6学习笔记
stack君
这个作者很懒,什么都没留下…
展开
-
ES6——promise案例
实现页面中有个板块,需要多张图片加载完之后才能进行显示:const loadImg = (src) => { return new Promise ((resolve,reject) => { const img = new Image(); img.src = src; img.onload = () => { resolve(img); }; i原创 2021-07-30 14:10:10 · 114 阅读 · 0 评论 -
ES6笔记——Promise.race
Promise.race([ ]):与Promise.all()对应,接受的也是个数组,里面也都是Promise实例。Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回哪个结果,不管结果本身是成功状态还是失败状态。1、只要有一个决议为成功或失败,新得到的Promise实例就相应地返回成功或失败。2、all传空数组会立刻决议为成功;而race传空数组会被挂起,它会没有任何反应function getData1() { return new Promise((res原创 2021-07-30 14:04:25 · 237 阅读 · 0 评论 -
ES6笔记——Promise.all
promise的三种状态:pending 进行中fulfilled 成功rejected 失败状态的改变不可逆,一旦 决议(状态的改变) 就不能再修改,决议的结果就是成功或者失败。Promise.all()Promise.all方法可以把多个promise实例包装成一个新的promise实例;Promise.all([promise1,promise2]):Promise—最终返回Promise实例;// 模拟需要多个请求的数据 才能进行下一步操作的情况function getData1(原创 2021-07-30 14:02:13 · 1018 阅读 · 0 评论 -
ES6——Promise错误处理
错误处理:1.:then方法,其中的resolve和reject回调都是异步的,所以tryCatch是无效的。resolve和reject都只能传递一个参数,第二个参数是拿不到的,使用扩展运算符也只能拿到长度为1的数//Promise自带2个函数参数resolve,reject,其中resolve表示成功去调用then方法的第一个回调;reject表示失败,去调用then方法中的第二个回调function f(val) {return new Promise((resolve, reject) =&原创 2021-07-13 10:35:09 · 542 阅读 · 0 评论 -
ES6——对比回调与Promise的流程控制
promise// 比较传统的回调方式与promise// 回调方法 用于请求数据(模拟)function f(cb) { setTimeout(function() { cb && cb(); }, 1000);}f(function() { console.log(1); f(function() { console.log(2); f(function() { console.log(3); f(function() { con原创 2021-06-26 23:38:57 · 118 阅读 · 0 评论 -
ES6——数组扩展
数组扩展1、扩展运算符的结合使用将一个数组展开,赋给函数的参数function foo(a, b, c) { console.log(a); console.log(b); console.log(c);}foo(...[1, 3, 2]);//1,3,2const user = ['小明', 14, ['吃饭', '打游戏'], '我没有女朋友'];function say(name, age, hobby, desc) { console.log(`我叫${ name }, 我原创 2021-06-23 23:41:49 · 167 阅读 · 1 评论 -
ES6——对象新的方法(原型)
对象新的方法(原型)1、proto 指向原型对象,编码时性能较低下console.log({a: 1});//打印出来的__proto__就是Object原型2、Object.setPrototypeOf( 要修改的对象,想作为新的原型的对象) 修改对象的原型对象,const obj1 = { a: 1};const obj2 = { b: 1}const obj = Object.create(obj1);//创建obj对象指定原型为obj1console.log(obj.__pr原创 2021-06-22 19:11:00 · 345 阅读 · 0 评论 -
ES6——扩展运算符及Object新方法
一、扩展运算符1、复制对象—浅拷贝深拷贝和浅拷贝的区别:(1)浅拷贝:浅拷贝的时候,创建一个新的对象,这个对象中存放着原对象精准的值,如果对象是基本数据类型,拷贝的就是基本类型的值,如果对象是引用数据类型,拷贝的则是这个对象所指向的一个指针,如果其中一个对象的引用数据类型改变了值,那么会影响另外一个的值,简单来说就是,只拷贝第一层中的值,但是对象中的子对象不会,两者就会有相同的引用。数组中:可以实现浅拷贝的方法:扩展运算符,concat,slice对象中:可以实现浅拷贝的方法:Object.ass原创 2021-06-22 18:55:08 · 393 阅读 · 0 评论 -
ES6——简洁表示对象
一、对象简洁表示法:1、当属性名与属性值相同时,可省略不写属性值,只写属性名,表示属性值与属性值同名;2、其方法,可省略冒号和function,即方法名(){ }//普通const getUserInfo = (id = 1) => { // AJAX .... const name = 'xiaoming'; const age = 10; return { name: name, age: age, say: function() { console.log原创 2021-06-22 18:36:09 · 646 阅读 · 0 评论 -
ES6——箭头函数
箭头函数:1、单行代码可加也可不加{ },若需写多行则添加{ };单行代码不加{ }的话,箭头函数自带返回值;//单行不加{ }的话,箭头函数自带返回值;const add = (a, b) => a+b //多行则添加{ }const add1 = (a, b) => { a += 1; return a + b;};console.log(add1(2, 2));2、单行代码不需要返回值方法://行代码添加{ },以多行方式显示,则无返回值;const pop原创 2021-06-19 01:17:43 · 237 阅读 · 0 评论 -
ES6——默认参数
函数扩展之默认参数:1、函数的形参可以设置默认值,默认值可以与前一个参数进行相加等运算,但不能和自身或后一个参数进行运算,否则报错;function add(a, b = 999) { console.log(a, b);//1,999}2、若函数未传其中的实参,就是使用形参的默认值,反之则取传入的实参;没有默认值且什么都不传,则返回undefined;有默认值且什么都不传,则返回默认值有默认值且传入相应的值,则返回传入的值function People({ name, age = 38原创 2021-06-19 01:08:13 · 619 阅读 · 0 评论 -
ES6——剩余参数
剩余参数扩展运算符:展开功能,如数组展开合并到新数组;剩余参数:聚合功能,如把调用函数传递的参数组合成一个数组,传入------- …则叫剩余参数;function sum(...args) { // let args = Array.prototype.slice.call(arguments); // let args = [...arguments]; // let [...args] = arguments; console.log(args);}//二者都只能在末尾,不能在原创 2021-06-19 01:07:22 · 222 阅读 · 0 评论 -
ES6——数值扩展
数值扩展一、新的进制表示法0o|0O代表八进制,octonary0b|0B代表二进制,binary二、新的方法与安全数1、parseInt和parseFloat功能:将数字以及字符串形式的数字转化为number形式的整数或者浮点数这两个方法挂载对象从window换到了Number下面,即要通过Number.parseInt(1.23)来调用。通过Number()可转为10进制;console.log(window.parseInt('1.23'));console.log(parseFl原创 2021-06-18 19:07:37 · 133 阅读 · 0 评论 -
ES6——正则扩展(u、y修饰符)
一、之前的修饰符声明正则表达式的几种方式:const regexp1 = /^a/g;//匹配开头为a的字符串,g表示global(全局)const regexp2 = new RegExp('^a', 'g');const regexp3 = new RegExp(/^a/g);const regexp4 = new RegExp(/a/g);const regexp5 = new RegExp(/a/);console.log('aabbcc'.match(regexp1));conso原创 2021-06-12 18:40:09 · 201 阅读 · 0 评论 -
ES6——新的Unicode表示法和遍历方式
新的Unicode表示法和遍历方式用for-of遍历字符let str = 'PROMISE';/***************************************************************/// ES6之前遍历字符串的方式// 使用for循环for (var i = 0, len = str.length; i < len; i ++) { console.log(str[i]); console.log(str.charAt(i));}/*原创 2021-06-12 18:36:56 · 283 阅读 · 0 评论 -
ES6——字符串新方法(部分)
padStart、padEnd:补全字符串长度{ let str = 'i'; let str1 = str.padStart(5, 'mooc');//往后补 console.log(str1); let str2 = str.padEnd(5, 'mooc');往前补 console.log(str2);}repeat:重复,带负数会报错,带小数取整{ console.log(‘i’.repeat(10));//对i重复10遍 //写一原创 2021-06-12 10:19:38 · 104 阅读 · 0 评论 -
ES6——模板字符串
模版字符串用法:使用反引号` ` 包起来的字符串可以使用${}拼接字符串,在${}里面可以继续嵌套模板字符串,也可以使用方法const xiaoming = { name: 'xiaoming', age: 14, say1: function() { console.log('我叫' + this.name.toUpperCase() + ', 我今年' + this.age + '岁!'); }, say2: function() { console.log(`我叫${ `Mr原创 2021-06-07 21:51:48 · 128 阅读 · 0 评论 -
ES6——解构赋值
解构赋值:解构赋值语法是一个JavaScript表达式,这使得可以将值从数组或属性从对象提取到不同的变量中。1、数组的解构赋值const arr = [1,2,3,4];let [a,b,c,d]= arr;//等号是赋值语句,两侧都是数值的时候,它们就会进行匹配,根据位置一一对应起来,把匹配到的值赋给变量。2、更复杂的匹配规则const arr = ['a','b',['c','d',['e','f','g']]];const [ , ,[ , ,[ , ,g]]]=arr;//就是变量原创 2021-06-05 23:45:21 · 211 阅读 · 0 评论 -
ES6——const常量
1.常量必须在声明的时候赋值,否则报错const a = 1;//必须赋值2.常量不能被修改, 但是!!为引用类型的时候,可被修改,const只能保证指向的引用地址不变,但是地址中的内容是可以改变的//类型为对象const xiaoming = { age: 14, name: '小明'};console.log(xiaoming);//{age:14,name:"小明"}xiaoming.age = 22;console.log(xiaoming);//{age:22,name:原创 2021-06-05 21:31:35 · 194 阅读 · 0 评论 -
ES6笔记——let
let与var的区别:1、let声明的变量只在当前(块级)作用域内有效2、var声明的变量只在当前作用域内有效3、let声明的变量不能被重复声明4、不存在变量提升(JavaScrip t 中,函数及变量的声明都将被提升到函数的最顶部。 JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。 )暂存死区:暂存性死区是指只要作用域内存在let、const,那么它们所声明的变量或常量就会自动绑定这个区域,不再受外部作用域影响。第一张图中, console.log(a)这句代码原创 2021-06-05 10:37:48 · 145 阅读 · 0 评论