前端總結·基礎篇·JS（二）數組深拷貝、去重以及字元串反序和數組（Array）

来源:http://www.cnblogs.com/bergwhite/archive/2017/03/14/6551000.html
-Advertisement-
Play Games

這是《前端總結·基礎篇·JS》系列的第二篇，主要總結一下JS數組的使用、技巧以及常用方法。 ...


前端總結系列

目錄

這是《前端總結·基礎篇·JS》系列的第二篇，主要總結一下JS數組的使用、技巧以及常用方法。


一、數組使用
    1.1 定義數組
    1.2 使用數組
    1.3 類型檢測
二、常用技巧
    2.1 數組去重
    2.2 數組深拷貝
    2.3 字元串反序
三、方法列表
    3.1 存取
    3.2 字元串
    3.3 修改
    3.4 ES5
    3.5 ES2015(ES6)
    3.6 ES2016

一、數組使用

數組不是基本數據類型，但是非常常用，所以提前總結。

基本數據類型是String,Number,Boolean,null,undefined。

  • Boolean只有兩個狀態，true/false
  • null一般是開發者定義
  • undefined是JS引擎拋出的異常，通常在發現調用未聲明的變數時拋出

1.1 定義數組

數組用中括弧括起來，不同的值用逗號隔開。數組內的值有字元串需要用單引號或者雙引號引起來。


var arr = [3,6,8,9]  // 直接定義數組並且賦值給變數
var arr = new Array(3,6,8,9)  // 創建一個數組對象並賦值

1.2 使用數組

數組的下標是從0開始的，最後一個值的下標是數組長度減去1。訪問數組可以直接訪問具體下標的一個值，也可以直接訪問整個數組的值。


console.log(arr)  // 直接訪問數組
console.log(arr[0])  // 通過下標訪問
console.log(arr.length)  // 訪問數組的長度

/* 使用for in遍歷訪問數組中的值 */

for(x in arr){
    console.log(arr[x])
}

ES6

/* 使用for of遍歷訪問數組中的值 */

for(x in arr){
    console.log(x)
}

1.3 類型檢測

檢測一個對象有以下方法。更精確的檢測數組請見請見jwalden

* typeof []  // object
* [] instanceof Array  // false
* Array.isArray([])  // true  通常用來檢測數組
    * Array.isArray(Array.prototype)  // true  這是一個例外情況

二、常用技巧

2.1 數組合併

用concat方法進行數組合併。


var a = [1,2,3]
var b = [4,5,6]
Array.prototype.push.call(a,b)
console.log(a)  // [1, 2, 3, 4, 5, 6]

2.2 數組深拷貝

我們可以根據concat/slice方法返回新數組的特性來進行深拷貝。


var arr = [1,2,3,4]
var newArr = arr.concat()  // 此處使用arr.slice()效果一致

arr.pop()
console.log(arr)  // [1, 2, 3]
console.log(newArr)  // [1, 2, 3, 4]

2.3 數組去重

排序後去重，更多請見腳本之家

var newArr = arr.sort()  // 排好序再比較
var newArrSaved = [newArr[0]]  // 初始化為數組，用來存儲最後的數據
for(var i =2;i<arr.length;i++){  // 從第二個開始
    if(newArr[i]!==newArr[i-1])  // 判斷當前值和上一個值是否一致
    newArrSaved.push(newArr[i])  // 不一致則存在newArrSaved
}

2.4 字元串反序

首先將字元串序列化成數組，通過數組方法對數組反序，最後把數組轉換成字元串。


'I See U.'.split('').reverse().join('')  // ".U eeS I"

三、方法列表

ES5和ES6部分就當作參考手冊吧，有時間再琢磨一下應用場景。

以下實例在此基礎上進行


arr = [1,2,3,4]

3.1 存取

push在尾部添加，pop從尾部刪除。

尾存取


push(element1, ..., elementN) 
    * arr.push(8)  // [1, 2, 3, 4, 5]
