JavaScript基础学习(7)

发表于 | 分类于 ， ， | 阅读次数:

Json、数组方法、随机函数、数组去重

json数据格式及json语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var json = {name: 'name', age: 3};  //安全性差
var json2 = {'name': 'name', 'age': 3};  //推荐格式
var json3 = {'name':['name1','name2'], 'age':[3, 30]};
var arr = [{'name': 'name1', 'age': 3},{'name': 'name2', 'age': 30}];

alert(json2.name);  //name
alert(json2['name']); //undefined
alert(json2['name']); //name
alert(arr[0].name + ' ' + arr[0]['age']); //name1 3

var json4 = {'name': 'name', 'age': 3, 'fun': '前端开发'};
for(var attr in json4){
  alert(attr);  //键名
  alert(json4[attr]); //健值
  alert(json4['attr']); //undefined 需要注意，加引号后会找json4的子集'attr'
};

var json5 = {
  'url': ['url1', 'url2'],
  'text': ['text1', 'text2']
};
for(var attr in json5){
  for(var i = 0; i < json5[attr].length; i++){
    alert(json5[attr][i]);
  }
}

for-in遍历json

1
2
3
4
5
6
7
var str = '';
var num = 0;  //统计属性个数
for(var attr in window){
  str += num + '. ' + attr + ':' + window[attr] + '<br>';
  num ++;
}
document.body.innerHTML = str;

json没有长度属性，无法使用for循环
数组也可以使用for in循环

1
2
3
4
5
6
7
8
var json = {'name': 'name', 'age': 3};
alert(json.length); //undefined

var arr = ['a', 'b', 'c'];
for(var i in arr){
  alert(i); //i为数组下标
  alert(arr[i]);
}

数组定义及清空数组效率问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var arr = [1, 2, 3];
//var arr = new Array(1, 2, 3);
arr.length = 1;
alert(arr); //1

var arr = new Array(3); //接收参数为数字时默认为数组的长度
var arr = new Array('3');

arr.length = 0; //可以快速清空数组
arr = []; //相当于重新赋值，数组中值比较多时，这种方法效率较高

var str = 'aaaaa';
str.length = 1;
alert(str); //'aaaaa' 字符串的length属性是不可以写的

数组的方法与技巧

1
2
3
4
5
6
7
8
9
var arr = [1, 2, 3];
arr.push(4);  //向数组的末尾添加一个或多个元素，并返回新的长度。
arr.unshift(0); //向数组的开头添加一个或更多元素，并返回新的长度。IE 6、7不支持unshift返回值
arr.pop();  //删除并返回数组的最后一个元素。
arr.shift();  //把数组的第一个元素从其中删除，并返回第一个元素的值。

arr.unshift(arr.pop);
arr.push(arr.shift);
//可以做轮播图效果

splice 方法、数组去重

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
注释：该方法会改变原始数组。
语法：arrayObject.splice(index,howmany,item1,…..,itemX)

参数 描述
index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemX 可选。向数组添加的新项目。

返回值

类型 描述
Array 包含被删除项目的新数组，如果有的话。

说明
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

1
2
3
4
5
6
var arr = [1, 2, 3];
//删除、替换、添加
arr.splice(0, 1); //从数组第0位起，删除1个值
arr.splice(0, 2, 'one or two');  //将数组第0位起的2个值替换为'one or two'
arr.splice(1, 0, '1.5', '1.8'); //将数组第1位后添加'1.5', '1.8'
//只有删除时有返回值，返回删除掉的值

数组去重

1
2
3
4
5
6
7
8
9
10
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排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var arr = ['c', 'd', 'a', 'e'];
arr.sort();
alert(arr); //['a', 'c', 'd', 'e']

var arr2 = [4, 3, 5, 76, 2, 0, 8];
arr2.sort();
alert(arr2);  //[0, 2, 3, 4, 5, 76, 8] 默认会按照字符串方法排序

//从小到大排序
arr2.sort(function(a, b){
  return a - b;
});
alert(arr2);  //[0, 2, 3, 4, 5, 8, 76]

//从大到小排序
arr2.sort(function(a, b){
  return b - a;
});
alert(arr2);  //76,8,5,4,3,2,0

//按照数字从小到大排序
var arrWidth = ['345px', '23px', '10px', '1000px'];
arrWidth.sort(function(a, b){
  return parseInt(a) - parseInt(b);
});

//随机排序
var arr = [1, 2, 3, 4, 5, 6, 7, 8];
arr.sort(function(a, b){
  return Math.random() - 0.5;
  });

排序：快速、希尔、冒泡、归并、选择、插入…、

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

1
2
3
4
5
6
7
8
Math.random();  //返回介于 0 ~ 1 之间的一个随机数
Math.round(); //把一个数字舍入为最接近的整数。

Math.round(Math.random()*10); //返回介于 0 ~ 10 之间的一个随机整数
Math.round(Math.random()*5 + 5); //返回介于 5 ~ 10 之间的一个随机整数
Math.round(Math.random()*(y-x) + x); //返回介于 x ~ y 之间的一个随机整数
Math.round(Math.random()*x); //返回介于 0 ~ x 之间的一个随机整数
Math.ceil(Math.random()*x); //返回介于 1 ~ x 之间的一个随机整数

concat、reverse、练习

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

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

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

练习：
1.随机产生 550 个从 0～1000 之间不重复的整数
2.为数组编写indexOf()方法：indexOf(‘img/1.jpg’)
【示例：点击查看】

练习：
1.人民网多图片滚动（随机图片滚动）
【示例：点击查看】
2.自定义字体形状（动画）
【示例：点击查看】
3.消除表情小游戏（掉QQ表情）
【示例：点击查看】
4.排序
【示例：点击查看】

参考：
1.JavaScript push() 方法
2.JavaScript unshift() 方法
3.JavaScript pop() 方法
4.JavaScript shift() 方法
5.JavaScript splice() 方法
6.JavaScript sort() 方法
6.JavaScript random() 方法
6.JavaScript round() 方法
6.JavaScript concat() 方法
6.JavaScript reverse() 方法