javascript
关注
分享
扫一扫
文章平均质量分 55
那一日面朝大海
好久不见 -q1367156312
展开
-
javaScript遍历对象、数组总结温故
【代码】javaScript遍历对象、数组总结温故。原创 2024-02-28 13:46:45 · 216 阅读 · 0 评论 -
splice、slice和split
核心slice：截取功能 截取数组为主，也可以截取字符串 返回新的数组，包含截取的元素 不改变原数组 splice()：数组增删查改 只能对数组增删查改，字符串无效 返回新的数组，内容是被删除的元素 会改变原数组 split：字符串 => 数组 字符串的方法，不是数组的方法。 返回一个字符串数组。 join：数组 => 字符串slice()核心从数组中截取任意个元素，返回结果为新的数组 不改变原数组。语法：新数组 = 原数组.原创 2021-12-07 13:42:36 · 309 阅读 · 0 评论 -
JS ES6展开运算符使用场景
目录1. 添加属性 2. 合并多个对象 3. 移除对象属性 4.动态移除属性 5. 调整属性顺序 6. 设置属性默认值 7: 属性重命名 8. 还有更秀的操作1. 添加属性复制对象的同时，为其添加新的属性。例子中复制了user对象到userWithPass，并添加了password属性。 1 2 3 4 5 const user = { id: 110, name: 'Kayson Li'} const原创 2021-08-31 17:37:54 · 363 阅读 · 0 评论 -
创建长度为100的数组，数值为下标
//实现方法一：循环赋值 var arr1 = new Array(100); for(var i=0;i<arr1.length;i++){ arr1[i] = i; } console.log(arr1); //实现方法二：push方法实现 var arr2 = new Array(); for(var i=0;i<.原创 2021-08-12 17:09:07 · 1270 阅读 · 0 评论 -
2收集常用的JS 代码片段
1、单行 If-Else 语句这是许多编程语言的共同特征。你可以使用三元运算符用一行代码编写整个语句，而不是在多行上编写 if-else。例如：constage=12;letageGroup;//LONGFORMif(age>18){ageGroup="Anadult";}else{ageGroup="Achild";}//SHORTHANDageGroup=age>18?"Anadult":...原创 2021-08-03 14:35:32 · 184 阅读 · 0 评论 -
复习JS 手写题
数据类型判断typeof 可以正确识别：Undefined、Boolean、Number、String、Symbol、Function 等类型的数据，但是对于其他的都会认为是 object，比如 Null、Date 等，所以通过 typeof 来判断数据类型会不准确。但是可以使用 Object.prototype.toString 实现。functiontypeOf(obj){letres=Object.prototype.toString.call(obj).split('...转载 2021-04-09 14:36:14 · 179 阅读 · 0 评论 -
call、apply、bind的区别和使用
面试当中几乎每次都会问到一个js中关于call、apply、bind的问题，比如…如何利用call、apply来做继承 apply、call、bind的区别和主要应用场景首先，要明白这三个函数的存在意义是什么？答案是：改变函数执行时的上下文，再具体一点就是改变函数运行时的this指向。有了这个认识，接下来我们来看一下,怎么使用这三个函数。let obj = {name: 'tony'}; function Child(name){ this.name = name;原创 2021-03-17 14:34:11 · 189 阅读 · 0 评论 -
判断数据类型
判断一个值是否为数组1、数组自带方法 Array.isArray(arr);//返回true或false2、判断该变量的构造函数是否为Array3、通过Object.prototype.toString判断Object.prototype.toString.call(o) === ‘[object Array]’; //true4、通过instanceof判断5、用jQuery的方法判断（$.isArray(arr)）判断值是否为对象1、toString().原创 2020-12-10 14:53:36 · 163 阅读 · 0 评论 -
JS扩展运算符的一些使用(...)
随ES2015出来，...扩展运算符也被利用起来扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。...运算符主要用于数组和对象的一些操作。函数调用function push(array, ...items) { array.push(...items);}function add(x, y) { return x + y;}const numbers = [4, 38];add(...numb.原创 2020-11-27 10:07:33 · 647 阅读 · 0 评论 -
JS数组方法温习2
用不好数组的程序猿不是一个好猿，我说的~前段时间接手一个项目，逻辑晦涩难懂，代码庞大冗余，上手极其困难。很大的原因就是数组方法使用不熟练，导致写出了很多垃圾代码，其实很多地方稍加改动就可以变得简单高效又优雅。因此我在这里总结下数组的常用方法和奇巧淫技（奇巧淫技主要是reduce~）。数组操作首先要注意且牢记splice、sort、reverse这3个常用方法是对数组自身的操作，会改变数组自身。其他会改变自身的方法是增删push/pop/unshift/shift、填充fill和复制填充copyW.原创 2020-11-23 13:18:09 · 283 阅读 · 0 评论 -
前端的一些算法(常用排序,多维数组扁平，树的遍历)
一：常见排序算法冒泡排序：function bubbleSort(arr) { var len = arr.length; for (var i = 0; i < len; i++) { for (var j = 0; j < len - 1 - i; j++) { if (arr[j] > arr[j+1]) { //相邻元素两两对比 var temp = arr[j+1];原创 2020-11-11 16:21:16 · 238 阅读 · 0 评论 -
js数组常用方法温习
整理了以下数组方法join() push()和pop() shift() 和 unshift() sort() reverse() concat() slice() splice() indexOf()和 lastIndexOf() （ES5新增） forEach() （ES5新增） map() （ES5新增） filter() （ES5新增） every() （ES5新增） some() （ES5新增）1：join()join，就是把数组转换成字符串，然后给他规定个连接原创 2020-11-05 14:54:50 · 239 阅读 · 0 评论 -
使用JS获取当前页面的URL(网址信息)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script> var url; url = window.location.href; /* 获取完整URL */ alert(url); /* http://127.0.0.1:8020/Test/index.html#test?name=t.原创 2020-10-30 11:14:41 · 286 阅读 · 0 评论 -
总结几个JS开发小技巧(转布尔，转字符数字，去除空格等等)
1 转换布尔值除了常规的布尔值true和false之外，JavaScript还将所有其他值视为 ‘truthy’ 或**‘falsy’**。除非另有定义，否则 JavaScript 中的所有值都是'truthy'，除了0，“”，null，undefined，NaN，当然还有false，这些都是**'falsy'**我们可以通过使用负算运算符轻松地在true和false之间切换。它也会将类型转换为“boolean”。const isTrue = !0;const isFalse = !1原创 2020-09-28 09:18:06 · 840 阅读 · 0 评论 -
JS截取字符串方法和对象判空
js对象判断是否为空：1.es6中可以使用Object.keys(obj)var data = {};var arr = Object.keys(data);alert(arr.length == 0); //true 为空， false 不为空2.将json对象转化为json字符串，再判断该字符串是否为"{}"var data = {};var b = (JSON.stringify(data) == "{}");alert(b); //true 为空， false 不为原创 2020-09-27 10:47:45 · 486 阅读 · 0 评论 -
jQuery/原生JS实时监听input输入框值变化
首先看一下dom中input事件：onpropertychange： IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。 在用js脚本改动该元素值时候亦能触发onpropertychange事件。 oninput：是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发原创 2020-09-24 14:59:39 · 4523 阅读 · 0 评论 -
原生js与Jquery对页面的操作对比
页面加载：原生js：window.onload=(){};Jquery ：$（ducument）.ready(function(){}); 或者$(function(){})为简写取值：表单元素：原生：valuejQuery：val()非表单元素：原生：innerHTML || innertextjQuery：html（） ||text（）通过id选择器：原生：document.getElementById’id值').valuejQuery：$(..原创 2020-09-24 14:49:25 · 242 阅读 · 0 评论 -
JavaScript可枚举属性与不可枚举属性
在JavaScript中，对象的属性分为可枚举和不可枚举之分，它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到。一、怎么判断属性是否可枚举 js中基本包装类型的原型属性是不可枚举的，如Object, Array, Number等，如果你写出这样的代码遍历其中的属性： varnum = newNumber(); for(varpro innum) { ...转载 2020-07-22 13:55:00 · 310 阅读 · 0 评论 -
5个很实用的数组迭代方法
学习数组迭代方法every() 迭代数组每一项，每项都符合条件的才返回true，反之false some() 迭代数组每一项，只要有一项符合条件就返回true，如果全部不符合才返回false map() 迭代数组每一项，可以给特定条件会返回重新组成新的数组 filter() 迭代数组每一项，可以给特定的条件进行筛选返回新的数组 forEach() 迭代数组每一项，没有返回值every()every() 方法，对数组中的每一项进行迭代，如果每一项都符合条件才可以返回true，反之返回fals转载 2020-07-13 10:15:32 · 1263 阅读 · 0 评论 -
JS获取页面通过URL传的参数
1.从一个页面通过url将参数传递给另一个页面www.xxx.com/xxx.html?key=value //前面指定要传值的目标地址，value为参数2.js获取url中传递的参数2.1 方法1function getQueryString(name) { var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i")); if (re转载 2020-07-01 15:11:44 · 749 阅读 · 0 评论 -
window.close关闭当前页面
浏览器处于安全策略考虑，只允许Javascript关闭由javascript打开的页面，为了用js关闭当前窗口，我们可以这么考虑，这也是最常用的做法。<a href="javascript:;" onclick='xx()'>fdsafas</a>function xx(){ // 重置window.opener用来获取打开当前窗口的窗口引用 /...转载 2020-04-29 09:22:52 · 2400 阅读 · 0 评论 -
几个经常用到的js小技巧
1、过滤唯一值Set对象类型是在ES6中引入的，配合展开操作...一起，我们可以使用它来创建一个新数组，该数组只有唯一的值。const array = [1, 1, 2, 3, 5, 5, 1]const uniqueArray = [...new Set(array)];console.log(uniqueArray); // Result: [1, 2, 3, 5]在ES6之...原创 2020-04-28 12:43:11 · 266 阅读 · 0 评论 -
this指向问题
一 this指向大全1. 全局的this指向window2. 函数内部的this指向window3. 对象里的方法中的this指向这个对象4. ---------以上内容总结为: this指向其调用者------------5. 箭头函数的this是定义其所在的对象而不是使用其所在的对象6. 构造函数中的this就是指向其实例化的对象二 练习题2.1 普通函数调用l...转载 2020-04-15 13:49:50 · 266 阅读 · 0 评论 -
js中的call、apply、bind理解
call、apply一、作用每个函数都包含两个方法，call() 和 apply()；在ES5中，this总是指向调用该函数的对象（这里不讨论ES6中的箭头函数this指向问题）；在特定的作用域内调用函数，并且改变该函数的this指向 ；1.call<script> console.log(this); //window window.co...原创 2020-04-15 13:36:38 · 202 阅读 · 0 评论 -
图片下载自定义名字+时间格式化
一：图片完成路径转base64二：base64转成blob文件三：执行下载操作四：格式化时间原创 2020-04-15 09:52:06 · 278 阅读 · 0 评论 -
JS时间戳、日期互相转换
获取当前系统时间戳： // 获取当前系统时间戳 var time = parseInt(new Date().getTime() / 1000);将日期格式转换成时间戳： var date = new Date('2014-04-23 18:55:49:123'); // 有三种方式获取 var time1 = date.getTime(); var time2 = da...原创 2020-04-13 10:51:04 · 330 阅读 · 0 评论 -
总结js实现对象数组的浅拷贝和深拷贝
深拷贝 VS 浅拷贝深拷贝和浅拷贝都是针对的引用类型，JS中的变量类型分为值类型（基本类型）和引用类型；对值类型进行复制操作会对值进行一份拷贝，而对引用类型赋值，则会进行地址的拷贝，最终两个变量指向同一份数据。// 基本类型var a = 1;var b = a;a = 2;console.log(a, b); // 2, 1 ，a b指向不同的数据// 引用类型指向同一份数...原创 2019-11-29 10:35:04 · 769 阅读 · 0 评论 -
rem的用法总结
rem是什么？rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。兼容性：目前，IE9+，Firefox、Chrom...原创 2019-11-28 15:01:56 · 4524 阅读 · 0 评论 -
总结：http状态码
状态码1xx100 Continue：服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。101 Switching Protocols：服务器转换协议：服务器将遵从客户的请求转换到另外一种协议。102: 由WebDAV（RFC 2518）：扩展的状态码，代表处理将被继续执行。状态码2xx:成功200 OK：请求成功（其后是对GET和POST请求的应答...原创 2019-11-20 16:06:19 · 389 阅读 · 0 评论 -
JS家的排序算法
十大经典算法排序总结对比一张图概括：主流排序算法概览名词解释：n: 数据规模k:“桶”的个数In-place: 占用常数内存，不占用额外内存Out-place: 占用额外内存稳定性：排序后2个相等键值的顺序和排序之前它们的顺序相同冒泡排序（Bubble Sort）冒泡排序须知：作为最简单的排序算法之一，冒泡排序给我的感觉就像Abandon在单词书里出现的感觉一样，每...转载 2019-11-19 15:35:57 · 196 阅读 · 0 评论 -
js去除字符串中的空格
使用js去除字符串内所带有空格，有以下三种方法：( 1 ) replace正则匹配方法 去除字符串内所有的空格：str = str.replace(/\s*/g,""); 去除字符串内两头的空格：str = str.replace(/^\s*|\s*$/g,""); 去除字符串内左侧的空格：str = str.replace(/^\s*/,""); 去除字符串内右侧的空...原创 2019-10-16 09:41:38 · 183 阅读 · 0 评论 -
前端 -- webpack 详解
随着前端的不断发展，现代前端开发的复杂度和规模越来越庞大。工程化的思想催生了很多流行框架的进程，作为现在最流行的前端构建工具--webpack。1. 对webpack的了解官方文档本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，将项目当作一个整体，通过一个给定的的主文件，webpack将从这个文件开始找到你的项目的所有...转载 2019-03-31 12:53:00 · 654 阅读 · 0 评论 -
JS中的DOM操作
最近总结原生js的一些知识，特总结一下JS中的常见DOM操作。DOM节点分为元素节点、属性节点、文本节点，操作DOM节点先拿到元素节点。1获取节点：document.getElementById(idName) //通过id号来获取元素，返回一个元素对象document.getElementsByName(name) //通过name属性获取id号，返回元素...原创 2019-03-25 13:44:55 · 163 阅读 · 0 评论 -
js检测浏览器内核、版本号
function isBroswer () {//检测浏览器内核--返回的是两个key，name：浏览器内核的名称---version：浏览器的版本号 var _broswer = {}; var sUserAgent = navigator.userAgent; var isOpera = sUserAgent.index...转载 2018-08-02 15:04:16 · 2719 阅读 · 0 评论 -
js中的return，break，continue的区别
导语： javaScript中有三种方法可以跳出循环或者终止循环。分别为break、return、continue。正文：一、break break 会使得整个程序终止执行或者包含了最内层的循环或者退出一个switch的循环。由于它是用来终止循环或者跳出switch循环的，所以只有当它出现在这些语句时，才是合法的。如果一个循环的终止条件非常复杂，转载 2018-05-08 16:19:46 · 418 阅读 · 0 评论 -
总结数组和对象常用的一些方法
数组：length设置或返回 数组中元素的数目。push() :向数组的末尾添加一个或多个元素，并返回新的长度，也就是添加元素后的数组长度。shift():用于把数组的第一个元素从其中删除，并返回第一个元素的值。unshift()：向数组的开头添加一个或更多元素，并返回新的长度。pop():用于删除并返回数组的最后一个元素。splice()：用于插入、删除或替换数组的元素。原创 2018-02-02 11:17:22 · 1942 阅读 · 0 评论 -
怎么理解VUE，VUE的数据驱动原理是什么，解释MVVM框架
一：Vue是什么，怎么理解VueVue是一个基于MVVM模式数据驱动页面的框架，它将数据绑定在视图上。属于实现单页面应用的技术。.总结起来的几大特点：（1）简洁 （2） 轻量 （3）快速 （4） 数据驱动 （5） 模块友好 （6） 组件化vue靠数据驱动双向绑定使我们开发页面更简单，开发者不需要手动的去修改dom。Vue通过数据双向绑定是一切变得更简单。它的数据驱动双向绑定，底层是通...原创 2018-01-30 18:06:55 · 14521 阅读 · 3 评论 -
javascript 数组以及对象的深拷贝的方法
javascript 数组以及对象的深拷贝（复制）的方法js中，数组和对象的拷贝（复制）如果使用=号来进行复制，那只是浅拷贝。 如上，arr的修改，会影响arr2的值，这显然在绝大多数情况下，并不是我们所需要的结果。 数组以及对象的深拷贝是javascript的一个基本功。数组的深拷贝条条大道通罗马，实现数组的深拷贝，是有好几种方法的。举例如下：转载 2017-12-01 18:07:49 · 417 阅读 · 0 评论 -
vue +ele表格获取数据加分页
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-cha...转载 2019-04-11 19:21:48 · 947 阅读 · 0 评论 -
VUE 实现tab切换效果
一：vue登录tab切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul li { list-style: none...原创 2019-04-03 18:23:29 · 533 阅读 · 0 评论