pop()
    * arr.pop()  // [1, 2, 3, 4]

首存取

unshift在首部添加，shift從首部刪除。


unshift(element1, ..., elementN)
    * arr.unshift(5)  // [5, 1, 2, 3, 4]

shift
    * arr.shift()  // [1, 2, 3, 4]

3.2 轉換

字元串

join預設以逗號分隔連接的字元串，傳入參數可以進行自定義分割方式。


toString()
    * arr.toString()  // "1,2,3,4"
toLocalString()
    * arr.toLocalString()  // 和上面的效果一致，此方法僅在特殊語言中需要
join(separator)
    * arr.join()  // "1,2,3,4"
    * arr.join('')  // "1234"
    * arr.join('-')  // "1-2-3-4"

3.3 修改

排序

reverse把數組顛倒，sort對數組排序。sort預設按照unicode排序，傳入function(a,b)可以自定義排序。更多請見MDN（內有對象按屬性值排序的方法）


reverse()
    * arr.reverse()  // [4, 3, 2, 1]
sort()
    * arr.sort()  // [1, 2, 3, 4] 這個已經排好了序，所以不變

連接

concat連接數組，並返回一個新的數組。


concat(value1[, value2[, ...[, valueN]]])
    arr.concat(9)  // [1, 2, 3, 4, 9]

切割

切割比上面的稍微複雜點

  • slice為提取元素，splice為刪除指定範圍元素並添加新元素。slice的第二個參數，是結束的位置標記，不會包括在返回值內。

  • slice的返回值是提取元素組成的新數組。splice的返回值是刪除元素組成的新數組，原始元素被修改。

  • slice在IE<9下使用時，會出現一些問題，需要使用膩子腳本。詳見MDN


slice(begin,end)
    * arr.slice(1,3)  // [2, 3]
splice(start, deleteCount, item1, item2, ...)
    * arr.splice(1,3,5)  // [2, 3, 4] 返回值
    * console.log(arr)  // [1, 5]  原始元素被修改

3.4 ES5

需要精確檢測數組請見jwalden


數組檢查

Array.isArray(obj)  // 檢查是否為數組，返回值為true/false，相容IE9+
    * Array.isArray([1,2,3])  // true
    * Array.isArray('123')  // false
    * Array.isArray(Array.prototype)  // true
arr.every(callback[, thisArg])
    * function isNotZero(element, index, array){return element!==0}
    * arr.every(isNotZero)  // true
arr.map(callback[, thisArg])  // 每個值都調用一次函數並且返回新數組
    * function twice(element, index, array){return element*element}
    * arr.map(twice)  // [1, 4, 9, 16]
arr.reduce(callback,[initialValue])  // 將多維數組轉為一維數組
arr.some(callback[, thisArg])  // 測試元素是否通過指定測試
arr.indexOf(searchElement[, fromIndex = 0])  // 返回滿足條件的第一個索引，不存在返回-1
    * arr.indexOf(3)  // 2
arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])  // 由後向前查找
arr.forEach(callback[, thisArg])  // 對數組每個元素執行一次函數

3.5 ES2015(ES6)


Array.of(element0[, element1[, ...[, elementN]]])  // 創建新數組
    * Array.of(3)  // [3]
    * Array(3)  // [undefined × 3]
    * Array.of([1,2,3])  // [Array[3]]
    * Array([1,2,3])  // [Array[3]]

Array.from(arrayLike[, mapFn[, thisArg]])  // 從類數組對象或可遍歷對象中創建數組
    * Array.from('berg')  // ["b", "e", "r", "g"]

arr.copyWithin(target, start, end)  // 選定數組值，在一定範圍內全部粘貼選定值
    * arr.copyWithin(1,2,3)  // [1, 3, 3, 4]

arr.entries()  // 返回新的數組迭代器（一定得複製給變數再迭代）
    * var newArr = arr.entries()
    * newArr.next().value  // [0, 1]
    * newArr.next().value  // [1, 2]
    * newArr.next().value  // [2, 3]
    * newArr.next().value  // [3, 4]

