3. 数组
3-1. 数组
创建一个数组
1-1.
var arr = [1,2,3]
1-2. new Array
new Array(4)
: 创建一个长度是4的数组,数组的每一个元素都是undefinedvar arr = new Array(1,2,3)
: 相当于是var arr = [1,2,3]
数组中的值称为数组的元素
数组长度
arr.length
: 数组中元素的个数,就是数组的长度,类型是 number3-1. 可以直接赋值改变数组的长度
如果新数组的长度比原数组的长度大,那么超出的部分,元素值都是undefined
如果新数组的长度比原数组的长度小,那么超出的元素会被直接删除
3-2. 长度和数组最后一个元素的下标的关系:
arr[arr.length - 1]
数组的下标/索引:
数组的下标是从 0 开始的
数组的下标是连续的
通过数组的下标可以操作数组的元素
3-1. 读取元素:
arr[1]
3-2. 给元素赋值:
arr[1] = 10
读取一个不存在的下标元素,值是undefined
var arr = [1,2,3] console.log(arr[99]); // undefined
给一个不存在的下标元素赋值,中间的元素会用undefined占位
var arr = [1,2,3]; arr[5] = 10; // arr [1,2,3,undefined,undefined,10]
遍历数组
for(var index = 0; index < arr.length; index++){ console.log(arr[index]) }
3-2. 数组方法
改变原数组的7个方法【vue】:
push、pop、unshift、shift、reserve、sort、splice
带回调函数的方法:
filter、map、reduce、find、findIndex、forEach、every、some
特殊的方法
concat、slice、includes、join
数组方法学习思路:
- 作用:
- 参数:
- 返回值:
- 是否改变原来的数组
3-2-1. 改变原数组的方法
push、pop、unshift、shift、reverse、sort、splice
/**
* push:[推]
* 1. 作用:向数组的最后追加元素
* 2. 参数:要新追加的元素
* 3. 返回值[方法运行之后的结果]: 新数组的长度
* 4. 改变原数组
* 5. 语法: arr.push(新元素1,新元素2,....)
*
*/
var arr = [1, 2, 3];
// arr[arr.length] = 4;
// arr[arr.length] = 5;
// console.log(arr);
var res = arr.push(4, 5);
res = arr.push(6);
console.log(arr, res);
/**
* pop[弹出]:
* 1. 作用:删除数组的最后一个元素
* 2. 参数:没有参数
* 3. 返回值:删除的那个元素
* 4. 改变原来的数组,原来的数组变成删除元素后的新数组
* 5. 语法:
* var res = arr.pop();
*/
var arr = [1, 2, 3, 4, 5];
var res = arr.pop();
console.log(arr, res);
/**
* unshift:
* 1. 作用:向数组的前面追加元素
* 2. 参数:需要添加的元素
* 3. 返回值:新数组的长度
* 4. 原数组:追加新元素后数组
* 5. 语法:
* var res = arr.unshift(新元素1,新元素2,....)
*
*/
var arr = [2, 3, 4];
var res = arr.unshift(1);
console.log(arr, res);
/**
* shift:
* 1. 作用:从头删除数组的元素
* 2. 参数:无
* 3. 返回值:被删除的元素
* 4. 原数组:删除后的数组
* 5. 语法:
* var res = arr.shift()
*
*/
var arr = [1, 2, 3, 4];
var res = arr.shift();
console.log(arr, res);
/**
* reverse[反转]:
* 1. 作用:反转数组
* 2. 参数:无
* 3. 返回值:反转后的数组
* 4. 原数组:反转后的数组
*
*/
var arr = ['a', 1, 'b', '2', '900'];
var res = arr.reverse()
console.log(arr, res);
/***
* sort:
* 1. 作用:数组排序[可以升序、也可以降序]
* 2. 参数:是一个回调函数
* 3. 返回值:排序后的新数组
* 4. 原数组:排序后的新数组
*
*/
var arr = [43, 4, 2, 7, 32, 5];
var res = arr.sort(function (a, b) {
// return a - b; // 升序
return b - a; // 降序
})
console.log(res, arr);
/***
* splice
*
* 一:删除
* 1. 作用:删除指定索引的元素: arr.splice(startIndex,删除的个数)
* 2. 参数:第一个参数是索引位置,第二个参数是删除的个数
* 3. 返回值:删除元素组成的新数组
* 4. 原数组:删除元素后的数组
*
* 二:添加:
* 1. 作用:在指定索引位置添加元素
* 2. 参数:第一个参数索引位置,第二个参数是0,第三个参数,添加的元素
* 3. 返回值:空数组【因为没有删除】
* 4. 原数组:改变后的数组
*
* 三:替换:
* 1. 作用:在指定索引位置的元素替换
* 2. 参数:第一个参数索引,第二个参数 1 第三个参数,要替换的元素
* 3. 返回值:删掉的元素组成的数组
* 4. 原数组:改变后的数组
*
*/
var arr = [1, 2, 3, 4, 5];
/**
* 删除索引是2的元素
*
*/
var res = arr.splice(2, 2);
console.log(res, arr);
/**
* splice添加
*
*/
var arr = [1, 2, 3, 4, 5];
var res = arr.splice(3, 0, 99, 100);
console.log(res, arr);
/**
* 替换:
*
*
*/
var arr = [1, 2, 3, 4, 5];
var res = arr.splice(2, 1, 333);
console.log(res, arr);
3-2-2. 带回调函数的
map、filter、reduce、find、findIndex、forEach、every、some
var arr = ['a', 'b', 'c', 'd'];
/**
* forEach
* 1. 作用:遍历数组
* 2. 回调函数的第一个参数是数组中每一个元素,第二个参数是 索引/下标
* 3. 没有返回值
*
* 应用场景:涉及到数组遍历的
*/
var res = arr.forEach(function (item, index) {
console.log(item, index);
})
for (var i = 0; i < arr.length; i++) {
console.log(i, arr[i]);
}
console.log(res);// undefined
// 需求forEach数组求和
var sum = 0;
var arr = [2, 3, 5, 1, 4];
arr.forEach(function (item, index) {
sum += item;
})
console.log(sum);
/**
* filter[过滤器]:
* 作用:对数组中的数据进行筛选,返回值一个筛选后的新数组
* 返回值:过滤后符合条件的数组
*
* 应用场景:筛选符合条件的数据
*/
console.log('filter-----');
var users = [18, 29, 45, 7, 10, 12];
/**
* item:当前遍历的元素
* index:索引
* arr: 原数组
*
*
*/
var res = users.filter(function (item, index, arr) {
console.log('');
return item < 18; // return true 将当前条 item 加入res数组中
// return false,当前item就会被过滤掉,不会进入res数组
})
console.log('res:', res);
/***
* map[映射]:
* 1. 作用:将原数组中的每一个元素,经过自定义处理后,映射成一个新的数组,新数组的长度与原数组一样
* 2. 返回值:映射后的新数组
*
*/
console.log('map-----');
var arr = [4, 5, 23, 7, 89];
var newArr = arr.map(function (item, index, arr) {
return item * 3;
// return 什么,当前遍历到这一条进入新数组的元素就是什么
})
console.log(newArr);
/**
* reduce 累计
* 参数:1 是一个回调函数 回调函数有三个参数
* 1:pre 第一次取值是 reduce的第二个参数 初始值
* 从第二次开始:取的是上一次回调函数的返回值
* 2:当前元素 3:索引
* 2. 初始值
*
* 返回值:reduce回调函数最后一个的返回值
*/
console.log(' reduce ----------')
var arr = [1, 2, 3, 4, 5];
var sum = arr.reduce(function (pre, cur, index) {
console.log('pre: ', pre);
console.log('cur: ', cur);
console.log('index: ', index);
return pre + cur;
// pre cur return
// 1 0 1 1
// 2 1 2 3
// 3 3 3 6
// 4 6 4 10
// 5 10 5 15 最后一次回调函数的返回值就是reduce最终的返回值
}, 0);
console.log(sum);
/***
* find 查找一个元素在数组中是否存在,如果存在返回符合条件的第一个元素
* 如果没有符合条件的,返回值undefined
*
*/
console.log(' find -------');
var arr = [1, 3, 4, 'a', 3, 5, 'a'];
var res = arr.find(function (item, index, arr) {
return item === 13;
// return index === 3;
});
console.log('res: ', res);
/**
* findIndex: 在数组中查找符合条件的元素下标,如果符合条件,返回符合条件的第一个元素的下标.
* 如果没找到,返回-1
*
*/
console.log('find Index ---------');
var arr = [1, 3, 4, 'a', 3, 5, 'a'];
var res = arr.findIndex(function (item, index, arr) {
return item === 13;
// return index === 3;
});
console.log('res: ', res);
/**
* some :
* 返回:返回一个布尔值,但凡有一个符合条件的 true
* 全都不符合条件,返回false
*/
console.log('some --------');
var arr = [9, 10, 12, 15, 19];
var res = arr.some(function (item, index, arr) {
return item < 8;
})
console.log('res: ', res);
/**
* every
* 返回值:也是布尔值
* 1. 全都符合条件返回true
* 2. 但凡有一个不符合的,返回false
*
*/
console.log('every --------');
var arr = [9, 10, 12, 15, 19];
var res = arr.every(function (item, index, arr) {
return item > 18;
})
console.log('res: ', res);
3-2-3. 其他特殊方法
concat、slice、includes、indexOf、join
-
concat
/** * concat[合并]: * 作用:合并多个数组为一个新数组 * 返回值:合并后的新数组 * * 改变原数组么?原数组不改变 * * 特殊应用:克隆[复制]一个新数组 * */ var arr1 = [1,2,3]; var arr2 = [4,5,6]; var arr3 = [7,8,9]; var res = arr1.concat(arr2); console.log(res,arr1,arr2); var res2 = arr1.concat(arr2,arr3); console.log(res2, arr1, arr2, arr3); // 复制一个数组 var arr = ['a','b','c']; var newArr = arr.concat([]);// 复制一个元素一模一样的数组,但不是一个数组 console.log(arr,newArr); arr[0] = 'aaaa'; console.log(arr,newArr); console.log(arr === newArr);
-
slice
/*** * slice: 切片 * * 语法: slice(startIndex, endIndex); [startIndex, endIndex) * startIndex、endIndex 取值也可以是 负数 * 作用:根据开始和结束索引窃取数组中的一段 * 返回值:截取后的数组 * * * 特殊用法:复制一个元素一样的数组 * */ // 0 1 2 3 4 var arr = [1,2,3,4,5]; var res = arr.slice(0); console.log(res,arr, res === arr); var res = arr.slice(1,4) console.log(res, arr); var res = arr.slice(-3,-1); console.log(res, arr); var res = arr.slice(0, -1); console.log(res, arr)
-
includes
判断一个元素是否在数组中,返回布尔值
/** * includes: * 0. 语法:arr.includes(元素) * 1. 作用:检查一个元素是否在数组中 * 2. 返回值:boolean */ var arr = ['a','1','b',5,3]; console.log(arr.includes(6),arr.includes('a')); // 使用includes进行去重 var arr = [1,5,3,2,1,5,3,7,2]; var newArr = []; for(var i = 0; i < arr.length; i++){ if(!newArr.includes(arr[i])){ newArr.push(arr[i]); }else{ continue; } } console.log(newArr);
-
join
数组的join方法常与字符串的split方法配合使用
/** * join[链接]: * 作用:使用字符串-链接数组中的每一个元素 * 参数:链接元素的符号 * 返回值:链接后的字符串 * * * 数组的join方法,经常和字符串的 split方法配合使用 * split[拆分]: * * str.split('-') * * 作用:将字符串按符号拆分成数组 * 返回值:拆分后的数组 * */ var arr = ['迪丽热巴','古力娜扎','热依扎','佟丽娅']; var res = arr.join('-'); console.log(res); var str = '1,2,3,4,5'; var res = str.split(','); //['1', '2', '3', '4', '5'] console.log(res); /*** * 面试题: * 将字符串 1-2-3-4-5,变为 5-4-3-2-1 * * */ var str = '1-2-3-4-5'; var res = str.split('-');// ['1','2','3','4','5'] res.reverse();// res ['5','4','3','2','1'] var str2 = res.join('-'); console.log(str2); // 优化版 var str = '1-2-3-4-5'; var str2 = str.split('-').reverse().join('-'); console.log(str2); /*** * split 特殊用法 * * str = '12345' * * 将每一个字符串的字符都当做数组中的一个元素,按空字符串('')拆分即可 */ var arr = '12345'.split(''); console.log(arr); var str = '12345'; var str2 = str.split('').reverse().join('') console.log(str2);
-
indexOf
作用:判断一个元素在数组中的索引位置,如果存在返回元素的索引,如果不存在返回-1
注意:
indexOf和 includes都可以判断一个元素是否存在于数组中,区别在于
includes直接返回布尔值,兼容性差,是ES7的语法
indexOf 返回的是索引,兼容性好
/*** * indexOf: * 0. 语法: var index = arr.indexOf(元素) * 1. 作用:判断一个元素是否在数组中,如果在,返回元素的首次出现的索引位置 * 如果不在,返回-1 * 2. 返回值:number 索引值 要么是 -1 */ var arr = ['a','b','a',1,3,2]; console.log(arr.indexOf('a')); //0 ==> boolean ==> fasle 索引不能直接用indexOf的返回值作为元素是否在数组的判断依据 console.log(arr.includes('a')); // 返回布尔值 true console.log(arr.indexOf('z'));// 元素不在数组中返回 -1 ,可以使用返回值是不是-1 作为元素是否在数组的判断依据 if(arr.indexOf('a') !== -1){ console.log('a在arr数组中') } var arr = [1,2,4,23,1,32,2,4]; var newArr = [] for(var i = 0; i < arr.length; i++){ if(newArr.indexOf(arr[i]) !== -1){ continue; }else{ newArr.push(arr[i]); } } console.log(newArr);