掌握 JavaScript 陣列：技術、最佳實務和進階用途

數組是一種特殊的變量，它可以保存多個值：

const name = ["Sakib", "Arif", "Fatema"];

為什麼要使用數組？

陣列是 JavaScript（以及許多其他程式語言）中的基本資料結構，原因如下：

1. 組織資料：陣列可讓您在單一變數中儲存多個值，從而更輕鬆地管理資料集合。例如，如果您需要追蹤使用者名稱列表，可以將它們全部儲存在一個數組中。

2. 索引存取：陣列提供了一種使用索引存取元素的便捷方法。這使得根據位置檢索或修改特定項目變得容易。

3. 高效迭代：JavaScript 提供了各種迭代數組的方法，例如 for、forEach、map、filter 和 reduce。這些方法使您能夠用最少的程式碼處理數組的每個元素。

4. 動態調整大小：JavaScript 中的陣列是動態的，這意味著它們可以根據需要增大或縮小大小。您無需提前指定大小，這增加了處理資料的靈活性。

5. 內建方法：JavaScript 陣列帶有一組豐富的內建方法，用於操作和查詢資料。 Push、pop、shift、unshift、splice、slice 等方法簡化了常見任務。

6. 多功能資料處理：陣列可以保存各種類型的數據，包括數字、字串、對象，甚至其他陣列。這種多功能性使得陣列適用於廣泛的應用。

7. 增強的效能：陣列針對 JavaScript 引擎中的效能進行了最佳化，使其能夠高效執行涉及順序資料處理和操作的任務。

8. 高階函數的支援：JavaScript 陣列旨在與高階函數無縫協作，從而產生更具表現力和簡潔的程式碼。像map、filter和reduce這樣的函數可以實現強大的資料轉換和聚合。

總之，陣列對於在 JavaScript 中高效、靈活地組織、存取和操作資料集合至關重要。

建立數組

文法

const array_name = [item1, item2, ...]; 

空格和換行符並不重要。聲明可以跨越多行：

const developer = [
  "Fatema",
  "Sakib",
  "Riaz"
];

您也可以建立一個數組，然後提供元素：

const man = [];
cars[0]= "Abdur Rahman";
cars[1]= "Riyaz Khan";
cars[2]= "Jumman KL";

使用 JavaScript 關鍵字 new

const man = new Array("Saabid", "Fatema", "Rukhsana");

存取陣列元素
您可以引用索引號:
來存取陣列元素

const man = ["Fatema", "Sakib", "Ayesha"];
let car = cars[0];

將數組轉換為字串

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

在 JavaScript 中將陣列轉換為字串是一種常見的操作，有多種方法可以實現此目的，每種方法滿足不同的需求。以下是最常用的方法：

1. join() 方法

join() 方法將陣列的所有元素組合成一個字串，元素之間使用指定的分隔符號。

const fruits = ['apple', 'banana', 'cherry'];
const result = fruits.join(', '); // 'apple, banana, cherry'
console.log(result);

• 語法: array.join([separator])
• 預設分隔符號：,（逗號）
• 自訂分隔符號：可以指定任意字串作為分隔符，如'-'、' | '等等

2. toString() 方法

toString() 方法將陣列轉換為字串，使用逗號分隔元素。

const numbers = [1, 2, 3, 4];
const result = numbers.toString(); // '1,2,3,4'
console.log(result);

• 語法: array.toString()
• 分隔符號：總是使用,（逗號）作為分隔符號。

3. String() 建構子

您可以使用 String() 建構子將陣列轉換為字串。這種方法類似於 toString()，但在某些上下文中可以更明確。

const boolArray = [true, false, true];
const result = String(boolArray); // 'true,false,true'
console.log(result);

• 語法：字串（陣列）

4. 模板文字

對於自訂格式，您可以使用範本文字將陣列轉換為字串。

const colors = ['red', 'green', 'blue'];
const result = `${colors[0]}, ${colors[1]}, ${colors[2]}`; // 'red, green, blue'
console.log(result);

• 語法：使用 ${} 將陣列元素嵌入到模板字串中。

5. Array.prototype.map() 和 join()

為了更好地控制轉換，特別是如果您需要格式化每個元素，可以將 map() 與 join() 結合使用。

const numbers = [1, 2, 3];
const result = numbers.map(num => `Number ${num}`).join(' | '); // 'Number 1 | Number 2 | Number 3'
console.log(result);

• Syntax: array.map(callback).join(separator)

Access the Full Array

let a = [1, 12, 13, 14, 6, 8,9, 5, 11, 7, 10, 15, 2, 3, 4, 22, 44, 33];
console.log(a);

let a = [1, 12, 13, 14, 6, 8,9, 5, 11, 7, 10, 15, 2, 3, 4, 22, 44, 33];
document.getElementById("demo").innerHTML = a;

Accessing the full contents of an array in JavaScript can be done in various ways depending on the context and the goal. Here are several methods to access and work with all elements of an array:

1. Direct Access by Index

You can access individual elements of an array directly using their indices. For example, to access the first element, you use index 0.

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0]); // 'apple'
console.log(fruits[1]); // 'banana'
console.log(fruits[2]); // 'cherry'

