一文學會JS的數組函數:slice()

2020-12-16 塗魄聊編程

JavaScript內置了有很多原生函數，理解併合理運用這些函數，能大大提高我們的開發效率。

本文結合實例講解slice()，後期將講解他的另兩個兄弟splice () 和split ()。這三個數組的原生函數，或許是因為它們的名字比較相似，會讓初學者有點摸不著頭腦。同時關於這三個函數之間的區別也是面試時的熱門話題！

數組

在JavaScript中數組可以存儲不同類型的數據，如下圖所示，讓我們來聲明一個存有不同類型數據的數組。

該數組中存儲了：數字，字符串以及布爾

Slice()

slice的中文翻譯是切片，顧名思義，從原數組中切出子數組，並將其賦值給新變量，同時不會改變原數組

from：從該索引值開始切片until：切片到該索引值（不包含該索引值）

如果我們想獲取包含原數組的前三個元素的子數組，應該怎麼做呢？讓我們在Chrome開發者工具中實例運行下

newArray變量現在是一個新數組，且array的值未發生改變

總結

複製數組中的元素將它們作為新數組返回不會更改原始數組從from開始切片直到until索引：array.slice（from，until）切片不包括「until」索引值的元素可以用於數組和字符串

相關焦點

  • 【重學JS系列】slice用法大合集
    而對於一個普通的對象來說，如果它的所有property名均為正整數，同時也有相應的length屬性，那麼雖然該對象並不是由Array構造函數所創建的，它依然呈現出數組的行為，在這種情況下，這些對象被稱為 「類數組對象」 。slice方法也可用於類似數組的對象。
  • Array.slice 8種不同用法
    隨著React和其他面向功能的JavaScript實踐的興起，它變得越來越重要，原因有兩個:函數式編程，尤其是高階函數，與數據列表密切配合函數式編程需要純函數，即不會產生副作用或修改輸入數據的函數JavaScript 數組 slice方法符合這兩個標準。slice方法可以在不修改原始列表的情況下創建列表子集的淺拷貝。
  • 從 JS 數組操作到 V8 array.js
    ，該函數接收一至三個參數     currentValue 數組中正在處理的當前元素     index (可選)  數組中正在處理的當前元素的索引     arr (可選)    forEach() 方法正在操作的數組 thisArg      可選參數,當執行回調函數callback,用作this值
  • 8 種 Array.slice 不同用法,你需要知道
    -4e4e95a470e4JS數組slice方法是JS語言中最強大、最常用的內建函數之一。隨著React和其他面向功能的JavaScript實踐的興起，它變得越來越重要，原因有兩個:函數式編程，尤其是高階函數，與數據列表密切配合函數式編程需要純函數，即不會產生副作用或修改輸入數據的函數JavaScript 數組slice方法符合這兩個標準。slice方法可以在不修改原始列表的情況下創建列表子集的淺拷貝。
  • 超詳細的 JS 數組方法
    一、創建數組1.使用數組字面量表示法var arr4 = [];   //創建一個空數組var arr5 = [20];   // 創建一個包含1項數據為20的數組var arr6 = ["lily","lucy","Tom"];   // 創建一個包含3個字符串的數組2.使用 Array 構造函數無參構造
  • JS 面試之數組騷操作
    3.排序1.終極篇 [1,2,3,4].sort(); // [1, 2,3,4],默認是升序 [1,2,3,4].sort((a, b) => b - a); // [4,3,2,1] 降序sort是js內置的排序方法,參數為一個函數2.開始篇
  • JavaScript 數組操作函數總結
    js中數組操作函數還是非常多的，今天忽然想到來總結一下，也算是溫故而知新吧。
  • 22個超詳細的 JS 數組方法
    一、創建數組1.使用數組字面量表示法var arr4 = [];   //創建一個空數組var arr5 = [20];   // 創建一個包含1項數據為20的數組var arr6 = ["lily","lucy","Tom"];   // 創建一個包含3個字符串的數組2.使用 Array 構造函數無參構造
  • 匯總三:不會JS數組的這幾個操作怎麼好意思叫高手
    前面兩篇把js數組的幾組基本操作方法過了一遍，本節來盤一盤js的數組操作的幾個高級操作，據說這是小白和高手的分水嶺。1 concat方法：合併數組這是兩個數組的操作，那兩個數組拼接一個新的數組，當然也可以拼接自己。數組的拼接，插入元素，刪除元素在實際項目中，數據整合過程中用到較多。
  • JS 面試之數組的幾個不 low 操作
    reduce是ES5的數組api，參數有函數和默認初始值。函數有四個參數：pre：上一次的返回值cur：當前值curIndex：當前值索引arr：當前數組(1));}} sum([1,2,3,4])//10利用 slice截取改變數組，再利用遞歸求和。
  • 超詳細的 JS 數組方法整理出來了
    一、創建數組1.使用數組字面量表示法var arr4 = [];   //創建一個空數組var arr5 = [20];   // 創建一個包含1項數據為20的數組var arr6 = ["lily","lucy","Tom"];   // 創建一個包含3個字符串的數組2.使用 Array 構造函數無參構造
  • 高階函數不會用?教你JS中最實用的幾個高階函數用法
    /index.js"></script></body>// index.js// 回調函數// 異步請求let getInfo = function(keywords, callback) { $.ajax({ url: 'http
  • 【數組分享】PHP函數array_slice ()分享(2020-11-25)
    array_slice () 從數組中取出一段。 array array_slice ( array $array , int $offset [, int $length = NULL [, bool $preserve_keys = false ]] )array_slice() 返回根據 offset 和 length 參數所指定的 array 數組中的一段序列。
  • 巧用 PHP 數組函數
    0x00 前言PHP 的數組是一種很強大的數據類型，與此同時 PHP 內置了一系列與數組相關的函數可以很輕易的實現日常開發的功能
  • 區分JavaScript數組的slice()與splice()
    簡述JavaScript數組中存在兩個看起來十分相似的方法，分別是slice()與splice()。其中，JavaScript的 slice() 方法可從已有的數組中返回選定的元素，該方法不會改變原始數組。
  • JS基礎知識整理-字符串和數組
    - b);在對數字進行排序時需要通過體格比值函數來修正sort((a, b) => 0.5 - Math.random());以隨機順序排序數組對象數組排序 可以通過對比函數對比對象的屬性 如： sort(function (a, b
  • 有趣的JavaScript原生數組函數
    .forEach有一個單獨的函數作為參數，遍歷時間表時，每個數組元素均會調用它，從而函數接受三個參數：值：當前元素index：當前元素的索引array：要遍歷的數組此外，可以傳遞可選的第二個參數，作為每次函數調用的一部分（此）。
  • WPJAM Basic 內置的數組處理函數
    PHP 有很多非常好用的數組處理函數，查看 PHP 官方文檔，數組函數都有 80 多個，但是在使用過程，還是有一些數組的操作使用比較多，我就把這些函數整理成工具函數
  • 10個非常實用的JS工具函數
    作者 | WahFung出處 | http://www.cnblogs.com/chanwahfung生成一周時間new Array 創建的數組只是添加了
  • js數組常用的幾個函數總結
    javascript中，數組是很常用的。數組的函數很多，下面分享幾個常用的數組函數。每個函數都用瀏覽器測試過。     下面每個測試結果都是在google瀏覽器console上執行的。length屬性。數組的length屬性，返回數組的元素個數.JavaScript使用一個32位整數，保存數組的元素個數。