1.如何在一个对象上添加属性?
方法一:var b = {};
b["name"] = "test";
delete b.name 删除对象的属性
delete 运算符可以用来删除对象的属性,如歌对象包含该属性,那么该属性就会被移除。
方法二:b.name ="test";
2.如何判断一个变量是否声明?
typeof(a) =="undefined"
typeof(d) =="function" 是否为函数 也可以不用括号 typeof a 没加括号,必须要空格。
3.怎么表示为字符串? 通过双引号(""),单行号(''),反斜杠(//)
1+"1"=="11"
1+'1'==11
4.Javascript 只有一个数字类型。
5.Javascript的基本数据类型?
number(数字),string(字符串),Boolean(布尔),undefined(未定义),Null(空)
另外:Object(对象)
6.类和对象的区别?如何用javascript实现?
function myClass()
{ }
myClass.prototype.ID = 1;
myClass.prototype.Name = "johnson";
myClass.prototype.showMessage = function()
{
alert("ID: " + this.ID + "Name: " + this.Name);
}
var obj1 = new myClass();
obj1.showMessage();
7. JavaScript 中,有多少种不同类型的循环?
两种。for 循环和 while 循环。
8.数组的类型为Object。
如何删除数组的成员?
var a=["12","2","3"];
delete a[0]; true 这样不对,应该a.splice(0,1); a ["2", "3"]
可以给Array原型上添加方法
Array.prototype.remove = function (val) { var index = this.indexOf(val); if (index > -1) { this.splice(index, 1); } };
a.remove("3"); //移除数组a中的“”3“”;
9.一个数组的的成员类型里可以有字符串,数字,方法,空。
10.NaN 数字 表示非数字,
返回True 就不是数字,可以判断一个变量是否为数字类型。 alert(typeof(a));//number
a. not a number(不是一个数字 的数字类型)
b. 程序中出现:NaN肯定进行了非法的运算操作 alert('200px'-100);
c.NaN 是false if(NaN)
d.NaN与自己都不相等 var a = Number('abc'); alert(a===a )//false;
11.parseInt() 函数可解析一个字符串,并返回一个整数。
12.Array.push(item),push 方法把一个或多个参数item附加到一个数组的尾部。如果参数item是一个数组,它会把参数数组作为单个元素整个添加到数组中,并返回这个array的新长度值。
var new_sortArray = new Array();//实例化数组
也可以这样定义数组var new_sortArray=[];
var obj = new Object();//实例化对象
obj.id = accFind.New_sort.Id;
obj.name = accFind.New_sort.Name;
obj.typename = accFind.New_sort.LogicalName;
new_sortArray.push(obj);//将对象添加到数组中。
13. function add(){}
(1).var a = add(); 输出:undefined 未定义
(2).var a= new add(); 输出:[object] {} 对象
(3). var a = add; 输出:function add(){} 函数
14.hasOwnProperty:是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是,此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。
15.isNaN 可以辨别数字和NaN
isNaN(NaN) //true
isNaN(0) //false
isNaN('abdd') //true
isNaN('0') //false
isNaN(null); //false
isNaN(undefined); //true
isNaN(""); //false
isNaN(true) //false
isNaN(false) //false
if(isNaN(str)){
alert(str + '不是数字');
}else
{
alert(str + '是数字');
//alert(isNaN('250'));//fale
因为Number(); '250'=> 250 => false
判断一个值否是可用做数字的最佳方法是使用isFinite函数,因为它会筛选掉NaN和Infinity
var isNumber = function isNumber(value)
{
reutn typeof value == 'number' && isFinite(value);
}
if (isNaN(new_total_amount))//如果值为未定义,则置为0
{
new_total_amount = 0;
}
16.创建一个对象obj,该对象包含一个名为“name”的属性,其值为“value”,有哪些方法?
方法一:var obj = new Object(); obj["name"] = "value";
方法二:var obj = {name : "value"};
方法三: var obj = new function(){this.name="value";}
注意:var obj = new Object(); obj.prototype.name = "value";此方法不行。obj用在function上,obj不存在prototype对象
Object.prototype.name = "value";这样可以。Object是个“类”,当然可以。但JS没类这个说法。你 var obj = new Object();后的obj是个对象。function就是个“类”
17.with 语句 为一个或一组语句指定默认对象。
用法:with (<对象>) <语句>;
with 语句通常用来缩短特定情形下必须写的代码量。在下面的例子中,请注意 Math 的重复使用:
x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10);
y = Math.tan(14 * Math.E);
当使用 with 语句时,代码变得更短且更易读:
with (Math) {
x = cos(3 * PI) + sin(LN10);
y = tan(14 * E);
}
18.
this 对象 返回“当前”对象。在不同的地方,this 代表不同的对象。如果在 JavaScript 的“主程序”中(不在任何 function 中,不在任何事件处理程序中)使用 this,它就代表 window 对象;如果在 with 语句块中使用 this,它就代表 with 所指定的对象;如果在事件处理程序中使用 this,它就代表发生事件的对象。
一个常用的 this 用法:
<script>
...
function check(formObj) {
...
}
...
</script>
<body ...>
...
<form ...>
...
<input type="text" ... onchange="check(this.form)">
...
</form>
...
</body>
这个用法常用于立刻检测表单输入的有效性。
19.去除列表中选择的重复值,并将多个值拼接成"1,2"这样的形式。
var orderCodeFilter = {};//定义一个对象,相当于new Object(); var orderCoders = []; var datas = [{OrderCodeStr:"1,",id:1},{OrderCodeStr:"1,",id:2},{OrderCodeStr:"2,",id:3},{OrderCodeStr:"2,",id:4},{OrderCodeStr:"3,",id:5},{OrderCodeStr:4,id:6},{OrderCodeStr:4,id:7}]; for (var i = 0; i < datas.length; i++) { var tempOrderCodeStr = datas[i].OrderCodeStr; var key; //找到tempOrderCodeStr最后一个字符串 var lastStr = tempOrderCodeStr.substring(tempOrderCodeStr.length - 1, tempOrderCodeStr.length); if (lastStr == (",")) { //去除tempOrderCodeStr最后一个字符串 key = tempOrderCodeStr.substring(0, tempOrderCodeStr.length - 1); }else{ key = tempOrderCodeStr; } //判断,不存在重复的属性值 注意 key需要去除前后空格 if(!orderCodeFilter[key]){ //将属性值添加到对象末尾 orderCoders.push(key); //属性值赋给对象, orderCodeFilter[key] = key; } } var orderCodeStr = orderCoders.join(",");/"1,2,3,4"
20. \"PayTime\":\"\\/Date(1413532617000+0800)\ 这个时间格式怎么理解?
+0800:为东八区
1413532617000:为总毫秒数
比如今天的时间为:2014/10/17 星期五
var d = new Date();
d.toDateString(); "Fri Oct 17 2014"
d.getTime();
则格式为\"PayTime\":\"\\/Date(1413535530809+0800)\
21.JS中允许“.”替换成“[]”
比如 document.getElementById("bg").style.width = '100px';
相当于document.getElementById("bg").style['width'] = '100px';
22. JS中的数据类型:数字、字符串、布尔、 函数、对象(obj(window) [](数组) {}(JSON) null(空) ) 、undefined(未定义)
var a = 1; if(){ } typeof 判断数据类型 */ var i = 100; //alert(typeof i); var s = ' miaov'; //alert(typeof s); //string //alert(s.length);//7 //alert(s.charAt(3));'a' var b = true;//布尔值 //alert(typeof b);//boolean /* if(12 < 90){ }*/ //for(;false;){} var fn = function(){ alert(1);}; //alert(fn()); //fn function fn1(){ alert(2); } //alert(fn1); //var obj = window; //alert(typeof obj); //object 物体,东西,对象 var obj = document; //alert(typeof obj); obj.abc = 123; obj.onOff = true; //alert(document.abc); obj.fn1 = function() { alert(1);}; //obj.fn1(); var arr = [1,2,3,4] //alert(arr.length); //arr[2] = 345; //alert(arr[2]); //arr.push(5,6,7); //alert(arr); //alert(typeof arr);//object arr.abc = 999; arr.fn1 = function() { alert(1);} //alert(arr.abc); //arr.fn1(); var json = { name:'maiov',age:5}; //alert(json.name + '今年'+ json.age +'岁了'); //alert(typeof json);json var n = null; //alert(typeof n);//object //n.abc = 123;//不可以 //alert(n.abc);//不可以 var u; alert(u);//typeof //alert(typeof u);//undefined(未定义) //表示你写的程序出问题了
23. 显示类型转换(强制类型转换)
Number();
parseInt();
parseFloat()
var num = '200.345';
if(parseInt(num) == parseFloat(num)){
alert(num +'是整数');
}else
{ alert(num +'小数');
}
24.隐式类型转换
- * / % '200' - 3 变成数字 2003
+ '200'+ 3 变成字符串 197
++ -- 变成数字
> < 数字的比较和字符串的比较
! 取反 把右边的数据类型转成布尔值
==
alert('10' > '9');//false
alert('10' > 9) true
*/
25.作用域
1) ”找一些东西“:var function 参数
a=1 所有的变量,在正式运行代码之前,都提前赋了一个值:未定义
fn1 = function fn1(){ alert(2);}
所有的函数,在正式运行代码之前,都是整个函数块。
遇到重命名的:只留一个。
变量和函数重名了,只留函数。
2)逐行解读代码
表达式:= + - * / % ++ -- ! 参数.....
表达式可以修改预解析的值.
3)题目:
alert(a);
var a = 1;
alert(a);
function a(){ alert(2);}
alert(a);
var a = 3;
alert(a);
function a() { alert(4);};
alert(a); 弹出的值为什么?
1)预解析:var function 参数 ...... 剔除 a= undefined 剔除 a = function a() { alert(2);} 剔除 a = undefined a = function a() { alert(4);} a= 1 2) 逐行解读代码: 表达式: alert(a); //function a() { alert(4); var a = 1; alert(a); //1 function a(){ alert(2);} //没改变 alert(a); // 1 var a = 3; alert(a); //3 function a() { alert(4);};//函数声明,不能改变值。 alert(a); //3
var a =1;
function fn1(){
alert(a);//undefined
var a = 2;
}
fn1();
alert(a);//1
26.
真假的问题:数据类型-数字(NaN)、字符串、布尔、函数、对象(elem、[]、{}、null)、未定义
真:非0的数字,非空字符串、true、函数,能找到的元素、[]、{}
假:0 、('abc'-1)NaN、空字符串、false、不能找到的元素、未定义
if('')
{
alert('真');
}else
{
alert('假');
}
27.return :返回值
1)函数名+括号:fn1()==>return 后面的值;
2)所有函数默认返回值:未定义;
3)return 后面的任何代码都不执行了;
28.
//当函数的参数个数无法确定的时候:用arguments
function sum(){
var n = 0;
for(var i=0;i<arguments.length;i++){
n += arguments[i];
}
return n;
}
29.
background: url() red …… 复合样式(不要获取)
backgroundColor 单一样式(不要用来做判断)
不要有空格
不要获取未设置后的样式:不兼容
function $(v){ if(typeof v === 'function'){ window.onload = v; }else if(typeof v === 'string') { return document.getElementById(v); } else if(typeof v === 'object') { return v; } } getComputedStyle // IE6 7 8 不兼容(获取到的是计算机(浏览器)计算后的样式) currentStyle //标准浏览器不兼容 function getStyle(obj,attr) { return obj.currentStyle ? obj.currentStyle:getComputedStyle(obj)[attr]; }
30.定时器
定时器:时间概念
var timer = setInterval(函数,毫秒); //重复执行
clearInterval(timer);//清除
var timer = setTimeout(函数,毫秒);//执行一次
31.
//x~y 之间的随机数
Math.round(Math.random()*(y-x) +x);
32.数组去重
var arr = [ 1,2,2,4,2 ];
for ( var i=0; i<arr.length; i++ ) {
for ( var j=i+1; j<arr.length; j++ ) {
if ( arr[i] == arr[j] ) {
arr.splice( j, 1 );
j--;
}
}
}
alert( arr );
33. for in (相当于C#中的foreach)
var str = '';
var num = 0;
for ( var attr in document ) {
str += num + '. ' + attr + ':' +document[attr] + '<br />';
num ++;
}
document.body.innerHTML = str;
</script>
34、 减少Dom 操作的方法
1.节点克隆 --cloneNoew。
window.onload = function(){
var oUl = document.getElementById('ul1');
var str = '';
console.time('hello');
for(var i=0;i<5000;i++){
var oLi = document.createElement('li');
oLi.innerHTML = 'li';
oUl.appendChild(oLi);
}
console.timeEnd('hello');
console.time('hello');
var oLi = document.createElement('li');
oLi.innerHTML = 'li';
for(var i=0;i<5000;i++){
var newLi = oLi.cloneNode(true);
oUl.appendChild(newLi);
}
console.timeEnd('hello');
}
2.访问集合 -- 尽量使用局部变量。
var doc = document;
var odiv = doc.getElementById();
var oInput = doc.getElementById();
window.onload = function(){
var oDiv = document.getElementById('div1');
var L = oDiv.offsetHeight;
var T = oDiv.offsetTop;
setInterval(function(){
L ++;
T ++;
oDiv.style.left = L + 1 +'px';
oDiv.style.top = T + 1 +'px';
},30)
};
3.元素节点 -- 尽量用只获取元素的节点方法
appendChild
childNodes -> 元素节点,文本节点
children -> 元素节点
firstChild
firstElementChild
4.选择器 API --利用querySelector,querySelectorAll
var oUl = document.getElementById('ul');
var aLi = oUl.getElementsByTagName('li');
//IE 8以下不支持
var aLi = document.querySelectorAll('#ul li');
5. Chrome: dom方法要比innerHTML性能要好,IE浏览器
6. createDocumentFragment 的使用
window.onload = function(){
var oUl = document.getElementById('ul1');
var oFrag = document.createDocumentFragment();//作为缓存
console.time('hello');//Firefox测试输出的时间
for(var i= 0;i<5000;i++) { var oLi = document.createElement('li'); oFrag.appendChild(oLi); } oUl.appendChild(oFrag); console.timeEnd('hello');//Firefox输出的时间 };
7.cssText代替 oLi.style.width
window.onload = function(){
var oUl = document.getElementById('ul1');
console.time('hello');
for(var i =0; i < 5000;i++)
{
var oLi = document.createElement('li');
oLi.style.width = '100px';
oLi.style.height = '100px';
oLi.style.background = 'red';
//oLi.style.cssText ='width:100px;height:100px;background:red';
oUl.appendChild(oLi);
}
console.timeEnd('hello');
}
35、快速排序
1.找一个基准点.
2.建立两个数组、分别存储左边和右边的数组. 3.利用递归进行下次比较.
// 快速排序
function quickSort(arr){
if(arr.length <= 1){
return arr;
}
var num = Math.floor(arr.length/2);
var numValue = arr.splice(num,1);
var left = [];
var right = [];
for(var i =0;i < arr.length;i++){
if(arr[i] < numValue){
left.push(arr[i]);
}else {
right.push(arr[i]);
}
}
return quickSort(left).concat([numValue],quickSort(right));
}
alert(quickSort([12,5,37,6,22,40]));
也可以用sort()来处理
var arrWidth = ['345px','23px','10px','1000px'];
arrWidth.sort(function(a,b){
return parseInt(a) - parseInt(b);
});
//alert(arrWidth);
var arr =[1,2,3,4,5,6,7,8];
arr.sort(function(a,b){
return Math.random() - 0.5;
});
alert(arr);
36、函数声明与表达式
函数声明:function 函数名(){}
函数表达式:function 函数名(可写可不写)(){} :命名函数表达式 匿名函数表达式
function aaa(){} :函数声明
var a = function aaa() {} :命名函数表达式
var a = function() {} :匿名函数表达式
{function aaa(){}}:表达式
区别:
1. 函数表达式可以直接后面加括号执行,而函数声明是不可以的。
2.函数声明可以被提前解析出来的
function aaa(){ alert(1);}();
var a = function aaa(){ alert(1)}();
~function aaa() { alert(1)}();
37、JS操作IFrame
1. contentDocument
2.contentWindow.document
3.window.parent
4.window.top
/document 操作iframe
window.onload = function(){
var oInput = document.getElementById('input1');
var oIframe = document.getElementById('iframe1');
oInput.onclick = function(){
//oIframe.contentWindow.document.getElementById('div1').style.color = 'red'; //所有的浏览器都支持
oIframe.contentDocument.getElementById('div1').style.background = 'red'; //IE6,7不支持
};
};
var oIframe = document.createElement('iframe');
oIframe.src = 'iframe1.html';
document.body.appendChild(oIframe);
/* oIframe.onload = function()
{
alert(123);
};*/
//ie 下的iframe 的onload事件只能用绑定的形式
oIframe.attachEvent('onload',function(){
alert(123);
});
iframe 改变高度:
window.onload = function(){
var aInput = document.getElementsByTagName('input');
var oIframe = document.getElementById('iframe1');
function changeHeight(){
setTimeout(function(){
oIframe.height = oIframe.contentWindow.document.body.offsetHeight;
},100);
}
changeHeight();
aInput[0].onclick = function(){
oIframe.src = 'iframe4.html';
changeHeight();
};
aInput[1].onclick = function(){
oIframe.src = 'iframe5.html';
changeHeight();
};
};
<input type="button" value="切换1"/>
<input type="button" value="切换2"/>
<iframe id="iframe1" src="iframe4.html" scrolling="no"></iframe>
5.iframe的高度随嵌套页面高度的变化为变化
$(window.frames["iframe1"].document).height() //iframe1为iframe的名称
如果同个页面不在同一个站点下,会出现跨域问题,报:Blocked a frame with origin from accessing a cross-origin frame
解决方法如下:
parent page:
window.addEventListener('message', function (event) {
if (event.data.viz == "Dis") {
var data = event.data;
document.getElementById('emViz_disparities').height = data.height;
}
}, false);
child page:
window.parent.postMessage({
'height': framewidth + 180,
'viz': 'Dis',
'location': window.location.href
}, "*");
38.js获取最顶层Id的html
$("#顶级框架的id",top.window.document).html();
39.获取URL的参数
function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }
获取url后?的参数
var getRequest = function () { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for (var i = 0; i < strs.length; i++) { theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]); } } return theRequest; }
40.javascript:void(0)表示不做任何动作
<a href="javascript:;">Test</a>
可以用javascript:;代替 javascript:void(0);
41.去掉js数组中的重复项 http://www.jb51.net/article/82293.htm
Array.prototype.unique3 = function(){ var res = []; var json = []; for(var i=0,len = this.length;i<len;i++) { if(!json[this[i]]){ res.push(this[i]); json[this[i]] = 1; } } return res; }; var arr2 = [1, 1, 3]; arr2.unique3();
var Uniue = function(arr) { var result = [], hash = {}; for (var i = 0, elem; (elem = arr[i]) != null; i++) { if (!hash[elem]) { result.push(elem); hash[elem] = true; } } return result; };
42.javascript 实现嵌套页面(内容很多,出现滚动条)的打印。 主要代码如下:
父页面代码:
<script> function printdiv() { window.open("/Print.html?t=" + Math.random(),"newwindow", "height=2000, width=1024, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no"); } </script> <a onclick="printdiv();">预览</a> <div id="div_print"> 打印内容 </div>
子页面代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>打印test</title> <script language="javascript"> window.onload = function () { var opn = window.opener; var printpage = opn.document.getElementById("div_print").innerHTML;//获取父页面标签的值 var newstr = document.getElementById("printidiv").innerHTML = printpage; } </script> </head> <body> <a href="javascript:window.print();">打印</a> <div id="printidiv"> </div> </body> </html>
另外设置打印的css代码,通过media="print"来区分
<style type="text/css" media="print">
* {padding: 0; margin: 0;} a {text-decoration: none; }
</style>
这样打印会有问题:1.会出现url地址,手动设置去掉页眉页脚,会把页码也去掉;2.预览之后打印页面需要重新写JS和CSS 可以使用Jquery 的print 来实现打印。
2.window.print打印指定网页区域的方法 http://www.52jb.net/biancheng/517.html
https://stackoverflow.com/questions/9616426/javascript-print-iframe-contents-only
43.隐私信息用**代替
return function (input, begin, charLen) {//charLen代替*的个数,begin是从1开始 if (!input) return ''; var len = input.length; if (begin <= 0) { begin = 1; } if (begin > len) { return input; } var char = '*'; var fstStr = input.substring(0, begin - 1); var lstStr = ""; if(charLen<0) { charLen = 1; } if (!charLen) { charLen = len - begin+1; } var end = begin + charLen; var scdStr = input.substr(begin-1, charLen); if (end <= len) { lstStr = input.substr(end - 1); } var output = fstStr + scdStr.replace(/[\u4E00-\u9FA5A-Za-z0-9_]/g, char) + lstStr; return output; };
//去除前后空格 function Trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); } //一维数组去重 var unique = function(array){ array = array || []; for (var i = 0, len = array.length; i < len; i++) { for(var j = i+1;j< array.length;j++){ if(Trim(array[i]) === Trim(array[j])){ array.splice(j,1); j--; } } } return array; } var arrt = ['1','2','3','1','2','3'," 1"," 2"," 3"]; var t2 = unique(arrt);//['1','2','3']
方法二
/* *对数组进行去重操作,返回一个没有重复元素的新数组 */ function unique(target) { var result = []; loop: for (var i = 0, n = target.length; i < n; i++) { for (var x = i + 1; x < n; x++) { if (target[x] === target[i]) { continue loop; } } result.push(target[i]); } return result; }
方法三
Array.prototype.distinct = function () { var newArr = [],obj = {}; for(var i=0, len = this.length; i < len; i++){ if(!obj[typeof(this[i]) + this[i]]){ newArr.push(this[i]); obj[typeof(this[i]) + this[i]] = 'new'; } } return newArr; }
其实最优的方法是这样的
方法四
Array.prototype.distinct = function () { var sameObj = function(a, b){ var tag = true; if(!a || !b) return false; for(var x in a){ if(!b[x]) return false; if(typeof(a[x]) === 'object'){ tag = sameObj(a[x],b[x]); } else { if(a[x]!==b[x]) return false; } } return tag; } var newArr = [], obj = {}; for(var i = 0, len = this.length; i < len; i++){ if(!sameObj(obj[typeof(this[i]) + this[i]], this[i])){ newArr.push(this[i]); obj[typeof(this[i]) + this[i]] = this[i]; } }
方法五
//可传参的类似C#的distinct去重 Array.prototype.distinct = function () { var callback = arguments[0] || function (n) { return n; }; var arr = []; var resultArr = []; for (var i = 0, len = this.length; i < len; i++) { var resultItem = callback(this[i]); if (!~resultArr.indexOf(resultItem)) { resultArr.push(resultItem); arr.push(this[i]); } } return arr; };
使用
var arr=[{name:"tom",age:12},{name:"lily",age:22},{name:"lilei",age:12}]; var newArr=arr.distinct(function(ele){ return ele.age; });
参考:http://www.cnblogs.com/liyunhua/p/4558621.html
2).获取数组中最大的项
Math.max.apply(null, array);
3).获取数组中最小的项
Math.min.apply(null, array);
4).清空数组
(array || []).length = 0;
5).获取两个数组之间相同的,不同的和合并之后去掉重复的数组
var getSampleArr = function (newValue, oldValue) { var arry3 = new Array(); var j = 0; for (var i = 0; i < newValue.length; i++) { for (var k = 0; k < oldValue.length; k++) { if (newValue[i] == oldValue[k]) { arry3[j] = newValue[i]; ++j; } } } return arry3; }; var getDiffArr = function (newValue, oldValue) { var newArr = []; if (newValue.length > 0 && oldValue.length <= 0) { newArr = newValue; } var arr3 = []; for (var i = 0; i < newValue.length; i++) { if (oldValue.indexOf(newValue[i]) === -1) arr3.push(newValue[i]); } var arr4 = []; for (var j = 0; j < oldValue.length; j++) { if (newValue.indexOf(oldValue[j]) === -1) arr4.push(oldValue[j]); } newArr = arr3.concat(arr4); return newArr; }; var getUniqueArr = function (newValue, oldValue) { var arr = newValue.concat(oldValue); var result = [], hash = {}; for (var i = 0, elem; (elem = arr[i]) != null; i++) { if (!hash[elem]) { result.push(elem); hash[elem] = true; } } return result; };
45. 前端处理倒叙问题
//一般这样写 for (var i = 0; i < data.Data.length; i++) { } //如果要倒叙 for (var i = data.Data.length - 1; i >= 0; i--) { }
46.JS中(function(){xxx})(); 这种写法是什么意思 :https://segmentfault.com/q/1010000000135703
自执行匿名函数:
- 常见格式:(function() { /* code */ })();
- 解释:包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数。
- 作用:可以用它创建命名空间,只要把自己所有的代码都写在这个特殊的函数包装内,那么外部就不能访问,除非你允许(变量前加上window,这样该函数或变量就成为全局)。各JavaScript库的代码也基本是这种组织形式。
总结一下,执行函数的作用主要为 匿名 和 自动执行,代码在被解释时就已经在运行了。
其他写法
(function () { /* code */ } ());
!function () { /* code */ } ();
~function () { /* code */ } ();
-function () { /* code */ } ();
+function () { /* code */ } ();
推荐阅读:立即调用的函数表达式
47. 原型和闭包
原型就是C#中类的公有方法
(function(){……………}())最简单的闭包
什么情况使用闭包
48.不声明第三个变量的值交换
var a = 1, b = 2; a = [b, b = a][0];
49.循环中使用标签
有时候循环当中嵌套循环,你可能想要退出某一层循环,之前总是用一个标志变量来判断,现在才知道有更好的方法
outerloop: for (var iI=0;iI<5;iI++) { if (somethingIsTrue()) { // Breaks the outer loop iteration break outerloop; } innerloop: for (var iA=0;iA<5;iA++) { if (somethingElseIsTrue()) { // Breaks the inner loop iteration break innerloop; } } }
50.基础数据类型(Null,Undefined,Number,Boolean,String)不可以改变,对象可以改变;(只能引用类型值动态的添加属性)
var a ='abcd'; undefined a.len = 4; 4 alert(a.len) undefined 只有对象才有方法 undefined a.toUpperCase() 转为大写 "ABCD" alert(a);还是小写的abcd undefined a = a.toUpperCase();是大写的ABCD "ABCD" alert(a); undefined
如下图:
51. 当你用if去判断时, null、undefined、''、0会自动转换为false 。三元表达式也是一样的
52. push() 往数组最后面添加一个元素,成功返回当前数组的长度
pop() 删除数组的最后一个元素,成功返回删除元素的值
shift() 删除数组的第一个元素,成功返回删除元素的值
unshift() 往数组最前面添加一个元素,成功返回当前数组的长度
splice() 有三个参数,第一个是想要删除的元素的下标(必选),第二个是想要删除的个数(必选),第三个是删除后想要在原位置替换的值(可选)
sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse() 将数组倒序,成功返回倒序后的数组
按位非(NOT !) 是将所有的0转成1,1转成0
按位异或(XOR ^ ) 是 1和1,0和0转成0;1和0,0和1都转成1
方法一:使用下标实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function () { var btns = document.getElementsByTagName("button"); for (var i=0, length=btns.length; i<length; i++) { var btn = btns[i]; //将btn所对应的下标保存在btn上 btn.index = i; btn.onclick = function () { alert('第'+(this.index+1)+'个'); }; } } </script> </head> <body> <button>测试1</button> <button>测试2</button> <button>测试3</button> </body> </html> 方法二:使用闭包实现(闭包的作用可以延长局部变量的生命周期) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function () { var btns = document.getElementsByTagName("button"); //利用闭包实现循环遍历+监听 for (var i=0, length=btns.length; i<length; i++) { (function(i) { var btn = btns[i]; btn.onclick = function () { alert('第'+(i+1)+'个'); }; })(i) } } </script> </head> <body> <button>测试1</button> <button>测试2</button> <button>测试3</button> </body> </html> 方法三:利用ES6实现(let有自己的块作用域) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function () { var btns = document.getElementsByTagName("button"); //利用let定义i for (let i=0, length=btns.length; i<length; i++) { var btn = btns[i]; btn.onclick = function () { alert('第'+(i+1)+'个'); }; } } </script> </head> <body> <button>测试1</button> <button>测试2</button> <button>测试3</button> </body> </html>
5.indexOf和lastIndexOf
第二个参数是搜索的起始位置,注意在javascript中利用indexOf和lastIndexOf对数组搜索,即使设置了第二个参数,也不是说搜索到数组最后一个元素就停止,而是会循环搜索(相当于把前面的元素接到后面继续搜索),即无论如何都会对所有的元素搜索一遍。
我在多种浏览器中(IE、firefox和chrome中输出都是3、5、5、3,你怎么会是3、5、3、3?)
var a=[1,2,3,4,5,4,3,2,1]
console.log(a.indexOf(4)) //3
console.log(a.lastIndexOf(4)) //5
console.log(a.indexOf(4,4))//5,从位置4开始搜索,位置5元素就是4,搜索停止,故输出5
console.log(a.lastIndexOf(4,4))//3,从位置4开始搜索,先搜索位置5元素符合,最后搜索到位置3元素符合,故输出3
数组的.indexOf方法,对于引用型的对象,是按对象的引用比较的
morePeople[0]与person是同一个对象的引用
people[0]与person是两个不同的对象,虽然对象的内容一样
var person ={name:"n"}
var people=[{name:"n"}];
var morePeople=[person];
alert(people.indexOf(person)) ; //-1
//people里没有person对象,当然返回-1
alert(morePeople.indexOf(person)); //0
//morePeople里第0个元素就是person,所以返回所在位置0
6.window.top/window.self
if (window.top !== window.self) { window.top.location = window.location; }
判断当前的窗口是不是顶层窗口
换句话说,判断当前的窗口有没有被嵌套在别的窗口中
如果window.top = window.self 没嵌套
当前窗口就是顶层窗口
top.location != self.location 就是说当前窗体的url和父窗体的 url是不是相同
如果相同执行top.location=self.location;},把窗体的url设成和本窗体一样。这个是为了防止别的网站嵌入你的网站的内容(比如用iframe嵌入的你的网站的页面)
7.引入的js 需要加入版本号 ?(new Date()).getTime()
8.var book=function(){} https://zhuanlan.zhihu.com/p/83691879
book.name="2"
var book=function(){}
book.prototype.name="1"
这个有啥区别?
prototype 是全局的,book.name="2" 是单个的
book.name="2" 是本地属性
book.prototype.name="1" 是给原型链加属性
推荐书籍 《JavaScript 语言精粹》 电子工业出版社 Douglas Crockford 著 赵泽欣 鄢学鹍译
你自己写一个方法,调用原生函数再处理数据