1. 程式人生 > >每天10個前端知識點:陣列應用

每天10個前端知識點:陣列應用

以下內容若有問題煩請即時告知我予以修改,以免誤導更多人。

1. 陣列翻轉方法2

eg: 這裡說明一下,這個方法用的不是reverse,因為一次面試中被問過不用reverse實現翻轉,所以這裡標註為陣列的翻轉方法2。

<script>
    var arr=[1,2,3,4];
    var arr2=[];
    while(arr.length) {
        var num=arr.pop();
        arr2.push(num);
    }
    alert(arr2);
</script>

2. 首字母大寫

eg:

<script>
    var
str = 'welcome to china'; var arr = str.split(' '); var arr2 = []; for(var i = 0; i < arr.length; i++) { var first = arr[i].charAt(0).toUpperCase(); var other = arr[i].substring(1); arr2.push(first + other); } alert(arr2.join(' ')); //正則寫法 var str2 = str.replace(/\w+/g
, function(s) { return s.charAt(0).toUpperCase().substring(); }) alert(str2); </script>

3.快速清空陣列

  1. length=0;
  2. arr=[];
  3. arr.splice(0,arr.length);
  4. 迴圈pop或shift

4. 陣列排序方法

更多方法見後續排序演算法篇

<script>
    function findMinIndex(arr, start) {
        var iMin = arr[start];
        var
iMinIndex = start; for(var i = start + 1; i < arr.length; i++) { if(iMin > arr[i]) { iMin = arr[i]; iMinIndex = i; } } return iMinIndex; } for(var i = 0; i < arr.length; i++) { var iMinIndex = findMinIndex(arr, i); var temp; temp = arr[iMinIndex]; arr[iMinIndex] = arr[i]; arr[i] = temp; } </script>

5. 陣列內查詢元素是否存在

<script>
    function findInArr(item, arr) {
        for(var i = 0; i < arr.length; i++) {
            if(item == arr[i]) {
                return true;
            } else {
                return false;
            }
        }
    }
</script>

6. 陣列去重的多種方法

(1)findInArr

<script>
    var arr2 = [];

    for(var i = 0; i < arr.length; i++) {
        if(!findInArr(arr[i], arr2)) {
            arr2.push(arr[i]);
        }
    }

    // 陣列內查詢元素是否存在
    function findInArr(item, arr) {
        for(var i = 0; i < arr.length; i++) {
            if(item == arr[i]) {
                return true;
            } else {
                return false;
            }
        }
    }
</script>

(2)json(自動從小到大排序)

<script>
    var json = {};
    var arr2 = [];

    for(var i = 0; i < arr.length; i++) {
        json[arr[i]] = 'xxx';
    }

    for(var name in json) {
        arr2.push(name);
    }
</script>

(3)sort()

<script>
    arr.sort();
    for(var i = 0; i < arr.length; i++) {
        if(arr[i] == arr[i+1]) {
            arr.splice(i, 1);
            i--;
        }
    }
</script>

(4) indexOf

這個方法是在前端公眾號偶然看到的,陣列的indexOf方法第一次用到

<script>
    for(var i = 0; i < arr.length; i++) {
        if(arr2.indexOf(arr[i]) < 0) {
            arr2.push(arr[i]);
        }
    }
</script>

(5)二分法

<script>
    var arr = [1, 2, 3, 2, 4, 3, 1, 5, 7, 2, 5];

    // 陣列內查詢元素是否存在
    function findInArr(item, arr) {
        for(var i = 0; i < arr.length; i++) {
            if(item == arr[i]) {
                return true;
            }
        }
        return false;
    }

    function del(arr, s, e) {
        if(s > e) {
            return [];
        } else if(s == e) {
            return [arr[s]];
        }

        var c = Math.floor((s + e) / 2);
        var l = del(arr, s, c);
        var r = del(arr, c + 1, e);

        for(var i = 0; i < r.length; i++) {
            if(!findInArr(r[i], l)) {
                l.push(r[i]);
            }
        }

        return l;
    }

    console.log(del(arr, 0 , arr.length - 1));
</script>

更多內容可以訂閱本人微信公眾號,一起開啟前端小白進階的世界!
微信公眾號:無媛無故

相關推薦

每天10前端知識點陣列應用

以下內容若有問題煩請即時告知我予以修改,以免誤導更多人。 1. 陣列翻轉方法2 eg: 這裡說明一下,這個方法用的不是reverse,因為一次面試中被問過不用reverse實現翻轉,所以這裡標註為陣列的翻轉方法2。 <script&g

每天10前端知識點原生篇(4)

以下內容若有問題煩請即時告知我予以修改,以免誤導更多人。 1. 引數的陣列arguments 引數中的陣列,函式中可以不需要定義引數 <script> sum(12, 5, 6); function sum()

