Javascript

ES6中新增关于Array的方法

在javascript中，Array()经常用到，利用ES6中的一些新特性会让数组的处理更加方便快捷 1.迭代空数组直接创建一个数组 const arr=new Array(4); //Output:[undefined，undefined，undefined，undefined] 利用map方法，转化成新的数组，企图得到 [0,1,2,3] 数组 const arr=new Array(4); arr.map((ele,index) => index); //Output:[undefined，undefined，undefined，undefined] 解决这个问题可以在创建数组时用到Array.apply apply与call类似，都是用来继承父类的方法的，不同之处是： call() 方法分别接受参数。person.fullName.apply(person1, ["Oslo", "Norway"]); apply() 方法接受数组形式的参数. person.fullName.call(person1, "Oslo", "Norway"); 如果要使用数组而不是参数列表，则 apply() 方法非常方便。 const arr = Array.apply(null, new Array(4)); arr.map((ele,index) => index); //Output:[0,1,2,3] 由此，我们可以创建一个指定最大值、最小值、或者长度生成指定数列的方法 /** * 生成自定义的连续数列 * @param{Number}min * @param{Number}max * @param{Number}len */ function newArr({min = null, max = null, len = null} = {}) { let newArray=[], skip = min if (len == null) {len = max - min + 1} if (min == null) {skip = -max} const arr = Array....

避免多条件并列

开发中有时会遇到多个条件，执行相同的语句，也就是多个||这种： if (status === 'process' || status === 'wait' || status === 'fail') { doSomething() } 这种写法语义性、可读性都不太好。可以通过switch case或includes这种进行改造。 switch case switch(status) { case 'process': case 'wait': case 'fail': doSomething() } includes const enum = ['process', 'wait', 'fail'] if (enum.includes(status)) { doSomething()

JavaScript生成图片文件路径json

在写小demo的过程中，经常需要把某个文件夹的图片文件的路径给引入，除非全部重命名成有序的数字，不然不好处理，这就用到了node中的fs和path模块，还没学… const path=require("path"); const fs = require('fs'); fs.stat('../images',(err)=>{//图片文件所在目录 if (err)return; var result='{' fs.readdir("../images",(err,data)=>{//图片文件所在目录 for(var i=0;i<Object.keys(data).length;i++){ let ImgPath="\"images/"+data[i]+"\""; result+="\""+i+"\":"+ImgPath+","; } result=result.substring(0,result.length-1); let length="\""+"length"+"\""+":"+"\""+Object.keys(data).length+"\""//文件数量 result+=","+length+'}' fs.writeFile("../data/imgPath.json",result,(err)=>{ if(err)return; console.log("写入文件成功，一共"+Object.keys(data).length+"个文件"); }); }); }); 生成的文件大概就是这样的一个json数据 {"0":"images/1.jpg","1":"images/10.jpg","2":"images/100.jpg","3":"images/101.jpg","4":"images/102.jpg","5":"images/103.jpg","6":"images/104.jpg","7":"images/105.jpg","8":"images/106.jpg","9":"images/107.jpg","10":"images/108.jpg","length":"109"}

JavaScript瀑布流布局

什么是瀑布流？一种图片在网页的布局方式，具体要求为：从页面第二行开始，后续图片跟在页面中最矮的那张图片后面用JavaScript怎么实现？为此我将整个过程封装为一个函数。 /*HTML部分*/ <head> <link rel="stylesheet" href="main.css"> </head> <div id="box"></div>//container和img由js动态加入 <script src="jquery.min.js"></script> <script src="loadFile.js"></script> <script src="main.js"></script> /*CSS部分*/ /*首先清空默认样式*/ #box{ position: relative; } .container{ float: left; } .container>.pic{ width: 200px; } .container>.pic>img{ width: 100%; } /*JS部分*/ /*loadFile.js(在window.onload之前执行，加载DOM树)*/ $(function () { function addImg(imgNum,eleID) { let container for (let i = 1; i < imgNum; i++) { container=$("<div class='container'><div class='pic'><img src='images/"+i+".jpg' alt=''></div></div>") $(eleID).append(container) } } addImg(109,"#box"); }) /*******************************************/ /*main.js(在$(function(){})之前执行，DOM树加载完毕 )*/ window....

关于Javascript模块化

模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。 //profile.js export var firstName = 'Michael'; export var lastName = 'Jackson'; export function sayName () { return firstName + lastName; } export default function () { console.log('foo'); } // main.js import { firstName, lastName , sayName} from './profile.js'; 注意：在index.html中引入的时候需要给script加type=“module”,即 <script type="module" src="./profiles.js"></script> <script type="module" src="./main.js"></script>

Javascript一些操作

1.通过id获取元素 function $(id) { return typeof id === 'string' ? document.getElementById(id): null; } 2.日期格式化 function formatDate(cDate) { //1.判断 if (!cDate instanceof Date){ return; } //2.转化 var year=cDate.getFullYear(); var month=cDate.getMonth(); var date=cDate.getDate(); var hour=cDate.getHours(); var minute=cDate.getMinutes(); var second=cDate.getSeconds(); //2.1 补0 month=month<10? '0'+month:month; date=date<10? '0'+date: date; minute=minute<10? '0'+minute:minute; second=second<10? '0'+second:second; return year + '-' + month + '-' + date + ' ' +hour+':'+minute+":"+second; } console.log(formatDate(new Date())); 3.匀速运动封装 /** * 设置一个盒子右边距匀速变化 * @param{string} btnId * @param{string} boxId * @param{number} step * @param{number}target */ function linearAnimation(btnId, boxId, step, target) { // 1....