JavaScript-7数组

数组注意点

1. 和其它编程语言不同, 如果数组对应的索引中没有存储数据, 默认存储的就是undefined,其它编程语言中默认保存的是垃圾数据或者0

let arr = new Array(3);      //数组里有3个元素，都为undefined
console.log(arr[0]);  //undefined
console.log(arr[1]);  //undefined
console.log(arr[2]); //undefined

2. 和其它编程语言不同, JavaScript中访问了数组中不存在的索引不会报错, 会返回undefined,其它编程语言一旦超出索引范围就会报错或者返回脏数据

let arr = new Array(3);  // 0 1 2
console.log(arr[666]);  打印的是undefined

3. 和其它编程语言不同, 当JavaScript中数组的存储空间不够时数组会自动扩容，其它编程语言中数组的大小是固定的

let arr = new Array(3);
arr[0] = "lnj";
arr[1] = "lnj";
arr[2] = "lnj";
arr[3] = "it666";
console.log(arr[666]);  打印的是4个元素

4. 和其它编程语言不同, JavaScript的数组可以存储不同类型数据，在其它编程语言中数组只能存储相同类型数据(要么全部都是字符串, 要么全部都是数值等)

let arr = new Array(4);
arr[0]= 123;
arr[1]= "456";
arr[2]= false;
arr[3]= undefined;
arr[4]= null;
console.log(arr);

输出：
0: 123
1: "456"
2: false
3: undefined
4: null

5. 和其它编程语言不同, JavaScript中数组分配的存储空间不一定是连续的

• 其它语言数组分配的存储空间都是连续的, JavaScript数组是采用"哈希映射"方式分配存储空间
• 什么是哈希映射? 好比字典可以通过偏旁部首找到对应汉字, 我们可以通过索引找到对应空间
• 在浏览器中各大浏览器也对数组分配存储空间进行了优化
• 如果存储的都是相同类型的数据, 那么会尽量分配连续的存储空间
• 如果存储的不是相同的数据类型, 那么就不会分配连续的存储空间

6. 创建数组的其他方式

6.1通过构造函数创建数组
let 变量名称 = new Array(size); 创建一个指定大小数组
let 变量名称 = new Array();     创建一个空数组
let 变量名称 = new Array(data1, data2, ...);     创建一个带数据的数组
6.2通过字面量创建数组
let 变量名称 = [];  创建一个空数组
let 变量名称 = [data1, data2, ...];  创建一个空数组

JavaScript数组解构赋值

1. 什么是数组的解构赋值?
   解构赋值是ES6中新增的一种赋值方式

let arr = [1, 3, 5];
let a = arr[0];        // 1
let b = arr[1];        // 3
let c = arr[2];        // 5

2. 数组解构赋值的注意点

• 在数组的解构赋值中, 等号左边的格式必须和等号右边的格式一模一样, 才能完全解构

let [a, b, c] = [1, 3, 5];
console.log("a = " + a);    1
console.log("b = " + b);    3
console.log("c = " + c);    5

• 在数组的解构赋值中, 左边的个数可以和右边的个数不一样

let [a, b] = [1, 3, 5];
console.log("a = " + a);   1
console.log("b = " + b);   3

能拿到a和b的值

• 在数组的解构赋值中, 右边的个数可以和左边的个数不一样，个数不对等的，解析出来为undefined

let [a, b, c] = [1];      右边只有1个，那么对于的a的值，b和c都没有对应的值
console.log("a = " + a);    1
console.log("b = " + b);    undefined
console.log("c = " + c);    undefined

• 在数组的解构赋值中,如果右边的个数和左边的个数不一样, 那么我们可以给左边指定默认值(b=666，这么写，666的就是b的默认值)

let [a, b = 666, c = 888] = [1];
console.log("a = " + a);    1
console.log("b = " + b);    666
console.log("c = " + c);    888

• 在数组的解构赋值中, 如果左边的个数和右边的个数不一样, 那么如果设置默认值会被覆盖