每天一個JS 小demo之自定義滾動條。主要知識點事件應用

prevent 數據 滾動 sca listener 視頻 希望 特效 poi <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>D

每天一個JS 小demo之郵件刪除。主要知識點事件應用

inline order else ont math tee tom seo onchange <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><ti

掌握這10核心知識點C語言就算入門了

1、順序、分支、迴圈等基本語句; 2、char、int、double、float等基本資料型別; 3、帶引數巨集定義和函式的區別; 4、指標和陣列的區別,尤其注意下指標陣列和陣列指標; 5、函式指標和指標函式; 6、結構體和聯合體以及自定義型別typedef的應用; 7、printf、sca

js-隨機產生一個由10元素組成的陣列

一.隨機產生一個由10個元素組成的一個數組。 第一步:建立一個隨機函式; 第二步:定義一個空陣列; 第三步:for迴圈遍歷,將隨機的每一個數新增在數組裡面。 上面的這一種方法,隨機產生的10個元素的陣列,其實是有重複的,下面的這種方法可以去重複。 二.隨機產生一個由10個

【新書推薦】【2019.10每天10分鐘學習SQLSams教你如何自學(第5版)

【2019.10】每天10分鐘學習SQL:Sams教你如何自學(第5版)SQL in 10 Minutes a Day, Sams Teach Yourself (5th Edition),共306頁。 無論您是應用程式開發人員、資料庫管理員、Web應用程式設計人員、移動應用程式開

前端面試題(每天10

說不定哪天就要重新找工作了,作為知識的儲備和鞏固學習,每天記一點東西總歸是好的。(儘可能的每天更新一點) 目錄 HTML Doctype 有什麼用? HTML 中用來區分標準模式和怪異模式的宣告,用來告知瀏覽器使用標準模式渲染頁面。

OWASP Top 10十大風險 – 10最重大的Web應用風險與攻防

先來看幾個出現安全問題的例子OWASP TOP10開發為什麼要知道OWASP TOP10TOP1-注入TOP1-注入的示例TOP1-注入的防範TOP1-使用ESAPI(https://github.com/ESAPI/esapi-java-legacy)TOP2-失效的身份認

Java宣告一個10元素的整數陣列,隨機賦值,列印輸出,排序後,列印輸出

import java.util.Random; public class Arr11{      public static void main(String[] args){        int[] aa =new int [10];        Rand

前端演算法給定兩陣列,編寫一個函式來計算它們的交集(兩陣列的交叉點)

給定兩個陣列,編寫一個函式來計算它們的交集。 例1: 輸入: nums1 = [1,2,2,1],nums2 = [2,2] 輸出:[2,2] 例2: 輸入: nums1 = [4,9,5],nums2 = [9,4,9,8,4] 輸出:[4,9] 注意: 結果

生成十0~100之間的隨機數,放到陣列中,然後排序輸出。(知識點Math類取整,獲得隨機數等) [必做題]

import java.util.Arrays; import java.util.Scanner; public class 隨機陣列排序 { public static void main(String[] args) { Scanner s = new Scanner(Syst

Java程式設計定義一個int型的一維陣列,包含10元素,分別賦一些隨機整數,然後求出所有元素的最大值,最小值,平均值,和值,並輸出出來。

public class Program1 {/**1.定義一個int型的一維陣列,包含10個元素,分別賦一些隨機整數,然後求出所有元素的最大值,最小值,平均值,和值,並輸出出來。*/public static void main(String[] args) { int[

前端開發10Chrome擴充套件你不得不知

轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。 原文出處:https://blog.bitsrc.io/10-top-chrome-extensions-for-front-end-developers-db23a01dce1e 1. CSSViewer &nb

每天一個JS 小demo之原生數組splice方法書寫。主要知識點鍛煉思維邏輯能力,對於數組方法的理解和各種情況的考量

scrip charset 是否 isn 如果 情況 del 當前 cti <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <titl

每天一個JS 小demo之韓雪冬輪播圖。主要知識點html,css布局,對於數組和對象的理解和運用

身高 全局 borde ava ebo 空間 use mouseout desc 1 @charset "utf-8"; 2 /* CSS Document */ 3 4 * { padding: 0; margin: 0; } 5 li { list-st

每天一個JS 小demo之個人信息添加。主要知識點DOM操作中的表格操作,節點操作

mov src i++ blog this tex set elements img 以下是簡易效果: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

每天一個JS 小demo之通過鍵盤方向鍵操作圖片上下左右無縫切換。主要知識點事件

tco listen add head query ceo defined clas css <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><ti

每天一個JS 小demo之通過事件委托實現菜單展開及選中特效。主要知識點事件

實現 tween efi blog dem int position 16px eas <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><titl