1.什么是数组?
数组就是专门用来存储一组数据的
它不属于基本数据类型,这是初学者经常会犯的错误,基本数据类型在ES6之前只有Number/String/Boolean/Null/undefined
数组属于引用数据类型(对象类型)
2.如何创建数组?
第一种是通过new的方法创建一个数组的对象
let 变量名称 = new Array(数组长度);
第二种是简便写法
let 变量名称 = [];
3.基本的操作数据
那么既然有了数组,数组是一个存放数据的地放,那么怎么操作里面的数据呢
怎么往数组中存放数据?
变量名称[索引号] = 需要存储的数据;
怎么从数组中获取数据?
变量名称[索引号];
4.数组的注意点
// 1.和其它编程语言不同, 如果数组对应的索引中没有存储数据, 默认存储的就是undefined
// 其它编程语言中默认保存的是垃圾数据或者0
/*
let arr = new Array(3);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
*/
// 2.和其它编程语言不同, JavaScript中访问了数组中不存在的索引不会报错, 会返回undefined
// 其它编程语言一旦超出索引范围就会报错或者返回脏数据
/*
let arr = new Array(3); // 0 1 2
console.log(arr[666]);
*/
// 3.和其它编程语言不同, 当JavaScript中数组的存储空间不够时数组会自动扩容
// 其它编程语言中数组的大小是固定的
/*
let arr = new Array(3);
arr[0] = "lnj";
arr[1] = "zs";
arr[2] = "ls";
arr[3] = "it666";
console.log(arr);
*/
// 4.和其它编程语言不同, JavaScript的数组可以存储不同类型数据
// 在其它编程语言中数组只能存储相同类型数据(要么全部都是字符串, 要么全部都是数值等)
/*
let arr = new Array(4);
arr[0] = 123;
arr[1] = "123";
arr[2] = true;
arr[3] = null;
console.log(arr);
*/
// 5.和其它编程语言不同, JavaScript中数组分配的存储空间不一定是连续的
// 其它语言数组分配的存储空间都是连续的, JavaScript数组是采用"哈希映射"方式分配存储空间
// 什么是哈希映射? 好比字典可以通过偏旁部首找到对应汉字, 我们可以通过索引找到对应空间
// 在浏览器中各大浏览器也对数组分配存储空间进行了优化
// 如果存储的都是相同类型的数据, 那么会尽量分配连续的存储空间
// 如果存储的不是相同的数据类型, 那么就不会分配连续的存储空间
// 6.创建数组的其它方式
// 3.1通过构造函数创建数组
// let 变量名称 = new Array(size); 创建一个指定大小数组
// let 变量名称 = new Array(); 创建一个空数组
// let 变量名称 = new Array(data1, data2, ...); 创建一个带数据的数组
// 3.2通过字面量创建数组
// let 变量名称 = []; 创建一个空数组
// let 变量名称 = [data1, data2, ...]; 创建一个空数组
/*
// let arr = new Array(3);
// let arr = new Array();
// arr[0] = "lnj";
// arr[1] = "zs";
// arr[2] = "ls";
// arr[3] = "ww";
// console.log(arr);
let arr = new Array("lnj", "zs", "ls", "ww");
console.log(arr);
*/
// let arr = [];
// arr[0] = "lnj";
// arr[1] = "zs";
// arr[2] = "ls";
// arr[3] = "ww";
// console.log(arr);
5.数组的遍历
1.for循环
使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显
let arr = [1, 2, 3, 4, 5, 6, 7, 8]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }
2. for 循环之in
虽然能遍历但是不建议使用,因为它的输出类型是String类型的
let arr = [1, 2, 3, 4, 5, 6, 7, 8];
for (let i in arr) {
console.log(arr[i]);
console.log(typeof i) //输出的是String
}
3.for循环之of
可以正确响应break,continue,return语句
let arr = [1, 2, 3, 4, 5, 6, 7, 8];
for (let i of arr) {
console.log(i);
}
4.foreach循环
遍历数组中的每一项,没有返回值,对原数组没有影响,不支持IE
let arr = [1, 2, 3, 4, 5, 6, 7, 8];
arr.forEach((value, index, array) => {
console.log(value);
});
//参数1:当次遍历的数据
//参数2:当次遍历的序列
//参数3:原始的数组
//数组中有几项,那么传递进去的匿名回调函数就需要执行几次;
5.map循环
map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了)
首先是直接遍历数组,一个一个输出一个值
let arr = [1, 2, 3, 4, 5, 6, 7, 8];
arr.map((value,index,array)=>{
console.log(value)
})
//输出 1,2,3,4,5,6,7,8
返回一个新的数组
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);
})
作为条件判断返回一个新的数组
let arr = [1, 2, 3, 4]; let qwe = arr.filter((value, index, arr) => { //用于判断当前的那项数据是否满足要求,满足的话就添加到新的数组中返回 return value < 3; }); console.log(qwe); //-->[1,2];
7.every遍历
跟filter有着异曲同工之妙之处
不会改变原始数组,返回新数组
every()是对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true
let arr = [1, 2, 3, 4];
let qwe = arr.every((value, index, arr) => {
return value > 3;
});
console.log(qwe); //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;
});
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是当前值的索引
//数组
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]);
// 需求: 将索引为1的数据修改为m (改)
// arr[1] = "m";
// console.log(arr);
// 需求: 将索引为1的数据修改为d, 索引为2的修改为e (改)
// arr[1] = "d";
// arr[2] = "e";
// console.log(arr);
// 参数1: 从什么位置开始
// 参数2: 需要替换多少个元素
// 参数3开始: 新的内容
// arr.splice(1, 2, "d", "e");
// console.log(arr);
// 需求: 要求在数组最后添加一条数据 (增)
// arr[3] = "d";
// console.log(arr);
// push方法可以在数组的最后新增一条数据, 并且会将新增内容之后数组当前的长度返回给我们
// let res = arr.push("d");
// console.log(res);
// console.log(arr);
// 需求: 要求在数组最后添加两条数据 (增)
// arr.push("d");
// arr.push("e");
// 数组的push方法可以接收1个或多个参数
// arr.push("d", "e");
// console.log(arr);
// 需求: 要求在数组最前面添加一条数据 (增)
// arr[-1] = "m";
// unshift方法和push方法一样, 会将新增内容之后当前数组的长度返回给我们
// let res = arr.unshift("m");
// console.log(res);
// console.log(arr);
// 需求: 要求在数组最前面添加两条数据 (增)
// arr.unshift("m");
// arr.unshift("w");
// unshift方法和push方法一样, 可以接收1个或多个参数
// arr.unshift("m", "w");
// console.log(arr);
// 需求: 要求删除数组最后一条数据 (删)
// 数组的pop方法可以删除数组中的最后一条数据, 并且将删除的数据返回给我们
// let res = arr.pop();
// console.log(res);
// console.log(arr);
// 需求: 要求删除数组最前面一条数据 (删)
// 数组的shift方法可以删除数组中的最前面一条数据, 并且将删除的数据返回给我们
// let res = arr.shift();
// console.log(res);
// console.log(arr);
// 需求: 要求删除数组中索引为1的数据 (删)
// 以下代码的含义: 从索引为1的元素开始删除1条数据
// 参数1: 从什么位置开始
// 参数2: 需要删除多少个元素
// arr.splice(1, 1);
// console.log(arr);
// 需求: 要求删除数组中除了第0条以外的所有数据 (删)
// arr.splice(1, 2);
// console.log(arr);
7.数组的常用方法
let arr = [1, 2, 3, 4, 5];
// 1.如何清空数组
// arr = [];
// arr.length = 0;
// arr.splice(0, arr.length)
// console.log(arr);
// 2.如何将数组转换为字符串
// let str = arr.toString();
// let str = String(arr);
// console.log(str);
// console.log(typeof str);
// 3.如何将数组转换成指定格式字符串
// join方法默认情况下如果没有传递参数, 就是调用toString();
// join方法如果传递了参数, 就会将传递的参数作为元素和元素的连接符号
// let str = arr.join("+");
// console.log(str);
// console.log(typeof str);
//会被转成对象类型的伪数组
// let arr1 = str.split(‘+‘);
// console.log(arr1);
// console.log(typeof arr1);
// 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);
// console.log(typeof res);
// 注意点: 不会修改原有的数组, 会生成一个新的数组返回给我们
// console.log(arr1);
// console.log(arr2);
// 5.如何对数组中的内容进行反转
// [1, 2, 3, 4, 5] [5, 4, 3, 2, 1]
// let res = arr.reverse();
// console.log(res);
// 注意点: 会修改原有的数组
// console.log(arr);
// 6.如何截取数组中指定范围内容
// 0 1 2 3
// [1, 2, 3, 4, 5]
// slice方法是包头不包尾(包含起始位置, 不包含结束的位置)
// let res = arr.slice(1, 3)
// console.log(res);
// console.log(arr);
// 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);
原文:https://www.cnblogs.com/gsq1998/p/12180009.html