2. Looping through the Array

You can use loops to iterate through each element of the array. Here are a few common looping methods:

a. for Loop

The traditional for loop gives you control over the index and can be useful for tasks like modifying elements based on their position.

const numbers = [10, 20, 30];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]); // 10, 20, 30
}

b. forEach() Method

The forEach() method executes a provided function once for each array element.

const colors = ['red', 'green', 'blue'];
colors.forEach(color => {
  console.log(color); // 'red', 'green', 'blue'
});

c. for...of Loop

The for...of loop provides a more modern and readable way to iterate through array elements.

const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit); // 'apple', 'banana', 'cherry'
}

d. map() Method

The map() method creates a new array with the results of calling a provided function on every element.

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

3. Using Array Destructuring

Array destructuring allows you to unpack elements from arrays into distinct variables.

const [first, second, third] = ['apple', 'banana', 'cherry'];
console.log(first);  // 'apple'
console.log(second); // 'banana'
console.log(third); // 'cherry'

4. console.log()

To quickly view the entire array, you can use console.log().

const array = [1, 2, 3, 4, 5];
console.log(array); // [1, 2, 3, 4, 5]

5. toString() Method

Convert the entire array to a comma-separated string.

const array = [1, 2, 3, 4];
console.log(array.toString()); // '1,2,3,4'

6. join() Method

Similar to toString(), but you can specify a separator.

const array = [1, 2, 3, 4];
console.log(array.join(' - ')); // '1 - 2 - 3 - 4'

7. Spread Operator

Use the spread operator to create a new array or pass the array elements to a function.

const numbers = [1, 2, 3];
const newNumbers = [...numbers];
console.log(newNumbers); // [1, 2, 3]

JavaScript as Object

const man = ["Fatema", "CSE", "UU", 24];
console.log(man);

In JavaScript, arrays are indeed a type of object. This concept is fundamental to understanding how arrays work in JavaScript. Here’s a deeper look into why arrays are considered objects and how that impacts their behavior:

1. Arrays as Objects

• Inheritance from Object: Arrays in JavaScript inherit from the Object prototype, which means they have all the properties and methods of objects. This includes methods like hasOwnProperty(), toString(), and others.

• Prototype Chain: Arrays have their own prototype chain that extends from Array.prototype, which is itself an object. This prototype chain provides arrays with their specific methods, like push(), pop(), map(), and more.
  

const arr = [1, 2, 3];
console.log(arr.constructor === Array); // true
console.log(arr instanceof Object); // true
console.log(arr instanceof Array); // true

2. Array-Specific Properties

• Length Property: Arrays have a length property that automatically updates as elements are added or removed. This is specific to arrays and is not present in general objects.

const fruits = ['apple', 'banana'];
console.log(fruits.length); // 2
fruits.push('cherry');
console.log(fruits.length); // 3

• Index-Based Access: Arrays use numeric indices to access elements, whereas objects use string keys. This is a key distinction between arrays and regular objects.

const arr = ['a', 'b', 'c'];
console.log(arr[0]); // 'a'

3. Arrays vs. Objects

• Enumerability: Arrays have numeric indices and are often used in scenarios where the order of elements is important. Objects use string keys and are typically used for key-value pairs where the order is less significant.

• Prototype Methods: Arrays come with a set of methods specific to array manipulation, such as concat(), slice(), and reduce(). Objects have methods and properties from Object.prototype, such as hasOwnProperty().
  

const obj = { a: 1, b: 2 };
console.log(Object.keys(obj)); // ['a', 'b']

const arr = [1, 2, 3];
console.log(arr.map(x => x * 2)); // [2, 4, 6]

4. Arrays as Objects in Practice

• Additional Properties: You can add custom properties to arrays just like you can with objects, though it's not common practice. This does not affect array behavior but can lead to unexpected results when using array methods or properties.

const arr = [1, 2, 3];
arr.customProperty = 'value';
console.log(arr.customProperty); // 'value'

• Array Methods: Methods such as forEach(), filter(), and map() operate on arrays but are not part of the base Object prototype. They are defined on Array.prototype.

const numbers = [1, 2, 3];
numbers.forEach(num => console.log(num)); // 1 2 3

5. Practical Implications

• Use Cases: Arrays are best used when you need to store ordered collections of data and perform operations that involve sequence and index-based access. Objects are more suited for storing data with named properties where the order is not a priority.

• Performance: Arrays can be optimized for sequential access and manipulation due to their special handling in JavaScript engines. Objects are optimized for key-based access.

The length Property

The length property in JavaScript is a special property found on arrays and strings, and it plays a crucial role in managing collections of data. Here's a comprehensive overview of how the length property works:

1. length Property in Arrays

The length property of an array returns the number of elements in the array. It is a dynamic property that automatically updates when elements are added or removed from the array.

Basic Usage

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.length); // 3

Dynamic Updates

• Adding Elements: When you add elements to an array, the length property increases.

  const numbers = [1, 2, 3];
  numbers.push(4);
  console.log(numbers.length); // 4

