JavaScript开发技巧

文章目录

基础篇

基础篇

1.数字转字符串拼接
思路:用数字转字符串方法将数字转成字符串,再拼接起来。字符串转数字也是类似的方法

var n1=0;
var n2=1;
console.log(n1+String(n2));//任意一个数字转字符都可以

还能这么写，原理都是一样的

console.log(""+n1+n2);

注意：""不能加在最后面，因为前面都是数值计算没有触发+号的隐式类型转换

2.字符串转数字计算
思路：将字符串转成数字再计算

var num="3";
console.log(parseInt(num)%2);

还能这么写，原理都是一样的

console.log(num%2);//运算符有隐式类型转换，自动把字符串转成数值

3.if()判断奇偶数
思路：这个数与二取余，如果等于零则为偶数，否则为奇数

for (var i = 0; i <= 3; i++) {for (var j = 0; j <= 3; j++) {if ((("" + i + j) % 2)!=0 && i !== j) {console.log("" + i + j);}}
}
//结果为01、21、03、13、23、31

还能这么写，原理都是一样的

for (var i = 0; i <= 3; i++) {for (var j = 0; j <= 3; j++) {// 和2取余只有两种结果，1或者0，在if()中会发生隐式类型转换// 将非零转成true，即奇数为trueif (("" + i + j) % 2 && i !== j) {console.log("" + i + j);}}
}
//结果为01、21、03、13、23、31

4.for循环自增变量的运用
思路:一般都用作计数,结合判断条件跳出循环
其实这个变量跳出循环后还能作为条件的临界值使用
比如说求一个数组中的某个位置

//有一个从小到大排好序的数组。现输入一个数，要求按原来的规律将它插入数组中
function fn(arr, data) {// 寻找要插入的位置for (var i = 0; i < arr.length; i++) {if (arr[i] > data) {break;}}// 从要插入的位置往后赋值进行覆盖,i为要插入的位置for (var j = arr.length - 1; j >= i; j--) {arr[j + 1] = arr[j];}// 数据插入指定的位置arr[i] = data;
}
var arr = [1, 3, 4];
console.log(arr);
fn(arr, 2);
console.log(arr);

5.新增对象的属性和对象的遍历
思路:js中对象的新增属性和数据可以直接通过赋值来增加,对象的遍历用for-in

//统计每个字符(aabccd)出现的次数，结果显示{a:2, b:1, c:2, d:1},去掉重复的字符，使结果显示abcd
(function () {"use strict"var str = "aabccd";var obj = {};console.log(str);for (var i = 0; i < str.length; i++) {// 字符转Boolean// 字符：非空为true// undefined，null，NaN，都是false// 如果obj这个对象中没有str中的数据则为undefinedif (obj[str[i]]) {// 存在，就增加1，表示又出现了一次obj[str[i]]++;} else {// 不存在，设置这个属性，同时值为1，表示第一次出现// js中对象的新增属性和数据可以直接通过赋值来增加obj[str[i]] = 1;}}console.log(obj);// 新建一个字符让其键拼接起来var obj2 = "";// 遍历对象拿到其键for (var j in obj) {obj2 += j;}console.log(obj2);
})();

6.函数中默认参数的处理
思路:可选参数在没有被赋值的时候就给其一个默认值

function dateDiff(data1, data2) {data1 = new Date(data1);// 第二个参数没有数据,就给其默认值if (!data2) {data2 = new Date();} else {data2 = new Date(data2);}console.log(data1, data2);
}
dateDiff("2021.08.27 08:08:08");
dateDiff("2021.08.27 08:08:08", "2021.08.27 08:18:08");

7.指定对象内随机数的使用
思路:随机数可以作为这个对象的方法,因为是随机的是一个范围,所有使用中括号语法

// 生成四位随机数字字母混合的验证码
(function () {"use strict"// 限定min-max范围的随机数function random(min, max) {return Math.round((Math.random()) * (max - min) + min);}// 随机一个大于4位的且每种字符出现次数一致的随机字符库var str = "";for (var i = 0; i < 30; i++) {str += String.fromCharCode(random(97, 122));str += String.fromCharCode(random(65, 90));str += String.fromCharCode(random(48, 57));}console.log(str);// 从上面的随机字符库中，随机取4位var result = "";for (var j = 0; j < 4; j++) {// 每一次从str库中随机取出一个数拼接到新字符中result += str[random(0, str.length - 1)];}console.log(result);
})();

8.获取输入框中的数据
思路:用oninpu事件结合函数获取

html

<input type="text" id="txt">

var msg = document.getElementById("txt");
msg.oninput = function () {console.log(msg.value);
}

9.字符串逐位比较的隐式类型转换
思路:直接比较即可,与数字比较时会自动转换成数值类型,与字母比较会转成ASCII码比较

10.字符串中存在多种数据时判断其中有几种数据
思路:定义一个初始变量,0表示不存在,1表示存在,默认值为0.如果字符串中检测到某一种数据的存在则令其初始变量为1,最后通过初始变量来判断有几种数据
注意:变量一定要能初始化(作用域)

11.事件对象兼容
思路:短路或

获取事件对象（兼容）

正常浏览器：事件处理函数的第一个参数
IE浏览器：在事件处理函数中通过window.event获取

// 键盘按下
document.onkeydown = function (key) {// 获取事件对象兼容var key = key || window.event;// 获取事件对象键码兼容var keycode = key.keyCode || key.witch;
}

12.事件冒泡的兼容(方法和属性的布尔值)
思路:将方法作为参数,如果方法存在则执行方法,如果方法不存在则为undefined则执行else里面的语句

// 阻止事件冒泡的兼容封装
function stopBubble(e){if(e.stopPropagation){e.stopPropagation()}else{e.cancelBubble = true;}
}

13.获取文本域内容和获取标签内容
思路:文本域用.value,标签内容用.innerHTML

14.多种结果的判断
思路:定义一个初始状态量,设这个量为0,表示没执行或者不是这个结果,如果判断结果为true或者是自己想要的结果就把这个值赋值为1,否则赋值为0,最后根据这个结果来对多种结果的判断做出相应判断

例子:判断密码强度,数字字母特殊字符,只有一种为弱,两种为中,三种为强
html

<input type="text" id="txt"><span></span>

// 获取输入框中的内容,然后逐位判断,如果有数字/字符串/特殊字符其中一个则为弱,并将结果输出到页面,有两个为中,都要为强
var msg = document.getElementById("txt");
var result = document.querySelector("span");// 如何获取到输入框中的内容
msg.oninput = function () {// console.log(msg.value);// 定义初始变量为0，如果出现一种则为1,这个变量不能是全局变量，如果是全局变量则修改值的时候变量不为初始值var a = 0;var b = 0;var c = 0;for (var i = 0; i < msg.value.length; i++) {// 这里逐位判断字符串用了隐式类型转换，所以能直接判断，比较字母是比较的是ASCII码if (msg.value[i] >= 0 && msg.value[i] <= 9) {// console.log("数字");a = 1;}if ((msg.value[i] >= 'a' && msg.value[i] <= 'z') || (msg.value[i] >= 'A' && msg.value[i] <= 'Z')) {// console.log("字母");b = 1;}if (!((msg.value[i] >= 0 && msg.value[i] <= 9) || (msg.value[i] >= 'a' && msg.value[i] <= 'z') || (msg.value[i] >= 'A' && msg.value[i] <= 'Z'))) {// console.log("特殊字符");c = 1;}}switch (a + b + c) {case 1: {result.innerHTML = "弱";break;}case 2: {result.innerHTML = "中";break;}case 3: {result.innerHTML = "强";break;}default: {result.innerHTML = "";}}}

15.解构赋值交换两个两个变量
思路:不用解构赋值的时候需要另外一个变量保存这两个变量的其中某一个变量再进行交换,用解构赋值就能直接交换

let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a)
console.log(b)

16.数组的展开
思路:用展开运算符展开,不需要拿某个数组中的数值时候都需要遍历
例子:Math.min()

const arr2 = [45,36,755,134,78];
console.log(Math.min(...arr2));

17.对象的深拷贝
思路:用展开运算符展开

const obj = {name:"admin",age:18
}
// 对象的展开，一定要在能接收多个键值对的位置，展开
// ...objconst obj2 = {...obj,a:10,b:20
}obj2.name = "root";console.log(obj); // admin
console.log(obj2); // root

18.set数组去重
思路:new set的时候会忽略相同的数据

let arr = [1,2,3,4,5,4,3,2,1,1,1];
arr = [...new Set(arr)];
console.log(arr);

19.用计时器时候做到缓冲效果
思路:修改每次执行时某个量的大小,使其逐渐减小,要达到目标值时无限接近于0,对其取证达到终止条件

20.一个计时器多个元素同时使用
思路:给元素绑定一个属性,每个元素属性之间没有关系.清除计时器时清除的是绑定元素属性的计时器,所以多个元素间不受影响

21传参时候如何处理多个数据
思路:把多个数据放在一个对象里,一个对象就是一个数据,把多个数据当作这个对象的键值,拿这些数据的时候再通过for-in遍历这个对象即可,注意for-in中键和值的取值,如for(let i in obj),其中i是obj中的键,obj[i]是值

22.多种属性清除计时器的判断
思路:要等到全部属性到达目标值时再清除计时器,此时给一个状态量,默认true清除计时器,如果全部属性还没达到目标值时把状态量修改为false

23.怎么做链式运动效果(即结束本次事件后又开启新事件)
思路:用计时器举例,清除计时器后本次事件结束,此时就可以添加新的事件调用相同的事件(注意,这里不是自身调用自身,所以不是递归)

24.短路且(&&)
思路:&&从左到右判断,只要左边不为false,为true就会往右走,结果会执行最后一个true

25.offsetX/Y的闪烁问题
原因:offset是事件目标的偏移量,会有闪烁问题是因为这个属性是根据事件目标选择的,在原本正常选中的目标的情况下又选中了其他事件目标则会产生闪烁问题
思路:
1.布局解决:用一个不相关的元素将真正要操作的事件目标和影响的目标分开,即新插入一个元素,这个元素的尺寸要和真正要操作的事件目标尺寸相同,将其层级设置为最高,实际上操作的是这新元素
2.不用offset,用其他的获取方法,只要获取到的是自己想要获取到的值即可

持续更新中(2021/09/10)

JavaScript开发技巧相关推荐

好程序员Web前端教程分享JavaScript开发技巧
好程序员Web前端教程分享JavaScript开发技巧,相信知道Web前端的小伙伴都熟悉,Javascript的很多扩展的特性是的它变得更加的犀利,同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站 ...
javascript开发技巧训练_学好这些小技巧，帮你写出更好地JavaScript
近几年来随着前端发展的日益成熟,JavaScript的日渐受到重视,以及Node.js方案变得越来越可行,我们对JavaScript程序员的需求也正在持续增长. 图片源自网络,仅做配文展示从需求比例 ...
Javascript开发技巧(JS中的变量、运算符、分支结构、循环结构)
一.Js简介和入门继续跟进JS开发的相关教程. <!-- [使用JS的三种方式] 1.HTML标签中内嵌JS(不提倡使用): 示例:<button οnclick="javas ...
JavaScript开发优化技巧
JavaScript开发优化技巧 1.按字符串属性值对对象数组进行排序可以通过不同的方式来完成. 1).使用Underscore _.sortBy(collection, [iteratees=[_ ...
JavaScript 开发的40个经典技巧
JavaScript 开发的40个经典技巧 javascript/jquery 浏览数:1,265 2017-5-4 首次为变量赋值时务必使用var关键字变量没有声明而直接赋值得话,默认会作为一个新 ...
JavaScript 开发的45个经典技巧
2019独角兽企业重金招聘Python工程师标准>>> 前言:此篇译文在各网站均有标注原创的声明,译者名字已不可考,暂为佚名 JavaScript是一个绝冠全球的编程语言,可用于We ...
ES6 javascript 实用开发技巧
Javascript - ES6 javascript 实用开发技巧本文只罗列出在 ES6 开发过程中相对实用的内容,并非一个高大全的文档,如果希望查阅详细的内容,可购买阮一峰老师所出版的 ES6 ...
JavaScript 开发的45个技巧2
http://mp.weixin.qq.com/s?src=3&timestamp=1474692926&ver=1&signature=agI3W5rKmVC6GgbdTXh ...
JavaScript 开发人员需要知道的简写技巧
本文来源于多年的 JavaScript 编码技术经验,适合所有正在使用 JavaScript 编程的开发人员阅读. 本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作. 文 ...

JavaScript开发技巧

文章目录

基础篇

JavaScript开发技巧相关推荐

最新文章

热门文章