1.什么是数组？
数组就是专门用来存储一组数据的
它不属于基本数据类型，这是初学者经常会犯的错误，基本数据类型在ES6之前只有Number/String/Boolean/Null/undefined
数组属于引用数据类型(对象类型)
2.如何创建数组？
第一种是通过new的方法创建一个数组的对象
let 变量名称 = new Array(数组长度);
第二种是简便写法
let 变量名称 = [];
3.基本的操作数据
那么既然有了数组，数组是一个存放数据的地放，那么怎么操作里面的数据呢
怎么往数组中存放数据？
变量名称[索引号] = 需要存储的数据;
怎么从数组中获取数据？
变量名称[索引号];
4.数组的注意点
1.和其它编程语言不同, 如果数组对应的索引中没有存储数据, 默认存储的就是undefined
其它编程语言中默认保存的是垃圾数据或者0
2.和其它编程语言不同, JavaScript中访问了数组中不存在的索引不会报错, 会返回undefined
其它编程语言一旦超出索引范围就会报错或者返回脏数据
3.和其它编程语言不同, 当JavaScript中数组的存储空间不够时数组会自动扩容
其它编程语言中数组的大小是固定的
4.和其它编程语言不同, JavaScript的数组可以存储不同类型数据
在其它编程语言中数组只能存储相同类型数据(要么全部都是字符串, 要么全部都是数值等)
5.和其它编程语言不同, JavaScript中数组分配的存储空间不一定是连续的
其它语言数组分配的存储空间都是连续的, JavaScript数组是采用"哈希映射"方式分配存储空间
什么是哈希映射? 好比字典可以通过偏旁部首找到对应汉字, 我们可以通过索引找到对应空间
在浏览器中各大浏览器也对数组分配存储空间进行了优化
如果存储的都是相同类型的数据, 那么会尽量分配连续的存储空间
如果存储的不是相同的数据类型, 那么就不会分配连续的存储空间
6.创建数组的其它方式
3.1通过构造函数创建数组
let 变量名称 = new Array(size); 创建一个指定大小数组
let 变量名称 = new Array(); 创建一个空数组
let 变量名称 = new Array(data1, data2, ...); 创建一个带数据的数组
3.2通过字面量创建数组
let 变量名称 = []; 创建一个空数组
let 变量名称 = [data1, data2, ...]; 创建一个空数组
5.数组的遍历
1.for 循环
使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显
let arr = [1, 2, 3, 4];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]); //1,2,3,4,
}
2.for in 循环
虽然能遍历但是不建议使用，因为它的输出类型是String类型
let arr = [1, 2, 3, 4];
for (let i in arr) {
console.log(arr[i]); //1,2,3,4
console.log(typeof i); //输出的是String
}
3.for of 循环
可以正确响应break,continue,return语句
let arr = [1, 2, 3, 4];
for (let i of arr) {
console.log(i);
if(i===3){
break;
}
} //执行到3的时候就跳出循环了 最终输出1,2,3,
4.forEach 循环
遍历数组中的每一项，没有返回值，对原数组有影响，不支持IE
let arr = [1, 2, 3, 4];
arr.forEach((value, index, array) => {
console.log(value); //1,2,3,4
});
//参数1:当次遍历的数据
//参数2:当次遍历的序列
//参数3:原始的数组
//数组中有几项，那么传递进去的匿名回调函数就需要执行几次；
5.map循环
map的回调函数中支持return返回值；return的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）
首先是直接遍历数组
let arr = [1, 2, 3, 4];
let shuchu = arr.map((value, index, array) => {
console.log(value); //输出 1,2,3,4
return "gsq" + value;
});
//参数1:当次遍历的数据
//参数2:当次遍历的序列
//参数3:原始的数组
console.log(shuchu); // ["gsq1", "gsq2", "gsq3", "gsq4"]
返回一个新的数组
let arr = [1, 2, 3, 4];
var result = arr.map((value, index, array) => {
return value * 10;
});
console.log(result); //-->[10,20,30,40]; 原数组拷贝了一份，并且进行了修改
console.log(arr);//-->[1,2,3,4];原数组没有发送修改
6.filter 遍历
遍历数组
不会改变原始数组,返回新数组
let arr = [1, 2, 3, 4];
arr.filter(value => {
console.log(value); //1,2,3,4
});
作为条件判断返回一个新的数组
let arr = [1, 2, 3, 4];
let qwe = arr.filter((value, index, arr) => {
//用于判断当前的那项数据是否满足要求，满足的话就添加到新的数组中返回
return value < 3;
});
//参数1:当次遍历的数据
//参数2:当次遍历的序列
//参数3:原始的数组
console.log(qwe); // [1,2]
7.every 遍历
不会改变原始数组,返回新数组
every()是对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true,不然就是返回false
let arr = [1, 2, 3, 4];
let qwe = arr.every((value, index, arr) => {
return value > 3;
});
//参数1:当次遍历的数据
//参数2:当次遍历的序列
//参数3:原始的数组
console.log(qwe); //false
实际用例 判断数组中每个对象的age是否都大于2 返回true 或者false
let obj = [{ age: 1 }, { age: 3 }, { age: 4 }, { age: 5 }, { age: 6 }, { age: 7 }]
let newarr = obj.every(item => item.age >= 2)
console.log(newarr) //false
8.some 遍历
跟every的区别就是every需要全部满足要求才返回true，some只需要满足一项就返回true
some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true
let arr = [1, 2, 3, 4];
let qwe = arr.some((value, index, arr) => {
return value > 3;
});
//参数1:当次遍历的数据
//参数2:当次遍历的序列
//参数3:原始的数组
console.log(qwe); //true
9. reduce
reduce()方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。
let arr = [1, 2, 3, 4];
let result = arr.reduce((a, b) => a + b);
console.log(result); //输出 10
reduce可以有5个参数
let arr = [1, 2, 3, 4];
let result = arr.reduce((a, b, index, array) => {
return a + b;
}, c);
console.log(result); // 输出10
//a是上一次的值，第一次遍历的时候就是c
//b是当前值
//index是当前值的索引
//array是当前的数组
10.find
find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined
let arr = [1, 2, 3, 4];
function gets(age) {
return age > 1;
}
let qwe = arr.find(gets);
console.log(qwe); //输出 2
11.key value entries
ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历
let arr = [1, 2, 3, 4];
for(let index of arr.keys()){
console.log(index);
}
//0
//1
for(let element of arr.values()){
console.log(element);
}
//1
//2
//3
//4
for(let index,element of arr.entries()){
console.log(index.element)
}
//0 1
//1 2
//2 3
//3 4
6.数组的增删改查
let arr = ["a", "b", "c"];
需求: 获取数组中索引为1的那个数据(查);
console.log(arr[1]); //a
需求: 将索引为1的数据修改为m(改);
arr[1] = "m";
console.log(arr); //["a","m","c"]
需求: 将索引为1的数据修改为d, 索引为2的修改为e(改);
arr[1] = "d";
arr[2] = "e";
console.log(arr); //["a","d","e"]
参数1: 从什么位置开始;
参数2: 需要替换多少个元素;
参数3开始: 新的内容;
arr.splice(1, 2, "d", "e");
console.log(arr); //["a","d","e"]
需求: 要求在数组最后添加一条数据(增);
arr[3] = "d";
console.log(arr); //["a","b","c","d"]
push方法可以在数组的最后新增一条数据,
并且会将新增内容之后数组当前的长度返回给我们;
let res = arr.push("d");
console.log(res); //4
console.log(arr); //["a","b","c","d"]
需求: 要求在数组最后添加两条数据(增);
arr.push("d");
arr.push("e");
数组的push方法可以接收1个或多个参数;
arr.push("d", "e");
console.log(arr); // ["a","b","c","d","e"]
需求: 要求在数组最前面添加一条数据(增);
arr[-1] = "m";
unshift方法和push方法一样, 会将新增内容之后当前数组的长度返回给我们;
let res = arr.unshift("m");
console.log(res); // 4
console.log(arr); // ["m", "a", "b", "c"]
需求: 要求在数组最前面添加两条数据(增);
arr.unshift("m");
arr.unshift("w");
unshift方法和push方法一样, 可以接收1个或多个参数;
arr.unshift("m", "w");
console.log(arr); // ["m", "w", "a", "b", "c"]
需求: 要求删除数组最后一条数据(删);
数组的pop方法可以删除数组中的最后一条数据, 并且将删除的数据返回给我们;
let res = arr.pop();
console.log(res); //c
console.log(arr);
["a", "b"];
需求: 要求删除数组最前面一条数据(删);
数组的shift方法可以删除数组中的最前面一条数据, 并且将删除的数据返回给我们;
let res = arr.shift();
console.log(res); //a
console.log(arr); //["b","c"]
需求: 要求删除数组中索引为1的数据(删);
以下代码的含义: 从索引为1的元素开始删除1条数据;
参数1: 从什么位置开始;
参数2: 需要删除多少个元素;
arr.splice(1, 1);
console.log(arr); //["a","c"]
需求: 要求删除数组中除了第0条以外的所有数据(删);
arr.splice(1, 2);
console.log(arr); //["a"]
7.数组的常用方法
let arr = [1, 2, 3, 4, 5];
1.如何清空数组
arr = [];
arr.length = 0;
arr.splice(0, arr.length)
2.如何将数组转换为字符串
let str = arr.toString();
let str = String(arr);
console.log(str); // 1,2,3,4,5
console.log(typeof str); //string
3.如何将数组转换成指定格式字符串
join方法默认情况下如果没有传递参数, 就是调用toString();
join方法如果传递了参数, 就会将传递的参数作为元素和元素的连接符号
let str = arr.join("+");
console.log(str); // 1+2+3+4+5
console.log(typeof str); //String
会被转成对象类型的伪数组
let arr1 = str.split('+');
console.log(arr1); // ["1", "2", "3", "4", "5"]
console.log(typeof arr1); // object
4.如何将两个数组拼接为一个数组
let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
注意点: 数组不能够使用加号进行拼接, 如果使用加号进行拼接会先转换成字符串再拼接
let res = arr1 + arr2;
let res = arr1.concat(arr2);
注意点: 扩展运算符在解构赋值中(等号的左边)表示将剩余的数据打包成一个新的数组
扩展运算符在等号右边, 那么表示将数组中所有的数据解开, 放到所在的位置
let res = [...arr1, ...arr2]; // let res = [1, 3, 5, 2, 4, 6];
console.log(res); //[1, 3, 5, 2, 4, 6]
console.log(typeof res); //object
注意点: 不会修改原有的数组, 会生成一个新的数组返回给我们
console.log(arr1); //[1, 3, 5]
console.log(arr2); //[2, 4, 6]
5.如何对数组中的内容进行反转
[1, 2, 3, 4, 5] [5, 4, 3, 2, 1]
let res = arr.reverse();
console.log(res); //[5, 4, 3, 2, 1]
注意点: 会修改原有的数组
console.log(arr); // [5, 4, 3, 2, 1]
6.如何截取数组中指定范围内容
0 1 2 3
[1, 2, 3, 4, 5]
slice方法是包头不包尾(包含起始位置, 不包含结束的位置) 不会改变原有的数组
let res = arr.slice(1, 3)
console.log(res); //[2,3]
console.log(arr); //[1, 2, 3, 4, 5]
7.如何查找元素在数组中的位置
0 1 2 3 4
[1, 2, 3, 4, 5]
0 1 2 3 4 5
let arr = [1, 2, 3, 4, 5, 3];
indexOf方法如果找到了指定的元素, 就会返回元素对应的位置
indexOf方法如果没有找到指定的元素, 就会返回-1
注意点: indexOf方法默认是从左至右的查找, 一旦找到就会立即停止查找
let res = arr.indexOf(3);
let res = arr.indexOf(6);
参数1: 需要查找的元素
参数2: 从什么位置开始查找
let res = arr.indexOf(3, 4);
注意点: lastIndexOf方法默认是从右至左的查找, 一旦找到就会立即停止查找
let res = arr.lastIndexOf(3);
let res = arr.lastIndexOf(3, 4);
console.log(res);
8.如何判断数组中是否包含某个元素
let arr = [1, 2, 3, 4, 5];
我们可以通过indexOf和lastIndexOf的结果, 判断是否是-1即可
let res = arr.indexOf(8);
let res = arr.lastIndexOf(8);
includes如果找到了返回true,没找到返回false
let res = arr.includes(8);
let res = arr.includes(4);
console.log(res);