• Removing Elements: When you remove elements, the length property decreases.

  const numbers = [1, 2, 3];
  numbers.pop();
  console.log(numbers.length); // 2

• Directly Setting Length: You can also set the length property manually. This will truncate the array or pad it with empty slots.

  const numbers = [1, 2, 3, 4, 5];
  numbers.length = 3;
  console.log(numbers); // [1, 2, 3]

  numbers.length = 5;
  console.log(numbers); // [1, 2, 3, <2 empty items>]

• Truncation: Setting length to a smaller number truncates the array to that length.
• Padding: Setting length to a larger number adds empty slots (undefined values) to the array.

2. length Property in Strings

The length property of a string returns the number of characters in the string.

Basic Usage

const message = 'Hello, World!';
console.log(message.length); // 13

3. Special Considerations

• Sparse Arrays: Arrays can be sparse, meaning they may have "holes" where indices are not explicitly assigned values. The length property reflects the highest index plus one, not the number of actual elements.

  const arr = [1, , 3];
  console.log(arr.length); // 3

Here, arr has a length of 3, but only two indices (0 and 2) have values. The index 1 is "empty" but still counts towards the length.

• Negative Indexes: The length property does not support negative indexes. Negative indices are not part of the standard JavaScript array indexing.

4. Practical Uses

• Iteration: Knowing the length of an array or string is essential for iterating through elements.

  const arr = ['a', 'b', 'c'];
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]); // 'a', 'b', 'c'
  }

• Validation: Use the length property to validate input, such as ensuring a user input string meets minimum length requirements.

  function validatePassword(password) {
    return password.length >= 8;
  }

• Padding and Truncation: Adjust the size of arrays and strings to fit specific requirements by setting the length property.

  const arr = [1, 2, 3];
  arr.length = 5; // Adds two empty slots

Adding Array Elements

Adding elements to an array in JavaScript can be done using several methods, depending on where you want to add the elements and how you want to manipulate the array. Here’s a detailed look at the various techniques for adding elements to arrays:

1. Using push()

The push() method adds one or more elements to the end of an array and returns the new length of the array.

const fruits = ['apple', 'banana'];
fruits.push('cherry'); // Adds 'cherry' to the end
console.log(fruits); // ['apple', 'banana', 'cherry']

• Syntax: array.push(element1, element2, ..., elementN)

2. Using unshift()

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

const fruits = ['banana', 'cherry'];
fruits.unshift('apple'); // Adds 'apple' to the beginning
console.log(fruits); // ['apple', 'banana', 'cherry']

• Syntax: array.unshift(element1, element2, ..., elementN)

3. Using splice()

The splice() method can add elements at any position in the array. It can also be used to remove elements.

const fruits = ['apple', 'cherry'];
fruits.splice(1, 0, 'banana'); // At index 1, remove 0 elements, add 'banana'
console.log(fruits); // ['apple', 'banana', 'cherry']

• Syntax: array.splice(start, deleteCount, element1, element2, ..., elementN)
  • start: The index at which to start adding elements.
  • deleteCount: The number of elements to remove (0 if you are only adding).
  • element1, ..., elementN: The elements to add.

4. Using the Spread Operator

The spread operator (...) allows you to add elements from one array into another array. This is particularly useful for combining arrays.

const fruits = ['apple', 'banana'];
const moreFruits = ['cherry', 'date'];
const allFruits = [...fruits, ...moreFruits];
console.log(allFruits); // ['apple', 'banana', 'cherry', 'date']

• Syntax: const newArray = [...array1, ...array2, ...array3]

5. Using concat()

The concat() method creates a new array by combining multiple arrays or values.

const fruits = ['apple', 'banana'];
const moreFruits = ['cherry', 'date'];
const allFruits = fruits.concat(moreFruits);
console.log(allFruits); // ['apple', 'banana', 'cherry', 'date']

• Syntax: array1.concat(array2, array3, ..., value1, value2, ...)

6. Using Array Destructuring with Spread Operator

You can use array destructuring with the spread operator to add elements to specific positions in an array.

const fruits = ['apple', 'date'];
const newFruits = ['banana', ...fruits, 'cherry'];
console.log(newFruits); // ['banana', 'apple', 'date', 'cherry']

• Syntax: const newArray = [element1, ...oldArray, elementN]

7. Inserting Multiple Elements

You can use splice() to insert multiple elements at a specific index.

const numbers = [1, 2, 5];
numbers.splice(2, 0, 3, 4); // Insert 3 and 4 at index 2
console.log(numbers); // [1, 2, 3, 4, 5]

8. Handling Empty Slots

When using length to add elements, be aware that it will add empty slots.

const arr = [1, 2, 3];
arr.length = 5; // Adds two empty slots
console.log(arr); // [1, 2, 3, <2 empty items>]

Nested Arrays and Objects

Nested arrays and objects in JavaScript are powerful features that allow you to create complex data structures. These can be used to represent multi-dimensional data, hierarchies, or any scenario where data is organized in layers.

1. Nested Arrays

A nested array is an array that contains other arrays as its elements. This can be useful for representing matrices, grids, or hierarchical data.

