![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
文章平均质量分 63
winne雪
记录点滴~帮助你我他❥(づづ)╭❤~
展开
-
这些lodash方法真香!!
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。Lodash官网Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。Lodash 的模块化方法 非常适用于:1、 遍历 array、object 和 string2、对值进行操作和检测3、创建符合功能的函数lodash-es模块使得我们能按需引入lodash对应的工具方法。原创 2023-01-30 16:39:53 · 4863 阅读 · 1 评论 -
你可能还不知道的js使用小技巧
ES7~ES12中js使用小技巧原创 2022-10-16 20:40:48 · 474 阅读 · 2 评论 -
多用用js中的?? 和 ?.和 ??= 和 ||=
1、空值合并操作符(??)是一个逻辑操作符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。2、可选链操作符 ( ?. ) 允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。3、逻辑空赋值运算符 (x ??= y) 仅在 x 是 nulli原创 2022-08-09 19:59:10 · 211 阅读 · 0 评论 -
前端js实现文件下载——两种方式
前端选择使用哪种方式来进行下载动作,需要和后端进行协商。如果后端接口直接返回下载文件,那么前端就使用get请求url的方式进行下载如果后端接口返回的是Blob文件流,那么前端就使用ajax进行请求得到响应Blob数据进行处理后下载模拟form表单提交进行下载(实际开发一般不用)1、后端接口直接返回下载文件const downloadDialogue = (url, params) => { let result = ''; Object.keys(params).forE原创 2021-06-22 17:40:00 · 3154 阅读 · 0 评论 -
Array.reduce()——收集
自从学会了 Array.reduce() ,再也离不开它以前我没得选,现在我只想用 Array.prototype.reduce25个你不得不知道的数组reduce高级用法使用Array.reduce创建Promise回调链Array.prototype.reduce 实用指南原创 2021-06-21 14:41:18 · 110 阅读 · 0 评论 -
let和const
作用域:es5作用域:全局作用域,函数作用域es6作用域:全局作用域,函数作用域,块级作用域(if、for等这些大括号里面)变量在作用域之外是不能被访问的,访问的时候会报错说变量未定义,因为作用域之外生命周期结束了。letlet :在块级作用域有效,在该块级作用域之外将不能被访问。let :不存在变量提升(即将变量声明提升到它所在作用域的最开始的部分)。let :声明的变量不能重复声...原创 2018-11-07 10:08:20 · 2415 阅读 · 0 评论 -
ES6正则扩展(构造函数的变化)
1、ES5中正则表达式的写法//第一个参数表示要匹配规则字符串,第二个参数是修饰符(i表示不区分大小写进行匹配)let reg1 = new RegExp('abc','i');let reg2 = new RegExp(/abc/i); //这样的写法只能有一个参数let reg3 = /abc/i;console.log(reg1.test('abCd'), reg2.tes...原创 2018-11-07 14:14:04 · 116 阅读 · 0 评论 -
ES6新增的数据结构Set和WeakSet
一、SetES6提供了新的数据结构Set,Set对象不是真正的数组,可以用Array.from()方法吧Set对象转化为真正的数组。 可以用来保存复杂数据类型(Object)或者基本数据类型, 所有保存的值都是唯一的。 (Set是一种可遍历的集合对象,可以和数组进行比较理解)Set对象下面的方法:add(value):添加某个value到Set对象里面,返回Set结构本身。delete(v...转载 2018-11-09 15:13:32 · 148 阅读 · 0 评论 -
ES6中Object新增方法
1、Object.is()Object.is()它用来比较两个值是否严格相等,与严格比较运算符( === )的行为基本一致,是在三等号判断的基础上新增了两个不同之处。Object.is()不同之处只有两个:一是+0不等于-0,二是NaN等于自身。语法:Object.is(value1, value2);传入两个要比较的值,判断是否相同,全等的话返回true,不全等返回false。三等...原创 2018-11-09 10:02:30 · 7950 阅读 · 0 评论 -
ES6 - 类的静态方法和静态属性
一、静态方法类的所有方法都定义在类的prototype属性上面,所有类中定义的方法都会被实例继承,如果在类方法前面加上static关键字就不会被实例继承了。静态方法是直接通过类名来调用。class Person{ constructor(name="xf",age){ this.name = name; this.age = age; } static say(){ con...原创 2018-11-21 13:31:43 · 4800 阅读 · 0 评论 -
ES6的代理Proxy和反射Reflect
一、ProxyProxy(代理)是 ES6 中新增的一个特性。Proxy 让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。使用 Proxy 的好处是:对象只需关注于核心逻辑,一些非核心的逻辑(如:读取或设置对象的某些属性前记录日志;设置对象的某些属性值前,需要验证;某些属性的访问控制等)可以让 Proxy 来做。从而达到关注点分离,降级对象复杂度的目的。...原创 2018-11-12 10:04:08 · 709 阅读 · 0 评论 -
ES6字符串扩展(新增的方法)
1、includes():返回布尔值,表示是否找到了参数字符串。2、startsWith():返回布尔值,表示参数字符串是否在查找字符串的头部。3、endsWith():返回布尔值,表示参数字符串是否在查找字符串的尾部。let str = "string";console.log("includes",str.includes('t')); // includes truecon...原创 2018-11-07 15:45:33 · 208 阅读 · 0 评论 -
ES6属性名表达式
实际开发中,我们有时候需要使用变量作为对象属性名来拼接属性名或者获取对象动态变化的属性名的属性值,这时候就需要用到表达式作为属性名这种方式了。属性名(键名)可以通过变量依赖来生成。注意:使用表达式作为属性名,必须使用方括号[]!let obj = {};let str = "One";obj.food = "apple"; //使用标识符作为属性名obj["color" + str]...原创 2018-11-08 15:54:49 · 1190 阅读 · 1 评论 -
ES6、ES7、ES8、ES9、ES10新特性及其兼容性
强烈推荐阅读一篇文章,也是自己为了做保存把地址贴到自己博客,大家一起学习:https://juejin.im/post/5dda2b5e6fb9a07a83691766转载 2020-05-14 18:10:13 · 1840 阅读 · 1 评论 -
ES6的数组扩展( Array.of()方法 )
Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。Array.of() 和 Array 构造函数之间的区别在于处理**整数参数**。let arr1 = Array.of(3);let arr11 = Array.of("a");let arr12 = Array.of(3,"a",4);console.log(arr1); // [3]con...原创 2018-11-08 09:55:28 · 235 阅读 · 0 评论 -
ES6 - 类的继承
在es6的继承中,我们使用extends关键字。 //定义父类class Person{ constructor(name="xf",age){ this.name = name; this.age = age; } say(){ console.log("nice to meet you " + this.na...原创 2018-11-21 11:17:07 · 161 阅读 · 0 评论 -
ES8 - async 和 await
async 是“异步”的简写,而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于声明一个 函数 是异步的,而 await 用于等待一个异步函数执行完成。在函数前面加上async 关键字,来表示它是异步的,那怎么调用呢?async 函数也是函数,平时我们怎么使用函数就怎么使用它,直接加括号调用就可以了。async function timeout() ...转载 2018-11-22 14:32:54 · 210 阅读 · 0 评论 -
ES6 - Promise对象
Promise 对象用于一个异步操作的最终完成(或失败)及其结果值的表示。简单点说,它就是用于处理异步操作的,异步处理成功了就执行成功的操作,异步处理失败了就捕获错误或者停止后续操作。Promise对象来说,它也有三种状态:1.pending初始状态,也称为未定状态,就是初始化Promise时,调用executor执行器函数后的状态。2.fulfilled完成状态,意味着异步操作成功。...原创 2018-11-21 15:46:05 · 154 阅读 · 0 评论 -
ES6的尾调用和尾递归
尾调用 :是指一个函数作为另一个函数的最后一条return语句被调用。尾递归 :函数调用自身,称为递归。如果尾调用自身,就称为尾递归。ES6 中只要使用尾递归,就不会发生栈溢出,相对节省内存,优化了性能。...原创 2018-11-08 15:03:27 · 225 阅读 · 0 评论 -
ES6函数扩展(函数参数默认值)
一、函数的默认参数基本使用方法function test(x,y = "hello"){ console.log("函数参数:",x,y);}test("winne"); //函数参数:winne hellotest("winne","hi"); //函数参数:winne hi如上代码我们可以原创 2018-11-08 14:07:25 · 2980 阅读 · 0 评论 -
ES6新增的symbol数据类型
1、Symbol的概念在ES5中,对象属性名都是字符串容易造成属性名冲突。为了避免这种情况的发生,ES6引入了一种新的原始数据类型symbol,表示独一无二的值。Symbol() 函数返回的是 symbol 类型的值,该类型具有静态方法和静态属性。let sy1 = Symbol("winne");let sy2 = Symbol("winne");console.log(typeof...原创 2018-11-09 14:49:04 · 185 阅读 · 0 评论 -
ES6字符串扩展(Unicode编码表示法)
如果Unicode编码大于0xFFFF时需要使用es6字符串扩展的大括号。否则不能正确识别。//es5表示法console.log('a',`\u0061`); // a aconsole.log('a',`\u20BB7`); // a ₻7 (后面这个是乱码)//es6表示法console.log('s',`\u{20BB7}`); // s原创 2018-11-07 15:15:37 · 978 阅读 · 0 评论 -
ES6箭头函数
无参数的箭头函数:let fn = () => 5 ;解析:fn 为函数名,()为无参数时必须使用的小括号,返回值为5。当只有一条声明语句(statement)时, 隐式 return。一个参数的箭头函数:let fn = a => a2 ;let fn = (a) => a2 ;解析:有一个参数时,小括号可以省略。返回值为 a*2 。多个参数的箭头函数:let...原创 2018-11-08 14:57:51 · 136 阅读 · 0 评论 -
ES6数值处理新增的方法
1、Number.isFinite()判断一个数字是否是有限数字。(Number. 可以省略)console.log('15是否有限数值:',Number.isFinite(15));//15是否有限数值: trueconsole.log('NaN是否有限数值:',Number.isFinite(NaN));//NaN是否有限数值: false2、Number.isInteger()...原创 2018-11-07 17:05:28 · 350 阅读 · 0 评论 -
ES6数组扩展( find()、findIndex() )
find()函数用来查找目标元素,找到第一个满足条件就返回该元素,找不到返回undefined。findIndex()函数也是查找目标元素,找到第一个满足条件就返回元素的下标,找不到就返回-1。他们的都是一个查找回调函数。查找函数有三个参数:value:每一次迭代查找的数组元素。index:每一次迭代查找的数组元素索引,可省略。arr:被查找的数组,可省略。let arr1 = [1...转载 2018-11-08 13:27:41 · 912 阅读 · 0 评论 -
ES6新增的数据结构Map和WeakMap
一、MapMap对象是一种有对应 键/值 对的对象, JS的Object也是 键/值 对的对象 ;ES6中Map相对于Object对象有几个区别:1、Object对象有原型, 也就是说他有默认的key值在对象上面, 除非我们使用Object.create(obj)创建一个没有原型的对象;2、在Object对象中, 只能把String和Symbol作为键名。 但是在Map中,键名可以是任何基...转载 2018-11-09 16:13:43 · 381 阅读 · 0 评论 -
ES6的数组扩展( entries(),keys(),values() )
ES6 提供三个新的方法 —— entries(),keys()和values() —— 用于**遍历数组**,它们都返回一个遍历器对象(Array Iterator),可以用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。(数组的键名是有序的下标值,键值就是数组元素)let keyArr = ["a","b"...原创 2018-11-08 11:19:49 · 1111 阅读 · 1 评论 -
ES6的对象属性和方法的简洁表示法
1、对象的属性简洁表示法2、对象的方法简洁表示法:原创 2018-11-08 15:37:14 · 632 阅读 · 0 评论 -
ES6 - Generator
Generator函数是ES6引入的新型函数,用于异步编程,是Promise的更高级用法,跟Promise对象联合使用的话会极大降低异步编程的编写难度和阅读难度。Generator 函数,它与我们常见的函数有很多共同点,但还可以看到下面几个差异:1、通常的函数以 function 开始,但 Generator 函数以function* 开始。2、在 Generator 函数内部,yield ...转载 2018-11-22 15:09:06 · 352 阅读 · 0 评论 -
ES6的数组扩展( fill()方法 )
fill()函数,使用指定的元素替换原数组内容,会改变原来的数组。该函数有三个参数:fill(value, start, end)value:替换值。start:替换起始位置(数组的下标),可以省略。end:替换结束位置(数组的下标),如果省略不写就默认为数组结束。有参数时为结束位置,但不替换该位置。如果结束位置大于数组的长度,那么默认也只替换到数组的实际长度结束位置。替换的区间为 [...原创 2018-11-08 10:48:50 · 2089 阅读 · 0 评论 -
数据结构的对比Set、Map、Array、Object
数据结构的横向对比:增,查,改,删。1、Map和Array对比2、Set和Array对比3、Map、Set和Object对比通过上面的比较:如果都支持es6很良好,那么在选择数据结构的时候,优先使用Map,而不是数组;如果要求数据的唯一性,那么就优先使用Set,而不是使用object或者数组。...原创 2018-11-09 16:30:44 · 361 阅读 · 0 评论 -
ES6中的对象解构赋值
解构赋值:解构赋值语法是一个Javascript表达式,这使得可以将数据从数组或对象提取到不同的变量中(这段话是mdn中关于解构赋值的定义,注意这里的定义,可以看出解构主要用在数组和对象上)。说白了就是解析等号两边的结构,然后把右边的对应赋值给左边。如果解构不成功,变量的值就等于undefined。一、基本使用语法注意:对象解构赋值的键名对应很重要,不然会找不到。因为对象是无序的,必须通过...原创 2018-11-07 13:50:54 · 14311 阅读 · 0 评论 -
ES6字符串扩展(模板字符串)
es5中的多行字符串和变量拼接:let num = 10, price = 100;let str = "我们现在有"+num+"个人\ 来买苹果,一斤苹果10元钱,\ 他们每人买一斤,那么总价是"+price+"元。"//let str = "我们现在有"+num+"个人来买苹原创 2018-11-07 16:11:33 · 206 阅读 · 0 评论 -
Promise.all() 和 Promise.race()
一、Promise.all()接收一个参数,它必须是可以迭代的,比如数组。(它返回一个Promise实例)它通常用来处理一些并发的异步操作,即它们的结果互不干扰,但是又需要异步执行。它最终只有两种状态:成功或者失败,当里面的所有Promise实例状态发生变化的时候它才会变。它的状态受参数内各个值的状态影响,即里面状态全部为fulfilled时,它才会变成fulfilled,否则变成rejec...原创 2018-11-21 15:55:49 · 255 阅读 · 2 评论 -
ES6的数组扩展( Array.from()方法 )
Array.from()方法用于将类数组和可遍历的集合对象转为真正的数组,这样他们就能够使用数组中的方法来处理数据了。一、把获取到元素的类数组集合转化为真正的数组let aP = document.querySelectorAll("p");var arrP = Array.from(aP);arrP.forEach(function(item){ //转化为真正的数组之后就能使用数组的f...原创 2018-11-08 10:16:09 · 176 阅读 · 0 评论 -
ES6正则扩展(新增修饰符y、u)
1、y修饰符y :也是全局匹配,首次匹配和g修饰符效果一样,但是第二次往后就不一样了,g修饰符不一定要求匹配下标紧接着上一次开始匹配的去找,只要找到了就行;而y修饰符是规定要求匹配下标紧接着上一次匹配的开始 去匹配,不合适条件就为匹配失败为null。从上图代码第二段打印two分析,这里为第二次进行匹配,a1匹配到了下标为4开始的b,所以找到了;a2是从第一次匹配完成后紧接的下标3开始匹配,...原创 2018-11-07 14:59:53 · 709 阅读 · 0 评论 -
ES6模块化(js模块的定义和导出)
(一般在开发都会封装公用的js文件和一些功能性js文件,然后在哪个组件用到就在那个组件import引入)在ES6自带了模块化, 也是JS第一次支持module, 在es6以后 ,我们可以直接作用import和export在浏览器中导入和导出各个模块了, 一个js文件代表一个js模块;ES6的模块化的基本规则或特点:1、每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同...原创 2018-11-06 16:22:11 · 4846 阅读 · 0 评论 -
ES6 - 类class
ES6引入了Class(类)这个概念作为对象的模板,通过class关键字,可以定义类。新的class写法比对象原型的写法更加清晰、更像面向对象编程的语法。类只能先定义才能进行实例化,没有类提升效果。1、类的基本定义和生成实例//定义Person类class Person{ //类的构造函数(构造函数的参数是在new实例化的时候传入) constructor(name,age = 18)...原创 2018-11-21 10:42:55 · 140 阅读 · 0 评论 -
ES7新特性——Array.prototype.includes()、幂运算 **
1、Array.prototype.includes()方法Array.prototype.includes()的作用,是查找一个值在不在数组里,若在,则返回true,反之返回false。Array.prototype.includes()方法接收两个参数:要搜索的值和搜索的开始索引。当第二个参数被传入时,该方法会从索引处开始往后搜索(默认索引值为0)。若搜索值在数组中存在则返回true,否则...转载 2019-03-21 10:43:35 · 440 阅读 · 0 评论 -
ES6中的数组解构赋值
解构赋值:解构赋值语法是一个Javascript表达式,这使得可以将数据从数组或对象提取到不同的变量中(这段话是mdn中关于解构赋值的定义,注意这里的定义,可以看出解构主要用在数组和对象上)。说白了就是解析等号两边的结构,然后把右边的对应赋值给左边。如果解构不成功,变量的值就等于undefined。一、基本的语法使用例子1:普通数组解构赋值let a,b;[a,b] = [1,2];...原创 2018-11-07 11:34:01 · 568 阅读 · 0 评论