![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 62
廖若星辰LTY
经年已逝还愿我们不负往昔,来日未定你我皆是红尘黑马
展开
-
? 可选链操作符以及 ?? 与 || 的区别
?是可选链操作符,常用于访问引用类型具有不确定性的内部数据时,比如要访问一个对象中的数组,不确定数组一定有数据就可以使用 ? 取读取它的 length 属性,如果对象没有这个属性也仅会返回 undefined 而不会报错,这样可以有效规避“undefuned上没有 length 属性”的报错!代码示例:?? 和 ||?? 和 || 运算符都可以用于设置“默认值/备用值”的情况,但二者具有些微差别:?? 运算符仅有在左侧数据为 undefined 或 null 时才会取右侧的值,所以左侧数据为 0原创 2022-12-07 23:24:24 · 380 阅读 · 0 评论 -
JavaScript 封装格式化时间戳的函数
日常项目开发中把一个时间戳(如何获取时间戳?格式化为日常生活中正常常见的时间格式的业务是很常见的。这里封装了一个基础的格式化时间的函数供您参考。这个函数接收一个 10 位或者 13 位的时间戳(不传会默认当前时间),返回一个时间戳格式化后的数据对象内部包含年、月、日、时、分、秒、date=年月日、time=时分秒、msgDate=聊天场景下可能会用到的时间格式。原创 2022-01-21 18:59:23 · 983 阅读 · 0 评论 -
Vue组件传值:父传子、子传父、兄弟组件间的传值
父组件向子组件传值1.在子组件的props 中以数组形式接收父组件传递过来的值;2.父组件在使用组件时在组件属性中使用 v-bind 指令动态传值给子组件。示例如下:<body> <div id="app"> <div>{{tip}}</div> <!-- 调用 tab-bar 组件并传值,注意动态传值要给属性名添加上 v-bind 指令 --> <tab-bar :t..原创 2021-11-07 01:21:01 · 513 阅读 · 0 评论 -
前端面试题汇总
CSS 与 HTML 部分什么是盒子模型?在网页中,一个元素占有空间的大小由四个部分组成,分别是:元素的内容 content、元素的边距 padding 、元素的边框 border 和元素的外边距 margin,此四部分一起构成了 CSS 中元素的盒子模型。常见行内元素有哪些?块级元素有哪些?空元素有哪些?行内元素:a、b、span、img、input、strong、select、label、em、button、textarea块级元素:div、ul、li、dl、dt、dd、p、h1~h6、..原创 2021-11-06 00:51:11 · 965 阅读 · 0 评论 -
事件对象的 slientX、offsetX、screenX、pageX 看图就行
注:图片来源https://segmentfault.com/a/1190000018996051原创 2021-11-05 23:01:25 · 117 阅读 · 0 评论 -
实现一个克隆函数,可以深拷贝JS中的5种数据类型
要求:封装一个克隆函数 clone ,可以对 JavaScript 中 5 种主要的数据类型(包括 Number、String、Object、Array、Boolean)进行值的深拷贝。(注意:null 、array 和 object 都是属于 Object 类型) <script> // 封装 clone 克隆函数 function clone(obj) { var o; // 此函数的返回值存储克隆后的数 .原创 2021-11-05 21:25:47 · 873 阅读 · 0 评论 -
原生 JS 遍历对象方法汇总
本文主要分享使用原生的 JavaScript 遍历对象的几种方法,一起来看看吧:要遍历的对象:objconst obj = { id: 1, name: 'zs', age: '20' }1.for...in方法 for (k in obj) { // k 是对象的属性,obj[k] 可得到该属性的值 console.log(k, obj.原创 2021-11-04 22:16:17 · 702 阅读 · 0 评论 -
原生JS实现行走的时间效果
本文主要介绍使用原生 JavaScript 实现页面实时行走的时间效果,效果图如下:由以上效果图可以看出时间是动态的,是每秒钟进行刷新显示的。那么话不多说,下面直接上源码:时间:<span id="txt"></span> <script type="text/javascript"> // 页面刷新调用函数启动/刷新时间 showLeftTime() function showLeftTime().原创 2021-10-22 18:58:49 · 255 阅读 · 0 评论 -
vue-router 路由导航守卫
在vue-router路由的基本使用中我们已经介绍过路由的安装和配置等基本使用步骤了,下面我们再来介绍一个 vue-router 的高频使用方法——beforeEach() 路由导航守卫在项目的实际应用过程中很多页面和权限是根据客户端的用户身份动态决定的,就比如有的场景是没有登录的用户无法访问到首页,必须先登录才能跳转到首页进行后续的操作,这样我们就需要使用到 vue-router 路由导航守卫来限制用户手动跳转页面的操作。首先,比如我们的页面必须要用户先登录,且登录成功后服务器会生成一个 to..原创 2021-10-19 23:23:15 · 188 阅读 · 0 评论 -
Axios的基本使用-拦截器
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。Axios 具有以下特性:从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRFAxios 的使用需要进行安装与配置,下面分别介绍一下这两步:安装NPM 安装方式npm install axiosCDN方.原创 2021-10-19 22:49:50 · 2406 阅读 · 0 评论 -
web前端常用知识点杂记(不定时更新)
CSS样式穿透、设置最高优先级、首行缩进、删除线、文本溢出可滚动、设置背景图、边框渐变、背景渐变、文字渐变、禁用原生input、button边框、设置input光标颜色、设置透明度、伪类选择器、鼠标样式、HTML、CSS特效、滚动条样式;浏览器窗口大小、监听浏览器窗口变动、双击实现浏览器全屏或者退出全屏、JS生成随机ID、时间处理-Date() 对象、??与||、正则表达式校验手机号、随机数、eval函数、数组去重、JS常用数组、对象、字符串方法及使用示例、Vue相关知识、uniApp相关知识,内容持续更新原创 2021-10-14 17:19:03 · 1118 阅读 · 0 评论 -
将开发完成的项目打包上线(本地服务器示例)
我们的 Web 项目开发完成后先要进行一系列的调试优化,最后符合要求后才能进行打包上线,本篇主要以本地服务器为例介绍将开发完成的项目打包上线的步骤:1.先将需上线的项目进行 build 打包,会在项目根目录中自动生成一个 dist 文件;npm run build2.在与该项目同级目录下新建一个该项目的 server 文件夹,在 VS Code 中打开这个空文件夹,使用 “Ctrl + `”打开终端,输入 npm init -y 将项目自动初始化,然后运行 npm i express -S 为项原创 2021-10-14 17:08:39 · 1723 阅读 · 0 评论 -
在项目中操作 MySQL 数据库
上一篇,我们简单介绍了 MySQL 中的 SQL 基本语句的使用,此篇文章我们来看看如何在个人项目中使用 MySQL 数据库,通过 JavaScript 编程的形式来对 MySQL 数据库中的数据进行常规的增删改查操作。在项目中操作 MySQL 数据库的步骤:1.安装操作 MySQL 数据库的第三方模块(mysql) npm install mysql2.通过 mysql 模块连接到 MySQL 数据库// 1.导入 mysql 模块const mysql = require('m原创 2021-09-26 20:03:01 · 928 阅读 · 0 评论 -
jQuery-键盘事件
JavaScript的键盘事件主要分为keypress、keydown和keyup三种状态。keydown- 键按下的过程 keypress - 键被按下 keyup- 键被松开首先实现键盘事件最主要的两点就是:1.我们要给页面的哪个元素绑定键盘事件;2.我们要给该元素绑定键盘上的哪个键。要给哪个元素绑定我们就先获取到这个页面元素即可(可通过任一选择器方式获取到它);要绑定哪个键我们就需要先知道该键的ASCII码值是多少,这里不知道时可以百度搜索也可以直接用代码获取到该键的ASCII码..原创 2021-08-28 19:21:23 · 1328 阅读 · 0 评论 -
ECMAScript 6语法新增(简记)
ECMAScript 6.0(简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布。优化了我们 JavaScript 语言的编程性,改进、新增了一些语法让我们的 JavaScript 语言更加的强大了。下面简单记录了一下ES6的新增语法。新增关键字let和constlet——ES6中新增的用于声明变量的关键字,它的特点有:1.let声明的变量具有块级作用域且只在当前作用域内有效,非当前作用域无法访问到let声明的变量(而var声明的变量是全局的跨作用域也可原创 2021-08-28 00:45:52 · 164 阅读 · 0 评论 -
JavaScript-电商平台商品细节图案例
这里分享一个电商平台常见查看商品细节图案例,如京东网站手机类别中具体某一部手机详情页中,手机的细节图获得用户鼠标焦点即可在屏幕右侧展示出该图片区域的大图效果:京东网站效果图如下:...原创 2021-06-11 13:08:40 · 623 阅读 · 4 评论 -
JavaScript-添加删除节点-留言板案例
分享一个JavaScript的留言板添加留言、删除留言的小案例,内附详细代码分析、但不涉及数据库操作,只解析底层代码实现思路:实现效果原创 2021-06-02 20:34:21 · 747 阅读 · 1 评论 -
JavaScript-Tab栏切换效果(思路详解)
这里分享一个前端必会的案例,是一个Tab栏的切换效果,除了Tab栏本身会被点击切换之外,Tab本身也决定着其下方的内容板块的显示,效果展示:原创 2021-05-31 21:43:10 · 7852 阅读 · 4 评论 -
JavaScript-表单全选/反选效果(JS详解)
表单中常常会用到checkbox复选框,通过复选框做出的列表全选或全不选的效果也是很常见的,比如购物车的商品列表,那么这样的选择效果及其底层的实现思路及代码原创 2021-05-30 19:54:15 · 810 阅读 · 0 评论 -
JavaScript-Array()对象及其常用属性/方法
JavaScript的Array()对象是用于构造数组的全局对象,数组是类似于列表的高阶对象。那对于数组如果有想要详细了解一下的朋友可以点击链接看看这篇哦:JavaScript-数组-Array原创 2021-05-28 18:59:25 · 277 阅读 · 0 评论 -
JavaScript-内置对象-Date()
JavaScript内置了很多对象这里来看一下日期/时间对象——Date()对象实例化:var now = new Date(); // Date()是构造函数所以必须要使用new关键字来实例化原创 2021-05-28 14:18:33 · 214 阅读 · 0 评论 -
JavaScript-变量/函数预解析(也叫变量提升/函数提升)
JavaScript中的变量/函数提升也是一道经典面试题了,下面我们通过原理介绍、代码演示、注释分析来了解一下变量/函数提升也就是——预解析。JavaScript代码运行机制-预解析原理及作用:1.我们js引擎运行js分为两步:先进行预解析再代码执行(1)预解析:即js引擎会把js代码块里面所有的变量声明部分还有使用function关键字创建的函数提升到它当前所在作用域的最前面(这里的提升要注意作用域是局部还是全局,变量只是提升声明部分,赋值部分是不提升的,函数是提升整个函数名及函数体且函数体.原创 2021-05-26 22:07:33 · 766 阅读 · 0 评论 -
JavaScript-函数内置arguments对象
JavaScript中每个函数都有一个arguments的内置对象,也只有函数才有,这个对象里面存储了函数调用者传过来的实参,且数据的以伪数组形式存储的:下面通过代码来了解一下arguments的作用以及用法:<script> // arguments 的使用:只有函数才有arguments对象,而且是每个函数都内置好了这个对象 function fu() { // 这里没有写形参,因为有的情况下不确定调用者需要传递的参数个数原创 2021-05-26 17:32:50 · 315 阅读 · 0 评论 -
JavaScript数组-冒泡排序
数组的冒泡排序算法也算一道经典面试题了,这里也给大家分享一下JavaScript中关于数组的冒泡排序的写法和思路:先给大家上代码:<script> // 冒泡排序:将数组中的数字按照从大到小或从小到大的顺序排序 var arr = [2, 4, 5, 1, 3]; for (var i = 0; i < arr.length - 1; i++) { // 外层循环管趟数,即数组的全部项数都排好一共需要比较多少次一趟排好一个,注意趟原创 2021-05-26 00:48:09 · 1518 阅读 · 0 评论 -
JavaScript-数组-Array
JavaScript数组:数组即多个数据的集合,将多个数据以任意顺序集合在一起形成数组Array,这些数据叫项数,项数之间用英文逗号隔开,项数是字符串时需要放到引号中。如:var array = [10, true, 'hello', 'world', 0, 3.14, 1 + 2]; // 执行结果:[10, true, "hello", "world", 0, 3.14, 3]创建一个数组:// 创建一个数组// 1.使用new关键字var arr = new Array();原创 2021-05-26 00:00:33 · 200 阅读 · 0 评论 -
JavaScript-分支结构-if/switch语句
代码分支结构作为三大结构(顺序、分支、循环)之一其重要性自然是不言而喻的,下面我们根据小案例来学习一下if和switch分支结构:if 判断1.使用if条件判断验证用户输入的年份是否为闰年:<script> // 闰年算法:能被4整除且不能被100整除的为闰年(如2000年是闰年,1901年不是闰年则为平年) // 或者能够被400整除的就是闰年 var year = prompt('请输入一个年份:') if (ye原创 2021-05-24 21:20:10 · 334 阅读 · 0 评论 -
JavaScript-递增++运算符、递减--运算符
<script>//前置递增:先自加1,再返回值vara=10;++a;//++a=>10+1=>a=11varb=++a+2;//++a=>11+1=>12=>12+2=>14console.log(b);//b=14...原创 2021-05-24 19:08:57 · 500 阅读 · 0 评论 -
JavaScript-for循环嵌套-九九乘法表
<script>//打印九九乘法表(形如正直角三角)varstr='';for(vari=1;i<=9;i++){//外部控制行数一共9行for(varj=1;j<=i;j++){//内部控制每一行中的列数,是逐渐增加的str+=j+'×'+i+'='+j*i...原创 2021-05-24 18:47:10 · 661 阅读 · 0 评论 -
JavaScript-for/while/do...while循环
循环结构是JavaScript中很重要的代码执行结构,这里通过几个小练习简单介绍一下JS中的for/while/do...while三种循环:for循环<script> // 求1~100的整数累加和的平均值 var sum = 0, average = 0; for (var i = 1; i <= 100; i++) { sum += i; } average = sum原创 2021-05-24 20:28:57 · 524 阅读 · 0 评论