Example of a Nested Array

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// Accessing elements
console.log(matrix[0][0]); // 1
console.log(matrix[1][2]); // 6

// Iterating through a nested array
for (const row of matrix) {
  for (const value of row) {
    console.log(value);
  }
}

2. Nested Objects

A nested object is an object that contains other objects as its properties. This is useful for representing hierarchical data or entities with multiple attributes.

Example of a Nested Object

const person = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    zipCode: '12345'
  },
  hobbies: ['reading', 'gaming']
};

// Accessing nested properties
console.log(person.address.street); // '123 Main St'
console.log(person.hobbies[1]); // 'gaming'

// Iterating through a nested object
for (const key in person) {
  if (typeof person[key] === 'object' && !Array.isArray(person[key])) {
    console.log(`Nested object ${key}:`);
    for (const subKey in person[key]) {
      console.log(`  ${subKey}: ${person[key][subKey]}`);
    }
  } else {
    console.log(`${key}: ${person[key]}`);
  }
}

3. Combining Nested Arrays and Objects

You can combine arrays and objects to create more complex structures. For example, you might have an array of objects, where each object contains nested arrays or other objects.

Example of Combining Nested Arrays and Objects

const classRoom = [
  {
    name: 'Math',
    students: [
      { name: 'Alice', score: 95 },
      { name: 'Bob', score: 88 }
    ]
  },
  {
    name: 'Science',
    students: [
      { name: 'Charlie', score: 92 },
      { name: 'David', score: 85 }
    ]
  }
];

// Accessing data
console.log(classRoom[0].students[1].name); // 'Bob'
console.log(classRoom[1].students[0].score); // 92

// Iterating through the combined structure
for (const subject of classRoom) {
  console.log(`Subject: ${subject.name}`);
  for (const student of subject.students) {
    console.log(`  Student: ${student.name}, Score: ${student.score}`);
  }
}

4. Manipulating Nested Structures

• Accessing: Use dot notation or bracket notation for objects, and indices for arrays.

• Updating: Assign new values to nested properties or elements.
  

  person.address.city = 'New City'; // Update a nested property
  classRoom[0].students[0].score = 97; // Update a nested element

• Adding: Add new properties or elements as needed.

  person.phone = '555-5555'; // Add a new property
  classRoom.push({ name: 'History', students: [] }); // Add a new subject

• Deleting: Use delete for properties and .splice() for array elements.

  delete person.phone; // Remove a nested property
  classRoom[1].students.splice(1, 1); // Remove a student

5. Practical Use Cases

• Data Representation: Represent complex data structures such as configuration settings, hierarchical data (e.g., organizational charts), and multi-dimensional datasets.

• APIs and Databases: Often used in API responses and database queries to represent complex records.

• Form Data: Useful for handling nested form data, such as forms with sections or groups of fields.

JavaScript Array Methods

JavaScript arrays come with a rich set of built-in methods that help you manipulate and interact with array data. These methods can be broadly categorized into several types, including those for modifying arrays, accessing elements, and iterating over elements. Here’s a comprehensive overview of common array methods:

1. Adding and Removing Elements

• push(): Adds one or more elements to the end of an array.

  const fruits = ['apple', 'banana'];
  fruits.push('cherry'); // ['apple', 'banana', 'cherry']

• pop(): Removes the last element from an array and returns it.

  const fruits = ['apple', 'banana', 'cherry'];
  const lastFruit = fruits.pop(); // 'cherry'

• unshift(): Adds one or more elements to the beginning of an array.

  const fruits = ['banana', 'cherry'];
  fruits.unshift('apple'); // ['apple', 'banana', 'cherry']

• shift(): Removes the first element from an array and returns it.

  const fruits = ['apple', 'banana', 'cherry'];
  const firstFruit = fruits.shift(); // 'apple'

• splice(): Adds or removes elements from a specific index.

  const fruits = ['apple', 'banana', 'cherry'];
  fruits.splice(1, 1, 'blueberry'); // ['apple', 'blueberry', 'cherry']

• Syntax: array.splice(start, deleteCount, item1, item2, ...)

2. Accessing and Searching Elements

• indexOf(): Returns the first index at which a given element can be found, or -1 if not found.

  const fruits = ['apple', 'banana', 'cherry'];
  const index = fruits.indexOf('banana'); // 1

• includes(): Checks if an array contains a specific element.

  const fruits = ['apple', 'banana', 'cherry'];
  const hasBanana = fruits.includes('banana'); // true

• find(): Returns the first element that satisfies a provided testing function.

  const numbers = [1, 2, 3, 4];
  const firstEven = numbers.find(num => num % 2 === 0); // 2

• findIndex(): Returns the index of the first element that satisfies a provided testing function.

  const numbers = [1, 2, 3, 4];
  const index = numbers.findIndex(num => num % 2 === 0); // 1

3. Iterating Over Elements

• forEach(): Executes a provided function once for each array element.

  const fruits = ['apple', 'banana', 'cherry'];
  fruits.forEach(fruit => console.log(fruit));

• map(): Creates a new array with the results of calling a provided function on every element.

  const numbers = [1, 2, 3];
  const doubled = numbers.map(num => num * 2); // [2, 4, 6]

