JavaScript array (Array)

1. What is an array

• Used to store multiple values ​​in a single variable, and can be of any data type

2. How to declare an array

(1) let statement

	<script>
		let arr = [];  //[]表示声明的是一个数组，arr是数组名称
	</script>

(2) var declaration

	<script>
		var arr = [];  //[]表示声明的是一个数组，arr是数组名称
	</script>

(3) Array declaration example

① Declare an empty array

	<script>
		let arr = [];	//字面量创建
		let arr = new Array();	//new 关键字创建
	</script>

② Declare array and assign value

	<script>
		let arr = [1,2,3,'name','age'];		//字面量创建
		let arr = new Array(1,2,3);		//new 关键字创建
	</script>

③ Declare an array and assign a single value

	<script>
		let arr = [5];		//字面量创建
		let arr = new Array(5); 	//new 关键字创建
	</script>

Summarize

• The length of the array can be changed
• The data stored in the data, called array elements
• The difference between creating an array with a literal value and creating an array with the new keyword:

① When there is only one number in the new Array, it indicates the length of the array, and each value is empty;
② Example: let arr = new Array(5); //Here is to create an empty array, and the length of the array is 5, and all values Is empty;

3. The way of array operation

(1) Get the length of the array

① Syntax format:

	数组名.length;

② Example:

	<script>
		let arr = ['name','age','sex'];
		console.log(arr.length);
	</script>

③ Operation effect

(2) Get array elements

① Syntax format:

	//数组元素是通过索引来获取的，索引从0开始，索引为0，表示数组第一个元素，一次类推
	数组名[索引];

② Example:

	<script>
		let arr = ['name','age','sex'];
		console.log(arr[0]);	//输出数组第一个元素
		console.log(arr[1]);	//输出数组第二个元素
		console.log(arr[2]);	//输出数组最后一个元素
	</script>

③ Operation effect

(3) push/unshift: add

1) push: add at the end of the array

① Syntax format:

	数组名.push(value)	//添加单个值
	数组名.push(value1，value2)	//添加多个值

② Example:

	//添加单个值
	<script>
		let arr = ['name','age','sex'];
		arr.push('height');
		console.log(arr);
	</script>

running result

	//添加多个值
	<script>
		let arr = ['name','age','sex'];
		arr.push('year','month','days');
		console.log(arr);
	</script>

running result

2) unshift: add at the beginning of the array

① Syntax format:

	数组名.unshift(value);	//添加单个值
	数组名.unshift(value1,value2);	//添加多个值

② Example:

	//添加单个值
	<script>
		let arr = ['name','age','sex'];
		arr.unshift('height');
		console.log(arr);
	</script>

running result

	//添加多个值
	<script>
		let arr = ['name','age','sex'];
		arr.unshift('year','month','days');
		console.log(arr);
	</script>

running result

(4) pop/shift: delete

1) pop: delete the last element of the array

① Syntax format:

	数组名.pop();

② Example:

	<script>
		let arr = ['name','age','sex','height'];
		arr.pop();
		console.log(arr);
	</script>

③ Operation effect

2) shift: delete the first element of the array

① Syntax format:

	数组名.shift();

② Example:

	<script>
		let arr = ['name','age','sex','height'];
		arr.shift();
		console.log(arr);
	</script>

③ Operation effect

(5) splice: delete/add/replace

① Syntax format:

	//删除
	数组名.splice(索引,删除长度);
	
	//新增
	数组名.splice(索引,删除长度为0,要添加的元素);   //可以添加一个值，也可以添加多个值

	//替换
	数组名.splice(索引,删除长度,要添加的元素);

② Example:

	//删除
	<script>
		let arr = [1,2,3,4,5,6];
		arr.splice(3,2);   //从索引3开始，删除长度为2
		console.log(arr);
	</script>

running result

	//添加
	<script>
		let arr = [1,2,3,4,5,6];
		arr.splice(2,0,'name','age','sex');   //可以添加一个值，也可以添加多个值
		console.log(arr);
	</script>