let [a, b = 666] = [1, 3, 5];
console.log("a = " + a);   输出   1
console.log("b = " + b);   输出   3

• 在数组的解构赋值中, 还可以使用ES6中新增的扩展运算符来打包剩余的数据，ES6中新增的扩展运算符: ...

let [a, b] = [1, 3, 5];
这样写，默认的把右边的5给拉下了，现在要求b把剩下的值都输出。
let [a,...b] = [1,3,5];
console.log("a = " + a);   输出   1
console.log(b);   输出   [3,5]  输出格式为一个数组，数组里面2个元素，分别为3，5

• 在数组的解构赋值中, 如果使用了扩展运算符, 那么扩展运算符只能写在最后

数组的增删改查

方法	描述
concat()	连接两个或更多的数组，并返回结果。
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值

注意点

1. 数组不能够使用加号进行拼接, 如果使用加号进行拼接会先转换成字符串再拼接

let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
let res = arr1 + arr2;
let res = arr1.concat(arr2);
console.log(res);  1,3,52,4,6
console.log(typeof res);    string

2. concat拼接数组时，不会影响原有的数组，会返回一个新的数组

数组函数

1. concat 将两个数组拼接为一个数组

• 拼接数组时，不会影响原有的数组，会返回一个新的数组

let arr = ["a", "b", "c"];
let res = arr.concat([1,2])
console.log(res);      输出["a", "b", "c", 1, 2]

2. join 将数组转换成指定格式字符串

• join方法默认情况下如果没有传递参数, 就是调用toString();
• join方法如果传递了参数, 就会将传递的参数作为元素和元素的连接符号

let arr = ["a", "b", "c"];
let res = arr.concat(',')
console.log(res);      输出a,b,c

3. pop

let arr = ["a", "b", "c"];
let res = arr.pop()
console.log(res);      输出c
console.log(arr);      输出a、b

4. push

let arr = ["a", "b", "c"];
let res = arr.push('1','2')
console.log(res);      输出5
console.log(arr);      输出["a", "b", "c", "d", "e"]

5. splice

• splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
• 这个函数，howmany为0或者小于0，是不会删除元素，大于0，就是要删除元素的个数了
• 不传item项，从索引处开始，删除howmany个元素，返回数组的length
• 传item项，先从索引处开始，删除howmany个元素，然后再把所有的item项从索引处开始插入

arrayObject.splice(index,howmany,item1,.....,itemX)
index:必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany:必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX:可选。向数组添加的新项目。

let arr = ["a", "b", "c"];
//从index为1开始，0个元素，元素为1,2,3
arr.splice(1, 0,1,2,3);
console.log(res);      输出5，为数组的长度
console.log(arr);      输出 ["a", 1, 2, 3, "b", "c"]


//从index为1开始，1个元素，元素为1,2,3      删除原来数组中index从1开始，元素个数为1个，再从index为1开始，添加元素1,2,3
arr.splice(1, 1,1,2,3);   
console.log(res);      输出5，为数组的长度
console.log(arr);      输出["a", 1, 2, 3, "c"]

6. 清空数组

• 三种

let arr = [1, 2, 3, 4, 5];   
arr = [];                        第一种
arr.length = 0;                  第二种
arr.splice(0, arr.length)        第三种

7. 如何将数组转换为字符串

let arr = [1, 2, 3, 4, 5];
let str = arr.toString();
console.log(str);     1, 2, 3, 4, 5   
console.log(typeof str);    string

8. 生成一个新的数组-方式2，不是concat

• ...arr1，三个点，扩展运算符
• 不会修改原有的数组, 会生成一个新的数组返回给我们

let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
let res = [...arr1, ...arr2]; 相当于 let res = [1, 3, 5, 2, 4, 6]; ...arr1,就相当于把arr1数组里面的元素都拿出来，然后放到新的数组里面
console.log(res);                [1, 3, 5, 2, 4, 6]
console.log(typeof res);      object

扩展运算符在解构赋值中(等号的左边)表示将剩余的数据打包成一个新的数组，扩展运算符在等号右边, 那么表示将数组中所有的数据解开, 放到所在的位置

