标签：
集中时间把秒微课堂JS的基础课程看完，并且认真完成了课后练习。感觉在JS方面的技能算是入了个门了。课后练习的作业完成的代码我都汇总在了这里。至于视频课的学习笔记，则记录如下。
第01课JS入门基础_热身课程
事件：鼠标事件、键盘事件、系统事件、表单事件、自定义事件
函数可以理解为命令，做一些事情，如:
function abc() { //肯定不会主动执行！ … }
function(){} 匿名函数
元素.事件 = function(){}
var li = document.getElementById(‘lis’); var num = 123; var name = ‘leo’;
属性值
字符串连接：加号
关于兼容：
for循环的使用场景：
for循环的执行顺序：1→234→234……
注意下面这样一个循环
for (var i=0; i<aLi.length; i++) { aLi[i].onclick = function(){ alert(i); } }
window是js中的”老大“
function fn1(){ alert(this); } fn1();
上述代码中执行函数fn1()相当于window.fn1();因此，在函数体内弹出这个this仍然是window。
function fn1(){ alert(this); } oBtn.onclick = fn1;
上述用按钮的点击事件调用的fn1函数，最终弹出来的是这个按钮，而不是window。
function fn1(){ alert(this); } oBtn.onclick = function(){ alert(this) }
上述代码，点击按钮弹出的this仍然是oBtn这个按钮。
function fn1(){ alert(this); } oBtn.onclick = function(){ fn1(); }
上述代码，点击oBtn按钮，弹出的就不再是oBtn这个对象，而是window。
<input id="btn2" type="button" value="按钮2" onclick="alert(this)" />
述代码中，弹出的this就是window。
function fn1(){ this } fn1(); this ＝> window oDiv.onclick = fn1; this => oDiv oDiv.onclick = function(){ this => oDiv }; oDiv.onclick = function(){ fn1(); fn1()里面的this => window } <div onclick=" this "></div> this => div <div onclick = " fn1(); "></div> fn1()里面的this => window
<script> fn1(this); function fn1(obj){ obj => window } oDiv.onclick = function(){ this fn1(this); }; function fn1(obj){ obj => oDiv } </script>
<input type="button" value="按钮1" /> <input type="button" value="按钮2" /> <input type="button" value="按钮3" /> window.onload = function(){ var aBtn = document.getElementsByTagName(‘input‘); for(var i=0; i<aBtn.length; i++) { aBtn[i].onclick = function(){ this.style.background = ‘yellow‘; } } }
上述代码还等价于下面这段代码：
<input type="button" value="按钮1" /> <input type="button" value="按钮2" /> <input type="button" value="按钮3" /> window.onload = function(){ var aBtn = document.getElementsByTagName(‘input‘); for(var i=0; i<a.aBtn.length; i++) { aBtn[i].onclick = fn1; //注意不要在fn1后面加括号 } function fn1(){ this.style.background = ‘yellow‘; } }
自定义属性的读写操作
winddow.onload = function(){ var aBtn = document.getElementsByTagName(‘input‘); aBtn[0].abc = 123; //自定义属性 // alert(aBtn[0].abc); 自定义属性的读 // aBtn[0].abc = 456; 自定义属性的写 }
JS可以为任何HTML元素添加任意个自定义属性
用自定义属性可以元素添加开关属性，作为控制开关。如下面这个例子：
window.onload = function(){ var aLi = document.getElementsByTagName(‘li‘); // var onOff = true; 一个onOff只能控制一个开关。要为多个元素设置各自的开关，就要给每个元素加个onOff开关。 for(var i=0; i<aLi.length; i++) { aLi[i].onOff = true; aLi[i].onclick = function(){ if (this.onOff){ this.style.background = ‘url(img/active.png)‘; this.onOff = false; } else { this.style.background = ‘url(img/normal.png)‘; this.onOff = true; } } }
在网页上设置三个按钮，默认值为0，每点击一次按钮，字母依次ABCD轮换。
<input type="button" value="0" /> <input type="button" value="0" /> <input type="button" value="0" /> var aBtn = document.getElementsByTagName(‘input‘); var arr = [‘A‘, ‘B‘, ‘C‘, ‘D‘]; for(var i=0; i<aBtn.length; i++){ aBtn[i].num = 0; aBtn[i].onclick = function(){ this.value = arr[this.num] this.num++; if(this.num === arr.length){ this.num = 0; }; }; };
把三个按钮的value与数组里面的值依次进行匹配。
<input type="button" value="btn1" /> <input type="button" value="btn2" /> <input type="button" value="btn3" /> window.onload = function(){ var aBtn = document.getElementsByTagName(‘input‘); var arr = [‘莫涛‘,‘张森‘,‘杜鹏‘]; for(var i=0; i<aBtn.length; i++){ aBtn[i].index = i; //自定义属性index，添加索引值 aBtn[i].onclick = function(){ //alert(i); //不会弹出1、2，直接弹出3，也就是aBtn的长度。也就是说，在基础阶段，在for循环所包的函数里面再用i是不靠谱的。 this.value = arr[this.index]; }; };
上面是通过索引值匹配数组值，匹配HTML中的元素也是同理。
想建立”匹配“、”对应“关系，就用索引值。
typeof用来判断数据类型。
字符串方法charAt()：通过字符串的下标获取子字符串。
对象可以添加自定义属性。如果把函数扔给了对象，就给该对象添加了一个方法。
把字符串转成数字的方法：
var a = ‘100‘; alert(a + 100); //‘100100‘ var b = ‘00100‘; alert(Number(b)); //100 var c = ‘+100‘; alert(Number(c)); //100 var d = ‘‘; alert(Number(d)); //0 var e = ‘ ‘; alert(Number(e)); //0 var f = true; alert(Number(f)); //1 var g = false; alert(Number(g)); //0 var i = []; alert(Number(i)); //0 空数组用Number转出来是0 var j = [‘‘]; alert(Number(j)); //0 var k = [123]; alert(Number(k)); //123 var l = [‘123‘]; alert(Number(l)); //123 var o = null; alert(Number(o)); //0 ---------------------------- var m = [1,2,3]; alert(Number(m)); //NaN var json = {abc:123}; alert(Number(json)); //NaN var json2 = {}; alert(Number(json2)); //NaN 即使是空json，Number方法也转不了 var h = function(){}; alert(Number(h)); //NaN var p; alert(Number(p)); //undefined var q = ‘100px‘; alert(Number(q)); // NaN
var a = ‘100px‘; alert(parseInt(a)); //100 var b = ‘100px123456789‘; alert(parseInt(b)); //100 var d = ‘-100px‘; alert(parseInt(d)); //-100 parseInt还是认加减号的 var e = ‘ 100px‘; alert(parseInt(e)); //100 parseInt也是认空格的 var f = ‘000000100px‘; alert(parseInt(f)); //100 var g = ‘12.34元‘; alert(parseInt(g)); //12 parseInt只能转出整数 ------------------------------ var c = true; alert(parseInt(c)); //NaN //parseInt也不能用于转函数等
parseInt()方法还有一个参数，就是按照几进制来转，比如parseInt(a, 10);表示按照十进制来转；parseInt(b, 2);表示按照二进制来转。
var a = ‘12.34元‘; alert(parseFloat(a)); //12.34 var b = ‘12.3.4元‘; alert(parseFloat(b)); //12.3 parseFloat只认第一个小数点
parseInt和parseFloat的配合使用，可以来判断某个值是整数还是小数，如下：
var num = ‘200.345‘; if(parseInt(num) == parseFloat(num)) { alert(num + ‘是整数‘); } else { alert(num + ‘是小数‘); }
显式类型转换（强制类型转换）：
隐式类型转换：
alert(‘200‘ - 3); //197 alert(200 + ‘3‘); //2003 var a = ‘10‘; a++; alert(a); //11 alert(‘10‘>9); //true alert(‘1000000‘>‘9‘); //false //注意：数字的比较和字符串的比较不同；字符串的比较是一位一位的比较。 alert(!‘ok‘); //false alert(!100); //false alert(‘2‘ == 2); //true alert(‘2‘ === 2); //false 三个等号不仅判断值，还会先判断两者的类型
隐式类型转换转不出来，也会返回一个NaN，例如：alert(‘……’ - 9);就会弹出NaN。
NaN: (not a number)。Nan是个不是数字的数字类型。所有的数字都是数字类型，但不是所有的数字类型都是数字。
var a = Number(‘abc‘); //alert(a); //NaN //alert(typeof(a)); //number if(a) { //会弹出‘假’，说明NaN是false alert(‘真‘); } else { alert(‘假‘); } //alert(a === a); //false NaN比较，比出false
isNaN：is not a Number 是不是不是个数字（不是数字）。
isNaN();是个方法，用来干活的。
isNaN的判断过程，将括号里面的东西扔给Number，Number转出来数字，就返回false；转不出来就返回true。
alert(isNaN(‘250‘)); //Number() ‘250‘ => 250 => false alert(isNaN(true)); //Number() true => 1 => false alert(isNaN([])); //Number() [] => 0 => false
下面是一个isNaN的小应用：
<input type="text" /> <input type="button" value="判断输入值是不是数字" /> window.onload = function(){ var aInp = document.getElementsByTagName(‘input‘); var str = ‘‘; aInp[1].onclick = function(){ str = aInp[0].value //alert(type of str); //总是返回string 从HTML中拿到的内容，类型都是字符串 if(isNaN(str)){ alert(str + ‘不是数字‘); } else { alert(str + ‘是数字‘); } } }
参数 ＝ JS的数据类型：
fn1(100); fn1(‘miaov‘); fn1(function(){alert(1);}); function fn1(a){ if(typeof a === ‘number‘ && a === a) { alert(a+20); } else if (typeof a === ‘string‘){ alert(a.charAt(2)); } else if (typeof a === ‘function‘){ a(); } }
什么是作用域
“JS解析器”：浏览器中专门用来读JS的程序。它至少做下面两件事（当然还有其他事情）：
准备工作（“找一些东西”）：根据var、function、参数找东西 —— JS的预解析
a = 未定义 所有的变量，在正式运行代码之前，都提前赋了一个值：未定义 fn1 = function fn1(){alert(2);} 所有的函数，在正式运行代码之前，都是整个函数块
遇到重名的，只留一个
逐行解读代码 每读一行，就会回到预解析的库里面去看一眼。 碰上表达式（带有 = + - * / % ++ – ! 参数……都是表达式）能够改变值的是表达式。碰上表达式，就到库里面去修改值。
alert(a); //未定义 var a=1; //在库里面a的值由未定义换成1 function fn1(){alert(2);} alert(a); //弹出：function a(){alert(4);} var a=1; //预解析中的a改为了1 alert(a); //弹出1 function a(){alert(2);}//函数声明，没有改变a的值。什么也没发生。 alert(a); //继续弹出1，因为a在预处理库里面的值没有被改过。 var a=3; //预处理中a的值变为3 alert(a); //弹出3 function a(){alert(4);} //函数声明，什么也没有发生 alert(a); //继续弹出3 a(); //报错 a is not a function
以上代码在预解析中的过程如下：
1）预解析： var function 参数 …… 读到 var a = 1 => a 未定义 读到 function a(){alert(2);} => a = functiona(){alert(2);} 变量与函数重名了，就只留下函数： a = function(){alert(2);} 读到 var a = 3 => a 未定义，这里与上面名为a的函数重名了，所以还是保留a = function(){alert(2);} 读到function a(){alert(4);} => a = function a(){alert(4);} 与前面的 a = function(){alert(2);}重名，根据上下文，后面的函数覆盖了前面的函数，所以预解析就只留下了 a = function(){alert(4);} 2）逐行解读代码 读到表达式，表达式可以修改预解析的值。参数也可以改变预解析的值。 遇到函数调用，又要做两件事：预解析、逐行解析代码 函数声明，不是表达式，不改变预解析里面的值。
作用域链：从子级作用域跳到父级作用域的过程
alert fn1(); function fn1(){ return function(){ alert(1); } } 此时弹出的是：function(){alert(1);} alert fn1()(); function fn1(){ return function(){ alert(1); } } 此时弹出的是1，也就是return的匿名函数执行的结果。 alert fn1()(10); function fn1(){ return function(a){ alert(a); } } 此时弹出的是10。 alert fn1(20)(10); function fn1(a){ return function(b){ alert(a + b); } } 此时弹出的是30。
fn1(1, 2, 3); //实参——实际传递的参数
function fn1(a, b, c) //形参——形式上，a、b、c这些名代表1、2、3
如果不写形参，1、2、3也能够传进来，都存在arguments的肚子里。
function fn1(){ //arguments => [1, 2, 3] —— 实参的集合（不是数组，但是类似数组，有length，也可以用下标找到其中的数据） }
当函数参数个数无法确定的时候，用arguments：
alert(sum(1,2,3)); function sum(){ var n=0; for(var i=0; i<arguments.length; i++){ n += arguments[i]; } return n; } var a=1; function fn2(a){ //arguments的某个数值就相当于某个形参 arguments[0]=3; alert(a); //弹出3 var a=2; alert(arguments[0]); //弹出2 } fn2(a); alert(a); //弹出1
属性判断法、版本检测法来解决浏览器间的兼容性问题 ~~~ js function getStyle( obj, attr) { return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle( obj )[attr]; } ~~~
注意事项：
setInterval(函数, 毫秒); 重复执行（发动机）
var i=0; function fn1(){ document.title = i; i++; } setInterval(fn1, 1000);
事件调用的方法
clearInterval
var timer = setInterval(函数, 毫秒); //重复执行 clearInterval(timer); //清除定时器
var i=0, timer = null; function fn1(){ i++; document.title = i; if(i===10){ clearInterval(timer); } } timer = setInterval(fn1, 1000);
注意
定时器如果是由事件控制的，比如按钮的onclick控制的，那么一定要遵循一个原则，先关后开。这样可以避免连续点击多次按钮，重复设置定时器。另外，clearInterval()不论里面填的是一个timer，还是null还是未定义，都可以顺利运行。
var timer = setTimeout(函数, 毫秒); 执行一次（炸弹）
clearTimeout(timer);
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:30px; } </style> </head> <body> <input id="btn1" type="button" value="走" /> <div id="div1"></div> <script> var oBtn1 = document.getElementById(‘btn1‘); var oDiv = document.getElementById(‘div1‘); oBtn1.onclick = function () { // doMove ( oDiv, ‘width‘, 34, 600 ); doMove ( oDiv, ‘left‘, 12, 900, function () { doMove ( oDiv, ‘top‘, 34, 500 ); }); }; function doMove ( obj, attr, dir, target, endFn ) { dir = parseInt(getStyle( obj, attr )) < target ? dir : -dir; clearInterval( obj.timer ); obj.timer = setInterval(function () { var speed = parseInt(getStyle( obj, attr )) + dir; // 步长 if ( speed > target && dir > 0 || speed < target && dir < 0 ) { speed = target; } obj.style[attr] = speed + ‘px‘; if ( speed == target ) { clearInterval( obj.timer ); /* if ( endFn ) { endFn(); } */ endFn && endFn(); } }, 30); } function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } </script> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> img { width:100px; height:100px; position:absolute; top:200px; } </style> <script> function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } function shake ( obj, attr, endFn ) { var pos = parseInt( getStyle(obj, attr) ); // 有隐患的 var arr = []; // 20, -20, 18, -18 ..... 0 var num = 0; var timer = null; for ( var i=20; i>0; i-=2 ) { arr.push( i, -i ); } arr.push(0); clearInterval( obj.shake ); obj.shake = setInterval(function (){ obj.style[attr] = pos + arr[num] + ‘px‘; num++; if ( num === arr.length ) { clearInterval( obj.shake ); endFn && endFn(); } }, 50); } window.onload = function () { var aImg = document.getElementsByTagName(‘img‘); for ( var i=0; i<aImg.length; i++ ) { aImg[i].style.left = 80+i*110 + ‘px‘; aImg[i].onmouseover = function () { shake( this, ‘top‘ ); }; } }; </script> </head> <body> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg" /> <img src="img/5.jpg" /> <img src="img/6.jpg" /> <img src="img/7.jpg" /> <img src="img/8.jpg" /> </body> </html>
var iNow = new Date(); var iNew = new Date(2014, 10, 26, 21, 56, 0); var t = Math.floor((iNew - iNow)/1000); var str = Math.floor(t/86400) + ‘天‘ + Math.floor(t%86400/3600) + ‘时‘ + Math.floor(t%86400%3600/60) + ‘分‘ + t%60 + ‘秒‘;
秒：t%60
var iNow = new Date(); var iNew = new Date(‘November 10, 2013 21:56:0‘); var t = Math.floor((iNew - iNow)/1000); var str = Math.floor(t/86400) + ‘天‘ + Math.floor(t%86400/3600) + ‘时‘ + Math.floor(t%86400%3600/60) + ‘分‘ + t%60 + ‘秒‘;
getTime(); 返回从1970年1月1日0点0分0秒0毫秒到现在的毫秒数
var str = ‘妙味课堂‘; //alert( str.length );//4 //alert( str.charAt() );//妙 //alert( str.charCodeAt() ); // 22937 //alert( str.charCodeAt(1) ); // 21619 //alert( str.charCodeAt() ); // 0~9 48~57 a~z 97~122 A~Z 65~90 alert( String.fromCharCode(22937, 21619) );//妙味
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>检测输入的是数字</title> </head> <body> <input type="text" /> <input type="button" value="检测" /> <script> // alert( detectNum(‘123456‘) ); var aInp = document.getElementsByTagName(‘input‘); aInp[1].onclick = function () { var val = aInp[0].value; if ( detectNum(val) ) { alert( ‘恭喜，‘+ val +‘全是数字‘ ); } else { alert(‘输入有误‘); } }; function detectNum ( str ) { var n = 0; for ( var i=0; i<str.length; i++ ) { n = str.charCodeAt(i); if ( n<48 || n>57 )return false; } return true; } </script> </body> </html>
var str = ‘www.miaov.com/2013ww‘; for ( var i=0; i<str.length; i++ ) { if ( str.charAt(i) === ‘a‘ ) { // alert(i);//6 } } //alert( str.indexOf(‘a‘) );//6 //alert( str.indexOf(‘a‘, 5) );//6 // alert( str.indexOf(‘X‘) ); // -1 表示没找到 alert( str.indexOf(‘2013‘, 2) ); //14
var str = ‘妙味课堂是‘;
str.indexOf(‘妙味‘, 2) // 从左往右找
alert( str.lastIndexOf(‘堂‘,4) );//3
// 如果第2个值为负数，默认当成0来处理
//字符串比较 比较第一位的编码值 alert( ‘a‘.charCodeAt() );//97 alert( ‘1‘ > ‘2‘ ); //false alert( ‘cbbbbb‘ > ‘b‘ );//true alert( ‘10000‘ > ‘2‘ ); //false
字符串的大小比较，比较的就是字符串第0位的字符的unicode编码
var str = ‘妙味课堂是一支独具特色的IT培训团队‘; alert( str.substring(0,2) ); //妙味 alert( str.substring(2,0) ); //妙味 // 可以检测两个数，大的往后扔，小的往前扔 alert( str.substring(-3, 2) ); //妙味 // -3 当成0处理 alert( str.substring(2, -3) ); //妙味 alert( str.slice( 2, 0 ) ); //空 // 不交换位置 alert( str.slice( -4, -2 ) ); //培训 // 负数从后面倒着往前数~
var str = ‘妙味课堂-WWW.miaov.com‘; str.charAt(1); //味 str.charCodeAt(1); //21619 String.fromCharCode(22937, 21619); //妙味 str.indexOf(‘m‘, 3); //9 str.lastIndexOf(‘o‘); //16 ‘1000‘ < ‘2‘ //true ‘1000‘ > 2 //true str.substring(0, 4); //妙味课堂 str.slice(-3); //‘com‘ str.toUpperCase(); //‘妙味课堂-WWW.MIAOV.COM‘ str.toLowerCase(); //‘妙味课堂-www.miaov.com‘ str.split(‘.‘, 2); //[‘秒微课堂-www‘, ‘miaov‘] var arr = [‘www‘, ‘miaov‘, ‘com‘]; arr.join(‘.‘); //‘www.miaov.com‘
var json = { name: ‘leo‘, age: 32}; alert(json.name); var imgData = { url: [‘img/1.png‘, ‘img/2.png‘], text: [‘图片一‘, ‘图片二‘] }; alert(imgData.url[1]); var json2 = { ‘name‘: ‘miaov‘ }; //推荐的安全格式的写法 alert(json2.name); alert(json2[‘name‘]); json2.name = ‘abc‘; json2[‘name‘] = ‘妙味‘; //注意中括号里面要用引号 var arr = [{‘name‘: ‘TM‘, ‘age‘: 23}, {‘name‘: ‘leo‘, ‘age‘: 32}]; alert(arr[0].name);
var json4 = { ‘name‘: ‘miaov‘, ‘age‘: 3, ‘fun‘: ‘前端开发‘}; for(var attr in json4){ alert(attr); alert(json4[attr]); } var json5 = { url: [‘img/1.png‘, ‘img/2.png‘], text: [‘图片一‘, ‘图片二‘] }; for(var attr in json5) { for(var i=0; i<json5[attr].length; i++){ alert(json5[attr][i]); } }
for-in也可以遍历对象属性：
var str = ‘‘; var num = 0; for(var attr in window){ str += num + ‘. ‘ + attr + ‘ : ‘ + window[attr] + ‘<br/>‘; num ++; } document.body.innerHTML = str;
数组也可以用for-in来遍历：
var arr = [‘a‘, ‘b‘, ‘c‘]; for(var i in arr){ alert(arr[i]); }
// var arr = [1, 2, 3]; // var arr = new Array(1, 2, 3); var arr = new Array(4); alert(arr.length); // 4 在new Array()里面写了一个数字，就是定义了arr的长度 var arr = [1, 2, 3]; arr.length = 1; //数组的length属性是可写的 alert(arr); ar arr = [1, 2, 3]; arr.length = 0; //快速清空数组arr 或 arr = []; //通过重新赋值来清空数组，效率更高 var str = ‘aaaaa‘; str.length = 1; alert(str); // ‘aaaaa‘ //字符串的length属性不可写，但是数组的length属性可写
添加
删除
小技巧
ar arr = [‘TM‘, ‘钟毅‘, ‘张森‘, ‘杜鹏‘, ‘Leo‘]; arr.unshift(arr.pop()); //数组变为：[‘Leo‘, ‘钟毅‘, ‘张森‘, ‘杜鹏‘, ‘TM‘] 或 arr.push(arr.shift()); //数组变为：[‘钟毅‘, ‘张森‘, ‘杜鹏‘, ‘Leo‘, ‘TM‘]
splice方法
var arr = [‘TM‘, ‘钟毅‘, ‘张森‘, ‘杜鹏‘, ‘Leo‘]; //删除 //arr.splice(0, 1); //删掉第0位，删1个。两个参数第一个是从第几位开始，第二个是删掉几个。splice删除的时候有返回值，返回的是被删除的内容 //替换 //arr.splice(0, 1, ‘莫涛‘); //替换第0位，替换1个，替换为‘莫涛‘。返回的还是删除的东西 //添加 arr.splice(1, 0, ‘李贤‘); //在第1位那里，删除0个，添加了一个‘李贤‘到了第1位，‘钟毅‘就变成了arr[2]了。后面也可以添加多个。如果splice删除了0个，那么就没有返回值。
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--; } } }
sort排序
var arr = [‘c‘, ‘d‘, ‘a‘, ‘e‘]; arr.sort(); // ‘a‘, ‘c‘, ‘d‘, ‘e‘ 按照unicode编码排序 var arr2 = [4, 3, 5, 76, 2, 0, 8]; arr2.sort(); // 0, 2, 3, 4, 5, 76, 8 sort默认是将数组中的每一个按照字符串来排序的，因此出现了76排在8前面的情况 // arr2. sort(function( a, b ){ return a - b; //如果a-b返回正数，就a、b两个数字换个序。如果a-b是负数，就不换序 }) //返回数字从小到大 0, 2, 3, 4, 5, 8, 76 // arr2. sort(function( a, b ){ return b - a; }) //返回数字从大到小 76,, 8, 5, 4, 3, 2, 0
var arrWidth = [ ‘345px‘, ‘23px‘, ‘10px‘, ‘1000px‘ ]; arrWidth.sort(function ( a, b ) { return parseInt(a) - parseInt(b); }); alert( arrWidth ); //10px,23px,345px,1000px
其他排序方法：
var arrWidth = [‘345px‘, ‘23px‘, ‘10px‘, ‘1000px‘]; arrWidth.sort(function(a, b){ return parseInt(a) - parseInt(b); }); // [‘10px‘, ‘23px‘, ‘345px‘, ‘1000px‘]
随机排序
var arr = [1, 2, 3, 4, 5, 6, 7, 8]; arr.sort(function(a, b){ return Math.random() - 0.5; });
Math.random(); 返回0~1之间随机的一个数
如果想要随机返回0和1之间的一个整数，可以用四舍五入的方法：
Math.round(Math.random()); //注意，这里不能用Math.floor
如果想要返回0~10之间的一个随机数：
Math.round(Math.random() * 10); //返回0~10之间的随机整数
返回从20~100之间的一个随机数：
Math.round( Math.random()*80 + 20 ); //返回5~10之间的随机整数
如果想要返回一个x到y之间的整数，可以写成：
Math.round( Math.random() * (y - x) + x );
返回0~x的整数，可以写成
Math.round( Math.random() * x );
返回1~x的整数，可以写成
Math.ceil( Math.random() * x ); //Math.ceil()是向上取整
concat方法
concat方法用于连接数组。
var arr1 = [1, 2, 3]; var arr2 = [4, 5, 6]; var arr3 = [7, 8, 9]; arr1.concat(arr2); //[1, 2, 3, 4, 5, 6] 新数组与原来数组没什么关系。 arr1.concat(arr2, arr3); //[1, 2, 3, 4, 5, 6, 7, 8, 9]
reverse方法
reverse方法是颠倒数组中的位置，会改变原数组
var arr1 = [1, 2, 3]; arr1.reverse(); alert(arr1); // [3, 2, 1]
var str = ‘abcdef‘; alert(str.split(‘‘).reverse().join(‘‘)); //‘fedcba‘
标签：
原文地址：http://www.cnblogs.com/eveblog/p/4759928.html
