数组

数组中的元素可以是任意的数据类型,也可以是对象

创建数组

方法一：

let arr = new Array();
let arr = new Array(20); //指定数组长度,.length获取数组长度
let arr = new Array("swk", 12, true); //指定数组内容

方法二:

let arr = []; //创建空数组
let arr = ["swk", 12, true]; //创建三个元素的数组

索引

数组使用数字作为索引操作元素

索引:

从 0 开始
修改 length 属性
- 如果修改的 length 大于原长度,多出部分空出来
- 如果修改的 length 小于原长度,从数组末尾删除

let arr = new Array();
arr[0] = 0;
arr[1] = 1;
arr[2] = 2;
arr[3] = 3;
console.log(arr); //[ 0, 1, 2, 3 ]
arr.length = 3;
console.log(arr); //[0,1,2]

数组的存储性能比普通对象要好,开发中经常使用数组存储数据
读取不存在的元素返回 undefined

let arr = new Array();
arr[0] = "zbj";
arr[1] = 10; //添加
console.log(arr[0]); //获取
console.log(arr[2]); //undefined

尽量不要创建非连续的数组

数组空位

使用数组字面量初始化数组时可以使用一串对象来创建空位

let arr = [, , , , , ,];
console.log(arr.length); //6
for (let i of arr) {
  console.log(i); //undefined undefined .....

尽量别用

数组检测

instanceof

let arr = [];
console.log(arr instanceof Array); //true

Array.isArray()

console.log(Array.isArray(arr));

迭代器方法

let arr = ["swk", "bar", 19, false];
let arrKeys = Array.from(arr.keys());
let arrValues = Array.from(arr.values());
let arrEntries = Array.from(arr.entries());
console.log(arrKeys); //[ 0, 1, 2, 3 ]
console.log(arrValues); //[ 'swk', 'bar', 19, false ]
console.log(arrEntries); //[ [ 0, 'swk' ], [ 1, 'bar' ], [ 2, 19 ], [ 3, false ] ]

不使用 Array.from()返回的是 object,使用 Array.from()将类数组结构转换为数组实例

栈方法

push 添加用来向数组的末尾添加一个或多个元素，并返回数组新的长度
```
let arr = ["swk", "zbj", 19, false];
arr.push("zhen", "jin");
console.log(arr);
```
pop 删除
- 删除数组的最后一个元素,并返回删除的元素

let arr = ["swk", "zbj", 19, false];
arr.pop(); //删除false
console.log(arr);

队列方法

unshift()
- 向数组前面添加一个或多个元素,返回数组长度
- 向前面插入元素后,其它元素的索引依次调整

let arr = ["swk", "zbj", 19, false];
let res = arr.unshift("zhen", "jin");
console.log(res); //6

shift()

删除数组的第一个元素,并返回第一个元素

let arr = ["swk", "zbj", 19, false];
let res = arr.shift();
console.log(res); //swk

迭代方法

for 循环

let arr = ["zhen", "jin", 18, true, { name: "zhen" }];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

forEach()
- 需要一个函数作为参数
- 数组中有几个元素函数执行几次,浏览器会将遍历的元素以实参的形式传递进来,我们可以定义形参来读取这些内容
- 浏览器会在回调函数中传递三个参数
  - 第一个参数:当前正在遍历的元素
  - 第二个参数:当前正在遍历的元素索引
  - 第三个参数:正在遍历的数组

let arr = ["zhen", "jin", 18, true, { name: "zhen" }];

arr.forEach((item, index, array) => {
  //console.log(item);  //zhen jin 18 true object
  // console.log(index); //0 1 2 3 4
  console.log(array); //打印五次[ 'zhen', 'jin', 18, true, { name: 'zhen' } ]
});

没有返回值

map()

这个数组的每一项都是对原始数组中同样位置的元素运行传入函数而返回的结果
返回一个新的数组

let color = ["red", "green", "yellow"];
let newColor = color.map((item, index, array) => item);
console.log(newColor);

let number = [1, 2, 3, 4];
let newNumber = number.map((item) => item * 2);

console.log(newNumber); //[ 2, 4, 6, 8 ]

操作方法

slice() 语法:slice(start,end)
- 可以用来从数组中提取指定元素
- 不影响原数组,将截取到的元素提取到一个新数组保存
- 左闭右开式的截取
- 第二个参数可以省略不写,返回该索引到数组末尾的元素
- 参数有负值,数值长度+这个负值确定位置
  - -1 表示倒数第一个

let arr = ["zhen", "jin", 18, true, { name: "zhen" }];
console.log(arr); //[ 'zhen', 'jin', 18, true, { name: 'zhen' } ]
console.log(arr.slice(0, 2)); //[ 'zhen', 'jin' ]
console.log(arr.slice(-1)); //object

splice()

可以用于删除数组中的指定元素
使用 splice()会影响到元素组,会将指定元素从元素组删除并返回
参数
- 第一个参数:开始位置的索引
- 第二个参数:删除的个数
- 第三个参数:插入的元素,可以插入多个元素

let arr = ["zhen", "jin", 18, true, { name: "zhen" }];

console.log(arr.splice(0, 1)); //zhen
console.log(arr); // ["jin", 18, true, { name: "zhen" }];

console.log(arr.splice(0, 1, "test")); //jin
console.log(arr); //[ 'test', 18, true, { name: 'zhen' } ]

concat()
- 在现有数组全部元素的基础上创建一个新数组
- 原生数组褒词不变
- 数组扁平化

let color = ["red", "green", "yellow"];
let color2 = color.concat("yellow", ["black", "brown"]);
console.log(color); //[ 'red', 'green', 'yellow' ]
console.log(color2); //[ 'red', 'green', 'yellow', 'yellow', 'black', 'brown' ]

join()
- 该方法可以将数组抓换为字符串
- 不会对元素组产生影响,而是将转换后的字符串输出

let arr = ["swk", "zbj", "test"];
let res = arr.join();
console.log(res); //swk,zbj,test
let res1 = arr.join("-"); //可以指定连接符
console.log(res1); //swk-zbj-test

搜索和位置方法

indexOf()
- 参数:
  - 第一个参数:要查找的元素
  - 第二个可选:起始搜索位置
- 从数组第一项开始向后搜索,返回找到的第一个匹配的索引
- 没有找到返回-1

let arr = [1, 2, 3, 2, 2, 1, 3, 2, 5];

console.log(arr.indexOf(2)); //1
console.log(arr.indexOf(-2)); //-1
console.log(arr.indexOf(2, 2)); //3

lastIndexOf()
- 参数:
  - 第一个参数:要查找的元素
  - 第二个可选:起始搜索位置
- 从数组最后一项开始向后搜索,返回找到的第一个匹配的索引
- 没有找到返回-1

let arr = [1, 2, 3, 2, 2, 1, 3, 2, 5];
console.log(arr.lastIndexOf(2)); //7
console.log(arr.lastIndexOf(2, 6)); //4

includes()

找到返回 true,没找到返回 false
从数组的第一项开始寻找

console.log(arr.includes(2)); //true
console.log(arr.includes(-2)); //false

排序方法

reverse()

反转数组,前面的去后面,后面的去前面
直接修改原数组

let arr = ["swk", "zbj", "test"];
console.log(arr); //[ 'swk', 'zbj', 'test' ]
console.log(arr.reverse()); //[ 'test', 'zbj', 'swk' ]
console.log(arr); //[ 'test', 'zbj', 'swk' ]

sort()
- 可以对数组的元素进行排序
- 也会影响原数组,默认使用 Unicode 编码进行排序
- 对数字进行排序,也是按照 Unicode 编码排序,可能会有错

let num = [2, 4, 7, 4, 11];
console.log(num.sort()); //[ 11, 2, 4, 4, 7 ]

可以自己指定排序规则,在 sort()添加一个回调函数指定排序规则
浏览器根据回调函数的返回值决定元素的顺序
- 如果返回一个大于 0 的值,则调换位置
- 如果返回一个小于 0 的值,则位置不变
- 如果返回一个等于 0 的值,则位置不变

let num = [2, 4, 7, 11];
let sortNum = num.sort(function (a, b) {
  // if (a > b) {
  //     return 1;
  // } else if (a < b) {
  //     return -1;
  // } else {
  //     return 0;
  // }
  return a - b; //升序
  return b - a; //降序
});
console.log(sortNum); //[ 2, 4, 7, 11 ]

JavaScript 数组基础础础础础础

数组

创建数组

索引

数组空位

数组检测

迭代器方法

栈方法

队列方法

迭代方法

操作方法

搜索和位置方法

排序方法