• filter(): Creates a new array with all elements that pass the test implemented by the provided function.

  const numbers = [1, 2, 3, 4];
  const evens = numbers.filter(num => num % 2 === 0); // [2, 4]

• reduce(): Applies a function against an accumulator and each element to reduce it to a single value.

  const numbers = [1, 2, 3, 4];
  const sum = numbers.reduce((acc, num) => acc + num, 0); // 10

• reduceRight(): Similar to reduce(), but starts from the right end of the array.

  const numbers = [1, 2, 3, 4];
  const product = numbers.reduceRight((acc, num) => acc * num, 1); // 24

• some(): Tests whether at least one element in the array passes the provided function.

  const numbers = [1, 2, 3, 4];
  const hasEven = numbers.some(num => num % 2 === 0); // true

• every(): Tests whether all elements in the array pass the provided function.

  const numbers = [2, 4, 6];
  const allEven = numbers.every(num => num % 2 === 0); // true

4. Sorting and Reversing

• sort(): Sorts the elements of an array in place and returns the array.

  const numbers = [4, 2, 3, 1];
  numbers.sort(); // [1, 2, 3, 4]

• Note: sort() sorts elements as strings by default. For numerical sorting, use a compare function.

  const numbers = [4, 2, 3, 1];
  numbers.sort((a, b) => a - b); // [1, 2, 3, 4]

• reverse(): Reverses the elements of an array in place.

  const numbers = [1, 2, 3];
  numbers.reverse(); // [3, 2, 1]

5. Array Transformation

• concat(): Merges two or more arrays into a new array.

  const arr1 = [1, 2];
  const arr2 = [3, 4];
  const combined = arr1.concat(arr2); // [1, 2, 3, 4]

• slice(): Returns a shallow copy of a portion of an array into a new array.

  const numbers = [1, 2, 3, 4];
  const sliced = numbers.slice(1, 3); // [2, 3]

• splice(): Modifies an array by adding, removing, or replacing elements. (Also listed under adding/removing elements.)

  const numbers = [1, 2, 3, 4];
  numbers.splice(2, 1, 'a', 'b'); // [1, 2, 'a', 'b', 4]

6. String Conversion

• toString(): Converts an array to a string, with elements separated by commas.

  const numbers = [1, 2, 3];
  const str = numbers.toString(); // '1,2,3'

• join(): Joins all elements of an array into a string with a specified separator.

  const numbers = [1, 2, 3];
  const str = numbers.join('-'); // '1-2-3'

JavaScript Array Search

JavaScript arrays come with various methods for searching and locating elements. These methods can be used to find specific values, check for the presence of elements, or retrieve indexes. Here's a detailed overview of the key array search methods:

1. indexOf()

The indexOf() method returns the first index at which a given element can be found, or -1 if the element is not found.

const fruits = ['apple', 'banana', 'cherry'];
const index = fruits.indexOf('banana'); // 1
const notFound = fruits.indexOf('orange'); // -1

• Syntax: array.indexOf(searchElement, fromIndex)

  • searchElement: The element to search for.
  • fromIndex (optional): The index to start the search from.

2. includes()

The includes() method determines whether an array contains a certain element and returns true or false.

const fruits = ['apple', 'banana', 'cherry'];
const hasBanana = fruits.includes('banana'); // true
const hasOrange = fruits.includes('orange'); // false

• Syntax: array.includes(searchElement, fromIndex)

  • searchElement: The element to search for.
  • fromIndex (optional): The index to start the search from.

3. find()

The find() method returns the first element in the array that satisfies a provided testing function. If no elements satisfy the testing function, it returns undefined.

const numbers = [4, 9, 16, 25];
const firstEven = numbers.find(num => num % 2 === 0); // 4
const noMatch = numbers.find(num => num > 30); // undefined

• Syntax: array.find(callback(element, index, array), thisArg)

  • callback: A function that tests each element.
  • thisArg (optional): Value to use as this when executing callback.

4. findIndex()

The findIndex() method returns the index of the first element in the array that satisfies a provided testing function. If no elements satisfy the testing function, it returns -1.

const numbers = [4, 9, 16, 25];
const index = numbers.findIndex(num => num % 2 === 0); // 0
const noMatchIndex = numbers.findIndex(num => num > 30); // -1

• Syntax: array.findIndex(callback(element, index, array), thisArg)

  • callback: A function that tests each element.
  • thisArg (optional): Value to use as this when executing callback.

5. some()

The some() method tests whether at least one element in the array passes the provided testing function. It returns true if any elements pass the test, otherwise false.

const numbers = [1, 2, 3, 4];
const hasEven = numbers.some(num => num % 2 === 0); // true
const allEven = numbers.some(num => num % 2 === 0 && num > 5); // false

• Syntax: array.some(callback(element, index, array), thisArg)

  • callback: A function that tests each element.
  • thisArg (optional): Value to use as this when executing callback.

6. every()

The every() method tests whether all elements in the array pass the provided testing function. It returns true if all elements pass the test, otherwise false.

const numbers = [2, 4, 6];
const allEven = numbers.every(num => num % 2 === 0); // true
const notAllEven = numbers.every(num => num > 3); // false

• Syntax: array.every(callback(element, index, array), thisArg)

  • callback: A function that tests each element.
  • thisArg (optional): Value to use as this when executing callback.

7. filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0); // [2, 4]

• Syntax: array.filter(callback(element, index, array), thisArg)

  • callback: A function that tests each element.
  • thisArg (optional): Value to use as this when executing callback.

8. findLast() (Experimental)

The findLast() method returns the last element in the array that satisfies a provided testing function. If no elements satisfy the testing function, it returns undefined. Note that this method is experimental and may not be supported in all environments.

const numbers = [4, 9, 16, 25];
const lastEven = numbers.findLast(num => num % 2 === 0); // 16

• Syntax: array.findLast(callback(element, index, array), thisArg)

  • callback: A function that tests each element.
  • thisArg (optional): Value to use as this when executing callback.

9. findLastIndex() (Experimental)

The findLastIndex() method returns the index of the last element in the array that satisfies a provided testing function. If no elements satisfy the testing function, it returns -1. Note that this method is experimental and may not be supported in all environments.

const numbers = [4, 9, 16, 25];
const lastEvenIndex = numbers.findLastIndex(num => num % 2 === 0); // 2

• Syntax: array.findLastIndex(callback(element, index, array), thisArg)

  • callback: A function that tests each element.
  • thisArg (optional): Value to use as this when executing callback.

JavaScript Sorting Arrays

Sorting arrays in JavaScript can be done using the sort() method. This method allows you to arrange elements in an array according to a specified order. By default, the sort() method sorts the elements as strings, but you can provide a custom comparison function to sort elements in different ways.

Basic Usage of sort()

The sort() method sorts the elements of an array in place and returns the sorted array.

const fruits = ['banana', 'apple', 'cherry'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'cherry']

Custom Sorting with a Comparison Function

To sort elements in a specific order, you need to pass a comparison function to sort(). The comparison function takes two arguments (let's call them a and b) and returns:

• A negative value if a should come before b.
• Zero if a and b are equal in the sort order.
• A positive value if a should come after b.

Sorting Numbers

By default, the sort() method converts numbers to strings and sorts them lexicographically. To sort numbers correctly, provide a comparison function that performs numerical comparisons.

const numbers = [10, 5, 100, 1];
numbers.sort((a, b) => a - b); // Ascending order
console.log(numbers); // [1, 5, 10, 100]

numbers.sort((a, b) => b - a); // Descending order
console.log(numbers); // [100, 10, 5, 1]

Sorting Strings

Strings are sorted lexicographically (dictionary order) by default. For case-insensitive sorting, you can convert strings to the same case (e.g., lowercase) in the comparison function.

const words = ['banana', 'Apple', 'cherry'];
words.sort((a, b) => a.localeCompare(b)); // Case-sensitive
console.log(words); // ['Apple', 'banana', 'cherry']

words.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())); // Case-insensitive
console.log(words); // ['Apple', 'banana', 'cherry']

Sorting Objects

To sort an array of objects, use a comparison function that compares the desired properties of the objects.

const people = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 },
  { name: 'Mike', age: 35 }
];

// Sort by age
people.sort((a, b) => a.age - b.age);
console.log(people);
// [ { name: 'Jane', age: 25 }, { name: 'John', age: 30 }, { name: 'Mike', age: 35 } ]

// Sort by name
people.sort((a, b) => a.name.localeCompare(b.name));
console.log(people);
// [ { name: 'Jane', age: 25 }, { name: 'John', age: 30 }, { name: 'Mike', age: 35 } ]

Sorting Multi-Dimensional Arrays

When sorting multi-dimensional arrays (arrays of arrays), provide a comparison function that compares the relevant elements.

const matrix = [
  [1, 4],
  [3, 2],
  [5, 0]
];

// Sort by the first element of each sub-array
matrix.sort((a, b) => a[0] - b[0]);
console.log(matrix); // [ [1, 4], [3, 2], [5, 0] ]

// Sort by the second element of each sub-array
matrix.sort((a, b) => a[1] - b[1]);
console.log(matrix); // [ [5, 0], [3, 2], [1, 4] ]

Stable Sorting

JavaScript's sort() method is stable in modern environments, meaning that elements with equal values retain their relative order. However, this is not guaranteed in all JavaScript engines, so if stability is crucial, consider using a custom stable sorting algorithm or library.

Sorting with localeCompare()

The localeCompare() method can be useful for sorting strings in a locale-aware manner, accounting for different cultural sorting rules.

const words = ['résumé', 'resume', 'apple'];
words.sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'base' }));
console.log(words); // ['apple', 'resume', 'résumé']

JavaScript Array Iteration

JavaScript provides several methods for iterating over arrays, allowing you to execute a function on each element or transform the array in various ways. Here’s a comprehensive overview of the array iteration methods available in JavaScript:

1. forEach()

The forEach() method executes a provided function once for each array element. It does not return a value and cannot be stopped or broken out of early.

const fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(fruit => console.log(fruit));
// Output:
// apple
// banana
// cherry

• Syntax: array.forEach(callback(element, index, array), thisArg)

  • callback: Function that is executed for each element.
  • thisArg (optional): Value to use as this when executing callback.

2. map()

The map() method creates a new array with the results of calling a provided function on every element in the original array. It’s used for transforming elements.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

• Syntax: array.map(callback(element, index, array), thisArg)

  • callback: Function that is executed for each element.
  • thisArg (optional): Value to use as this when executing callback.

3. filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function. It is used for selecting elements that meet certain criteria.

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

• Syntax: array.filter(callback(element, index, array), thisArg)

  • callback: Function that is executed for each element.
  • thisArg (optional): Value to use as this when executing callback.

4. reduce()

The reduce() method applies a function against an accumulator and each element in the array to reduce it to a single value, such as a sum or a concatenated string.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

• Syntax: array.reduce(callback(accumulator, currentValue, index, array), initialValue)

  • callback: Function that is executed for each element.
  • initialValue (optional): Value to use as the first argument to the first call of the callback.

5. reduceRight()

The reduceRight() method is similar to reduce(), but it processes the array from right to left.

const numbers = [1, 2, 3, 4];
const product = numbers.reduceRight((acc, num) => acc * num, 1);
console.log(product); // 24

• Syntax: array.reduceRight(callback(accumulator, currentValue, index, array), initialValue)

  • callback: Function that is executed for each element.
  • initialValue (optional): Value to use as the first argument to the first call of the callback.

6. some()

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if at least one element passes the test, otherwise false.

const numbers = [1, 2, 3, 4];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true

• Syntax: array.some(callback(element, index, array), thisArg)

  • callback: Function that is executed for each element.
  • thisArg (optional): Value to use as this when executing callback.

7. every()

The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns true if all elements pass the test, otherwise false.

const numbers = [2, 4, 6];
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // true

• Syntax: array.every(callback(element, index, array), thisArg)

  • callback: Function that is executed for each element.
  • thisArg (optional): Value to use as this when executing callback.

8. find()

The find() method returns the first element in the array that satisfies the provided testing function. If no elements satisfy the testing function, it returns undefined.

const numbers = [4, 9, 16, 25];
const firstEven = numbers.find(num => num % 2 === 0);
console.log(firstEven); // 4

• Syntax: array.find(callback(element, index, array), thisArg)

  • callback: Function that is executed for each element.
  • thisArg (optional): Value to use as this when executing callback.

9. findIndex()

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. If no elements satisfy the testing function, it returns -1.

const numbers = [4, 9, 16, 25];
const index = numbers.findIndex(num => num % 2 === 0);
console.log(index); // 0

• Syntax: array.findIndex(callback(element, index, array), thisArg)

  • callback: Function that is executed for each element.
  • thisArg (optional): Value to use as this when executing callback.

10. for...of Loop

The for...of loop provides a clean syntax for iterating over iterable objects like arrays. It is especially useful for looping through array values.

const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}
// Output:
// apple
// banana
// cherry

11. for...in Loop

The for...in loop iterates over the enumerable properties of an object. When used with arrays, it iterates over array indices, not values. It is generally not recommended for arrays, as it is intended for objects.

const fruits = ['apple', 'banana', 'cherry'];
for (const index in fruits) {
  console.log(index); // 0, 1, 2
}

12. flatMap()

The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. This is useful for when you need to map and then flatten the results in one go.

const numbers = [1, 2, 3];
const flattened = numbers.flatMap(num => [num, num * 2]);
console.log(flattened); // [1, 2, 2, 4, 3, 6]

• Syntax: array.flatMap(callback(element, index, array), thisArg)

  • callback: Function that is executed for each element.
  • thisArg (optional): Value to use as this when executing callback.

JavaScript Array Const

In JavaScript, const is a keyword used to declare variables that are intended to remain constant—i.e., their references cannot be reassigned. However, this does not mean the value or object they point to is immutable. For arrays declared with const, the array itself cannot be reassigned, but its elements can still be modified.

Here's a more detailed look at using const with arrays:

1. Declaring Arrays with const

When you declare an array with const, you are creating a constant reference to that array. This means you cannot reassign the array to a different value or array, but you can still modify its elements or its structure (such as adding or removing elements).

const fruits = ['apple', 'banana', 'cherry'];

// Valid: modifying elements
fruits[0] = 'blueberry'; // ['blueberry', 'banana', 'cherry']
fruits.push('date');     // ['blueberry', 'banana', 'cherry', 'date']

console.log(fruits);

// Invalid: reassigning the array
fruits = ['kiwi', 'mango']; // TypeError: Assignment to constant variable.

2. Modifying Arrays

Even though you cannot reassign the const array, you can use array methods to modify its contents:

• Adding Elements: Use methods like push(), unshift(), or splice().

  const numbers = [1, 2, 3];
  numbers.push(4); // [1, 2, 3, 4]
  numbers.unshift(0); // [0, 1, 2, 3, 4]