let [a,b,...c] = [1,2,3,4]
console.log(c);        [3,4]

let arr1 = [1, 3, 5];
let arr2 = [2, 4, 6];
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

9. reverse 如何对数组中的内容进行反转

• 会修改原有的数组

let arr1 = [1, 3, 5];
let res = arr.reverse();
console.log(res);    [5, 3, 1];
console.log(arr);     [5, 3, 1];

10. slice 截取数组中指定范围内容

• slice方法是包头不包尾(包含起始位置, 不包含结束的位置)

let arr = [1, 2, 3, 4, 5];
let res = arr.slice(1, 3)
console.log(res);     输出     [2,3]
console.log(arr);     输出  [1, 2, 3, 4, 5];

11. indexOf查找元素在数组中的位置,2个参数(searchElement,fromIndex),参数1: 需要查找的元素,参数2: 从什么位置开始查找

• indexOf方法如果找到了指定的元素, 就会返回元素对应的位置
• indexOf方法如果没有找到指定的元素, 就会返回-1
• indexOf方法默认是从左至右的查找, 一旦找到就会立即停止查找

let arr = [1, 2, 3, 4, 5, 3];
let res = arr.indexOf(3);
console.log(res);       2

let res = arr.indexOf(6);
console.log(res);       -1

12. 如果一个数组里出现2个相同的元素，查找后面的那个元素的索引
    12.1 方式1，indexOf

let arr = [1, 2, 3, 4, 5, 3];
//参数1: 需要查找的元素
//参数2: 从什么位置开始查找
let res = arr.indexOf(3, 4);
console.log(res);        输出    5

12.2 方式2，lastIndexOf

• 2个参数(searchElement,fromIndex),参数1: 需要查找的元素,参数2: 从什么位置开始查找
• lastIndexOf方法默认是从右至左的查找, 一旦找到就会立即停止查找
• 如果要检索的字符串值没有出现，则该方法返回 -1。
• 该方法将从尾到头地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的结尾（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一个字符在 stringObject 中的位置。stringObject 中的字符位置是从 0 开始的。

let arr = [1, 2, 3, 4, 5, 3];
let res = arr.lastIndexOf(3);
console.log(res);        输出    5


let res = arr.lastIndexOf(3, 4);      查找3，从索引为4的位置开始
console.log(res);        输出    2  ，因为是从右往左查找，从4的位置作为开始，开始检索，这时候5的索引就为1了，那么3的位置就为2了

13. 如何判断数组中是否包含某个元素

• 我们可以通过indexOf和lastIndexOf的结果, 判断是否是-1即可

let arr = [1, 2, 3, 4, 5];
let res = arr.indexOf(8);
let res = arr.lastIndexOf(8);

上面2个都是-1

• includes includes() 方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false。

string.includes(searchvalue, start)

searchvalue:必需，要查找的字符串。
start:可选，设置从那个位置开始查找，默认为 0。

let arr = [1, 2, 3, 4, 5];
let res = arr.includes(8); 
console.log(res);        输出    false


let res = arr.includes(4); 
console.log(res);        输出    true

13. fill() 把数组里面所有元素都设置成一个值

let arr = [1, 2, 3, 4, 5];
let res = arr.fill(8); 
console.log(res);        输出    都是8的数组

JavaScript二维数组

1. 什么是二维数组?

• 二维数组就是数组的每一个元素又是一个数组, 我们就称之为二维数组

2. 如何操作二维数组?
   2.1 如何从二维数组中获取数据
   数组名称[二维数组索引]; 得到一个一维数组
   数组名称[二维数组索引][一维数组索引]; 得到一维数组中的元素
   2.2 如何往二维数组中存储数据
   数组名称[二维数组索引] = 一维数组;
   数组名称[二维数组索引][一维数组索引] = 值;

在定义二维数组的时候, 将来需要存储多少个一维数组, 就写上多少个[]即可

let arr = [[1,2,3],[2,3,4]];
let a = arr[0]