前端總結·基礎篇·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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類