JavaScript常用编程问题记录
个人笔记，学习JavaScript以来积累的一些常遇问题的方法和总结
不断更新中...
转载需注明
不引入第三个变量，调换两个数的值
熟悉了这样的写法，可以少声明一个变量
x=10;y=8;
//法一：
x=x-y；//x=2,y=8
y=y+x；//y=10,x=2
x=y-x；//x=8,y=10
//法二：
x=x+y; //x=18,y=8
y=x-y; //x=18,y=10
x=x-y; //x=8,y=10
判断一个数是完全平方数###
另一意思是：这个数的开平方是整数
(Math.sqrt(n)+"").indexOf(".")==-1 //为真(找不到小数点)
猜数字游戏
场景特点：
- 当输入“exit”或猜对就退出,否则一直循环输入
- 退出发生条件有多个且是或者关系
- 每个条件发生时，都有操作执行
- 判断条件不是 比较全等 无法用switch执行
解决方法：用while实现循坏，条件是true，if..elase实现判断，break实现退出
var n=parseInt(Math.random()*(9-0+1)+0);
var input;
while(true){
input=prompt("请输入一个数：");
if(input>n){
alert("数字大了");
}else if(input<n){
alert("数字小了");
}else if(input==n){
alert("猜对了");
break;
}else if(input<"0"||input>"9"){
alert("无效输入");
}else if(input=="exit"){
alert("放弃了");
break;
}
}
反复输入密码,直到输入正确
当输入不正确时，不执行错误的操作，但又需要循环输入
while(prompt("请输入密码")!=pwd){
alert("密码错误，请重试！");
}
alert("验证成功");
给一个多位数，分解出它各个位上的数字
var x=54321;//一个五位数
a=parseInt(x/10000);/* 分解出万位 */
b=parseInt(x%10000/1000);/* 分解出千位 */
c=parseInt(x%1000/100);/* 分解出百位 */
d=parseInt(x%100/10);/* 分解出十位 */
e=parseInt(x%10);/* 分解出个位 */
数组去重/统计个数
用hash数组
var arr=[2,3,4,3,6,4,5,6];
var hash=[];
for(var i=0;i<arr.length;i++){ //去掉重复，并且统计个数
if(hash[arr[i]]==undefined){
hash[arr[i]]=1;
}else {
hash[arr[i]]++;
}
}
console.log(hash);
arr=[];
for(var key in hash){ //得到去掉重复后的新数组
arr[arr.length]=(key-=0);
}
console.log(arr);
js数组中对象去重
var arr = [{
"name": "ZYTX",
"age": "Y13xG_4wQnOWK1QwJLgg11d0pS4hewePU95UHtpMl3eE81uS74NC-6zu-Rtnw4Ix",
"gender": "AAAAAA.doc"
}, {
"name": "ZYTA",
"age": "Y13xG_4wQnOWK1QwJLgg11d0pS4hewePU95UHtpMl3eE81uS74NC-6zu-Rtnw4Ix",
"gender": "BBBBBB.doc"
}, {
"name": "ZDTX",
"age": "Y13xG_4wQnOWK1QwJLgg11d0pS4hewePU95UHtpMl3eE81uS74NC-6zu-Rtnw4Ix",
"gender": "CCCCCC.doc"
}, {
"name": "ZYTX",
"age": "Y13xG_4wQnOWK1QwJLgg11d0pS4hewePU95UHtpMl3eE81uS74NC-6zu-Rtnw4Ix",
"gender": "AAAAAA.doc"
}];
var hash = {};
arr = arr.reduce(function(item, next) {
hash[next.name] ? '' : hash[next.name] = true && item.push(next);
return item
}, [])
console.log(arr);
使字符串变数字的简单方法
var a=str-0;
获得鼠标的事件，并获取鼠标离窗口的坐标
var e=window.event||arguments[0];
var x=e.screenX;
var y=e.screenY;
获取对象的style属性，解决兼容性
if(getComputedStyle){
style=getComputedStyle(this.div);
}else{
style=this.div.currentStyle; //对于IE8
}
两个对象同用一个函数时，可连续等号
$("li.app_jd").onmouseout=
$("li.service").onmouseout=function(){
this.$("[id$='_items']").style.display="none";
}
在js中修改元素的样式属性
在css文件中是斜杠表示的，在js中要把斜杠去掉并把第二个单词首字母大写
css：font-size:12px;
js：div.style.fontSize="32px";
将文本内容插入到元素内
-
作为文本插入到元素
textContent或innerText属性可以获取或设置指定元素的文本内容
-
作为节点方式
创建文本节点 - createTextNode(text)
将文本节点作为子节点
jq中的last选择器
-
:last 与前面是同一个元素
-
:last-child 是前一个的子元素
#table tr>td:last //最后一行的最后一个td #table tr :last-child //每行的最后一个td
给a绑定click事件
在最后 return false;-->阻止a元素的默认行为(页面跳转)
控制动画的速度：设置相对速度
this.speed=0;//控制速度
this.step=function(){
this.speed++;
if(this.speed%2==0){
//执行操作代码
}
}
获取数组中的最大值和最小值
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
var maxInNumbers = Math.max.apply(Math, numbers);
var minInNumbers = Math.min.apply(Math, numbers);
产生随机数
基本归纳：
Math.random() 【产生0<=b<1的小数】
Math.random()*(max-min+1)+min 【产生min<=x<(max+1)的小数】
Math.floor(Math.random()*(n+1)) 【产生0<=x<=n的整数】
Math.ceil(n) 【产生>=n的最小整数】
Math.floor(m) 【产生<=m的最大整数】
Math.round(k) 【产生k四舍五入后的整数值】
parseInt(y) 【对y进行取整】
例子：
var a=parseInt(Math.random()*(10-1+1)+1);//1<=a<=10的整数
var b=Math.floor(Math.random());//0
var c=Math.random()*(1-0+1)+0;//0<=c<2 的小数
var a=Math.floor(Math.random()*(1-0+1)+0);//0和1
toFixed方法
number.toFixed(a)
- 返回一个以定点表示法表示的数字的字符串形式
- toFixed默认值是0-->就是取number的整数部分
- a的范围为0-20，当a是0-20的小数时 取a的整数部分
- 当a不是数字时（字符串、null...）等 a取默认值0
- 当a不在0-20的范围内时 会报错 不在范围内
parseInt方法
- 取当前字符中整数
- 第一个是数字,将一直找到第一个不是数字的字符,取前面的数字
- 第一个不是数字 返回空
void 运算符
-
void 运算符对任何值返回 undefined(它不是有效值，不会显示在浏览器窗口中)
-
该运算符通常用于避免输出不应该输出的值
-
没有返回值的函数真正返回的都是 undefined
<a href="javascript:void(window.open('about:blank'))">Click me</a> <a href = "javascript:void(0)" onclick = ""></a>
value、innerHTML、textContent属性的区别
-
value
a、用于单标签:获取有value属性的单标签的 value值
b、用于双标签：获取元素在网页上此时呈现的内容
eg: select.value -->表示此时select中被选中项的内容
-
innerHTML:获取元素内的所有内容(包括文本和子标签),以字符串的形式
用innerHTML向页面写双标签时，应该一次写入，不能分开
-
textContent:获取标签内的文本
向数组插入数据
两种方法：
array.push(data);
array[array.length] = data;
切换变量0和1的方法
-
分支结构 if..else..
if(a==0){ a=1; }else{ a=0; } -
三目
-
公式计算
a=(++a)%2;
关于select的一些操作
var obj = document.getElementById("testSelect"); //定位id
var index = obj.selectedIndex; // 选中索引
var text = obj.options[index].text; // 选中文本
var value = obj.options[index].value; // 选中值
var value = obj.value;// 选中值
DOM对象和jq对象的相互转化
1.DOM转JQ
$("#orderList").append($(html));//$(html)-->把DOM对象转换成JQ对象
2.JQ转DOM：
$("#v")[0];
$("#v").get(0);
外部文件的引用
- js中 寻找图片 相对路径-相对于html文件
- css中 寻找图片 相对路径-相对于该css文件
函数声明与函数表达式(ES5)
-
函数声明会默认提前,可以先执行再声明
-
函数表达式,执行到var这行时才会解析,只能先声明再执行
console.log(a());//2 var a=function(){ return 1}; function a(){ return 2}; console.log(a());//1
transition
css3的动画属性(transition)可操作 js给元素添加的属性
jq中hover函数
$('').hover(function(){},function(){});
表示鼠标进入和离开那一时间发生的事件，
其中两个函数相当于mouseenter() mouseleave()
jq中把一个对象转化成get请求需要的参数形式
把一个对象转换成key1=val1&key2=val2&...
var str=jQuery.param(object);
//或者： var str=$.param(object);
获取屏幕宽高
var scrWidth=document.body.scrollWidth;//网页正文全文宽
var srcHeight=document.body.scrollHeight;//网页正文全文高
JS中函数的隐含参数
- arguments：代表正在执行的函数和调用它的函数的参数,只有函数开始时才可用
- caller：返回一个对函数的引用,该函数调用了当前函数
- callee：返回正被执行的function对象,也就是所指定的function对象的正文
arguments.length-实参长度;
arguments.callee.length-形参长度
toString()方法
-
x.toString()--->把x变成字符串(不能转化null,underfined...) -
Object.toString()--->输出对象的类型和名称 -
toString(x)--->输出x的类型 -
String(x)--->把x变成字符串,相当于隐式转换(所有的都可以转包括null,underfined) -
toString与String关系：String调用toString -
toString与x.valueOf区别：toString包含类型转换;valueOf不带类型转换
将 [类数组对象/伪数组] 变为 [数组类型对象]
类数组对象/伪数组：能通过Array.prototype.slice转换为真正的数组的带有length属性的对象，例如arguments对象，调用getElementsByTagName、document.childNodes之类返回NodeList的对象都属于伪数组
两种方法：
lis=Array.prototype.slice.call(lis); //在IE8及之前版本不行
lis=[].slice.call(lis);
| |
//数组(处理后的lis) //类数组对象(前lis)
兼容所有浏览器都可运行：
function convertToArray(nodes){
var array=null;
try {
array=Array.prototype.slice.call(nodes,0);//针对非IE浏览器
}catch(ex){
array=new Array();
for(var i=0,len=nodes.length;i<len;i++){
array.push(nodes[i]);
}
}
return array;
}
例子1：
html:
<ul id="ul">
<li data-i="2">222</li>
<li data-i="4">444</li>
<li data-i="5">555</li>
<li data-i="1">111</li>
<li data-i="3">333</li>
</ul>
对li 依据data-i属性值排序，见js实现：
var ul=document.getElementById("ul");
var lis=ul.querySelectorAll("li"); //getElementsByTagName方法也是一样
lis=Array.prototype.slice.call(lis);
lis.sort(function(a,b){
return a.dataset.i-b.dataset.i;
});
for(var i=0,len=lis.length;i<len;i++){
lis[i]='<li data-i='+lis[i].dataset.i+'">'
+lis[i].innerHTML
+'</li>';
}
ul.innerHTML=lis.join("");
例子2：
对无序的形参输入进行排序
function fun(){
arguments=Array.prototype.slice.call(arguments);
return arguments.sort(function(a,b){
return a - b
});
}
console.log(fun(23,56,1,23,5));
输出 [1, 5, 23, 23, 56]
用jq遍历表格的行和列
行：
- 如果我们要选择第一行，我们可以用 $('tr:eq(0)')
- 如果我们要选择第N行，我们可以用 $('tr:eq(n-1)')
- 如果我们要选择奇数行，我们可以用 $('tr:odd')
- 如果我们要选择偶数行，我们可以用 $('tr:even')
列：
-
如果我们要选择第一列并且对其样式进行改变，我们可以用下面的语句来实现
$(document).ready(function(){ $('table').find('td').each(function(i){ if(i%4 == 0){ //‘4’代表表格总共有4列，如果区间编号被4整除，那么它就属于第一列 $(this).addClass('col_1');} }); }); -
如果有合并的话我么可以先循环行再循环td
$('table tr').each(function(i){ $(this).find("td").each(function(j){ if(j== 9){//第9列 $(this).addClass('word_break'); } }); });
例子：
给一个表格的第0、2...行的0列加上红色，1列加上蓝色,2列加上红色，3列加上蓝色...
$('#tables>tbody>tr:even').each(function(k){
$(this).find("td").each(function(j){
if(j%2 == 0){
$(this).css("background","red");}
if(j%2 == 1){
$(this).css("background","blue");}
});
});
禁止右键点击
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
检测浏览器
注: 在版本jQuery 1.4中，$.support 替换掉了$.browser
$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= "1.8" ){
// do something
}
// Target Safari
if( $.browser.safari ){
// do something
}
// Target Chrome
if( $.browser.chrome){
// do something
}
// Target Camino
if( $.browser.camino){
// do something
}
// Target Opera
if( $.browser.opera){
// do something
}
// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
// do something
}
// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
// do something
}
});
统计元素个数
$(document).ready(function() {
$("p").size();
});
关于网页的一些属性
var h = "";
h += " 网页可见区域宽："+ document.body.clientWidth+"\n";
h += " 网页可见区域高："+ document.body.clientHeight+"\n";
h += " 网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的宽)"+"\n";
h += " 网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)"+"\n";
h += " 网页正文全文宽："+ document.body.scrollWidth+"\n";
h += " 网页正文全文高："+ document.body.scrollHeight+"\n";
h += " 网页被卷去的上："+ document.body.scrollTop+"\n";
h += " 网页被卷去的左："+ document.body.scrollLeft+"\n";
h += " 网页正文部分上："+ window.screenTop+"\n";
h += " 网页正文部分左："+ window.screenLeft+"\n";
h += " 屏幕分辨率的宽："+ window.screen.width+"\n";
h += " 屏幕分辨率的高："+ window.screen.height+"\n";
h += " 屏幕可用工作区宽度："+ window.screen.availWidth+"\n";
h += " 屏幕可用工作区高度："+ window.screen.availHeight+"\n";
h += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+"\n";
h += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"+"\n";
引用外部文件时，设置编码格式
<script type="text/javascript" src(引用外部js文件)="xxx.js" charset(设置编码格式)="utf-8"></script>
从数组中随机获取成员
var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];
var randomItem = items[Math.floor(Math.random() * items.length)];
生成随机字母数字混合的字符串
function generateRandomAlphaNum(len) {
var rdmString = "";
for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}
打乱数字数组的顺序
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function(){ return Math.random() - 0.5});
字符串去空格
String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, "");};
验证是否是数字
function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
使用length属性截断数组
var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124]
myArray.length = 0; //清空数组
如果把length属性变大，数组的长度值会增加，会使用undefined来作为新的元素填充。length是一个可写的属性
通过for-in循环检查对象的属性
可以防止迭代的时候进入到对象的原型属性中
for (var name in object) {
if (object.hasOwnProperty(name)) {
// do something with name
}
}
用JSON来序列化与反序列化
var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify(person);
/*
stringFromPerson 结果为
'{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}'
*/
var personFromString = JSON.parse(stringFromPerson);
/* personFromString 的值与 person 对象相同 */
JQuery一个对象可以同时绑定多个事件
-
多个事件同一个函数：
$("div").on("click mouseover", function(){}); -
多个事件不同函数
$("div").on({ click: function(){}, mouseover: function(){} });
控制台输出点击的DOM元素
在打开点击审查元素的状态下，在控制台 $0会返回最近一次点选的DOM结点
关于localStorage简单操作
存：window.localStorage.setItem(itemName,JSON.stringify(this.setting)
取：JSON.parse(window.localStorage.getItem(itemName))
移除：window.localStorage.removeItem(itemName)
$.extend简单例子
关于$.extend的用法很多样，此处记录下最基本的用法
let a={"stu":"1","tea":"2"};
let b={"stu":"3","stu22":"4"};
$.extend(a,b);//以b覆盖a
console.log(a);//Object {stu: "3", tea: "2", stu22: "4"}
console.log(b);//Object {stu: "3", stu22: "4"}
foreach中的contionue,break,return
contionue break 在foreach()里面都没用；
foreach()中使用return，是continue的作用
计算指定日期后N个工作日，要求除去国家法定节假日
/**
* 自动补零
* @param num
* @param n 操作位数
*/
let formatTen=function(num, n) {
return (Array(n).join("0") + num).slice(-n);
};
/**
获取某日期后几个工作日后的日期
参数:date:给定日期;itervalByDay:相隔工作日
*/
let etworkday=function(dat,itervalByDay){
var str=dat.split("-");
var date=new Date();
date.setUTCFullYear(str[0], str[1] - 1, str[2]);
date.setUTCHours(0, 0, 0, 0);
var millisceonds =date.getTime();
for(var i=1;i<=itervalByDay;i++){
millisceonds +=24*60*60*1000;
date.setTime(millisceonds);
if(date.getDay()==0||date.getDay()==6) i--;
}
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var rq = year + "-" + formatTen(month,2) + "-" + formatTen(day,2);
return rq;
}
console.log(etworkday("2021-09-09",10))
