60-70JS数组(遍历,解构,赋值)
2019-05-05 本文已影响2人
饥人谷_island
1.什么是数组?
数组就是专门用于存储一组数据的
注意点: 和我们前面学习的Number/String/Boolean/Null/undefined不同(基本数据类型)
而我们今天学习的数组(Array)不是基本数据类型, 是引用数据类型(对象类型)
2.如何创建一个数组?
let 变量名称 = new Array(size);
3.如何操作数据
3.1如何往数组中存储数据
变量名称[索引号] = 需要存储的数据;
3.2如何从数组中获取存储的数据
变量名称[索引号];
*/
/*
// 需求: 要求定义变量保存一个人的姓名
// 需求: 要求定义变量保存一个班级所有人的姓名
let name1 = "lnj";
let name2 = "ls";
let name3 = "ww";
*/
let arr = new Array(3);
console.log(arr);
arr[0] = "lnj";
arr[1] = "zs";
console.log(arr);
console.log(arr[0]);
// 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);
let arr = ["lnj", "zs", "ls", "ww"];
console.log(arr);
1.什么是数组的遍历
数组的遍历就是依次取出数组中存储的所有数据, 我们就称之为数组的遍历
*/
let arr = ["a", "b", "c"];
// console.log(arr[0]);
// console.log(arr[1]);
// console.log(arr[2]);
arr[3] = "d";
arr[4] = "f";
// console.log(arr.length);
for(let i = 0; i < arr.length; i++){
console.log(arr[i]);
}
1.什么是数组的解构赋值?
解构赋值是ES6中新增的一种赋值方式
2.数组解构赋值的注意点
*/
let arr = [1, 3, 5];
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
let [a, b, c] = arr;
console.log("a = " + a);
console.log("b = " + b);
console.log("c = " + c);
2.1在数组的解构赋值中, 等号左边的格式必须和等号右边的格式一模一样, 才能完全解构
// let [a, b, c] = [1, 3, 5];
// let [a, b, c] = [1, 3, [2, 4]];
let [a, b, [c, d]] = [1, 3, [2, 4]];
console.log("a = " + a);
console.log("b = " + b);
console.log("c = " + c);
console.log("d = " + d);
*/
2.2在数组的解构赋值中, 左边的个数可以和右边的个数不一样
/*
let [a, b] = [1, 3, 5];
console.log("a = " + a);
console.log("b = " + b);
*/
2.3在数组的解构赋值中, 右边的个数可以和左边的个数不一样
/*
let [a, b, c] = [1];
console.log("a = " + a);
console.log("b = " + b);
console.log("c = " + c);
*/
2.4在数组的解构赋值中,如果右边的个数和左边的个数不一样, 那么我们可以给左边指定默认值
/*
let [a, b = 666, c = 888] = [1];
console.log("a = " + a);
console.log("b = " + b);
console.log("c = " + c);
*/
2.5在数组的解构赋值中, 如果左边的个数和右边的个数不一样, 那么如果设置默认值会被覆盖
/*
let [a, b = 666] = [1, 3, 5];
console.log("a = " + a);
console.log("b = " + b);
*/
2.6在数组的解构赋值中, 还可以使用ES6中新增的扩展运算符来打包剩余的数据
// 2.7在数组的解构赋值中, 如果使用了扩展运算符, 那么扩展运算符只能写在最后
// ES6中新增的扩展运算符: ...
// let [a, b] = [1, 3, 5];
// let [a, ...b] = [1, 3, 5];
let [a, ...b] = [1, 3, 5];
console.log("a = " + a);
console.log(b);
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);
let a;
a = [1 ,3 , 5];
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();
// console.log(str);
// console.log(typeof str);
3.如何将数组转换成指定格式字符串
join方法默认情况下如果没有传递参数, 就是调用toString();
join方法如果传递了参数, 就会将传递的参数作为元素和元素的连接符号
// let str = arr.join("+");
// console.log(str);
// console.log(typeof str);
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);
// let res = arr.includes(8);
let res = arr.includes(4);
console.log(res);
1.已知数组[3, 5, -2, 7, 4], 获取数组中的最大值并打印
let arr = [3, 5, -2, 7, 4];
let max = arr[0];
for(let i = 1; i < arr.length; i++){
if(arr[i] > max){
max = arr[i];
}
}
console.log(max);
2.要求用户输入3个0~9的数, 输出0~9中哪些用户没有输入过
* 输入的格式x,y,z
* */
let str = prompt("请输入三个整数, 用逗号隔开");
// console.log(str); // 1,3,5
// 字符串的split方法可以根据传入的参数切割字符串, 转换成一个数组之后返回给我们
let arr = str.split(",");
// console.log(arr);
/*
for(let i = 0; i < 10; i++){
if(arr[0] == i || arr[1] == i || arr[2] == i){
continue;
}
console.log(i);
}
*/
// 0 1 2 3 4 5 6
// [undefined, 666, undefined, 666, undefined, 666, undefined, undefined, undefined, undefined]
let res = new Array(10);
for(let i = 0; i < arr.length; i++){
let str = arr[i];
// console.log(str);
res[str] = 666;
}
// console.log(res);
for(let i = 0; i < res.length; i++){
if(res[i] === 666){
continue;
}
console.log(i);
}
2. 从接盘接收5个0~9的数字, 排序后输出
* 输入的格式x,y,z,...
* 2, 6, 3, 8, 1
* 2, 6, 3, 8, 3 --> 2,3,3,6,8
* */
// 0 1 2 3 4 5 6 7 8 9
// [u, 6, 6, 6, u, u, 6, u, 6, u]
// [u, u, 1, 2, u, u, 1, u, 1, u]
// [0, 0, 1, 2, 0, 0, 1, 0, 1, 0]
let str = prompt("请输入五个整数, 用逗号隔开");
let arr = str.split(",");
let res = new Array(10);
// 数组的fill方法的作用: 设置数组中所有元素的值为指定的数据
res.fill(0);
// [2, 6, 3, 8, 3]
for(let i = 0; i < arr.length; i++){
let str = arr[i]; // 2 6 3 8 3
// res[str] = 6;
res[str] = res[str] + 1;
}
for(let i = 0; i < res.length; i++){
// if(res[i] === 6){
// console.log(i);
// }
for(let j = 0; j < res[i]; j++){
// console.log(i);
document.write(i);
document.write("<br>");
}
}
2.从接盘接收4个数字, 排序后输出
* 4, 3, -5, 1
* */
let str = prompt("请输入五个整数, 用逗号隔开");
let arr = str.split(",");
console.log(arr);
/*
for(let i = 0; i < 3; i++){
for(let j = i; j < 3; j++){
// document.write("*");
// console.log(i, j + 1);
if(arr[i] > arr[j + 1]){
let temp = arr[i];
arr[i] = arr[j + 1];
arr[j + 1] = temp;
}
}
// document.write("<br>");
}
*/
for(let i = 0; i < 3; i++) {
for (let j = 0; j < 3 - i; j++) {
// document.write("*");
// console.log(j, j + 1);
if(arr[j] > arr[j + 1]){
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
// document.write("<br>");
}
console.log(arr);
1.什么是二维数组?
二维数组就是数组的每一个元素又是一个数组, 我们就称之为二维数组
2.如何操作二维数组?
2.1如何从二维数组中获取数据
数组名称[二维数组索引]; 得到一个一维数组
数组名称[二维数组索引][一维数组索引]; 得到一维数组中的元素
2.2如何往二维数组中存储数据
数组名称[二维数组索引] = 一维数组;
数组名称[二维数组索引][一维数组索引] = 值;
*/
// let arr = [1, 3, 5]; // 一维数组
// let arr = [[1, 3], [2, 4]]; // 二维数组
/*
let arr = [[1, 3], [2, 4]];
// let arr1 = arr[0];
// console.log(arr1);
let ele = arr[0][1];
console.log(ele);
*/
/*
// 注意点: 在定义二维数组的时候, 将来需要存储多少个一维数组, 就写上多少个[]即可
let arr = [[],[]];
// arr[0] = [1, 3];
arr[1][0] = 2;
console.log(arr);
*/
let arr = [[1, 3], [2, 4]];
for(let i = 0; i < arr.length; i++){
let subArray = arr[i];
// console.log(subArray);
for(let j = 0; j < subArray.length; j++){
console.log(subArray[j]);
}
}