arr.keys()  // 返回新的數組迭代器

arr.fill(value, start, end)  // 用指定值填充一定範圍數組
    * arr.fill(0,1,3)  // [1, 0, 0, 4]

arr.filter(callback[, thisArg])  // 將滿足條件的元素返回成新數組
    * function isNotZero(element){return element!==0}
    * arr.filter(isNotZero)  // [1, 2, 3, 4]

arr.find(callback[, thisArg])  // 返回滿足條件的第一個值，不存在返回undefined
    * function isNotZero(element){return element!==0}
    * arr.find(isNotZero)  // 1

arr.findIndex(callback[, thisArg])  // 返回滿足條件的第一個元素的索引
    * function isNotZero(element){return element!==0}
    * arr.findIndex(isNotZero)  // 0

3.6 ES2016


arr.includes(searchElement, fromIndex)  // 判斷數組是否包含指定值，返回true/false
    arr.includes(2)  // true

總結

  • 上一周一直在忙活Note這個小項目，現在已經上線了。以後會逐步增大項目複雜度。並且嘗試用Vue和RN來分別對項目進行重構，後端則逐步接入Node.js和mongoDB。相容性支持IE9及以上，根據IE7/8訪客基數決定是否相容。
  • 接下來的時間就安心的總結JS和更博客吧。關於Note開發過程中遇到的問題，以及解決方案，等整理好了再發出來。

文章主要參考的站點

ES5

前端相容性方案


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • CSS3背景相關樣式
    background-image繪製多張圖片疊加，示例如下: css3的box-shadow屬性: 讓ie6、7、8都支持border-radius 、box-shadow、text-shadow的方法:用ie-css3.htc 首先下載ie-css3.htc腳本，然後在css中加入： 它的使用方法 ...
  • JavaScript 獲取 Url 上的參數（QueryString）值
    獲取URL裡面傳的參數,在Js中不能像後臺一樣使用Request.QueryString來獲取URL裡面參數，下麵介紹兩種方式用來獲取參數 方式一：使用split分隔來獲取，這種方法考試了地址中包含了returnUrl參數的形式，如果地址中本來就包含了另外一個網址，這個時候需要先過濾掉這個網址再去獲 ...
  • Vuex 模塊化實現待辦事項的狀態管理
    前言 在vue里，組件之間的作用域是獨立的，父組件跟子組件之間的通訊可以通過prop屬性來傳參，但是在兄弟組件之間通訊就比較麻煩了。比如A組件要告訴一件事給B組件，那麼A就要先告訴他們的爸組件，然後爸組件再告訴B。當組件比較多，要互相通訊的事情很多的話，爸組件要管他們那麼多事，很累的。vuex正是為 ...
  • 簡易漫畫網站搭建-漫畫喵Server版
    本文實現了一個簡單的個人漫畫網站，配合之前的漫畫爬蟲使用。享受無處不在的漫畫生活。 github地址：https://github.com/miaoerduo/cartoon-cat-server 歡迎大家star、fork和指教。 ...
  • JavaScript變數相關問題
    JavaScript變數包含的兩種不同數據類型的值——基本類型值和引用類型值的區別；ECMAScript和JavaScript的關係。 ...
  • 我寫的京東頁面代碼
    1、index.html 主要搭建頁面的結構 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ...
  • 原生js更改css樣式的兩種方式
    給大家介紹的是原生js更改CSS樣式的兩種方式: 1通過target.style.cssText="CSS表達式"實現 2活用classname動態更改樣式 ...
  • Flex 基礎語法（一）
    任何一個容器都可以指定為Flex佈局。 行內元素也可以使用Flex佈局。 Webkit內核的瀏覽器，必須加上-webkit首碼。 註意，設為Flex佈局以後，子元素的float、clear和vertical-align屬性將失效。 採用Flex佈局的元素，稱為Flex容器（flex containe ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類