1. 什么是数组?
数组就是值的有序集合,是一种伪集合,因为数组中的元素可以重复但必须有序。
值就是数据,是String,number,boolean,undefined,null类型的数据
在数组中,每一个值(如100,’js’,true)都称之为一个元素。
每一个元素在数组中所处的位置,称之为索引。是数字来表示,从0开始。
var a=100
var b='dfs'
var c=true
//有序,可重复,
var arr1=[100,'dfs',true,true];
var arr2=['dfs',100,true];
// 索引 0 1 2 对应arr2
[]表示是数组,数组中的元素之间使用逗号隔开。
JavaScript数组是无类型的,数组元素可以是任意类型。
数组的元素可以是任意值,包括对象和数组
JavaScript数组是动态的,根据需要它们会增长或缩减
数组元素的索引不一定要连续的,它们之间可以有空缺。
JavaScript数组是对象的特殊形式,但它是经过优化的,效率更高。
2. 创建数组
在JS中,创建数组有两种方式:
- 直接量(字面量)
- new的方式
直接量(字面量)
//直接量(字面量)
var arr=['北京','上海','南京','台湾']
console.log(arr)
new的方式
//var dfs=new Data();var dfa=new Object();
var arr=new Array('北京','上海','南京','台湾')
console.log(arr)
注意
数组直接量中的值不一定要是常量,它们可以是任意的表达式
var a=123
var arr=['北京','上海','南京','台湾',a]
// a是表达式
如省略直接量中的某个值,省略的元素将被赋予undefined值
var a = [1,,3]
console.log(a)
console.log(a[1])
在定义的数组的时候,要尽量避免这种情况。
数组直接量允许有可选的结尾的逗号
var arr=['北京','上海','南京','台湾',]
// 结果没有变化,length也没有影响
new Array()等价于[],创建一个空数组
new Array(n),创建指定长度数组,数组中没有索引和元素
var arr1=new Array(5)
var arr2=new Array('5')
console.log(arr1)
console.log(arr1.length)
console.log(arr2)
console.log(arr2.length)
当new的时候,只有一个参数时,需要注意参数的数据类型。
如果参数恰好是数值类型,那么就意味着创建了长度为该值的空数组
3. 数组基本操作
基本操作无非就是 增删改查,有上面可以知道数组是有序的,所以使用索引是非常方便的,查 解决了,就剩增删改了
- 添加
var arr=['北京','上海','南京','台湾']
console.log(arr)
//增加 arr[4]='新城市'
arr[4]='新城市'
console.log(arr)
- 修改
var arr=['北京','上海','南京','台湾']
console.log(arr)
//修改
arr[0]='老北京方便面'
console.log(arr)
- 删除
。。。var arr[0]=??? (〃‘▽’〃)
。。。。。感觉好麻烦,添加、删除操作这样很不方便不友好,还好,对于添加、删除操作我们有一些方法
重点掌握:
添加:push和unshift
删除:pop和shift
- push,在数组的后面追加新的元素
var arr=['北京','上海','南京','台湾']
console.log(arr)
// 在尾添加元素 push
arr.push('新城市') //push 单个
console.log(arr)
arr.push('一个城市', '又一个新城市') //push 多个
console.log(arr)
- unshift,在数组的前面插入新的元素
var arr=['北京','上海','南京','台湾']
console.log(arr)
// 从头添加元素 unshift
arr.unshift('新城市')
console.log(arr)
arr.unshift('一个城市', '又一个新城市')
console.log(arr)
- pop:删除数组中最后一个元素, shift:删除数组中第一个元素
var arr=['北京','上海','南京','台湾']
console.log(arr)
// 删除数组中最后一个元素
arr.pop()
console.log(arr)
// 删除数组中第一个元素
arr.shift()
console.log(arr)
删除操作和添加操作不太一样:
- pop和shift没有参数,每一次只能删除一个
- Pop和shift方法返回的是被删除的元素。Push和unshift返回的则是新数组的长度
ennnn,这只是基本操作啊!
4. 数组长度
唯一的特点:在数组中肯定找不到一个元素的索引值大于或等于数组的长度
可以用length方法查看数组的长度
var arr=['北京','上海','南京','台湾']
console.log(arr.length)
在数组中肯定找不到一个元素的索引值大于或等于数组的长度,为了维持此规则不变,数组有两个特殊的行为:
- 如果为一个数组元素赋值,它的索引i大于或等于现有长度时,length的值将设置为i+1
- 当设置length属性为一个小于当前长度的非负整数n时,当前数组中的那些索引值大于或等于n的元素将从中删除
通常情况下,我们通过修改数组来改变length
var arr = ['北京', '上海', '南京', '台湾']
console.log(arr)
console.log(arr.length)
// 添加一个元素,length为了满足规则而增加
arr.push('新城市')
console.log(arr)
console.log(arr.length)
// 删除一个元素,length为了满足规则而减少
arr.pop()
console.log(arr)
console.log(arr.length
还有一种情况,就是我们直接修改length
var arr = ['北京', '上海', '南京', '台湾']
console.log(arr)
console.log(arr.length)
// 直接修改length,4=>3,为了满足规则,舍弃了arr[3]
arr.length=3
console.log(arr)
console.log(arr.length)
损失不可控,特别是数据特别多的时候,了解就好
5. 数组遍历
遍历:把数值中的所有元素,挨个的取出来,进行一些相应的操作。那么这个获取每一个元素的过程,就叫遍历。
怎么遍历:用for 循环遍历,传统方法,用的也多;用方法遍历,方便干净,上手快
for循环与do/while循环
传统套路,也是方法等等的基础,必须掌握
var arr = ['北京', '上海', '南京', '台湾']
console.log(arr)
for (let i = 0; i < arr.length; i++) {
arr[i] += '欢迎您'
}
console.log(arr)
do/while 循环与for循环大体差不多,只支持数组遍历, 多用于对循环退出条件不是很明确的场景. 一般来说不建议使用这种方式遍历数组.
注意:不要使用for/in来遍历数组。for…in是用来遍历对象的。
遍历方法
对于数组遍历的方法有很多,有forEach,map,every等等
forEach()
语法:arr.forEach(fn, thisArg)
fn 表示在数组每一项上执行的函数,接受三个参数:
- value 当前正在被处理的元素的值
- index 当前元素的数组索引
- array 数组本身
thisArg 可选,用来当做fn函数内的this对象。
使用forEach循环有几点需要特别注意:
- forEach无法在IE中使用,只是在firefox和chrome中实现了该方法
- forEach无法使用break,continue跳出循环,使用return时,效果和在for循环中使用continue一致
var arr = ['北京', '上海', '南京', '台湾']
arr.forEach(function(item){
if(item=="北京")
return;//这里只能使用return跳过当前元素处理
console.log(item);
});
map()
map方法使用其提供函数的每次返回结果生成一个新的数组.
语法: array.map(callback[,thisArg])
var arr = [1, 4, 9];
var roots = arr.map(Math.sqrt);//map包裹方法名
// roots is now [1, 2, 3], arr is still [1, 4, 9]
var array = [1, 4, 9];
var doubles = array.map(function(num) {//map包裹方法实体
return num * 2;
});
// doubles is now [2, 8, 18], array is still [1, 4, 9]
every()
every() 方法使用传入的函数测试所有元素,只要其中有一个函数返回值为 false,那么该方法的结果为 false;如果全部返回 true,那么该方法的结果才为 true。
function isBigEnough(element, index, array) {
return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true
6. 多维数组
js 中并没有真正的多维数组,但我们可以利用js中数组的特性达到二维甚至多维数组的效果,如:
var arr = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]
console.log(arr[1]) //[1,2,3]
console.log(arr[2]) //[4,5,6]
console.log(arr[3]) //[7,8,9]
// 可知arr[1]是一个一维数组,再来一次
console.log(arr[1][1]) //1
console.log(arr[2][2]) //5
console.log(arr[3][3]) //9
// 访问成功得到数组元素
// 遍历一遍
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr[i].length;j++){
console.log(arr[i][j])
}
}
// 访问、遍历都没有问题
7. 数组方法
查看W3c手册
- join
join() 方法将数组中的所有元素连接成一个字符串。
语法:arr.join([separator = ‘,’]) separator可选,缺省默认为逗号。
var arr1 = [1, 2, 3, 4, 5]
console.log(arr1.join()) //缺省默认为逗号。
console.log(arr1.join('*'))
console.log(arr1.join('-*'))
2. reverse
reverse()方法颠倒数组中元素的位置
var arr1 = [1, 2, 3, 4, 5]
// reverse方法作用于当前数组,立即发生变化
arr1.reverse()
console.log(arr1) //[5,4,3,2,1]
- concat
连接多个数组,形成一个新的数组,可以理解为合并。
若concat方法中不传入参数,那么将基于原数组浅复制生成一个一模一样的新数组(指向新的地址空间)
var array = [1, 2, 3];
var array2 = array.concat(4,[5,6],[7,8,9]);
console.log(array2); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(array); // [1, 2, 3], 可见原数组并未被修改
- sort
对数组元素进行排序,并返回这个数组
在定义规则的时候,只需要两个参数。
两个数字在排序的时候,比如 6,5,如何排列呢?需要从低到高排,判断二者的大小,以决定是否要交换顺序。
a – b 如果a > b,则返回的是true,此时二者就需要交换顺序,结果就是大的排到后面去了,小的就排到前面了。所以,这种情况就是从小到大进行排序。
反之,就是从大到小进行排序。
var array = [7, 6, 5, 4, 3, 2, 1, 0, 8, 9];
var comparefn = function (x, y) {
return x - y
}
console.log(array.sort(comparefn)) //[0,1,2,3,4,5,6,7,8,9]
- slice
切割,截取数组中的片段。
格式:slice(start,end),返回一个新的数组,包含从 start 到 end (不包括该元素),Start和end是指数组的索引值
如果 start 的值为负数,假如数组长度为 length,则表示从 length+start 的位置开始复制,此时参数 end 如果有值,只能是比 start 大的负数,否则将返回空数组。
var arr = [7, 6, 5, 4, 3, 2, 1, 0, 8, 9];
console.log(arr.slice(0,1)) //[7]
console.log(arr.slice(1,2)) //[6]
console.log(arr.slice(2,4)) //[5,4]
console.log(arr.slice(-3,-1)) //[0,8]
console.log(arr.slice(-3,0)) //[]
- toString
toString() 方法返回数组的字符串形式,该字符串由数组中的每个元素的 toString() 返回值经调用 join() 方法连接(由逗号隔开)组成。
var arr = ['Jan', 'Feb', 'Mar', 'Apr'];
var str = arr.toString();
console.log(str); // Jan,Feb,Mar,Apr
end
还有很多方法没有完善,考虑到这是了解数组篇,与后会有Array 方法的具体介绍,此篇有不足错误之处还请在评论区不吝指出,十分感谢!
希望此篇能够给你带来帮助,再次感谢阅读。