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);
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
