文章目录
第一节:数组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>
控制台结果: