Detailed explanation of how to create an array in JavaScript

Detailed explanation of how to create an array in JavaScript

Creating Arrays in JavaScript

1. Create an array using new

var arr = new Array(); //Creates an empty array

2. Create arrays using array literals (more commonly used)

Literal: A method of expressing a fixed value

You can tell what data type it is at a glance, for example, 8 is a numeric type at a glance

//1. Create an array using array literals (square brackets) var arr = []; //Create an empty array var arr1 = [1,2,'student',true]; //The array can contain any type of data and must be separated by commas

3. What is an array element?

An array can store a group of data in a single variable. An array element is an element stored in an array, and there is no restriction on its type.

Using Arrays

1. Get array elements - use the index, which is the subscript. The subscript starts from 0 and is very similar to C language.

console.log(arr[2]);

2. Traverse the array

var arr = ['red','green','blue'];
for(var i = 0;i < 3;i++){
    console.log(arr[i]);
}
//Print array length console.log(arr.length);
//Dynamically detect array length for(var i = 0;i < arr.length;i++){
    console.log(arr[i]);
    }

What is traversal?

Access the array elements from the beginning to the end once. The i inside is a counter used as an index number. arr[i] accesses the array elements. The index number has nothing to do with the array length.

//Classic case print array maximum value var arr = [2,6,1,77,52,25,7,99];
var max = arr[0];
for(var i = 0;i < arr.length;i++){
    if(max < arr[i]){
        max = arr[i];
        }
    }
    conaole.log('The maximum value in the array is ' + max);

Convert array to split string

var arr = ['red','green','blue','pink'];
var str = '';
for(var i = 0;i < arr.length;i++){
	str+=arr[i]+'|'; //You can also use var sep = '!'; str+=arr[i]+sep;
}
console.log(str);

Adding elements to an array

var arr = ['red','green','blue','pink'];
var str = '';
for(var i = 0;i < arr.length;i++){
	str+=arr[i]+'|'; //You can also use var sep = '!'; str+=arr[i]+sep;
}
console.log(str);

If the index number exists, the array element is replaced. Do not assign a value to the array name directly, otherwise the previous data will be overwritten. For example, arr1 =''; onsole.log(arr1)

Filtering an Array

var arr = [1,2,3,4,5,6,7,8,9,10];
var newArr = [];
console.log(newArr);
for(var i = 0;i < arr.length;i++){
	if(arr[i]>=5)
	{
		newArr[newArr.length] = arr[i];
	}
}

Delete the specified element from an array

//Delete 7 var arr = [1,2,3,4,5,6,7,8,9,10];
var newArr = [];
console.log(newArr);
for(var i = 0;i < arr.length;i++){
	if(arr[i] != 7)
	{
		newArr[newArr.length] = arr[i];
	}
}
console.log(newArr);

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:
  • Detailed explanation of the new array methods in JavaScript es6
  • Detailed explanation of JS array methods
  • Detailed explanation of common methods of JavaScript arrays
  • Summary of several common methods of JavaScript arrays
  • Commonly used JavaScript array methods
  • Common array operations in JavaScript
  • Detailed Example of JavaScript Array Methods

<<:  Query the data of the day before the current time interval in MySQL

>>:  How to use .htaccess to prohibit a certain IP from accessing the website

Recommend

Vue custom directive details

Table of contents 1. Background 2. Local custom i...

Introduction to Vue3 Composition API

Table of contents Overview Example Why is it need...

Detailed explanation of the Docker deployment tutorial for Jenkins beginners

This article deploys Jenkins+Maven+SVN+Tomcat thr...

How to load third-party component libraries on demand in Vue3

Preface Take Element Plus as an example to config...

Proxy realizes the principle of two-way binding of Vue3 data

Table of contents 1. Advantages of proxy vs. Obje...

Detailed explanation of Linux lsof command usage

lsof (list open files) is a tool to view files op...

vue+echarts realizes the flow effect of China map (detailed steps)

@vue+echarts realizes the flow effect of China ma...

CentOS7 deployment Flask (Apache, mod_wsgi, Python36, venv)

1. Install Apache # yum install -y httpd httpd-de...

Detailed explanation and summary of the URL for database connection

Detailed explanation and summary of the URL for d...

Vue simple implementation of turntable lottery

This article shares the specific code of Vue to s...

A comprehensive understanding of Vue.js functional components

Table of contents Preface React Functional Compon...

Importance of background color declaration when writing styles

As the title says, otherwise when the page is revi...

Detailed explanation of the use of Vue.js draggable text box component

Table of contents Registering Components Adding C...

Implementation of mounting NFS shared directory in Docker container

Previously, https://www.jb51.net/article/205922.h...