JavaScript数组方法及json

一、json数据格式及json语法

一个简单的json

var json = { name : 'leo', age : 32 };
 alert( json.name );//leo

将数组改为json

//数组
var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ];
var arrText = [ '小宠物', '图片二', '图片三', '面具' ];
//json
var imgData = {
    url : [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ],
    text : [ '小宠物', '图片二', '图片三', '面具' ]
};

json的访问/读取格式

var json2 = { 'name' : 'miaov' };
 alert( json2.name );
 alert( json2['name'] );

修改则直接赋值即可

数组可包括json

var arr = [ { ‘name’ : ‘TM’, ‘age’ : 23 }, { ‘name’ : ‘leo’, ‘age’ : 32 } ];
alert( arr[0].name + ‘今年有’ + arr[1][‘age’] );

二、for-in 遍历json

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', 'img/3.png', 'img/4.png' ],
    'text' : [ '小宠物', '图片二', '图片三', '面具' ]
};

for ( var attr in json5 ) {
    for ( var i=0; i < json5[attr].length; i++ ) {
        alert( json5[attr][i] );  //依次弹出每个键值
    }
}

for-in可以遍历数组

var arr = [ 'a', 'b', 'c' ];

for ( var i in arr ) {
    alert( arr[i] );  //a,b,c
}

三、数组的定义即清空数组效率问题

定义数组

var arr = [ 1,2,3 ];
var arr = new Array(1,2,3);

清空数组

将arr的长度赋为0，则表示清空

var arr = [ 'aaa',2,3 ];
 alert( arr.length );           // 3
 arr.length = 0;           
 alert( arr );

将数组的长度置空也表示清空

arr = [];

数组长度

 var arr = new Array(3);
 alert( arr.length );//3
 var arr = new Array('3');
 alert( arr.length );//1

对于字符串，将字符串长度设为0，无法清空

var str = 'aaaaa';
 str.length = 0;
alert(str);  //aaaaa

四、数组的四个方法及技巧

push：添加在数组的后边，其返回值为数组的长度

unshift：添加在数组的前面，其返回值为数组的长度

pop：删除数组最后一个，其返回值为删除的

shift：删除数组前面的一个，其返回值为删除的

push用法：

var arr = [ 1,2,3 ];
alert( arr.push( 'abc' ) );//1,2,3,abc

unshift用法：

var arr = [ 1,2,3 ];
alert( arr.unshift( 0 ) );          // IE 6  7 不支持 unshift 返回值
 alert( arr );//0,1,2,3

pop用法：

var arr = [ 'TM', '钟毅', '张森', '杜鹏', 'Leo' ];
 alert( arr.pop() );    //'TM', '钟毅', '张森', '杜鹏'

shift用法：

var arr = [ 'TM', '钟毅', '张森', '杜鹏', 'Leo' ];
alert( arr.shift() );    //'钟毅', '张森', '杜鹏', 'Leo'

数组元素右移

var arr = [ 'TM', '钟毅', '张森', '杜鹏', 'Leo' ];
 arr.unshift(arr.pop()); 
 alert( arr );   //Leo,TM,钟毅,张森,杜鹏

数组元素左移

var arr = [ 'TM', '钟毅', '张森', '杜鹏', 'Leo' ];
arr.push(arr.shift())
 alert( arr );  //钟毅,张森,杜鹏,Leo,TM

五、splice方法，数组去重

solice：删除、替换、添加三种方法都有

删除：

arr.splice(0,1);//删除第0位，删除1个，其返回值为删除的

替换：

arr.splice(0,1,’abc’); //将第0位替换1个，替换成为abc

添加：

arr.splice(1,0,’abc’); //在第1位添加abc

注意：splice会修改数组长度

利用splice进行数组去重

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 );  //1,2,4

六、JS基础sort排序

sort()：默认情况下是字符串排序

var arr = [ 'c', 'd', 'a', 'e' ];
 arr.sort();
 alert( arr ); //a,c,d,e

sort字符串排序的bug

var arr2 = [ 4,3,5,5,76,2,0,8 ];
 arr2.sort();
 alert( arr2 );//0,2,3,4,5,5,76,8

解决办法

arr2.sort(function ( a, b ) {
    return a - b;  //0,2,3,4,5,5,8,76
});

注意：b - a 是从大到小排序

var arrWidth = [ '345px', '23px', '10px', '1000px' ];

arrWidth.sort(function ( a, b ) {
    return parseInt(a) - parseInt(b);
});

alert( arrWidth ); //10px,23px,345px,1000px

随机排序

Math.random()：是0 ~1的随机数

var arr = [ 1,2,3,4,5,6,7,8 ];

arr.sort(function ( a, b ) {
    return Math.random() - 0.5;
});

alert( arr );//将数组随机排序

七、随机数及随机公式推理过程

Math.round：四舍五入函数

0 ~ 1之间的随机数：

Math.round(Math.random());

0 ~ 10之间的随机数：

alert( Math.round(Math.random()*10) );

5 ~ 10之间的随机数：

alert( Math.round( Math.random()*5 + 5 ) );

10 ~ 20之间的随机数：

alert( Math.round( Math.random()*10 + 10 ) );

20 ~ 100之间的随机数：

alert( Math.round( Math.random()*80 + 20 ) );

x ~ y之间的随机数：

alert( Math.round( Math.random()*(y-x) + x ) );

0 ~ x之间的随机数：

alert( Math.round( Math.random()*x) );

1 ~ x之间的随机数：

alert( Math.ceil( Math.random()*x) );

celi：向上取整

八、contact，reverse

contact：连接数组

reverse：颠倒数组元素位置

var arr1 = [ 1,2,3 ];
var arr2 = [ 4,5,6 ];
var arr3 = [ 7,8,9 ];

alert( arr1.concat( arr2, arr3 ) );//1,2,3,4,5,6,7,8,9

var arr1 = [ 1,2,3,4,5,6 ];
 arr1.reverse();
 alert( arr1 );//6,5,4,3,2,1

利用数组方法将字符串进行颠倒

首先先将字符串转换为数组，进行颠倒后再转换为字符串

var str = 'abcdef';
 alert(str.split('').reverse().join(''));//fedcba