• Removing Elements: Use methods like pop(), shift(), or splice().

  const colors = ['red', 'green', 'blue'];
  colors.pop(); // ['red', 'green']
  colors.shift(); // ['green']

• Modifying Elements: Directly access and change elements by index.

  const animals = ['cat', 'dog', 'bird'];
  animals[1] = 'fish'; // ['cat', 'fish', 'bird']

3. Array Methods

Methods that modify the array in place are allowed:

• sort(): Sorts the elements of the array.

  const numbers = [3, 1, 4, 1, 5];
  numbers.sort(); // [1, 1, 3, 4, 5]

• reverse(): Reverses the order of elements.

  const letters = ['a', 'b', 'c'];
  letters.reverse(); // ['c', 'b', 'a']

• splice(): Adds or removes elements.

  const fruits = ['apple', 'banana', 'cherry'];
  fruits.splice(1, 1, 'blueberry', 'date'); // ['apple', 'blueberry', 'date', 'cherry']

4. Immutability of Arrays

If you need an immutable array, where changes to the array are not allowed, you need to use additional techniques or libraries to achieve this. JavaScript itself does not provide immutable arrays directly.

For example, you could use libraries like Immutable.js for immutability:

import { List } from 'immutable';

const immutableList = List([1, 2, 3]);
const newList = immutableList.push(4); // Returns a new List: List [ 1, 2, 3, 4 ]
console.log(immutableList); // List [ 1, 2, 3 ]

Summary

JavaScript provides a wide range of operations and methods to handle arrays, including creation, manipulation, searching, and iteration. Here's a summary of the most common array operations:

1. 建立與初始化

• 文字語法: const array = [1, 2, 3];
• 使用陣列建構子：const array = new Array(3); // 建立一個有 3 個空槽的陣列

2. 存取和修改元素

• 依索引存取: const firstElement = array[0];
• 依索引修改: array[0] = 10;

3. 數組方法

創造與轉變

• concat()：組合陣列。 const 組合 = array1.concat(array2);
• flat()：展平巢狀數組。 const flatArray =nestedArray.flat();
• flatMap()：映射然後展平。 const result = array.flatMap(x => [x, x * 2]);

排序

• sort()：對元素進行排序。 array.sort((a, b) => a - b);
• reverse()：反轉順序。數組.reverse();

新增和刪除元素

• push()：將元素加入末尾。數組.push(4);
• pop()：刪除最後一個元素。 const 最後 = array.pop();
• unshift()：將元素加入開頭。數組.unshift(0);
• shift()：刪除第一個元素。 const 首先 = array.shift();
• splice()：新增或刪除指定索引處的元素。 array.splice(1, 1, 'newElement');

迭代

• forEach()：對每個元素執行一個函數。 array.forEach(element => console.log(element));
• map()：轉換元素並傳回一個新陣列。 const newArray = array.map(x => x * 2);
• filter()：傳回通過測試的元素。 const 過濾 = array.filter(x => x % 2 === 0);
• reduce()：將陣列縮減為單一值。 const sum = array.reduce((acc, x) => acc + x, 0);
• reduceRight()：從右向左減少陣列。 const Product = array.reduceRight((acc, x) => acc * x, 1);
• some()：測驗是否有元素通過測驗。 const hasEven = array.some(x => x % 2 === 0);
• every()：測試所有元素是否通過測試。 const allPositive = array.every(x => x > 0);
• find()：找出第一個通過測試的元素。 const find = array.find(x => x > 3);
• findIndex()：找出第一個通過測試的元素的索引。 const index = array.findIndex(x => x > 3);
• flatMap()：映射並展平結果。 const flattened = array.flatMap(x => [x, x * 2]);

4. 搜尋和索引

• indexOf()：找出元素的第一個索引。常數索引 = array.indexOf(3);
• includes()：檢查元素是否存在。 const 存在 = array.includes(3);
• lastIndexOf()：找出元素的最後一個索引。 const lastIndex = array.lastIndexOf(3);

5. 雜項

• slice()：傳回陣列一部份的淺表副本。 const subArray = array.slice(1, 3);
• join()：將陣列元素連接成字串。 const str = array.join('-');
• toString()：將陣列轉換為字串。 const str = array.toString();

6. 數組和const

• const with Arrays：防止重新分配數組引用，但允許修改數組元素和結構。常數數組 = [1, 2, 3];數組.push(4); // 允許

7. 高階迭代

• for...of：迭代值。 for (數組的常數值) { console.log(value); }
• for...in：迭代索引（不太建議用於陣列）。 for (數組中的常數索引) { console.log(index); }

簡而言之

• 建立：使用陣列文字或建構子。
• 存取/修改：使用基於索引的操作。
• 方法：用於轉換、排序、新增/刪除和迭代。
• 搜尋/索引：用於定位元素和索引。
• const：用於常數引用，允許修改。
• 迭代：使用forEach()、map()、filter()等，滿足不同的迭代需求。

有效理解和利用這些操作將幫助您以更高的效率和靈活性管理和操作 JavaScript 中的陣列。

以上是掌握 JavaScript 陣列：技術、最佳實務和進階用途的詳細內容。更多資訊請關注PHP中文網其他相關文章！