原生js
天下1281
这个作者很懒,什么都没留下…
展开
-
如何匹配字符串的开头是G_和F_
如何匹配字符串的开头是G_let strIndexOf = this.form.varKey.indexOf('G_');//如果变量英文 不是以G_开头的就给它加上。if(strIndexOf === 0){ }原创 2019-12-13 20:47:48 · 265 阅读 · 0 评论 -
JSON对象去重
给下面这个数组去重let arr = [1,3,4,1];第一种方法:定义一个新的数组newArr,遍历原数组arr,如果newArr没有出现原有数组的每一项就push到newArr中。let arr = [1,3,4,1];let newArr = [];arr.forEach(item=>{ if(newArr.indexOf(item)===-1){ ...原创 2019-10-12 09:44:54 · 1379 阅读 · 0 评论 -
获取for循环中的索引值
*{margin: 0;padding: 0;}li{margin-bottom: 10px;}123//获取索引值的方法//1.用indexvar oList = document.getElementsByTagName("li");for(var i=0;ioList[i].index = i;oList原创 2017-02-28 19:02:47 · 3607 阅读 · 0 评论 -
数组去重
var arr = [1,2,2,5,5,3,4];var n = []; //一个新的临时数组 //遍历当前数组 for(var i = 0; i //如果当前数组的第i已经保存进了临时数组,那么跳过, //否则把当前项push到临时数组里面//indexof()查找字符串第一次出现的位置//如果没找到则返回-1if (n.indexOf(arr[i]) == -原创 2017-03-07 00:38:24 · 267 阅读 · 0 评论 -
原生js写手风琴
原生js手风琴特效*{margin: 0;padding: 0;}ul,li{list-style: none;}.box{width: 1050px;height: 300px;margin: 100px auto;overflow: hidden; }.accordion li{float: left;width: 100px原创 2017-02-25 01:56:02 · 2571 阅读 · 0 评论 -
数组方法的总结
1.push() 该方法在数组的末尾添加一个或者多个元素,返回数组的长度,原数组会改变。 2.pop() 该方法在数组的末尾移除一个元素,返回移除的元素,原数组会改变 3.shift() 该方法在数组的前端移除一个元素,返回移除的元素,原数组会改变 4.unshift() 该方法在数组的前端添加一个或者多个元素,返回数组的长度,原数组会改变。 5.concat() 该方法用于连接两原创 2017-04-27 10:25:11 · 358 阅读 · 0 评论 -
js中的map()方法
map定义和方法 map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理的后值。 map()方法按照原始数组元素顺序依次处理元素。 注意: map不会对空数组进行检测 map不会改变原始数组 arr.map(function(currentValue,index,arr),thisValue) 参数说明 function(currentValue,index,arr)原创 2017-05-29 01:53:53 · 92329 阅读 · 0 评论 -
webpack
webpack是什么? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less、sass)图片都作为模块来使用和处理。 我们可以直接用require来引入各模块。即使它们可能需要经编译(比如JSX和sass),我们不需要过于担心,因为webpack中有健全的加载器(loader)可以处理这些事情。 webpack的优势: 其优势主要归纳原创 2017-06-28 21:26:29 · 248 阅读 · 0 评论 -
join()方法的用法
join()方法,用于把数组中所有元素放入一个字符串。 元素是通过指定的分割符被分割的。 语法:arrayObject.join(separator);separator 指定要使用的分隔符 返回值 返回一个字符串,该字符串是通过把arrayObject()的每个元素转化为字符串,然后把该字符串连接起来,在两个元素之间插入separator字符串而生成的。代码示例:var arr = new原创 2017-06-22 10:44:03 · 402 阅读 · 0 评论 -
事件监听函数addEvent
<script type="text/javascript"> //这里的try{……}catch(e){……} 代替 if……else……语句,避免浏览器出现错误信息。 function addEvent( obj,type,handle ){ try{ //Chrome、Safari、Firefox、Opera、IE9.0及其以上版本 ob原创 2017-06-26 23:31:26 · 1036 阅读 · 0 评论 -
for...in用于遍历数组或者对象的属性
for…in 用于遍历数组或者对象的属性 语法:for( 变量 in 对象 ){ //在此执行代码}for( i in obj ){ //在此执行代码}代码实例:var obj = { 'aa': 1,'bb':3,'cc':5};for( i in obj ){ console.log(i); //属性 aa bb cc console.log(obj[i原创 2017-06-27 09:00:46 · 9482 阅读 · 1 评论 -
Vue-路由
对于初学者童鞋,在代码出错时,不要急于回去看代码,而是看控制台是否报错,如果报错,再定位。这样迅速的找到错误所在。而不是急于看代码,看了半天也没找到原因。原创 2017-07-06 00:12:14 · 296 阅读 · 0 评论 -
addEventListener() 事件监听
无意间有人问到了,这个方法,我就学了一下,顺便敲了一个小demo。 addEventListener() 用于向指定元素添加事件。 可以向一个元素添加多次事件或者多次不同事件,后面的事件是不会覆盖前面的。 语法: element.addEventListener(event,fn,useCaption ); 参数说明:tr件,比如 click mouseenter mouseleave原创 2017-06-14 22:56:31 · 37005 阅读 · 0 评论 -
事件绑定、事件监听、事件委托
事件委托 事件委托就是利用冒泡的原理,把事件加到父元素或者祖先元素上,触发执行效果。 html代码:<ul id="list"> <li id="item1">1</li> <li id="item2">2</li> <li id="item3">3</li></ul>js代码:<script type="text/javascript"> var list =原创 2017-06-27 18:33:40 · 326 阅读 · 0 评论 -
事件监听(addEventListener())及其移除(removeEventListener)
html<div id="box"></div>js<script type="text/javascript"> var box = document.getElementById("box"); function clickfn(){ console.log("传到box上了"); } function clickhandle(){原创 2017-06-27 22:36:49 · 11118 阅读 · 0 评论 -
事件监听函数
<div id="box">123</div><script type="text/javascript"> //获得此元素 var box = document.getElementById("box"); /* * 函数名:clickFn * 功能:一个普通的函数,实现打印功能 */ function clickFn(){原创 2017-06-27 23:31:25 · 2659 阅读 · 0 评论 -
sort-排序
sort 用于对数组中的元素进行排序 语法: arrayObjct.sort(sortby) 参数 描述 sortby 可选,按规定顺序,必须是函数返回值 对数组的引用,请注意,数组在原数组上进行排序,不生成副本。 说明 如果调用该方法时没有用参数,将按字母顺序对数组中的元素进行排序,说得更精确一点,是按照字符编码的顺序进行排序,要实现这一点,首先应该把数组的元素都转化成字原创 2017-08-01 17:41:22 · 246 阅读 · 0 评论 -
冒泡排序
冒泡排序在面试题中也经常出现 算法过程如下:var arr = [7,3,6,2,22,11,55,43,21];for( var i=0;i<=arr.length-1;i++){ //这里注意要-1,因为最后一项已经是最大的了,没必要在进行比较了。 for( var j=i+1;j<=arr.length;j++){ if(arr[i] >= arr[j]){原创 2017-08-01 18:32:25 · 204 阅读 · 0 评论 -
react-router 4.x(路由)
一、react-router1.安装npm install react-router-dom --save2.使用,我们直接上菜,想必大家已经饿了。//index.jsimport "../css/reset.css";import "../css/common.css";import React,{ Component } from "react";import { render } fr原创 2017-08-08 18:13:52 · 1896 阅读 · 0 评论 -
遍历数组和对象的方法
一般的我们遍历数组是用for遍历的var arr = [2,3,1,5];for( var i=0;i<arr.length;i++){ console.log(arr[i]);}我们可以使用内置的forEach方法: 此方法用于调用数组中的每个元素,并将元素传递给回调函数。 注意:forEach对于空数组是不会执行回调函数的。forEach不能return,map可以,下文有例子。原创 2017-08-02 14:47:41 · 1068 阅读 · 0 评论 -
斐波纳契数列
//斐波纳契数列 是一组这样的数字:0,1,1,2,3,5,8,13,21,34……在数学上,斐波那契数列是以递归的方式定义:f(0) = 0;f(1) = 1;f(n) = f(n-1)+f(n-2);//1 1 2 3 5 8 …… 写法一: function num(n){ if( n==0||n==1){ return n; } if原创 2017-08-05 11:39:33 · 482 阅读 · 0 评论 -
快速排序
我们知道数据结构中有9中排序法: 一般用到的有: 冒泡排序法(前面已经讲过) 快速排序法 思路: 1.找中间值 2.遍历数组,小于中间项的放在左边,大于中间项的放在右边。 3.递归 代码如下:function quickSort(arr){ if(arr.length<=1){ //注意这里 不能写成双等 return arr; } //获取数转载 2017-08-05 10:48:19 · 231 阅读 · 0 评论 -
js函数注释规范
之前,写代码的时候都是很简单的一种注释,或者有些压根没有注释。注释是代码的一部分,一个完整的程序必须有注释。这样不仅方便自己更新和维护项目,更有利于日后他人 接手你的项目时可以快速知道你写的是什么。 下面我们看一下代码注释的魅力所在。 @methed 声明函数或类方法,用法/*方法说明 *@method 方法名 *@for 所属类名 *@param{参数类型}参数名 参数说明 *@ret原创 2017-08-07 09:25:59 · 24728 阅读 · 6 评论 -
ajax请求
submit_content.onclick = function(){ //console.log('aa'); if( username.value && phone.value && cmbProvince.value && cmbCity.value){ //console.log('主要数据齐全,可以访问接口'原创 2017-09-26 10:58:31 · 631 阅读 · 0 评论 -
文本截取
在进入话题之前,我们先说一个场景。 类似于微博140字的限制和美团外卖app点餐备注只限50字。像这种需求我们该如何实现。 分析需求: 1.既然有字数限制,我们在textarea框中输入的字数超出这个最大的字数时,我们该如何处理。 简而言之就是超出的字数,我们要截取掉。 并且要提示输入了多少字。<textarea onChange={(e)=>this.changeEvent(e)}>原创 2017-10-17 21:33:35 · 467 阅读 · 0 评论 -
遮罩层居中
<!DOCTYPE html><html><head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> <style type="text/css"> *{原创 2017-10-19 10:44:43 · 400 阅读 · 0 评论 -
字符串截取(做项目时的总结-待完善)
//确定时,处理隐藏弹出框,城市显示处理后的内容cityChangeEvent(text) { let textSplit = text.split(' '); let textCity = textSplit[1]; console.log(textSplit); this.setState({ city_show: false,原创 2017-10-16 16:22:20 · 231 阅读 · 0 评论 -
CSS calc()函数
面对下图这种需求应该如何改呢? 一般我们可以给父盒子flex-direction: column; 然后给子盒子1给一个固定的高度,子盒子2给flex:1; 这样就可以达到想要的效果。但这个必须知道高度。不然无济于事。这里有一种比较靠谱,就是用calc函数。 //父盒子 div { height: calc(100vh - 165px); ...原创 2018-07-11 21:56:18 · 426 阅读 · 0 评论 -
字符串和数字
由于基础不扎实,总是吃这样的哑巴亏。因此每每遇到这种问题我都会总结,即使再小的问题。基础决定成败。let arr = ['11','12'];let newArr = [11,12];这两种写法是不一样的,arr想转化为newArr的话,必须通过遍历,然后转化为newArr。代码如下所示:let changeArr =arr.map((item,index)=&gt;{ re...原创 2018-08-15 17:19:18 · 180 阅读 · 0 评论 -
addEventListener() 方法,监听事件
addEventListener()方法,监听事件你可以用removeEventListener() 来移除事件的监听。语法:addEventListener(event,function,capture);event 必须,指定事件名function 必须,指定要事件触发时执行的函数useCapture 可选 布尔值 指定事件是否在捕捉或者冒泡阶段执行。true:在捕获阶段执行...原创 2018-10-11 19:12:46 · 3207 阅读 · 0 评论 -
3.4.7 Object类型 学习笔记
ECMAScript中的对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的名称来创建。var obj = new Object();Object的每个实例都具有下列属性和方法。constructor 保存着用于创建当前对象的函数。对于前面的例子而言,构造函数就是Object()hasOwnProperty( propertyName ) 用于检查给定的属性在当前...原创 2018-10-25 14:17:06 · 271 阅读 · 0 评论 -
var可以重复声明和let不能重复声明的问题
var a = 1;var a = 2;var 连续声明两次会存在问题而let却可以呢???let b = 1;let b = 1;那我们说说var重复定义变量的缺点吧。假如多个人开发一个项目。都定义了一个变量a,但各自用途不同。这样var后面定义的a就会把前面定义的a覆盖。而let就是用来解决这个问题,这也是let的意义所在。var a = {};a.name = 'ti...原创 2019-01-06 17:35:28 · 7518 阅读 · 8 评论 -
需要改进的js写法
1.能用 || 就不需要用三目运算符 let filterId = id ?id :'';改进之后的写法let filterId = id || '';||的意思就是前面为true,就用前面的,如果为false就用后面的。比如:let str = null || '';let str1 = undefined || '';还有:if(null){ //不会进入}if...原创 2019-01-08 18:23:36 · 144 阅读 · 0 评论 -
需要学习的代码
export function exportOrder(woIds, showfields, id){ return dispatch => { dispatch({ type: GET_ORDER_LIST_PROGRESS, progress: LoadProgressConst.SAVING }); let isNowValue = false, ...原创 2019-01-08 20:55:25 · 292 阅读 · 0 评论 -
如何下载babel.js到本地
搜了好多都存在问题,还有人需要金币才能下载。还是官网靠谱。https://www.babeljs.cn/docs/setup/#installation&amp;lt;!-- 加载 Babel --&amp;gt;&amp;lt;script src=&quot;https://unpkg.com/babel-standalone@6/babel.min.js&quot;&amp;gt;&原创 2019-01-25 15:00:03 · 15625 阅读 · 0 评论 -
toLocaleTimeString()
定义和用法 toLocaleTimeString() 根据本地时间把Date对象的时间部分转化为字符串,并返回结果。var d = new Date();var n = d.toLocaleTimeString();返回的结果 上午12:26:54...原创 2019-02-17 00:28:10 · 2058 阅读 · 0 评论 -
JS数据类型
JavaScript 数据类型有:数值(Number)、字符串(String)、布尔(Boolean)、对象(Object)、数组(Array)Undefined、Null。ES6还新添加了一种 Symbol。原创 2019-03-02 18:55:19 · 167 阅读 · 0 评论 -
用原生js实现map方法
我们平时用的是已经封装好的map方法,如果让我们自己封装一个map,应该如何实现。万变不离其宗,其实遍历数组的核心还是for循环。因此下面封装一个map方法。思路:1.在原型上添加一个方法2.传一个函数和this3.call 方法传的参数和封装好的map方法的参数是一样的。Array.prototype.fakeMap = function(fn,context) { let arr...原创 2019-03-02 19:04:30 · 6664 阅读 · 0 评论 -
JSON.parse()和JSON.stringify()
JSON 是一种轻量级的数据交换格式。JSON.parse() 用于将一个JSON字符串转化为对象。语法:JSON.parse(text[,revicer]);参数text 必须,一个有效的JSON字符串reviver 可选,一个转化结果的函数,将为对象的每个成员调用此函数。let objStr = '{"a":1}';let deal = JSON.parse(objSt...原创 2019-03-03 20:39:24 · 152 阅读 · 0 评论 -
如何判断一个数组和对象为空?
数组一般用数组的长度可以判断如果是对象呢?有如下方法:1.把对象转化为字符串JSON.stringify();然后通过判断长度。let obj = {a:1};let res = JSON.stringify(obj);console.log(res === '{}'); //说明是空对象2.遍历let obj = {};function each(obj) { f...原创 2019-03-03 21:27:56 · 2195 阅读 · 0 评论