学习JS的第三天之数组
其他学习笔记:点击前往
前言
对象的介绍和数组方法以及遍历数组的方法和set的理解
一、对象
什么是对象?
可以理解为一个变量可以存储多个数据。
var obj = {
属性:"属性值";
}
属性:
属性就是一个静态的数据(你自定义命名的一个名字)。
二、方法(函数)
方法:
方法就是一个函数,一段可以执行的代码。
//方法的定义
//可以用对象来存放对个方法
var obj = {
方法名:function(){
//可执行的代码
}
}
//方法的调用
obj.方法名();
三、数组
1、 数组理解
也是对象,也会用于存储数据的,数据是按顺序进行排列的,储存的数据可以是任意类型。
2、 数组的创建
构造函数创建
var colors = new Array('red','biue','green')
自变量创建:
var colors = ['red','biue','green'];
3、 数组的length方法
数组默认的属性,用于展示当前数组存储数据的长度。
数组名.length;
console.log(数组名.length) //会返回数组的长度给你
4、 数组的下标
数组中的每一个元素都对应了一个下标,下标从0开始,依次增大。
最后一个下标 = 数组长度 - 1;
5、 如何访问数组里的元素
数组[下标]
6、 如何修改数组里的元素
数组[下标] =新值;### 7、 数组的方法(数组内置的方法)
1、array.push(值)
向数组的末尾增加新元素。
2、array.pop()
删除数组末尾的元素
3、array.unshift(元素)
添加元素到数组的头部。
4、array.shift()
删除数组头部元素。
5、array.splice(开始下标,删除长度,新增加元素)
可以在任意位置给数组添加或者删除元素。
6、array.reverse()
颠倒数组中元素的排列顺序。
7、array.sort()
对数组元素进行排序。
如果不加参数默认按26个字母排序,内容如果不是字符串,会被转化为字符串。
使用sort的一个排序的方法:
array.sort(function(a,b){
return 正负数;
})
function:可选,用来制定按某种顺序进行排列的函数
a 和 b 分别代表第一个、第二个用于比较的元素;
如果return 小于 0 那么 a 会排在 b 前面;
如果return 等于 0 那么 a 和 b 的位置保持不变;
如果return 大于 0 b 排在前面;
如果是数字的话,可以直接通过 a - b 判断大小;
array.sort(function(a,b){
return a - b;升序 ,b - a ;降序
})
8、array.slice(start,end)
抽取当前数组中的一段元素,组成一个新数组。
不会影响到原数组,原数组不变
start:开始下标,包含
end:结束下标,不包含,如果不给该值,就截取后面所有的
9、array:concat()
合并两个或者多个数组,并返回新数组。
10、arrau.join()
连接数组所有元素,组成一个字符串
默认各元素之通过逗号连接
如果参数为空字符串,则各元素直接连接。
里面的参数为字符连接符
11、array.indexOf(指定值)
返回数组中第一个元素与指定值相等的下标,如果找不到这样的元素,返回-1.
查找顺序是从左往右,匹配到第一个就不会再匹配了。
12、last.IndexOf()
查找顺序是从右往左,匹配到第一个就不会再匹配了。
四、遍历数组的方法
1、for循环
for(var i = 0;i < arr.length; i++) {
consoloe.log(arr[i]);
}
for in 循环:
for(var i in arr) {
console.log(i,arr[i])
}
for(var i in obj) { //i是属性名
console.log(i,obj[i]);//遍历对象只能使用for in
}
2、forEach(function(item,index,array){})
forEach(function(item,index,array){})
遍历数组。
item:数组元素
index:该元素对应的下标,
array:可选,遍历的数组本身
3、 map(function(item,index,array){})
map(function(item,index,array){})
遍历数组,并且根据新的规则返回新数组。
item:数组元素
index:该元素对应的下标,
array:可选,遍历的数组本身
使用return输出
4、 filter(function(item,index,array){})
filter(function(item,index,array){})
遍历数组,并且根据新的规则返回符合条件的元素组成新数组。
如果没有符合条件的,返回一个空数组。
item:数组元素
index:该元素对应的下标,
array:可选,遍历的数组本身
使用return输出
5、 find(function(item,index,array){})
find(function(item,index,array){})
遍历数组,返回数组中满足条件的第一个值。
如果没有符合条件的,返回undefined。
item:数组元素
index:该元素对应的下标,
array:可选,遍历的数组本身
使用return输出
6、 every(function(item,index,array){})
every(function(item,index,array){})
遍历数组,如果数组中每个元素都满足条件,则返回true。
如果没有符合条件的,返回undefined。
item:数组元素
index:该元素对应的下标,
array:可选,遍历的数组本身
使用return输出
7、 some(function(item,index,array){})
some(function(item,index,array){})
遍历数组,数组中只要有一个符合条件就返回true。
如果没有符合条件的,返回undefined。
item:数组元素
index:该元素对应的下标,
array:可选,遍历的数组本身
使用return输出
四、遍历数组的方法
理解:
是ES6中新增加的数据结构,类似数组,但是没有重复的元素。
set 函数可以接受一个数组作为参数,用于初始化。
使用
var list = new Set();
list.add('a');//add()添加元素
list.size //获取set的长度
list.delete('b')//删除set的元素
list.has('b') //返回一个布尔值表示该值是否存在
list.clear //清空set
list.keys() //返回所有的键名,由于set结构没有键名,keys和values行为一致,输出结果一样。
list.values() //返回所有的键值
五、简单练习
1、根据输入的数字弹出对应的饮料:
var a = ['停止运行','可口可乐','雪碧','鲜橙多','冰红茶','矿泉水']
for (var i = 1; i > 0; i++) {
var phot = parseInt(prompt('请输入你需要什么饮料'));
if (phot >= 0 && phot <= 5) {
alert(a[phot]);
break;
}
alert('非法操作');
}
2、 挑出其中所有是大一的女生的的名字:
[‘小A’,‘女’,21,‘大一’],
[‘小B’,‘男’,23,‘大三’],
[‘小C’,‘男’,24,‘大四’],
[‘小D’,‘女’,21,‘大一’],
[‘小E’,‘女’,22,‘大四’],
[‘小F’,‘男’,21,‘大一’],
[‘小G’,‘女’,22,‘大二’],
[‘小H’,‘女’,20,‘大三’],
[‘小I’,‘女’,20,‘大一’],
[‘小J’,‘男’,20,‘大三’]
var arr = [['小A', '女', 21, '大一'],
['小B', '男', 23, '大三'],
['小C', '男', 24, '大四'],
['小D', '女', 21, '大一'],
['小E', '女', 22, '大四'],
['小F', '男', 21, '大一'],
['小G', '女', 22, '大二'],
['小H', '女', 20, '大三'],
['小I', '女', 20, '大一'],
['小J', '男', 20, '大三']]
for(var i = 0;i < arr.length; i++) {
if (arr[i][1] == '女' && arr[i][3] == '大一') {
document.write(arr[i][0] + '<br/>')
}
}
3、输出99乘法表
for (var i = 1; i < 10; i++) {
for (var j = 1;j <= i; j++) {
document.write(j + ' * ' + i + ' = ' + i * j + ' ');
}
document.write('<br/>')
}
document.write('<table>')
for (var i = 1; i < 10; i++) {
document.write('<tr>')
for (var j = 1;j <= i; j++) {
document.write('<td>' + j + ' * ' + i + ' = ' + i * j + '</td>');
}
document.write('</tr>')
}
document.write('</table>')
总结
数组方法必须要熟练使用,必须多多练习,就算不知道具体的方法名和使用方法,也必须知道有这个方法,不然百度都没得百度的。