JavaScript
关注
分享
扫一扫
文章平均质量分 75
halo1416
一个迷茫的前端攻城狮
展开
-
js之运算符详解
前言，前三个为js已经发布较久的运算符（做一个全面、详情的总结）；而后三个为js的新特性（或为实验中的特性）1. && （逻辑与 => 二元逻辑运算符）两边条件都为true时，结果才为true；如果有一个为false，结果就为false；当第一个条件为false时，就不再判断后面的条件注意：当数值参与逻辑与运算时，结果为true，那么返回的会是第二个为真的值；如果结果为false，返回的会是第一个为假的值。2. || （逻辑或 => 二元逻辑运算符）只.原创 2022-05-05 14:39:21 · 470 阅读 · 0 评论 -
通过js实现拖拽排序
一、实现效果二、实现效果实现原理： 主要依靠原生的 dragstart 和 dragend 事件当然：也可以基于插件 vue.draggable 实现<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content=原创 2022-02-10 11:16:06 · 3311 阅读 · 4 评论 -
js 实现拖动元素到任意位置
一、实现效果二、实现代码主要通过原生的 mousedown 和 mouseup 以及mouseleave 事件实现<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1, m原创 2022-02-10 14:01:37 · 5006 阅读 · 2 评论 -
页面无法自动播放音频的解决方案
问题描述：最近在做一个客服电话平台（电话呼出呼入），因为里面使用了webRTC实现了软电话功能，所以现在电话呼入之后，页面弹出接听弹窗并且播放来电铃声，提醒用户接听。所以就使用了audio标签的play() 做自动播放（很久以前这么做过），但是没想到报错如下：Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo原创 2022-01-10 11:26:39 · 3874 阅读 · 0 评论 -
如何判断WebSocket是否连接成功
一、前言：该文章基于原生WebSocket而编写的基础文章，大佬请绕过！！！二、判断是否连接成功判断依据：Socket.readyState （即状态为1就代表可以连接成功）值状态0连接尚未建立1连接已建立，可以进行通信2连接正在进行关闭3连接已经关闭或者连接不能打开在浏览器的控制台输入new WebSocket(地址)连接成功连接不成功在我们正式写 websocket 前，在浏览器里面快速的验证一下是否可以连接成功，还是原创 2021-11-23 17:06:59 · 12625 阅读 · 0 评论 -
JS 的原型和原型链 以及 instanceof 是如何判断的
一、准备知识：构造函数与实例化对象// 创建一个构造函数 Person function Person(name, age){ this.name = name; this.age = age; this.speak = function(){ console.log(this.name + '说他' + this.age + '岁了'); }...原创 2019-03-19 17:49:44 · 1218 阅读 · 0 评论 -
JS闭包的简单理解
一、理解闭包1. 如何产生闭包? 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包2. 闭包到底是什么? （可使用chrome调试查看，比较直接） 理解一: 闭包是嵌套的内部函数(绝大部分人) 理解二: 包含被引用变量(函数)的对象(极少数人) 即函数中有 ...原创 2019-03-29 17:35:03 · 375 阅读 · 0 评论 -
URI 编码解码方法 encodeURI、encodeURIComponent、decodeURI、decodeURIComponent 之间的区别
一、作用：用来编码和解码URI的 统一资源标识符，或叫做 URI，是用来标识互联网上的资源（例如，网页或文件）和怎样访问这些资源的传输协议（例如，HTTP 或 FTP）的字符串。除了encodeURI、encodeURIComponent、decodeURI、decodeURIComponent四个用来编码和解码 URI 的函数之外 ECMAScript 语言自身不提供任何使用 ...原创 2019-04-02 16:45:57 · 1074 阅读 · 0 评论 -
JS数据类型的判断 以及 数据在内存中的存储方式
一、数据类型的分类1. 基本(值)类型（直接在栈内存中存储数据值）String: 任意字符串Number: 任意的数字Boolean: true/falseUndefined: undefinedNull: null2. 对象(引用)类型（栈内存中存储的是地址值，在堆内存中才存储数据值）Object: 任意对象Array: 一种特别的对象(数值下标, 内部数据是...原创 2019-04-12 11:14:16 · 1352 阅读 · 0 评论 -
ES5中对Object扩展的静态方法 -- Object.create可以实现原型继承
一、ES5给Object扩展了好一些静态方法, 常用的2个:Object.create 和Object.defineProperties1.Object.create(prototype, [descriptors]) ==>> Object.create(原型对象, [新的实例对象的 (属性) 描述]) 作用: 以指定对象为原型创建新的对象 ...原创 2019-04-12 17:00:42 · 345 阅读 · 0 评论 -
ES6 中 class 显示原型继承
传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来讲，很有一种独树一帜的感脚！非常容易让人困惑！如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成。构造函数示例：//函数名和实例化构造名相同且大写（非强制，但这么写有助于区分构造函数和普通函数）funct...转载 2019-04-12 17:52:12 · 384 阅读 · 0 评论 -
JS中的浅拷贝和深拷贝 以及 深拷贝的实现
一、ES6中对对象的扩展方法： Object.assign(target, source1, source2..) :将源对象的属性复制到目标对象上实例：<script type="text/javascript"> let obj = {name : 'kobe', age : 39, c: {d: 2}}; let obj1 = {}...原创 2019-04-17 17:51:57 · 143 阅读 · 0 评论 -
函数中的this 和 call，apply和bind的区别
一、函数中的this1. this是什么？ 任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window 所有函数内部都有一个变量this，它的值是调用函数的当前对象2. 如何确定this的值？ ==>> 很实用 test(): window p.test(): p new t...原创 2019-04-19 15:24:05 · 182 阅读 · 0 评论 -
JS单线程的理解
1. 问题1：定时器真的能准确定时吗？示例：给 id = “btn” 的按钮绑定时间监听，执行定时器<script type="text/javascript"> document.getElementById('btn').onclick = function () { var start = Date.now() console.log('启动定时...原创 2019-05-19 15:17:25 · 991 阅读 · 0 评论 -
使用Speech Synthesis API 做语音播放
前提：富文本去除标签，只留下纯文本 == >> str.replace(/<[^>]+>/g, "")这是在vue中使用，以下是项目实际代码：1. 开始播放playRead(){ const articleTxt = this.article.content.replace(/<[^>]+>/g, ""); //获...原创 2019-07-05 12:00:09 · 9127 阅读 · 6 评论 -
一个复杂点的数组sort排序
前言：这是一个实际项目的例子，当时自己脑子有点转不过来（前端写复杂的排序的机会极少，感觉缺少那种思维）。后来给后台同学讲了下，直接就说少写了一个条件......数组源：const dataSessionArr = [ {date: "2019-05-06", sessionKey: 1} {date: "2019-05-13", sessionKey: 2} {d...原创 2019-03-21 12:03:02 · 845 阅读 · 1 评论 -
JavaScript 将0-26转成A-Z
前言： 最近的项目中有这样一个需求：后台返回一个题目集合，里面每一到题目都包含name，content 等字段；name为题目内容，content为题目选项（一个数组，包含了选项内容）。而在页面上需要将选项以 A, B, C, D...显示。数据结构：要显示的效果： 需要解决的问题： 需要将题目选项数组的中每个元素以 A, B, C, D...原创 2019-02-20 16:15:07 · 2947 阅读 · 0 评论 -
选择排序与冒泡排序的基本写法
记录一下选择排序与冒泡排序的基本写法：一、选择排序先来一张图解：代码：<!-- 选择排序? 永远拿第一个与后面的每一个进行比较，如果第一个比后面的大，那么就把第一个与后面大的交换。--><script type="text/javascript"> var arr=[2,5,8,1,4]; console.log(arr) /* //...原创 2018-08-22 23:21:47 · 602 阅读 · 1 评论 -
JS数据类型 以及 数据类型的转换
ECMAScript中将数据类型分为三类：基本数据类型，特殊数据类型和复合（引用）数据类型一、基本数据类型String：字符串数据类型，放在单引号或者双引号中Number：数字类型，包括int和float两种Boolean：布尔类型，只有true和false两种值二、特殊数据类型undefined：变量声明后但未赋值，其值便为undefined，如：var a；还有一种情...原创 2018-08-21 21:02:04 · 241 阅读 · 0 评论 -
JavaScript定时器函数
1. 定时器函数的基本使用<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1.如何定时？ s原创 2018-09-08 22:14:27 · 7634 阅读 · 0 评论 -
JavaScript中Node节点对象的增、删、改 、查
Node节点对象？ HTML文档中的每一个标签都是一个节点对象，节点对象具有自己的属性和方法。 Node节点对象作用？ 可以动态的添加、修改(替换)、删除、克隆html元素节点。 如何操作节点？ Node节点对象的属性和方法解决。1. 查 ==>> 后面需要用到，先学<!DOCTYP...原创 2018-09-08 23:35:01 · 661 阅读 · 0 评论 -
JavaScript中常见的事件函数
js的事件在实际项目中是用的非常多的，今天，总结一下基本并且常用的事件函数：1. 鼠标事件： onclick: 点击事件 ondblclick: 双击事件 onmouseover: 鼠标进入“某对象区域” onmouseout: 鼠标离开“某对象区域” ...原创 2018-09-18 22:17:23 · 3627 阅读 · 2 评论 -
js自定义右键菜单
前言：现在的网页基本都是有右键菜单的，类似于：（来自于Chrome任务网页，“捕捉网页截图 - FireShot的” 是安装的一个插件）；但是，我们有时候可以在一些网站上看到不一样的右键菜单即自定义右键菜单，如腾讯企业邮箱网页版： 今天，记录一些简单的右键菜单是怎么做的：<!DOCTYPE html><html> <head> ...原创 2018-09-23 20:23:49 · 13019 阅读 · 0 评论 -
JavaScript的事件注册与捕获
1 事件注册? 就是让一个html元素节点对象可以响应键盘/鼠标/网页/表单等事件; 2 事件注册的三种方式 2-1. 直接在元素标签上添加事件句柄 onclick="console.log('aaa');" onclick="myfunction();" 2...原创 2018-09-18 23:01:47 · 342 阅读 · 0 评论 -
js做滑动菜单
首先，先来一张效果图：其次，总结一下需要注意的地方：整个代码都需要写在 window.onload 事件中，因为页面加载完毕 ,才能拿到html元素，否则会报错； 事件注册以后，在里面拿不到 lis[i] 和 遍历数组的索引，所有在事件函数内只能用 this 或者事件源 event.target； 因为原因2，所有需要把菜单的索引存下来，然后到事件注册后取出索引； tabI...原创 2018-09-25 13:52:49 · 964 阅读 · 0 评论 -
js 常用正则表达式
1. 邮政编码: 6位数字 var postcodeRE=/^\d{6}$/;2. 由26个英文字母组成的字符串（包含大小写） var englishRE=/^[A-Za-z]+$/; 3. Email电子邮件地址 var emailRE=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-....原创 2018-09-23 23:05:40 · 401 阅读 · 0 评论 -
event对象在FireFox浏览器中的兼容性问题
event对象是属于 window 对象，主要用于解决事件源的问题。event对象常用的属性：获取事件源：event.target ===>> 一般浏览器中获取事件源（除IE以外） event.srcElement ===>> IE中获取事件源获取鼠标坐标：event.clientX ===>>...原创 2018-09-19 23:34:04 · 848 阅读 · 0 评论 -
js 做返回顶部效果
涉及的知识点： font-awesome字体图标；使用的cdn。 window.onload 窗口加载完成事件；如果js代码写在body标签之前，则所有的js都要写在window.onload的事件中；即等待窗口加载完成之后再执行！ window.onscroll 窗口滚动事件 窗口滚动的距离 document.documentEleme...原创 2018-09-25 17:39:39 · 1851 阅读 · 2 评论 -
js中Array的reduce()函数
函数定义： reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 对空数组是不会执行回调函数的。语法： 参数： 用法简单实例：1. 累计和 ==>> 初始值为数字<script type="text/javascript"> ...原创 2019-01-07 12:30:42 · 8519 阅读 · 1 评论 -
JS 中的对象
总结：1. 什么是对象? 多个数据的封装体 用来保存多个数据的容器 一个对象代表现实中的一个事物2. 为什么要用对象? 统一管理多个数据3. 对象的组成 属性: 属性名(字符串)和属性值(任意)组成 方法: 一种特别的属性(属性值是函数)4. 如何访问对象内部数据? 属性名:...原创 2019-01-08 23:48:03 · 212 阅读 · 0 评论 -
简单理解 柯理化函数
理解柯理化函数：1. 是函数2. 接受多个参数（一个参数没必要用柯理化）3. 将 接受多个参数 的函数变成 接受一个参数 的函数（函数嵌套），每个函数返回一个新函数并接受一个新的参数，直到最后返回计算结果。4. 调用方式不一样。普通函数：函数名(参数1, 参数2, ...); 柯理化：函数名(参数1)(参数2)...实例：普通函数//函数定义functio...原创 2019-02-20 15:40:46 · 1460 阅读 · 0 评论 -
数组常用的内置方法
总结一下数组常用的内置方法：<script type="text/javascript"> //1.合并两个数组 - concat() var arr1=[100,90,80]; var arr2=[70,60,50]; var arr3=arr1.concat(arr2,40,30,20,10); console.log(arr3); //2.用数组的元素组...原创 2018-08-22 23:03:29 · 627 阅读 · 0 评论