- 博客(31)
- 收藏
- 关注
RSS订阅原创 JavaScript一行代码实现数组去重
一行代码实现数组去重 let arr = [1,2,3,4,1,4,5,6,8,6]; arr = [...new Set(arr)]Set 是一个构造函数，用来生成 Set 数据结构，它类似于数组，但是成员的值都是唯一的、没有重复的， 初始化 Set 可以接受一个数组或类数组对象作为参数，也可以创建一个空的 Set：new Set( 数组 )，返回一个去重后的类数组…为展开运算符，将数组类数组展开每一项用逗号隔开或者： let arr = [1,2,3,4,1,4,5,6
2020-07-27 20:17:06
367
原创 JavaScript继承ES6实现
ES6实现继承// 父类 class Cat{ // 构造函数 constructor( a , b){ // 对象自身属性 this.name = a; this.age = b; // 实例对象上的函数 this.sayHi = function(){
2020-07-27 19:59:24
235
原创 JavaScript判断数据类型
判断数据类型利用typeof判断数据类型的时候，无论是null，array还是object，返回的字符串都是‘object’，并不能很好区分在Object的原型对象上有一个API可以直接判断数据的构造器，从而得出数据类型// 判断数据的类型（构造器）var str = 'abc';var num = 123;var boo = true;var arr = [3,4,5];var obj = {};var fun = function (){}var nul = null;var un
2020-07-23 20:31:33
186
原创 JavaScript的继承
JavaScript的继承JavaScript没有继承，而是通过原型链访问构造函数的原型对象上的方法，为了方便叙述，称为继承构造函数继承（对象冒充继承）原理：使用call，apply，bind改变构造函数内的this指向，从而继承构造函数内的属性和方法function Cat(n,c){ this.name = n; this.color = c; this.say = function (){ console.log('卖萌~'); }}Cat.
2020-07-23 20:20:19
131
原创 JavaScript的闭包
JavaScript的闭包首先看一个函数function outer(){ var x = 0; var y = 9; function inner(){ x++; console.log(x); // console.log(123); } // inner(); return inner;}inner();var fn = outer();fn();//9fn();//10fn();//11
2020-07-23 19:19:52
83
原创 JavaScript事件委托之鼠标移入移出事件
鼠标移入移出事件 <div class="parent"> 父元素 <div class="child"> 子元素 </div> </div>mouseenter和mouseleave这是一组鼠标移入和鼠标移出事件，如果是普通的事件绑定和事件监听，推荐用这一组 child.onmouseenter = function(){ c
2020-07-17 20:52:56
15650
原创 无中间变量交换变量值
无中间变量交换变量值 var a = 20; var b = 10; a = a + b; b = a - b; a = a - b;简写 a+=b; b = a-b a-=b结果为a=10，b=20
2020-07-15 08:00:03
113
原创 DOM对象自带标签和自定义标签
页面结构<button id="btn" title="一个按钮" type="button" index='123' abc='你好'>按钮</button>对象的属性（自带标签）元素自带标签会在页面获取dom对象的时候自动转为对象的属性放入对象中，所以自带标签可以直接用 对象.属性 取出，而自定义属性不可以console.log( btn.title );console.log( btn.id );conso
2020-07-14 21:31:54
472
原创 原生js实现简单的选项卡
选项卡点击栏目切换电影HTML结构：<div class="header"> <h3 class="active">喜剧</h3> <h3>爱情</h3> <h3>玄幻</h3> <h3>都市</h3> </div> <div class="content"> <div
2020-07-14 19:54:14
246
原创 JavaScript复杂数据类型和基本数据类型运算时发生的隐式转换
案例： console.log([] == ![]);结果：true简单理解：js在运算是会发生隐式数据类型转换，优先转换成适合计算的数据类型。相当于Number([]) == Number(![])复杂理解：复杂数据类型在运算的时候，优先使用底层的两个API发生数据转换valueOf( )：返回对象的初始值；toString( )：返回对象的字符串值；字符串var str1 = 'hello world 1';var str2 = new String('hello world 2
2020-07-13 22:55:21
213
原创 JavaScript不用正则验证密码强度
效果图HTML结构<div class="wrap"> <input type="text" class="pass"> <div class="box"> <p>弱</p> <p>中</p> <p>强</p> </div></div>CSS结构<style>*{ mar
2020-07-13 21:24:45
294
1
原创 JavaScript计时器如何传参
计时器使用具名函数不需要传参时 var timer = null; setInterval( print,1000 ) function print(){ console.log("hello"); }需要传参时 // 需要传递参数的时候 function log(a){ setInterval(function(){ console.log(a);
2020-07-13 20:55:25
485
原创 JavaScript数组去重
splice( );直接去重先用sort( )整理下顺序，让一样的相邻 function norepeat(arr){ arr.sort(); // 重新排序下数组 for(var i = 0;i < arr.length-1; i++){ // 将数组每一项和它下一项对比，如果相同，就删除 if(arr[i] === arr[i+1]){
2020-07-11 19:31:12
86
原创 JavaScript的快速排序
快速排序原理：1.找中点，分左右找到数组中间索引和此处的值，比这个值小的放在左边的数组内，比这个数值大的放在右边的数组内；利用递归调用自身，直至数组内只有一个或零个元素结束递归具体代码实现 function quickSort(arr){ // 设置递归出口，当数组只有一项或者0项的时候 //结束递归返回当前数组 if(arr.length <= 1){ return arr;
2020-07-11 15:08:51
98
原创 JavaScript的桶排序
桶排序原理：1，数组的下标是顺序排列的；2，把每个元素当做数组下标输入数组3，再利用for in循环取出自动排好的不为空的数组下标代码实现 function bucketSort(arr){ // 遍历数组，取出所有元素当做下标 var bucket = []; for(var i = 0;i < arr.length ; i++){ // 将原数组内容作为下标，要存什么数据无所谓，这
2020-07-11 14:44:41
198
原创 JavaScript的冒泡排序
冒泡排序原理：1.比较相邻元素，如果前面的比后面的大，交换位置2.每一对相邻的元素互相比较，这样每循环一次都会找出一个最大值3.n个元素总共进行n-1次代码实现 function bubbleSort(arr){ // 循环一次选出一个最大的，所以需要length-1个 for(var n = 0;n < arr.length-1;n++){ // 最后一个不需要跟后面的进行比较，
2020-07-11 14:32:47
104
原创 JavaScript的选择排序
选择排序法原理：1.假定最小值和最小值下标2.依次向后与这个假定值比较大小3.假设的最小值和实际的最小值换位；具体代码实现： function selectSort(arr){ // 从第一个数开始，每个数依次跟后面的比较，最后一个不需要比较 for(var n = 0;n< arr.length-1;n++){ // 假定第n个值是最小值 var min = arr[n];
2020-07-11 08:51:24
161
原创 利用sort()将数组排序
利用sort()方法将数组排序语法：数组.sort( )会将数据第一位按ASCII码排序，如果第一位相同，比较第二位语法：数组.sort( 回调函数（ a ， b）)在sort（）内传入一个回调函数，然后数组每两组传入回调函数，被形参a，b接受简写：arr.sort(function (a,b){//升序 return a-b;});arr.sort(function (a,b){//降序 return b-a;});完全代码：//降序排列arr.sort(fun
2020-07-09 20:04:13
2074
原创 js引用类型对象和数组
1.对象定义：对象是一组无序的键值对，是带有属性和方法的集合对象就是无序的数据集合属性是对象相关的值，方法是能够在对象上执行的动作作用：在单个变量中存储多个值字面量创建对象：又叫做JSON对象var obj3 = { "name": "xiaofang",// 属性 'age': 21,// 属性 sayHi: function (){// 方法 console.log('hi，大家好'); }, bool: true, sex:
2020-07-09 19:43:14
320
原创 获取页面元素下标
当页面有多个元素时，如何获得元素的下标html结构： <div class="box"> <div>adfsd1</div> <div>2fgsg</div> <div>3sdfa</div> <div>4sdaf</div> <div>5gfdag</div> </div>
2020-07-09 15:24:40
611
原创 JavaScript页面操作和变量声明
1.获取页面元素（DOM对象）dom1：支持ie678的页面元素获取方式var lis = document.getElementsByTagName('li');//括号内为页面标签的字符串//获取结果为伪数组，使用时需要用lis[下标]取出var btn = document.getElementById('btn');//括号内为元素id的字符串，可以直接使用dom2：不支持ie678页面元素获取方式var boxs = document.getElementsByClassName
2020-07-09 12:34:36
194
原创 JavaScript数据类型和变量声明
1.JS数据类型转换显式数据类型转换即通过一些特定API将数据类型直接转换a. 转换为字符串:API： toString( )语法：数据.toString( )返回值：字符串； console.log( (123).toString() );//'123' //切记数字是一个整体，要带括号，不带会报错 console.log( true.toString() );//'true' console.log( (undefined).toString );//报错 console.log(
2020-07-07 22:07:35
162
原创 JavaScript是什么
1.JavaScript是什么？JavaScript是一种直译式脚本语音，是一种动态的，弱类型的，基于原型的语言。直译式：直接编译并执行脚本：凡是不能独立运行需要依赖其他程序的，通常都叫做脚本动态类型：声明一个类型，能够随时改变它的类型弱类型：允许变量运算时进行隐式数据类型转换基于原型：原型的主要作用是继承，对象之间的继承，主要是靠原型链接2.js能做什么？网页前端开发（Javascript的老本行）移动开发 webapp 混合式应用网站后端开发（Node.js可以让js在后端运行）
2020-07-06 21:55:55
949
原创 JavaScript的进制转换
进位计数值进制：进位计数制，逢进制进一，原位归零2进制 0 1 10 11 100 101 110 111 。。。。8进制 0 1 2 3 4 5 6 7 1010进制 0 1 2 3 4 5 6 7 8 9 1016进制 0 1 2 3 4 5 6 7 8 9 a b c d e f 101.把10进制转换为其他进制的API—toString(进制)例：var num1 = 24;//十进制console.log( num1.toString(2) );//转成二进制 ‘11000
2020-07-06 20:49:58
202
原创 ES6中实现简单的字符串模板渲染（拼接插入字符串）
字符串拼接方法我们都知道，在ES5中字符串拼接方法比较繁琐。同一条字符串不能换行且要频繁用+拼接字符串。以拼接几个为例ES5字符串拼接： for(var i = 0 ; i < 100 ; i ++){ html += '<li class="box">' +'<span>hello<...
2020-03-15 22:54:23
3474
原创 选择排序，冒泡排序，桶排序和快速排序
排序方式之选择排序这里我们用从小到大排序举例第一：假定第一个是最小的项第二：用第一个不断跟后面的项依次对比，如果有更小的项，记录这个最小的项和下标第三：完成一次循环后，将第一个项与这个项交换位置。第四：第二次循环从第二项开始，以此类推，循环至完成倒数第二项的判断。代码实现：var arr = [11,2,32,4,54,6,3]; for(var k=0;k<arr.leng...
2020-03-08 22:56:26
206
原创 javascript变量和函数提升
javascript变量和函数提升当浏览器处理JavaScript代码的时，包括变量和函数在内的所有声明都会在任何代码被执行前被处理了变量提升在javascript中，有一个神奇的现象，就是有时候变量声明在后面，却在前面就可以调用。代码如下console.log(a);var a = 5;变量a的声明被提升到了当前作用域的顶端,即变量提升但是因为仅仅是变量声明提升了，后面赋值语句并...
2020-03-01 15:54:13
100
原创 多种方法实现自适应三栏布局
多种方法实现自适应三栏布局 网页开发中，经常会遇到左右宽度固定，中间宽度自适应的三栏布局，这里将介绍三种常用的方法（对页面渲染顺序无要求，如要求优先渲染中间部分，移步圣杯布局和双飞翼布局）方法一：html结构： <div class="box"> <div class="left"><...
2020-02-25 10:45:15
478
原创 双飞翼布局和圣杯布局
双飞翼布局和圣杯布局 网页开发中，经常会遇见左中右垂直三栏的布局方式，两侧结构宽度固定，中间自适应，有时候需要优先加载中间区域，那么便在DOM结构上便有所要求，需要中间区域在前，左右区域在后。 首先三个元素横向排列，用浮动实现。.center{float: left;}.le...
2020-02-23 17:24:21
2635
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人