JavaScript之数组（js数组用法）

来源：升学就业帮讲师——肖云锐

1. 数组的声明和赋值

方式一: new Array()构造函数方法

// 1. 使用构造函数创建数组对象
// 创建了一个空数组var arr = new Array();
// 创建了一个数组，里面存放了3个字符串
var arr = new Array('zs', 'ls', 'ww');
// 创建了一个数组，里面存放了4个数字
var arr = new Array(1, 2, 3, 4);

方式二: 字面量方式

// 2. 使用字面量创建数组对象
var arr = [1, 2, 3];
// 获取数组中元素的个数
console.log(arr.length);

注意事项：

1. 定义空数组的方式

var arr1 = [];

2. 定义一个数组可以存入不同的数据类型. 但是一般不建议这样使用.

var arr3 = [25,true,'abc'];

3. 访问数组的元素通过索引，索引从开始

var arr6 = [];
arr[0] = 10;
arr[1] = 20;
arr[2] = 30;
console.log(arr6);

4. js中数组的下标是可以不连续的，如果不连续默认补充empty

var arr6 = [];
arr6[0] = 10;
arr6[1] = 20;
arr6[2] = 30;
console.log(arr6);
arr6[4] = 50;
console.log(arr6)

执行结果如下图所示:

5. 数组的扩容和缩容

var arr = [1, 1.2, new Date(), false, "呵呵"];
console.log("前:" + arr);
// 数组的扩容arr.length = 10;
// 数组的缩小
//arr.length = 3;
console.log("后:" + arr);

6. 清空数组

// 方式1 推荐
arr = [];
// 方式2
arr.length = 0;
// 方式3
arr.splice(0, arr.length);

2. 数组的遍历

方式一:for循环，也是最常见的

for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}

方式二:for......in 遍历数组

for(let item in arr){
console.log(arr[item])
}

方式三: foreach遍历数组

arr.forEach(function(item, index){ 
   console.log(item + "=" + index);
});

3. 数组的常用方法

数组常用的一些方法：

首尾数据操作

push() //在数组末尾添加一个或多个元素，并返回数组操作后的长度
pop() //删除数组最后一项，返回删除项
shift() //删除数组第一项，返回删除项
unshift() //在数组开头添加一个或多个元素，并返回数组的新长度

合并和拆分

concat()
// 将两个数组合并成一个新的数组，原数组不受影响。
// 参数位置可以是一个数组字面量、数组变量、零散的值。
slice(start,end)
// 从当前数组中截取一个新的数组，不影响原来的数组，返回一个新的数组，
// 包含从 start 到 end （不包括该元素）的元素。
// 参数区分正负，正值表示下标位置，负值表示从后面往前数第几个位置，
// 参数可以只传递一个，表示从开始位置截取到字符串结尾。

删除、插入、替换

splice(index,howmany,element1,element2,……)
//用于插入、删除或替换数组的元素
//index：删除元素的开始位置
//howmany：删除元素的个数，可以是0
//element1,element2：要替换的新的数据。

位置方法

indexOf() //查找数据在数组中最先出现的下标
lastIndexOf() //查找数据在数组中最后一次出现的下标
//如果没找到返回-1

排序和倒序

reverse() //将数组完全颠倒，第一项变成最后一项，最后一项变成第一项。
sort(); //默认根据字符编码顺序，从小到大排序
//如果想要根据数值大小进行排序，必须添加sort的比较函数参数。
//该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，根据a和b的关系作为判断条件，返回值根据条件分为三个分支，正数、负数、0：
//返回值是负数-1：a排在b前面。
//返回值是整数1：a排在b后面。
//返回值是0：a和b的顺序保持不变。
//人为能控制的是判断条件。

转字符串方法

// 将数组的所有元素连接到一个字符串中。
join() //通过参数作为连字符将数组中的每一项用连字符连成一个完整的字符串

迭代方法

//不会修改原数组(可选) HTML5新增
every()、filter()、forEach()、map()、some()

代码示例

<script>
// 创建数组
var arr = [1,2,3,4,5];
// 转字符串
console.log(arr.toString());
// 返回数组对象本身数据
console.log(arr.valueOf());

// 首尾操作方法
// push()在结尾推入一个或多个数据
console.log(arr);
console.log(arr.push(7,8,9));
console.log(arr);
// pop()在结尾删除最后一项数据，并返回删除的这个数据
console.log(arr.pop());
console.log(arr);

// unshift()在开始添加一个或多个数据
console.log(arr.unshift(-1,0));
console.log(arr);
// shift()删除第一项数据，并且返回删除的数据
console.log(arr.shift());
console.log(arr);

// 案例：将数组最后一项移动到第一项，其他项依次往后移动
var a = arr.pop();
console.log(a);
arr.unshift(a);
arr.unshift(arr.pop());
console.log(arr);
arr.unshift(arr.pop());
console.log(arr);
// 案例：将数组第一项移动到最后一项，其他项依次往前移动 
arr.push(arr.shift());
console.log(arr);

// 合并和拆分
// concat()连接两个数组，生成一个新的数组
var arr2 = ["a","b","c"];
var arr3 = arr.concat(arr2);
var arr3 = arr.concat([6,7,8]);
var arr3 = arr.concat(6,7,8,[9,10]);
console.log(arr3);
console.log(arr2);
console.log(arr);
// slice(start,end)，截取数组中从start开始到end结束的位置的片段，组成一个新的数组对象，包含开始不包含结束的
var arr = [0,1,2,3,4,5,6,7,8,3,2,1];
var arr1 = arr.slice(2,5);
var arr1 = arr.slice(-5,-2);
var arr1 = arr.slice(2);
var arr1 = arr.slice(5,2);
console.log(arr);
console.log(arr1);

// splice()删除、替换、插入
// 传两个参数,第一个参数是删除开始的下标，第二个参数是删除数据的长度
console.log(arr.splice(3,3));
console.log(arr);
// 传入3个或以上的参数,第三个及以后的参数是要进行替换的数据
console.log(arr.splice(3,3,"haha",true));
console.log(arr);
// 插入是替换的一种变形，第二个参数长度为0
console.log(arr.splice(3,0,"haha",true));
console.log(arr);

// 位置方法
// indexOf()返回第一次出现的下标
lastIndexOf()返回最后一次出现的下标
console.log(arr.indexOf(3));
console.log(arr.lastIndexOf(3));
console.log(arr.lastIndexOf(10));
// 排序
// 倒序
var arr = [0,1,2,3,4,5,6,7,8];
arr.reverse();
console.log(arr);
// sort()排序，默认转换为字符串，比较字符编码顺序
var arr = [2,19,true,undefined,"haha"];
var arr = [2,19,23,9,45,87];
arr.sort();
console.log(arr);

// 添加比较函数比较数值大小
arr.sort(function(a,b){
// 内部返回值决定a和b接收参数的位置
if(a > b){
return -1; //a在b前面
}else if(a < b){
return 1; //a在b后面
}else{
return 0; //a、b位置不变
}
});
arr.sort(function(a,b){
// 内部返回值决定a和b接收参数的位置
return b - a;
});
console.log(arr);

// 转字符串
var arr = [1,2,3,4,5];
var str = arr.join("");
console.log(str);

// 迭代方法
var arr = [3,4,19,34,23,76];
var a = arr.every(function(ele){
return ele < 50;
});
console.log(a);
var newArr = arr.filter(function(ele){
return ele < 50;
});
console.log(newArr);

// 清空数组的方法
var arr = [3,4,19,34,23,76];
// 方法一：
arr = [];
// 方法二：
arr.length = 0;
// 方法三：
arr.splice(0,arr.length);
</script>