JavaScript基础第五天

JavaScript 基础第五天

今天我们学习数组，以及数组的增删改查。

1. 数组

数组：(Array)是一种可以按顺序保存数据的数据类型。

1.1. 定义数组

可以使用 const 声明一个方括号**[ ]，或者使用new Array**创建数组。

const array = [1, 2, 4, 5];
const array2 = new Array(1, 4, 6, 7);
console.log(array);
console.log(array2);

1.2. 从字符串转数组

用 Array.from进行转换。

let str = "1,2,3,4,5,a,g,v";
let strArr = str.split(",");
console.log(strArr);

let str2 = "4545faf";
// Array.from将字符串转为数组，每个字符都是一个项
let strArr2 = Array.from(str2);
console.log(strArr2);

1.3. 从对象转数组

对象转数组两点局限性：

1. 下标必须为数字类型的字符串。

2. 必须含有length属性。

let obj = {
	0: 125,
	1: false,
	2: () => {
		console.log("你好");
	},
	length: 3,
};
let objArr = Array.from(obj);
console.log(objArr);

1.4. 数组的截取和拼接

使用slice截取，包左不包右，包头不包尾。

let arr = [1, 2, 43, 5, 67];
// slice 截取数组
let subArr = arr.slice(0, 3);
console.log(subArr); // 1 2 43

使用concat拼接。

let shortArr1 = [1, 2, 3];
let shortArr2 = [4, 5, 6];
// 扩展... 可以将数组展开 [4,5,6] ---->4,5,6
// concat 可以填入多个参数，也可以直接填入一个数组
let longArr = shortArr1.concat(...shortArr2);
console.log(longArr); //[1, 2, 3, 4, 5, 6]
let longArr2 = [...shortArr1, ...shortArr2];
console.log(longArr2); //[1, 2, 3, 4, 5, 6]

2. 数组的增删改查

2.1. 增加

push( ) 从尾部添加一个单元。

特点：

1. 可以添加一个值，也可以添加多个。
2. 不能去拼接数组。

let arr = [0, 1, 2, 3];
arr.push(4);
console.log(arr); //[0, 1, 2, 3, 4]

push不能去传入一个数组，需要将数组（用…来展开）展开，否则会将整个数组都放进去。

let arr = [0, 1, 2, 3];
arr.push(...[7, 8]);
console.log(arr); //[0, 1, 2, 3, 7, 8]

unshift( ) 从头部添加。

let arr2 = ["a", "b", "c"];
arr2.unshift("d");
console.log(arr2); //["d", "a", "b", "c"]

concat( ) 连接两个数组 (不改变原数组的内容)。

let arr = [1, 2, 3];
let c = [4, 5, 6];
let b = arr.concat(c);

console.log(arr); // [1,2,3]
console.log(b); // [1,2,3,4,5,6]

2.2. 删除

使用pop()来删除，跟 push 对应，pop从尾巴删除一个元素。

let arr = [1, 2, 3];
arr.pop();
console.log(arr); //[1, 2]

shift从头部删除，与 unshift 对应。

let arr = [1, 2, 3];
arr4.shift();
console.log(arr); // [2, 3]

splice(startIndex，长度) 动态删除任意单元，有两个参数，要删除的第一项的位置和要删除的数量。

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1); // 从索引值为2的位置开始删除1个单元
console.log(arr); // 输出 [1, 2, 4, 5]

2.3. 查询

获取值对应的下标	indexOf
判断数组是否包含某个值,返回boolean值	includes
截取数组中的某一段	slice(startIndex,endIndex)

arr[index] 查询对应下标的值

let array = ["a", "b", "c"];
let b = array[1];
console.log(b); //b

indexOf(value)查询对应值的下标

const index = array.indexOf("c");
console.log(index); //返回 2

includes(value) 判断数组是否包含某个值 。

let array = ["a", "b", "c"];
const isInArr1 = array.includes("b"); //返回true
const isInArr2 = array.includes("d"); //返回false
console.log(isInArr1, isInArr2);

slice(start,end) 截取，包左不包右，包头不包尾。

// slice(startIndex,endIndex) 截取 包含开始不含结束
// slice(startIndex) 截取从startIndex开始到后面的所有值
let arr = [1, 2, 3, 4];
console.log(arr.slice(1, 3)); // [2,3]
console.log(arr.slice(1)); // [2,3,4]

2.4. 修改

splice(startIndex，长度，元素...) 修改 先删除后插入

var a = [1, 2, 3, 4, 5];
a.splice(2, 1, 9);
console.log(a); // [1,2,9,4,5]