16-数组
数组（Array）是属于**内置对象 **
**
数组中的元素可以是任意的数据类型，也可以是对象，也可以是函数，也可以是数组。数组的元素中，如果存放的是数组，这种数组就是二维数组。
js数组内可以放多个不同类型的值，不会报错，但建议放同一个类型的~！
相关链接
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
一、创建数组
1.数组字面量
var arr1 = []; // 创建一个空的数组
var arr2 = [1,2,3]; // 创建带初始值的数组
2.构造函数创建数组
var arr = new Array(参数);
- 参数为空，代表一个空数组
- 参数是一个值，代表的是 数组长度 ，而不是数组值
- 参数是多个值，才是数组元素
<script>
var arr = new Array();
var arr1 = new Array(3);
var arr2 = new Array(3, 2, 1);
console.log(arr);
console.log(arr1);
console.log(arr2);
</script>
二、数组的索引
索引 (下标) ：用来访问数组元素的序号，代表的是数组中的元素在数组中的位置（下标从 0 开始算起）
- 获取元素在数组中的索引值
- 数组中没有该元素，就返回-1
var arr2 = new Array(3, 2, 1);
// 获取元素在数组中的索引值
console.log(arr2.indexOf(1));//2
console.log(arr2.indexOf(8));//-1
通过索引值操作数组
- 增
- arr[arr.length]
- 删
- arr[索引] = null -> 假删除，只会清空值
- 改
- arr[索引] = 新值;
- 查
- arr[索引]
三、数组的长度
可以使用length属性来获取数组的长度(即“元素的个数”)。
数组的长度 = 数组的最大索引 + 1
数组的长度可修改
var arr3 = [1, 2, 3, 4];
arr3.length = 5;
console.log(arr3);
四、遍历数组
for (let i = 0; i < arr3.length; i++) {
console.log(arr3[i]);
}
es6遍历
// 遍历数组
var arr7 = [555, 666, 999];
// 遍历数组的索引
for (let index of arr7.keys()) {
console.log(index);
}
// 0
// 1
// 2
// 遍历数组中的元素
for (let elem of arr7.values()) {
console.log(elem);
}
// 555
// 666
// 999
// 遍历数组的索引和元素
for (let [index, elem] of arr7.entries()) {
console.log(index, elem);
}
// 0 555
// 1 666
// 2 999
</script>
<script>
var arr = [1, 2, 3, 4];
arr.forEach((item, index) => {
console.log(index, item);
})
// 0 1
// 1 2
// 2 3
// 3 4
for (let [index, elem] of arr.entries()) {
console.log(index, elem);
}
// 0 1
// 1 2
// 2 3
// 3 4
</script>
五、数组中的方法
1.toString()
将数组转为字符串，默认以逗号隔开
<script>
var arr = [1, 2, 3, 4, 5, 6];
console.log(arr.toString());//1,2,3,4,5,6
</script>
2.join()
// 不传参数默认是逗号链接
console.log(arr.join());//1,2,3,4,5,6
// 将数组转为字符串并以传入的符号相连接
console.log(arr.join('!')); // 1!2!3!4!5!6
6.拼接数组concat()
// 拼接数组
console.log(arr.concat(arr1));// [1, 2, 3, 4, 5, 6, "小", "艾", "同", "学"]
// 这个中方法必须有个变量接收
var arr3 = [].concat(arr, arr1);//[1, 2, 3, 4, 5, 6, "小", "艾", "同", "学"]
console.log(arr3);
7.添加元素push()
var arr = [1, 2, 3, 4, 5, 6, 7];
// 在数组的最后面添加数据，可以添加，直接修改的元数组，并且返回的是数组的长度
var arr1 = arr.push(999, 666, 888);
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 999, 666, 888]
console.log(arr1);//10
8.删除最后一个pop()
//删除数组最后一项，返回被删除的那个元素，只能删除最后一项
var arr2 = arr.pop();
// pop里面不管跟什么值，都只会删除数组的最后一项
// var arr2 = arr.pop(55, 2);
console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 999, 666]
console.log(arr2);//888
9.删除第一个shitf()
// 删除数组第一项,返回被删除这项的值,每次只能删除一个
var arr3 = arr.shift()
// 里面无论跟什么值，都是一样的
// var arr3 = arr.shift(1,2)
console.log(arr);//[2, 3, 4, 5, 6, 7, 999, 666]
console.log(arr3);//1
9.在数组前面添加unshitf()
// 在数组最前面添加数据项，返回数组的长度 ，可以添加多项
var arr4 = arr.unshift('困', '死', '了');
console.log(arr);//["困", "死", "了", 2, 3, 4, 5, 6, 7, 999, 666]
console.log(arr4);//11
10.强大的splice()
<script>
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
//此方法会修改原数组的值
// 如果括号里面不跟值，就是表示一个都不删除，原数组也不会改变
var arr1 = arr.splice();
console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr1);//[]
// 一个参数，表示要删除的项索引开始的位置，一直到结束
//返回的是被删除的元素组成的数组，元素组已改变
var arr2 = arr.splice(6);//从第二项开始包括第二项，全部删除
console.log(arr2);//[7, 8, 9]
console.log(arr);//[1, 2, 3, 4, 5, 6]
//两个参数：
//第一个参数：表示要删除的数组开始的索引值
// 第二个参数表示：从第一个参数的索引开始(包括)，要删除的个数
var arr3 = arr.splice(2, 3);//从索引2开始删除3个
console.log(arr3);//[3, 4, 5]
console.log(arr);//[1, 2, 6]
var arr4 = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
// 超过两个参数
//第一个参数：表示要删除的数组开始的索引值
// 第二个参数表示：从第一个参数的索引开始(包括)，要删除的个数
//后面的参数是替换删除掉是数据的位置，有多少个就替换多少个
var arr5 = arr4.splice(3, 4, 1, 2, 3, 5, 6)
console.log(arr4);//[9, 8, 7, 1, 2, 3, 5, 6, 2, 1, 0]
console.log(arr5);//[6, 5, 4, 3]
</script>
11.复制slice()
<script>
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 此方法不会改变原数组
//没有参数，相当于将原数组完整的复制了一份
var arr1 = arr.slice();
console.log(arr);
console.log(arr1);
// 一个参数:表示复制数组中的数据项的索引开始的位置，一直到数组结束位置
var arr2 = arr.slice(2);
console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr2);// [3, 4, 5, 6, 7, 8, 9]
// 二个参数
// 第一个表示复制数据项的索引开始的位置，第二个表示结束的索引的位置（但是这个位置上的值取不到）
var arr3 = arr.slice(2, 5)//[2,5)
console.log(arr);// [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr3); //[3, 4, 5]
</script>
12.翻转数组reveser()
// 翻转数组，返回的是翻转的数组(原数组也会改变)
var arr4 = arr.reverse();
console.log(arr);//[9, 8, 7, 6, 5, 4, 3, 2, 1]
console.log(arr4);//[9, 8, 7, 6, 5, 4, 3, 2, 1]
13.数组排序sort()
<script>
var arr = [5, 9, 5, 7, 3, 99, 0, 12];
var arr1 = [5, 9, 5, 7, 3, 99, 0, 12];
// 回调函数
function sortFunc(a, b) {
return b - a;//降序
}
function sortFunc2(a, b) {
return a - b;//升序
}
// 使用sort()必须调用函数,不然没效果
var arr3 = arr.sort();
console.log(arr3); //[0, 12, 3, 5, 5, 7, 9, 99]
var res = arr.sort(sortFunc);
var res2 = arr1.sort(sortFunc2);
console.log(res);// [99, 12, 9, 7, 5, 5, 3, 0]
console.log(res2);// [0, 3, 5, 5, 7, 9, 12, 99]
</script>
14.获取元素在数组中的位置indexOf()
<script>
var arr = [1, 2, 3, 4, 5, 6, 7, 5, 8, 9];
// 一个参数：表示要查的元素
console.log(arr.indexOf(3));//2
//当数组中的没有要查询的元素时，就会返回-1
console.log(arr.indexOf(999999));//-1
// 当数组中有多个这个元素时，只会返回第一个的索引
console.log(arr.indexOf(5));//4
</script>
六、es6的扩展
https://es6.ruanyifeng.com/#docs/array
... 语法
<script>
var arr = [1, 2, 3];
var arr1 = [4, 5, 6];
var arr2 = ['小', '艾', '同学'];
// 把数组展开为用逗号分隔的该数组中所有元素的序列
console.log(...arr);//1 2 3
//求数组中的最大值
console.log(Math.max(...arr1));//6
//求数组中的最小值
console.log(Math.min(...arr1));//4
// 数组拼接
arr.push(...arr1)
console.log(arr);//[1, 2, 3, 4, 5, 6]
// 复制数组
// 写法一
var arr2 = [...arr1];
console.log(arr2);//[4, 5, 6]
var arr2 = ['冲', '冲', '冲'];
// 这种复制实际上是克隆了原数组的值，而不是地址值所以修改arr2，不会影响arr1
console.log(arr2);//["冲", "冲", "冲"]
console.log(arr1);//[4, 5, 6]
// 将字符串转为真正的数组
var str = 'Hello World';
// 空格会解析
console.log([...str]);//["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]
// Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。
// 用newArray时候，里面只有一值，是代表数组的长度
var arr4 = new Array(3);//[empty × 3]
console.log(arr4);
// 用Array.of即使里面是一个值，也是数组中的元素
var arr5 = Array.of(3); //[3]
console.log(arr5);
// .fill可以替换数组中的元素
console.log(arr);//[1, 2, 3, 4, 5, 6]
// fill只穿一个参数默认全部替换
arr.fill(666);
console.log(arr);// [666, 666, 666, 666, 666, 666]
// fill第一个参数：要替换的元素
// fill第二个参数：替换索引开始的位置
// fill第三个参数：替换的索引结束位置，不含这个值
arr.fill(7, 1, 3); //[1,3)
console.log(arr); // [666, 7, 7 666, 666, 666]
// fill第一参数还是要替换的元素
// fill第二个参数是要替换的索引开始的位置，没有第三个参数，默认后面的全部替换
arr.fill(555, 2)
console.log(arr);//[666, 7, 555, 555, 555, 555]
</script>
es6过滤器，真香写法！
<script>
// 需求：返回数组中大于5的数
var arr = [1, 2, 6, 7, 4, 3, 9, 5, 8]
// 1.筛选器
var res = arr.filter(function (item) {
// 返回item大于5的
return item > 5;
})
console.log(res);//[6, 7, 9, 8]
// 2.箭头语法
var res1 = arr.filter(item => { return item > 5 })
console.log(res1);//[6, 7, 9, 8]
</script>
