
JavaScript/ES6
与JS用法有关及与ES6语法有关的博文
公孙元二
如果你看到这句话,幸运值+1
展开
-
我问chatGPT,在JavaScript中构造函数和类的区别
在 JavaScript 中,类是一种使用更加简洁明了的方式来定义对象和对象的行为的方法,而它实际上是在构造函数和原型链的基础上构建的。因此,当我们说类是构造函数的语法糖时,我们的意思是类的实现基本上是通过构造函数和原型链来实现的,但使用类的语法可以让我们以更加直观和简洁的方式来定义对象和行为,从而让代码更加易读易懂。当我们说一个语言的某个特性是“语法糖”时,意思是这个特性的实现是建立在这个语言的基础特性之上的,并不是一个全新的特性。而对象是类的一个实例,是类的具体实现,通过实例化类来创建对象。原创 2023-02-18 20:41:05 · 1887 阅读 · 1 评论 -
Uncaught SyntaxError: Cannot use import statement outside a module
为了让 JavaScript 更模块化、更整洁以及更易于维护,ES6 引入了在多个 JavaScript 文件之间共享代码的机制。它可以导出文件的一部分供其它文件使用,然后在需要它的地方按需导入。为了使用这一功能, 需要在 HTML 文档里创建一个。浏览器报错的原因是我们用了算是在2022年比较现代的es6的语法, 但是浏览器将它作为以前版本的js解析,所以出现问题。原创 2023-02-18 18:16:37 · 6095 阅读 · 0 评论 -
react 拍平菜单树结构数据转化为一个普通的单层js对象
代码】react拍平菜单树结构数据转化为一个普通的单层js对象。原创 2022-07-22 10:01:52 · 477 阅读 · 0 评论 -
TypeError: Cannot set property ‘0‘ of undefined
二维数组赋值:TypeError: Cannot set property ‘0’ of undefined在JS中不能直接给数组的2层同时赋值,只能一层一层。例如:const dp = []// 比如直接给dp两层赋值,会报错dp[0][0] = 0//以上写法错误,js对于多维数组只能层层定义赋值//以下写法正确const dp = []// 应该先给第一层赋值dp[0] = []// 然后再给第二层赋值dp[0][0] = 0//最好这样直接初始化(更好的写法)const原创 2022-04-19 20:47:52 · 3959 阅读 · 0 评论 -
javascript代码放在html中不同位置的区别
浏览器解析html是从上到下的js代码可以出现在 HTML 的任意地方使用window.onload函数,可以减少错误发生(这个函数就是在文档加载完成之后立即加载js代码)window.onload = function(){/*要执行的js代码*/}1.放置在head标签中在HTML head部分中的js代码会在被调用的时候才执行(页面加载完成之前读取)。当你把脚本放在head部分中时,可以保证脚本在任何调用之前被加载。由于这时候网页主体(body)还未加载,所以这里适合放一些不是立即执转载 2022-04-06 22:05:37 · 3638 阅读 · 0 评论 -
js setInterval+setTimeout定时器轮询+终止轮询
常见的轮询方式: window.timer = setInterval(()=>{ this.promiseFun() },1000)大家一般都会使用setInterval,但要注意单纯使用它可能导致页面卡死。原因是setInterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,卡死。但是setTimeout是自带清除定时器的所以可以叠加使用。window.timer = setInterval(() => { setTimeout(this.promiseFun原创 2022-04-06 21:44:08 · 3386 阅读 · 0 评论 -
JS ES6扩展运算符的使用 - 个人笔记
let aa = {name:'123',age:12}let bb = {hobby:'篮球'}let hobby = '游泳'let cc = {...aa,hobby}console.log(bb) // {name: '123', age: 12, hobby: '游泳'}let aa = ['123','456','789']const [name,,age] = aaconsole.log(name) // '123'原创 2022-03-24 13:57:51 · 148 阅读 · 0 评论 -
js获取时间日期(昨天、今天、明天、后天)
function getDatetime(timestamp) { var date = new Date(timestamp); var Y = date.getFullYear() + '-'; var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; var D = date.getDate() < 10 ? '0' + date原创 2022-03-09 22:17:56 · 2535 阅读 · 1 评论 -
js对某个对象数组按照某个字段来排序
let arr1 = [{count:1,name:'小米'},{count:3,name:'华为'},{count:2,name:'苹果'}] function sortBy (field) { //根据传过来的字段进行排序 return (x, y) => { return x[field] - y[field] } }arr1.sort(sortBy('count')) //[{count:1,name:'小米'}原创 2022-03-07 15:00:32 · 10056 阅读 · 0 评论 -
js获取当前日期时间/指定日期时间格式化为yyyy-MM-dd和yyyy-MM-dd HH:mm:ss
前置知识:var myDate = new Date();myDate.toLocaleDateString(); //获取当前日期,打印:'2022/3/7'var mytime=myDate.toLocaleTimeString(); //获取当前时间myDate.toLocaleString( ); //获取日期与时间,打印:'2022/3/7 08:57:31'myDate.getYear();原创 2022-03-07 09:20:59 · 1155 阅读 · 0 评论 -
js计算某天距离某个指定日期是第几周
例如2022-03-01是星期一,那么2022-03-01(周一)到2022-03-06(周天)都属于第一周,03-07(周一)到03-03(周三)属于第二周。 // 指定时间转换为时间戳function toTimeStamp(dateString){ // dateString例如:'2022-03-05' // 例如返回:1646611200000 return new Date(dateString) - 0}// 计算指定时间是星期几(数字)function getweekd原创 2022-03-06 01:04:25 · 457 阅读 · 0 评论 -
js计算两个时间日期之间距离的天数
// 指定时间转换为时间戳function toTimeStamp(dateString){ // dateString例如:'2022-03-05' // 例如返回:1646611200000 return new Date(dateString) - 0}// 计算两个日期距离的天数function getDistanceDays(date1,date2){ // date1例如:'2022-03-05',date2例如:'2022-03-06' const date1_t.原创 2022-03-06 00:58:10 · 9172 阅读 · 0 评论 -
js计算某个日期时间是星期几
// 计算指定时间是星期几(中文)function getweekday(date){ // date例如:'2022-03-05' const weekArray = new Array("星期日","星期一", "星期二", "星期三", "星期四", "星期五", "星期六") const week = weekArray[new Date(date).getDay()] // 例如返回:'星期一' return week}// 计算指定时间是星期几(数字)functio原创 2022-03-06 00:56:34 · 909 阅读 · 2 评论 -
js计算指定时间是星期几
// 计算指定时间是星期几function getweekday(date){ // date例如:'2022-03-05' var weekArray = new Array("星期日","星期一", "星期二", "星期三", "星期四", "星期五", "星期六") var week = weekArray[new Date(date).getDay()] return week}使用:getweekday('2022-03-05') // '星期六'...原创 2022-03-05 20:37:52 · 2204 阅读 · 0 评论 -
js json对象转换成查询query参数
const json=[ { "name":"renan", "age":18, "sex":"male" } ]jsontoQuery(json){ let str = ""; let query = ""; for(let i in json){//i是对象的键值 for(let j in json[i]){//j是属性名 str+= j + "=" + json[i][j] + "&"//json[i][j]是属性原创 2022-03-01 16:57:51 · 3287 阅读 · 1 评论 -
JS给一维数字数组中的连续数字分组
// 输入 [1,1,1,2,3,4,5,8,10,22,24,25,26,66]// 输出[1,1,[1,2,3,4,5],8,10,22,[24,25,26],66]代码: sortArr(arr){ let result = [], i = 0; const list = arr.sort((a, b) => a-b); list.forEach((item, index) => { if (index =原创 2022-02-26 23:46:52 · 956 阅读 · 0 评论 -
js将字符串数组变成整数数字数组
方法一:var arr = ['0', '1', '2']console.log(arr.map(i => parseInt(i, 0)));方法二:var arr = ['0', '1', '2']console.log(arr.map(i => i * 1));//或者console.log(arr.map(i => i / 1));原创 2022-02-25 11:04:46 · 1549 阅读 · 0 评论 -
js 删除对象属性中属性值为空的属性
function removeProperty(obj) { Object.keys(obj).forEach(item => { if (obj[item] === '' || obj[item] === undefined || obj[item] === null || obj[item] === 'null') delete obj[item] }) return obj}转载 2022-02-24 22:50:36 · 3512 阅读 · 0 评论 -
async/await 的错误捕获
一、日常场景为了更好的说明,举一个很常见的例子:function getData(data) { return new Promise((resolve, reject) => { if (data === 1) { setTimeout(() => { resolve('getdata success') }, 1000) } else { setTimeout(() => { reject('g转载 2022-02-24 09:46:44 · 3980 阅读 · 0 评论 -
js 判断时间与当前时间相比 是否过期
与当前时间相比methods:{ compareTime(date1){ if(!date1){ return false } else { const oDate1 = new Date(date1); const oDate2 = Date.now() if(oDate1.getTime() > oDate2){ return f原创 2022-02-19 20:18:13 · 1541 阅读 · 0 评论 -
js Reflect对象中的13个静态函数
转载 2022-02-16 23:07:41 · 168 阅读 · 0 评论 -
JS生成4位验证码
前置知识:常见的ASCII码的大小规则:0~9<A~Z<a~z数字比字母要小。如“7”<“F”;数字0比数字9要小,并按0到9顺序递增。如“3"<"8”;字母A比字母Z要小,并按A到Z顺序递增。如“A"<“Z”;同个字母的大写字母比小写字母要小32。如“A”<"a”。几个常见字母的ASCII码大小:“A”为65;“a"为97;“0”为48需求:实现一个生成随机4位验证码的函数,包含数字、字母大小写代码:<script>// '0' -原创 2022-02-14 22:23:36 · 1588 阅读 · 1 评论 -
vue封装一个自己的按钮组件,按钮组件用jsx编写
声明(使用)src/components/Rbutton.vue<script>export default{ name: "Rbutton", props:{ type:{ type: String, default:'primary', validate(val){ return ['primary','success','danger','text'],includes(val) } },原创 2022-02-13 22:54:41 · 730 阅读 · 0 评论 -
export 和 export default 的区别
在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。ES6中,在JavaScript ES6中,export与export default均可用于导出常量、函数、文件、模块等。export命令export命令用于规定模块的对外接口。一个模块就是一个独立的文件。该文件内部的所.转载 2022-02-11 20:37:09 · 248 阅读 · 0 评论 -
el-table-column日期时间格式化
方式一:<el-table-column prop="endTime" label="结束时间" width="90" :formatter="formatDate"></el-table-column>methods: { //方法区 formatDate(row, column) { // 获取单元格数据原创 2022-02-11 16:13:45 · 12169 阅读 · 1 评论 -
JS计算数组(几个数字)中的最大值
Math.max()Math.max() 函数返回一组数中的最大值。console.log(Math.max(1, 3, 2));// expected output: 3console.log(Math.max(-1, -3, -2));// expected output: -1const array1 = [1, 3, 2];console.log(Math.max(...array1));// expected output: 3返回值返回给定的一组数字中的最大值。如果给原创 2022-02-06 23:14:20 · 1338 阅读 · 0 评论 -
JavaScript的原型与原型链
前言JavaScript 原型与原型链历来都是面试的重点,也是难点,理解起来没有那么容易。正文理解原型的几个要点,能更容易理解原型这个概念:1、所有的引用类型(数组、对象、函数)可以自由扩展属性(除null以外);2、所有的引用类型都有一个“proto”属性(隐式原型,是一个对象);3、所有的函数都有一个“prototype”属性(显式原型,是一个对象);4、所有引用类型的“proto”属性指向它的构造函数的“prototype”属性;5、当访问一个对象的属性时,如果这个对象本身不存在该属性转载 2022-01-30 16:57:04 · 190 阅读 · 1 评论 -
vue js 时间格式转换
用需求分析:前台页面有时需要展示YYYY-MM-DD格式,但后台却返回给我们YYYY-MM-DD hh:mm:ss、或者是一串字符一、通用的时间转换方法如下://格式化处理 dateFormat(time) { let date = new Date(time); let year = date.getFullYear(); // 在日期格式中,月份是从0开始的,因此要加0,使用三元表转载 2022-01-28 22:02:15 · 1645 阅读 · 0 评论 -
JS中将一个值转换为字符串的3种方法
1.value.toString()2."" + value3.String(value)第一种方法存在的问题是,它不能把null和undefined转换为字符串.还有第二种和第三种方法,这两种方法的效果基本一样.“”+value: 使用加法运算符配合一个空字符串可以把任意值转换为字符串,我觉得这种方法代码的可读性很差,但相对String(value)来,还是有一些人更喜欢用这种转换方式.String(value): 这种方法可读性更好,唯一的问题是,这种函数调用可能会迷惑一些人,尤其是那些熟悉J转载 2022-01-27 10:05:25 · 14164 阅读 · 0 评论 -
JSON格式和JavaScript对象
JSON与JavaScript 的对象表达方式十分相似,但是有所不同。JSON的Key必须包裹在一个双引号中,在实践中,编写 JSON 的时候,忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。原创 2022-01-21 23:23:19 · 459 阅读 · 0 评论 -
在 JavaScript 中 prototype 和 __proto__ 有什么区别
本文主要讲三个 问题prototype 和 protofunction 和 objectnew 到底发生了什么prototype 和 proto首先我们说下在 JS 中,常常让我们感到困惑的地方,就是 prototype 和 __proto__ 到底是干嘛的__proto__ 就是 Javascript中 所谓的原型 (这里,我们还是拿具体的例子来说明吧)function A (name) { // 这里是一个构造函数 thia.name = name转载 2022-01-16 22:03:27 · 670 阅读 · 1 评论 -
ES6 Reflect
1.概述Reflect对象与Proxy对象一样,也是 ES6 为了操作对象而提供的新 API。Reflect对象的设计目的有这样几个。(1) 将Object对象的一些明显属于语言内部的方法(比如Object.defineProperty),放到Reflect对象上。现阶段,某些方法同时在Object和Reflect对象上部署,未来的新方法将只部署在Reflect对象上。也就是说,从Reflect对象上可以拿到语言内部的方法。(2) 修改某些Object方法的返回结果,让其变得更合理。比如,Obje转载 2022-01-13 15:36:25 · 2883 阅读 · 0 评论 -
可选链和空值合并运算符的使用 - 个人小记
let customer = { name: "Carl", details: { age: 82 }};let customerCity = customer?.city ?? "暗之城";console.log(customerCity); // “暗之城”转载 2022-01-13 15:31:02 · 203 阅读 · 0 评论 -
JavaScript 判断对象中是否有某个属性
判断对象中是否有某属性的常见方式总结,不同的场景要使用不同的方式。一、点( . )或者方括号( [ ] )通过点或者方括号可以获取对象的属性值,如果对象上不存在该属性,则会返回undefined。当然,这里的“不存在”指的是对象自身和原型链上都不存在,如果原型链有该属性,则会返回原型链上的属性值。// 创建对象let test = {name : 'lei'}// 获取对象的自身的属性test.name //"lei"test["name"] //"lei转载 2022-01-13 13:57:45 · 3104 阅读 · 0 评论 -
Object.create()
MDN定义Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。 (请打开浏览器控制台以查看运行结果。)语法Object.create(proto,[propertiesObject])参数proto:新创建对象的原型对象。propertiesObject:可选。需要传入一个对象,该对象的属性类型参照Object.defineProperties()的第二个参数。如果该参数被指定且不为 undefined,该传入对象的自有可枚举属性(即其自身定义转载 2022-01-13 11:22:57 · 337 阅读 · 0 评论 -
JSON.parse(JSON.stringify(obj))实现深拷贝的缺点
我们经常用JSON.parse(JSON.stringify(obj))来实现深拷贝,但是有一天出了问题,才发现JSON.stringify的时候容易导致一些特殊类型的数据丢失和损坏。javaScript存储对象都是存地址的,所以浅拷贝会导致 obj1 和obj2 指向同一块内存地址。改变了其中一方的内容,都是在原来的内存上做修改会导致拷贝对象和源对象都发生改变,而深拷贝是开辟一块新的内存地址,将原对象的各个属性逐个复制进去。对拷贝对象和源对象各自的操作互不影响。深拷贝和浅拷贝深拷贝和浅拷贝是只针.转载 2022-01-10 15:56:34 · 5530 阅读 · 0 评论 -
为什么用Object.prototype.toString.call(obj)检测对象类型?
用 typeof 是否能准确判断一个对象变量,答案是否定的,null 的结果也是 object,数组的结果也是 object,有时候我们需要的是 “纯粹” 的 object 对象。如何避免呢?比较好的方式是:console.log(Object.prototype.toString.call(obj) === "[object Object]");使用以上方式可以很好的区分各种类型:(无法区分自定义对象类型,自定义类型可以采用instanceof区分)console.log(Object.prot转载 2022-01-10 15:10:12 · 232 阅读 · 0 评论 -
js localStorage
localStorage是H5提供的永久存储空间,一般最大可存储5M数据,并且支持跨域隔离,他的出现极大提高了前端开发的可能性。localStorage的使用很多人都知道setItem,getItem,removeItem, 但他也可以直接以成员的方式操作。localStorage.name = 'yd';// 获取localStorage.name; // yd// 删除delete localStorage.name;// 清除全部localStorage.clear();// 遍历原创 2021-12-18 22:53:33 · 1990 阅读 · 0 评论 -
js 解析获取地址栏get请求中的参数
通过replace方法获取url中的参数键值对,可以快速解析get参数。const q = {};location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);console.log(q);解析连接url可以通过创建a标签,给a标签赋值href属性的方式,获取到协议,pathname,origin等location对象上的属性。// 创建a标签const aEle = document.createEle原创 2021-12-18 22:51:46 · 1431 阅读 · 0 评论 -
js new Date() 当前时间/指定时间转换为时间戳
获取当前时间时间戳(毫秒值)// 方式一Date.now(); // 1606381881650// 方式二new Date() - 0; // 1606381881650// 方式三new Date().getTime() // 1606381881650创建Date对象的兼容性问题。// window和安卓支持,ios和mac不支持new Date('2020-11-26'); // window和安卓支持,ios和mac支持new&nb原创 2021-12-18 22:49:16 · 4804 阅读 · 0 评论