文章目录
第一节：数组Array
前面的内容都是一些基本数据类型的相关操作，包括Number、String等，在JavaScript中，对于引用数据类型Array和Object的操作，也是至关重要的。
【Tips:】JavaScript数据类型的划分详情可点击此处到第二节内容
什么叫数组
数组即一系列数据的集合。每一项可以保存任何类型的数据，称为数组的元素，每个元素之间用
,隔开
【数组的格式】 ：[1,2,3]
数组创建方式
创建方式1：字面量(推荐)
var arr = [element1,element2,element3];
创建方式2：使用构造函数创建
var arr = new Array(element1,element2,element3,element4)
例：
<script type="text/javascript">
//字面量
var arr1 = [1,2,3];
console.log(arr1);
//使用构造函数创建
var arr2 = new Array(); //创建一个空数组
var arr3 = new Array('成龙',18 ,'最佳演员','香港'); //创建数组并同时写入数据
console.log(arr2);
console.log(arr3);
</script>
控制台结果：
数组的操作
数组访问与写入
数组可以用
下标进行访问，从0开始。格式：arrName[index]
lengh—— 表示数组的长度
例：
<script type="text/javascript">
var myarr = ['html5','css','javascript'];
//通过下标访问
myarr[0];
myarr[2];
console.log(myarr[0]);
console.log(myarr[2]);
//写入
myarr[3] = 'Python';
console.log(myarr);
//数组的长度
console.log(myarr.length);
</script>
控制台结果：
数组的常用方法
push—— 往数组尾部添加一个或多个元素，返回数组新的长度
pop—— 删除数组最后一个元素，返回删除的元素
unshift—— 往数组开头添加一个或多个元素，返回数组新的长度
shift—— 删除数组第一个元素，返回删除的元素
splice(start,deleteNum,…items)—— 在数组中插入、删除、替换的通用方法
start：起始索引位置
deleteNum：要删除的数量
items：插入的元素（可以是多个）
slice(start[,end])—— 返回数组的片段或子数组，从start开始到end(不包括end所对应的元素)
如果省略end参数，则截取到数组的最后一项
支持负数
sort—— 将数组中的元素排序，并返回排序后的数组
默认以字符串的排列方式（转换成ASCII码进行对比）,对于数字要传函数。
reverse—— 将数组中的元素颠倒顺序，返回逆序后的数组
join(separator)—— 返回字符串值，其中包含了连接到一起的数组的所有元素
separator为分隔符，默认为逗号
indexOf(keyword)—— 返回keyword所在数组中的索引值，如果数组不存在keyword，则返回-1
forEach(fn)—— 遍历方法，for循环没有太大差别，比for循环方便
map(fn)—— 返回一个数量相等的数组，内容是什么取决于在fn中返回的值
【Tips】
以上方法都对数组中的每一项运行给定函数fn,，函数中有三个形参分别为
item：数组中的每一项,
index：遍历过程中对应的索引值,
array：对数组的引用
例：
<script type="text/javascript">
var ElfValley = ['李大嘴'];
//增加元素
ElfValley.push('李四'); //往尾部增加元素
console.log(ElfValley);
ElfValley.unshift('张三'); //往头部增加元素
console.log(ElfValley);
//删除元素
ElfValley.shift(); //从头部删除元素
console.log(ElfValley);
ElfValley.pop(); //从尾部删除元素
console.log(ElfValley);
//通用增加删除一体方法（从下标0开始添加，删除0个元素，添加3个元素）
ElfValley.splice(0,0,'哈哈儿','屠娇娇','王五');
console.log(ElfValley);
//从下标2开始添加，删除1个元素，添加2个元素）
ElfValley.splice(2,1,'阴九幽','白开心');
console.log(ElfValley);
//排序
console.log(ElfValley.sort()); //正序排列
console.log(ElfValley.reverse()); //逆序排列
//截取
console.log(ElfValley.slice(1,4));
//连接
team = ElfValley.join(',');
console.log(team);
console.log(typeof team);
//查找元素
console.log(ElfValley.indexOf('李大嘴')); //找查‘李大嘴’的下标
console.log(ElfValley.indexOf('小鱼儿')); //找查‘小鱼儿’的下标
</script>
控制台结果：
例2： 数组的数字排序
<script type="text/javascript">
var arr = [10,6,20,2,30,41,5,8,24];
//写法1
var rest = arr.sort(function(a,b){
if(a>b){
return 1; //反回一个正数，1也行，10也行
}else if(a<b){
return -1 //反回一个负数，-1也行，-10也行
}else{
return 0;
}
})
//写法2
var rest2 = arr.sort(function(a,b){
return a-b;
})
</script>
数组的遍历与复制
数组的遍历
数组的遍历方式一般使用for循环
【格式】
for(变量初始化;判断条件;变量更新){执行语句}
例：
<script type="text/javascript">
var myarr = ['html5','css','javascript','Python','C++'];
//遍历数组
for(var i=0;i<myarr.length;i++){
console.log(myarr[i]);
}
</script>
控制台结果：
数组的复制
所谓复制，即产生一个一模一样的数组，数组之间相互独立存在，对其中一个数组改变，不会影响另一个数组。
值类型可以直接赋值来复制，引用数据类型不能直接赋值复制
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>引用数据类型与值类形的复制</title>
</head>
<body>
<script type="text/javascript">
var arr = [10,15,2,32]; //引用数据类型
//对引用数据类型进行赋值复制
var newArr = arr;
arr.push(3);
console.log(arr,newArr); //arr与newArr进行对比
var name = 'java' //值类型
//对值类型数据进行赋值复制
var newName = name;
name += 'script';
console.log(name,newName); //name与newName进行对比
</script>
</body>
</html>
控制台结果：
复制方式1（空数组遍历添加法）
<script type="text/javascript">
var arr = [10,15,2,32]; //引用数据类型
//对引用数据类型进行遍历复制
var newArr = [];
for(var i=0;i<arr.length;i++){
newArr.push(arr[i]);
}
</script>
复制方式2（slice()截取法）
<script type="text/javascript">
var arr = [10,15,2,32]; //引用数据类型
//对引用数据类型进行复制
var newArr = arr.slice(0);
</script>
第二节：对象Object
对象的创建
【创建】
创建方式1、字面量（推荐）
var obj = {key1:value1,key2:value2}
创建方式2：构造函数
var obj = new Object()
例：
<script type="text/javascript">
// 字面量
var hero1 = {name:'张三疯',age:120,words:'动作还是慢的好！'};
// 构造函数
var hero2 = new Object();
hero2.name = 'MR.达摩';
hero2.age = 150
hero2.words = '还有谁？'
console.log(hero1);
console.log(hero2);
</script>
控制台结果：
对象属性的读取、添加与删除
【读取属性】
obj.key
如果读取一个不存在的属性，会返回undefined
【添加属性】
obj.newKey = newValue或obj['newKey'] = newValue
【删除属性】
delete obj.key
例：
<script type="text/javascript">
var hero1 = {name:'张三疯',age:120,words:'动作还是慢的好！'};
// 对象属性的读取
console.log(hero1.name);
console.log(hero1.words);
//对象属性的添加
hero1.add = 'wuDang'
console.log(hero1);
// 对象属性的删除
delete hero1.age
console.log(hero1);
</script>
控制台结果：
对象的遍历
对象的遍历方式一般也使用for循环
【格式】
for(var key in obj){}
document.write(element)—— 把元素写到页面
例：
<script type="text/javascript">
var hero1 = {name:'张三疯',age:120,words:'动作还是慢的好！'};
// 对象的遍历
for(var i in hero1){
document.write(hero1[i]); //页面显示
console.log(hero1[i]); //控制台打印
}
</script>
控制台结果：
数组与对象的组合
【格式】
例：
<script type="text/javascript">
//数组与对象的组合[{...},{...},{...}]
var heros = [{
name:'张三疯',
age:120,
words:'动作还是慢的好！'
},{
name:'MR.达摩',
age:150,
words:'我已是神'
},{
name:'扫地僧',
age:80,
words:'我只是个扫地的'
}]
mapHeros = heros.map(function(item,idx,arr){
console.log(idx); //idx是对应索引值
console.log(item); //item是数组元素
console.log(arr); //arr是heros引用
return '我是'+idx+'号'+item.name //map有返回值，想返回什么都可以
//配合标签等还可创建页面列表数据
})
console.log(mapHeros); //打印map后的返回值（是个数组）
</script>
控制台结果：