running result

	//替换
	<script>
		let arr = [1,2,3,4,5,6,7,8];
		arr.splice(5,3,'name','sex','age');
		console.log(arr);
	</script>

running result

(6) concat: merge

① Syntax format:

	新的数组 = 原数组1.concat(原数组2);

② Example:

	<script>
		let arr1 = ['name','age','sex'];
		let arr2 = [1,2,3];
		newarr = arr1.concat(arr2);
		console.log(newarr);
	</script>

③ Operation effect

(7) slice: interception

describe

• The original array will not be changed, and the intercepted elements will be returned in the form of an array
• The elements of the start index will be truncated, and the elements of the end index will not be truncated

① Syntax format:

	数组名.slice(起始索引,结束索引);

② Example:

	<script>
		let arr = [1,2,3,4,5,6];
		console.log(arr.slice(2,5));
	</script>

③ Operation effect

(8) reverse: reverse order

describe

• will change the original array

① Syntax format:

	数组名.reverse();	

② Example:

	<script>
		let arr = [1,2,3,4,5,6];
		arr.reverse();
		console.log(arr);
	</script>

③ Operation effect

(9) sort: sort

describe

• will change the original array

① Syntax format:

	数组名.sort();

② Example:

	<script>
		let arr = [1,4,6,2,,7,3,8];
		arr.sort();
		console.log(arr);
	</script>

③ Operation effect

(10) join: connect

describe

• Concatenate the elements in the array into a string with the set delimiter, and return

① Syntax format:

	数组名.join('分隔符号');

② Example:

	<script>
		let arr = ['name','sex','age'];
		console.log(arr.join(":"));
	</script>

③ Operation effect

(11) indexOf: query index

Notice

• indexOf is a new item in the array in ES6

① Syntax format:

	数组名.indexOf(要查询的值);

② Example:

	<script>
		let arr = ['name','age','sex','height'];
		console.log(arr.indexOf('age'));
	</script>

③ Operation effect

(12) includes: Determine whether the value exists in the array

Notice

• includes is a new addition to the array in ES6

① Syntax format:

	数组名.includes(要判断的值);

② Example:

	<script>
		let arr = ['name','age','sex','height']
		console.log(arr.includes('height'));
	</script>

③ Operation effect

// Returns a Boolean value, true means existence, false means non-existence

(13) Ways to clear the array

1) set to an empty array

Notice

• Because let does not allow repeated declarations of variables with the same name, so here for demonstration, use var to declare

① Syntax format:

	let 数组名 = [];

② Example:

	//设置为空数组后
	<script>
		var arr = [1,2,3,4,5,6];
		var arr = [];
		console.log(arr);
	</script>

③ Operation effect

2) Set the array length to 0

① Syntax format:

	数组名.length = 0;

② Example:

	//设置数组长度后
	<script>
		let arr = [1,2,3,4,5,6];
		arr.length = 0;
		console.log(arr);
	</script>

③ Operation effect

3) Delete all array elements

① Syntax format:

	数组名.splice(索引从0开始,整个数组的长度);

② Example:

	<script>
		let arr = [1,2,3,4,5,6];
		arr.splice(0,arr.length);
		console.log(arr);
	</script>

③ Operation effect

(14) Other uses of length

1) Empty the array

• It has already been mentioned above, so I won’t go into details, please check: (13) Ways to clear the array

2) Increase the array length

① Syntax format:

	数组名.length = 要设置的长度;

② Example:

	<script>
		let arr = [1,2,3,4,5,6];
		arr.length = 20;
		console.log(arr.length);
		console.log(arr);
	</script>

③ Operation effect

3) Add array elements at the end of the array

① Syntax format:

	数组名[数组名.length] = 要添加的值;

② Example:

	<script>
		let arr = ['name','age','sex'];
		arr[arr.length] = 'height';
		console.log(arr);
	</script>

③ Operation effect

Notice

• When assigning a value to an array, when the index exceeds the existing length, the length of the array will be increased

For more JavaScript array learning, please refer to the official documentation:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array