JavaScript 获取数组中的第一个和最后一个元素

在这篇文章中，我们将学习如何使用JavaScript获取数组中的第一个和最后一个元素，并通过示例了解它们的实现方式。

使用JavaScript的length属性
使用Array.pop()和Array.shift()方法
使用Array.slice()方法
使用Array.filter()方法
使用Spread运算符
使用Array.at()方法

方法1：使用JavaScript的length属性

JavaScript中的数组是一种同时保存多个值的变量。第一个和最后一个元素可以通过索引访问，第一个值使用索引0访问，最后一个元素可以通过长度属性来访问，长度属性比最高的数组索引多一个值。JavaScript中的数组长度属性用于设置或返回数组中的元素数量。

示例1： 此示例演示了如何访问数组中的第一个和最后一个数字。

// Array 
let s = [3, 2, 3, 4, 5];
function Gfg() {
 
    // Storing the first item in a variable 
    let f = s[0];
 
    // Storing the last item 
    let l = s[s.length - 1];
 
    // Printing output to screen
    console.log("First element is " + f);
    console.log("Last element is " + l);
}
Gfg(); // Calling the function

输出

First element is 3
Last element is 5

示例 2： 这个示例演示了如何访问数组中的第一个和最后一个单词。

// Simple array
let s = ["Geeks", "for", "geeks", "computer", "science"];
function Gfg() {
 
    // First item of the array
    let f = s[0];
 
    // Last item of the array
    let l = s[s.length - 1];
 
    // Printing the output to screen
    console.log("First element is " + f);
    console.log("Last element is " + l);
}
Gfg(); // Calling the function

输出

First element is Geeks
Last element is science

方法2：使用Array.pop()和Array.shift()方法

Array.pop()方法移除数组的最后一个元素并返回它，Array.shift()方法移除数组的第一个元素并返回它。

示例： 在这个示例中，我们将使用数组的pop()和shift()方法来获取数组的最后一个和第一个元素。

// Array
let s = [3, 2, 3, 4, 5];
function Gfg() {
 
    // Storing the first item in a variable
    let f = s.shift(0);
 
    // Storing the last item
    let l = s.pop();
 
 
    // Printing output to screen
    console.log("first element is " + f);
    console.log(" Last element is " + l);
}
 
Gfg(); // Calling the function

输出

first element is 3
 Last element is 5

方法3：使用Array.slice()方法

Array.slice()方法通过提供的索引和长度对数组进行切片，并返回数组的部分。

示例： 在这个示例中，我们将使用slice()方法来获取数组的第一个和最后一个元素。

// Array
let s = [3, 2, 3, 4, 5];
function Gfg() {
 
    // Storing the first item in a variable
    let f = s.slice(0, 1);
 
    // Storing the last item
    let l = s.slice(-1);
 
 
    // Printing output to screen
    console.log("first element is " + f);
    console.log("Last element is " + l);
}
Gfg(); // Calling the function

输出

first element is 3
Last element is 5

方法4：使用Array.filter()方法

Array.filter()方法返回一个被过滤的数组，删除回调函数返回false的元素。

示例： 在这个示例中，我们将使用filter()方法获取数组的第一个和最后一个元素。

// Array
let s = [3, 2, 3, 4, 5];
function Gfg() {
 
    // Storing the first item and second in a variable
    let [f, l] = s.filter((item, i) => 
                (i == 0) || (i == s.length - 1));
 
    // Printing output to screen
    console.log("first element is " + f);
    console.log(" Last element is " + l);
}
Gfg(); // Calling the function

输出

first element is 3
 Last element is 5

方法5：使用扩展运算符

扩展运算符 允许在需要0个或更多参数的位置展开可迭代对象。它主要用于期望有多个值的变量数组。它使我们能够从数组中获取参数列表。

示例：

const array = [1, 2, 3, 4, 5];
 
const [firstItem, ...rest] = array;
const lastItem = rest.pop();
 
console.log('First item:', firstItem);
console.log('Last item:', lastItem);

输出

First item: 1
Last item: 5

方法6：使用Array.at()方法

JavaScript中的Array.at()方法允许根据索引访问数组的元素。通过将所需的索引传递给该方法，可以使用at()方法来获取数组的第一个和最后一个元素。第一个元素的索引为0。可以使用数组的length-1作为索引来访问数组的最后一个元素。

示例：

// Get the array first and last elements using Array.at() method
function gfg() {
  let s = ["Geeks", "for", "geeks", "computer", "science"];
 
  // Get the first element (index 0)
  console.log(s.at(0))
 
  // Get the last element (index: length - 1)
  console.log(s.at(s.length - 1))
}
 
// Call the function
gfg();

输出