js基础
文章平均质量分 57
爱喝冬瓜汤的外星人
很懒
展开
-
常见js优化技巧
文章转自公众号:前端潮咖 https://mp.weixin.qq.com/s/K65x6_SmdCRCPlyXpvxb7g1.带有多个条件的if语句把多个值放在一个数组中,然后调用数组的 includes 方法。//longhandif (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') { //logic}//shorthandif (['abc', 'def', 'ghi', 'jkl'].includes(x))转载 2021-07-29 15:13:58 · 160 阅读 · 0 评论 -
echarts学习笔记
文章目录1.什么是ECharts2.ECharts基本使用3.标题组件4.工具箱组件5.弹窗组件6.饼状图7.航线图1.什么是ECharts什么是ECharts?ECharts是一个使用 JavaScript 实现的"数据可视化"库, 它可以流畅的运行在 PC 和移动设备上什么是数据可视化?也就是可以将数据通过图表的形式展示出来,ECharts提供的图表类型ECharts 提供了常见的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系原创 2021-01-21 11:35:25 · 581 阅读 · 2 评论 -
js 找出两个数组中不同和相同的元素
找出两个数组中不同的元素思路:将两个数组连接起来,不同的元素在连接后的数组中只有一份,同时从前面找和从后面找,若索引一致则选出来let arr1 = [1,2,3,4];let arr2 = [2,4,5,6];let getDiffElement = (arr1,arr2)=>{ console.log(arr1.concat(arr2));//连接后的数组 return arr1.concat(arr2).filter((value,index,arr)=>{原创 2021-01-07 10:44:08 · 1444 阅读 · 0 评论 -
通过简单的小例子来看函数防抖和函数节流
什么是函数防抖?函数防抖是优化高频率执行js的一种手段可以让被调用的函数在一次高频操作的过程中只被调用一次函数防抖的作用减少代码的执行频率,提升网页性能应用场景oninput、onmousemove、onscroll、onresize等一个小例子(防抖前):当输入框的内容改变就会打印输出内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met原创 2020-09-28 14:54:23 · 243 阅读 · 0 评论 -
如何给数组末尾添加一个值
let arr = [1,2,3];let num = 4;将num添加到数组末尾arr.push(num);console.log(arr);//[1,2,3,4]arr[arr.length] = num;console.log(arr);//[1,2,3,4]原创 2019-08-24 12:17:07 · 2769 阅读 · 0 评论 -
实现界面自动跳转到移动端
若用户是以移动终端打开的网站,实现自动跳转到移动端的网页navigater从navigater.userAngent可以知道用户是以何种设备打开的页面,所以就可以封装一个函数来判断该终端是不是pc,从而选择要不要跳转function isPc() { //拿到userAgent let userAgentInfo = navigator.userAgent; ...原创 2019-08-16 11:18:46 · 432 阅读 · 0 评论 -
移动端的几种适配方案
媒体查询1.通过媒体查询媒体查询的方式可以说是早期采用的布局方式,它主要是通过查询设备的宽度来执行不同的css代码,最终达到界面的配置2.媒体查询优势简单, 哪里不对改哪里调整屏幕宽度的时候不用刷新页面即可响应式展示特别适合对移动端和PC维护同一套代码的时候3.媒体查询劣势由于移动端和PC端维护同一套代码, 所以代码量比较大,维护不方便为了兼顾大屏幕或高清设备,会造成其他设备资...原创 2019-08-16 15:20:39 · 354 阅读 · 0 评论 -
如何阻止a标签的默认行为(阻止跳转)
点击如下标签会跳转到http://www.it666.com,但是如何让它不跳转呢?<a href="http://www.it666.com">知播渔教育</a>下面的做法可以阻止a标签的默认行为1.let oA = document.querySelector('a');oA.onclick = function(){ return false;//企业开...原创 2019-08-23 11:58:14 · 1712 阅读 · 0 评论 -
切割url后面的get参数,保存到对象中
function urlSerilize(url) { let result = {}; url = url.split('?')[1]; let map = url.split('&'); for (let i = 0;i < map.length;i++){ result[map[i].sp...原创 2019-08-27 18:02:12 · 312 阅读 · 0 评论 -
真伪数组的转换
//伪数组是一个对象,例如函数内部的arguments伪数组不能使用数组的方法,但可以将伪数组转换成真数组例子:let fakeArr = {0:1,1:2,2:3,length:3};//定义一个伪数组fakeArr.push(666);//报错 fakeArr.push is not a functionlet res = [].slice.call(fakeArr);consol...原创 2019-08-28 15:10:55 · 175 阅读 · 0 评论 -
js基本数据类型和引用值类型?null是对象吗?
js中的基本数据类型(原始数据类型):string number null undefined boolean symbol(ES6)引用类型:object在js中内存分为栈内存和堆内存:栈内存存放的一般是有固定大小和空间的内容字符串是个特例,字符串具有不变形,也存在栈内容中堆内存存放大小不固定的内容引用数据类型的数据存放在堆内存中当我们声明一个引用类型的变量时,会在栈内存中存放...原创 2019-09-07 22:35:16 · 1383 阅读 · 1 评论 -
JSONP原理
1.什么是JSONP?JSONP让网页从别的地址(跨域的地址)那获取资料,即跨域读取数据2.JSONP实现跨域访问的原理2.1在同一界面中可以定义多个script标签2.2同一个界面中多个script标签中的数据可以相互访问2.3可以通过script的src属性导入其它资源2.4通过src属性导入其它资源的本质就是将资源拷贝到script标签中2.5script的src属性不仅能导入...原创 2019-09-10 23:16:17 · 120 阅读 · 0 评论 -
保存cookie,00:00点过期
function setCookie(name,value) { //先获取当天的时间对象,加一天,然后将时间设置为00:00:00 let time=new Date(); time.setDate(time.getDate()+1); time.setHours(0); time.setMinutes(0); time.setSeconds(0);...原创 2019-09-11 09:19:35 · 180 阅读 · 0 评论 -
对象深拷贝
function deepCopy(target,source) { //1.遍历对象拿到每一个属性 for (let key in source){ if (source.hasOwnProperty(key)){//必须写这一步 // console.log(key); //...原创 2019-09-11 10:10:19 · 102 阅读 · 0 评论 -
js定义类以及类的继承
回顾一下es6之前是如何定义类的function Person(name,age) { //实例属性 this.name = name; this.age = age; //实例方法 this.say = function () { console.log(this.name,this.age...原创 2019-09-12 14:03:38 · 295 阅读 · 0 评论 -
js中this的指向
在函数执行时,this总是指向调用该函数的对象(箭头函数除外)要判断this的指向其实就是判断this所在的函数属于谁1、有对象就指向调用的对象2、没调用对象就指向全局对象3、用new构造的就指向新对象4、通过apply、call、bind可以修改this的指向...原创 2019-08-15 10:41:48 · 81 阅读 · 0 评论 -
阻止事件冒泡
<div class="father"> <div class="son"></div></div> *{ margin: 0; padding: 0; } .father{ width: 400px; hei...原创 2019-08-23 18:54:45 · 79 阅读 · 0 评论 -
javascript中循环索引同步的几种实现方式
循环索引需求:编写三个按钮,点击每个按钮,弹出按钮对应的数字html代码如下:<button>1</button><button>2</button><button>3</button>1.实现方式一(ES6之前)://思路:自执行函数(小闭包) var oBtns = document.querySe...原创 2019-05-14 17:48:24 · 495 阅读 · 0 评论 -
call、apply、bind的区别
三个修改this的方法的区别call:修改函数和方法的this为指定的值,会立即调用,可以传递参数,直接写在后面用逗号隔开apply:修改函数和方法的this为指定的值,会立即调用,可以传递参数,用数组来传递bind:修改函数和方法的this为指定的值,不会立即调用而是会返回修改this后的新函数,也可以传递参数,直接写在后面用逗号隔开...原创 2019-05-14 20:24:15 · 71 阅读 · 0 评论 -
箭头函数与普通函数的区别
箭头函数(ES6中定义函数的方法): let say = (str) =>{ console.log(str); }; say('这是一个箭头函数');普通函数:function say(str) { console.log(str);}say('这是一个普通函数');注意点:1.在箭头函数中,如果只有一个形参,那么()可以省略2.如果函...原创 2019-05-14 21:56:07 · 193 阅读 · 0 评论 -
交换两个变量里保存的值
方式一:借助中间变量let a = 10,b = 5; console.log(a, b);//10 5 let temp;//定义中间变量 temp = a; a = b; b = temp; console.log(a, b);//5 10方式二:不借助中间变量let a = 10,b = 5;console.log(a, b);//1...原创 2019-05-20 23:19:16 · 297 阅读 · 0 评论 -
如何判断一个对象是否为数组-多种方式
function isArray(obj) { if (typeof obj === 'object'){ return Object.prototype.toString.call(obj) === '[object Array]'; } return false; }测试: let arr = [1,2,3]...原创 2019-05-25 14:05:12 · 800 阅读 · 0 评论 -
js中let和var、const的区别
es6中增加了let关键字以定义块级作用域的变量1.var可以重复声明,后面的会覆盖前面的,let不允许重复声明,会直接报错 var a = 10; var a = 20;//20 console.log(a); let b = 10; let b = 20;//Identifier 'b' has already been declared cons...原创 2019-05-22 14:57:26 · 116 阅读 · 0 评论 -
对js闭包的理解
1.什么是闭包?闭包是一种特殊的函数2.如何生成一个闭包?当一个内部函数引用了外部函数的数据(变量/函数),那么内部函数就是闭包所以只要满足’函数嵌套’,'内部函数引用外部函数的数据’就能生成闭包3. 闭包特点只要闭包还在使用外部函数的数据,那么外部的数据就不会被释放也就是说可以延长外部函数数据的生命周期闭包注意点:当后续不使用闭包的时候,一定要手动将闭包设置为null,否则会出...原创 2019-05-22 17:17:13 · 82 阅读 · 0 评论 -
js数组的去重-多种方式
方式1: let arr = [1,2,100,3,4,5,5,1,2,3,10,82,10,1]; let obj = {}; let newArr = [];//去重后的数组 for (let i = 0;i < arr.length;i++){ if (!obj[arr[i]]){ obj[arr[i]] = true...原创 2019-05-24 11:12:44 · 119 阅读 · 0 评论 -
求数组的最值
给定一个数值数组,求最大最小值let arr = [1,5,2,10,7];求最大值:let maxValue = Math.max(...arr);console.log(maxValue);//10求最小值:let minValue = Math.min(...arr);console.log(minValue);//1...原创 2019-05-24 11:34:02 · 177 阅读 · 0 评论 -
如何控制文字的显示行数
对于谷歌浏览器来说只要给容器加上下面几行代码即可:overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp:3;/*指定文字显示的行数*/-webkit-box-orient:vertical;要兼容其他浏览器的话,用插件clamp.js实现...原创 2019-05-31 10:46:02 · 221 阅读 · 0 评论 -
new的原理是什么?通过new方式创建对象和通过字面量创建有什么区别?
1.new的原理是什么?看这里2.new创建对象和字面量创建本质上是一样的,字面量的方式比较简单,也不用调用构造函数,性能较好3.自己模拟new的操作function Person(type) { this.type = type; // return 10;//Primitive value returned from constructor will b...原创 2019-06-05 18:07:29 · 1987 阅读 · 0 评论 -
什么是事件委托?
上次面试没回答出来,因为真的没有咋用过(哭辽)由一个案例来引出:现在有一个需求:点击li添加背景颜色,并排他,点哪个哪个有背景颜色<ul> <li class="selected">1</li> <li>2</li> <li>3</li> <li>4</li&...原创 2019-08-23 18:20:39 · 8336 阅读 · 2 评论 -
事件执行的三个阶段
js中注册的事件执行的时候有3个阶段1.捕获阶段2.执行阶段3.冒泡阶段注意点:只有两个阶段能同时执行(捕获 + 执行、或者 执行 + 冒泡 )可以通过addEventListener来注册事件例子:<div class="father"> <div class="son"></div></div>第三个参数传false...原创 2019-08-23 18:39:09 · 932 阅读 · 0 评论 -
js中new操作符到底干了什么?
先看一个例子: function Person() { this.name = 'Andy'; this.age = 20; this.say = function () { console.log('hello everybody'); } } Per...原创 2019-05-19 16:57:48 · 2992 阅读 · 0 评论