js之数组
6、数组
前面我们讨论了简单数据类型,现在开始讨论复杂数据类型,就拿数组先来开刀吧
数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素,包括数字、字符串、对象等等。
数组是一种将一组数据存储在单个变量名下的优雅方式,本质上也是一种内置对象
基于数组的特性,其在内存中的存储是连续存储的。就是说在内存中必须是由连续的空间来存储这些数组元素的
6.1 创建数组
js中数组有两种创建方式:
- 利用
new
创建数组 - 利用数组字面量创建数组
1、new
创建数组
// 创建一个新的空数组
var arr = new Array();
console.log(arr); // []
// 创建一个包含3个元素的数组
var arr = new Array(3);
console.log(arr); // [ <3 empty items> ]
// 创建一个只包含一个元素
var arr = new Array('cyf');
console.log(arr); // ['cyf']
2、数组字面量创建数组
什么是字面量?
字面量:就是一看到这个你就知道它是什么类型,1这个是数字型、1.00这是浮点型、true这是布尔型、‘cyf’这是字符串
[ ]
是数组
// 利用数组字面量创建数组
var arr = [1,2,'cyf', true]
console.log(arr); // [1,2,'老林', true]
- 数组的字面量是方括号
[ ]
- 声明数组并赋值称之为数组的初始化
6.2 获取、遍历数组
1、获取数组
数组的特征就是可以利用索引来访问,索引就是数组的下标,从0开始
我们可以通过索引来访问、设置、修改对应的数组元素
var arr = [1, 2, '老林', true]
console.log(arr[2]); // 老林
如果索引超出范围,即没有这个数组元素,输出的结果是 undefined
2、遍数数组
使用 数组名.length
可以访问数组元素的数量(数组的长度),这个也是我们以后都会经常用的
var arr = [1, 2, 3, 4, 5]
console.log(arr.length); // 5
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
6.3 数组新增元素
1、通过修改 length
长度新增数组元素利用
- 可以通过修改
length
长度来实现数组扩容的目的 length
属性是可读的
var arr = ['red', 'blue', 'green'];
// 将数组长度修改为5
arr.length = 5;
console.log(arr); // ["red", "blue", "green", empty × 2]
// 由于增加了数组的长度,但是没有赋值,所以默认是undefined
console.log(arr[3]); // undefined
// 这时我们可以通过索引为数组赋值
arr[3] = 'pink';
arr[4] = 'yellow';
console.log(['red', 'blue', 'green', 'pink', 'yellow']);
2、通过修改数组索引
由于数组的索引是从0开始,所以数组最后一个元素的索引是 数组长度 - 1
,我们往数组中新增元素可以利用 .length
,通过修改数组索引的方式追加元素
arr[arr.length] = 'pink'
console.log(arr); // ['red', 'blue', 'green', 'pink']
// 通过索引我们也可以修改元素
arr[0] = 'yellow';
console.log(arr); // ['yellow', 'blue', 'green', 'pink']
注意:不要直接给数组赋值,否则里面的元素都会被覆盖,数组变成单一变量
var arr = ['red', 'blue', 'green'];
arr = '老林';
console.log(arr); // 老林
3、通过push()
新增数据数组元素
push
方法接收任意数量的参数,并将它们添加到数组的末尾,返回数组的最新长度
var arr = new Array('老二');
var count = arr.push('张三', '李四');
console.log(count); // 3
console.log(arr); // ["老二", "张三", "李四"]
push
方法类似于 栈,先进后出,总是在尾部操作
4、通过unshift()
新增元素
unshift
方法接收任意数量的参数,并将它们添加到数组的头部,返回数组的最新长度
var arr = new Array('老二');
var count = arr.unshift('张三', '李四');
console.log(count); // 3
console.log(arr); // ["张三", "李四", "老二"]
6.4 数组中删除元素
1、利用 length
var arr = ["老二", "张三", "李四"];
arr.length = 2;
console.log(arr); // ["老二", "张三"]
length
设置为2,就是将数组的长度设置为2,即删除了最后一个
2、栈的特性:pop
方法
pop
方法是删除数组最后一项,同时减少数组的length
值,返回被删除的项
var arr = ["老二", "张三", "李四"];
console.log(arr.pop()) // 李四
console.log(arr); // [ '老二', '张三' ]
类似栈操作,对最后进去的值进行操作
3、队列的特性:shift
方法
shift
方法是删除数组的第一项,并返回它,同时数组的长度减1
var arr = ["老二", "张三", "李四"];
console.log(arr.shift()); // 老二
console.log(arr); // [ '张三', '李四' ]
类似队列,对最先进去的值进行操作
4、splice方法:添加/删除元素
splice
可以在任意位置上删除或者添加元素
arr.splice(index, [num], [value])
index
:指定开始删除/添加的下标(包括该下标)num
:删除/添加的个数(可选)value
:要添加的元素,可以添加多个(可选)
var arr = ["老二", "张三", "李四"];
arr.splice(1, 1, '王五', '六六');
console.log(arr); // [ '老二', '王五', '六六', '李四' ]
- 从索引为1的位置开始,删除一个元素,并在该索引位置上的添加
王五
、六六
5、devare
运算符
devare
删除数组元素最大的特点是:元素删除后,数组的length
属性并没有变化
赶你走,但是位置给你留着
var arr = ["老二", "张三", "李四"];
devare arr[0]
console.log(arr.length); // 3
console.log(arr); // [ <1 empty item>, '张三', '李四' ]
devare
在数组上用得少,主要用于对象删除键值对
6.5 数组索引方法
方法名 | 说明 | 返回值 |
---|---|---|
indexOf() |
数组查找给定元素的第一个索引 | 如果存在则返回索引号,否则返回-1 |
lastindexOf() |
数组中最后一个元素的索引 | 如果存在则返回索引号,否则返回-1 |
var arr = ["老二", "张三", "李四", "张三"];
var firstIndex = arr.indexOf("张三")
var lastIndex = arr.lastIndexOf("张三")
console.log(firstIndex); // 1
console.log(lastIndex); // 3
- 该属性可以用于判断数组中是否存在元素
案例:可用于数组去重
let arr = [1, 2, 3, 2, 3, 4, 5, 4];
let newArr = []
for (let i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i])
}
}
console.log(newArr); // [ 1, 2, 3, 4, 5 ]
6.6 数组转换为字符串
方法名 | 说明 | 返回值 |
---|---|---|
toString() |
把数组转换成字符串,逗号分隔每一项 | 字符串 |
join('分隔符') |
该方法用于把数组中的所有元素转换为一个字符串 | 字符串 |
// toString()
var arr = ["老二", "张三", "李四"];
var str = arr.toString()
console.log(str); // 老二,张三,李四
console.log(str.length); // 8
toString()
:转换成字符串,包括逗号,都是字符串
// join()
var arr = ["老二", "张三", "李四"];
var str = arr.join('')
console.log(str); // 老二张三李四
console.log(str.length); // 6
6.7 其它操作
方法名 | 说明 | 返回值 |
---|---|---|
slice() |
数组截取,slice(begin, end) |
返回被截取元素的新数组 |
var arr = ["老二", "张三", "李四"];
var newArr = arr.slice(1, 2)
console.log(newArr); // ['张三']
console.log(arr); // ["老二", "张三", "李四"]
注意:包含begin
,但不包含end