西部開源 2019.6.22 Web全棧開發學習筆記（十一）

JavaScript Day 4

上課日期：2019年8月8日

課程内容

一、JavaScript中字元串的正常方法

字元串定義

直接使用var就可以定義字元串
var s="123"; var b="456";
字元串的拼接

直接使用“+”号或者concat可以将兩個或多個字元串拼接在一起

console.log(s + b);
console.log(s.concat(b));

這兩種都可以輸出将字元串s和字元串b拼接起來的内容

indexOf尋找字元

首先定義一個字元串
var str="a,b,c,def,ga"; 使用indexOf可以輸出從左到右該字元所在的位置，例如

console.log(str.indexOf("a"));

輸出結果為0

console.log(str.indexOf("e"));

輸出結果為4（字元串中的“，”也算位置）

同理，lastindexOf也可以尋找字元，不同的是lastindexOf的順序是從右到左

使用index周遊字元串

for(var index in str)
    {
        console.log(str[index]);
    }

使用如上代碼可以周遊字元串并輸出

charAt根據索引傳回字元以及把ASCII轉換為字元

依然使用上面定義的str字元串

console.log(str.charAt(0));

則輸出結果為a

另外，使用charCodeAt還可以根據索引傳回目前的ASCII碼值

fromCharCode可以用來把ASCII值轉化為字元

console.log(String.fromCharCode(97));

輸出結果為小寫字母a

substr字元串的截取

substr的兩個參數分别為開始截取的位置和截取的長度，例如

console.log(str.substr(0, 2));

輸出結果為a，

replace字元替換

使用replace可以對字元串中的字元進行替換，傳回值是替換之後的字元串，例如：

console.log(str.replace("a", "m"));

輸出的值為将字元串中的a替換為m後的字元串，即m,b,c,def,g

注意：這個方法并不能改變原本的字元串

search按字元傳回目前索引

console.log(str.search('a'));

輸出結果為0

split将字元串轉換為數組

console.log(str.split(","));

其中的逗号意思是以逗号為分隔符将逗号兩邊的轉化為數組

length長度屬性

功能是輸出字元串的長度，例如

console.log(str.length);

輸出結果為12

大小寫轉化

大小寫轉化主要用兩個方法toUpperCase()和toLowerCase()

用法如下：

console.log(str.toUpperCase());
console.log(str.toLowerCase());

二、字元串的常見算法

找一個字元串中最長的單詞

var st = "The quick brown fox jumped backed jumped over the lazy dog";
    function showDanci(str) {
        var arr = st.split(" ");
        var temp = arr[0];
        for (var i = 1; i < arr.length; i++) {
            if (temp.length < arr[i].length) {
                temp = arr[i];
            }
        }
        return temp;
    }
    console.log(showDanci(st));

輸出結果為jumped，即6位字母的最長單詞

數組去重

var arr = [1, 1, 2, 3, 4, 3, 5, 5, 6, 7, 8, 8, 9, 9, 9, 9, 9, 9, 9, 9, 9];
    function moveNumber(array) {
        for (var i = 0; i < array.length - 1; i++) {
            var temp = array[i];
            for (var k = i + 1; k < array.length; k++) {
                if (temp == array[k]) {
                    array.splice(k, 1);
                    k--;
                }
            }
        }
        return array;
    }
    console.log(moveNumber(arr));

輸出結果為去重後的數組，即[1, 2, 3, 4, 5, 6, 7, 8, 9]

統計一個字元串中出現最多的以及出現的字數（給出一個字元串，統計出現次數最多的字母）

var str1 = "cccccccccasdfssaaasasasasaadddddddd";
    function findChar(str) {
        var ss = moveNumber(str.split(""));
        /*[a,c,f,h]*/
        var list = [];
        for (var i = 0; i < ss.length; i++) {
            var count = 0;
            for (var index in str) {
                if (ss[i] == str.charAt(index)) {
                    count++;
                }
            }
            list.push([ss[i], count]);
        }
        var tong = 1;
        for (var i = 0; i < list.length; i++) {
            if (list.length <= tong)break;
            if (list[i][1] > list[i + 1][1]) {
                list.splice(i + 1, 1);
                i--;
            }
            else if (list[i][1] < list[i + 1][1]) {
                list.splice(i, 1);
                i--;
            }
            else {
                tong++;
            }
        }
        return function () {
            var strlist = "";
            for (var i = 0; i < list.length; i++) {
                strlist += list[i][0] + "---" + list[i][1] + "個"
            }
            return strlist;
        }

    }
    console.log(findChar(str1)());

輸出結果為c—9個a—9個d—9個

階乘

function jiecheng(n) {
        if (n <= 1) {
            return 1;
        }
        return n * jiecheng(n - 1);
    }
    console.log(jiecheng(5));

輸出結果120

三、JavaScript數組以及常用方法

數組的基本聲明

定義一個數組并輸出

var arr=new Array({});
    console.log(arr);

輸出結果為一個空的數組，即：

0: {}

length: 1

__ proto__: Array(0)

數組的指派

還是使用上面那個數組，我們可以對其直接進行指派

arr[0]=1;
    arr[1]="a";
    arr[2]=null;
    arr[3]={};
    arr[4]=true;
    arr[5]=undefined;
    arr[6]=function(){};
    console.log(arr[0]);

指派後輸出，結果就是一個指派後的數組

0: 1

1: “a”

2: null

3: {}

4: true

5: undefined

6: ƒ ()

length: 7

__ proto__: Array(0)

數組的簡化聲明

var  a=[1,2,3,4];
var b=[4,5,6];

這樣的方法也可以直接聲明一個有值的數組

數組的過濾

使用filter方法可以對數組中的值進行過濾并傳回過濾出的值，例如，過濾上面定義的a數組中2的倍數

console.log(a.filter(function (val, index, arr) {
        if (val % 2 == 0) {
            return val;
        }
    }));

傳回結果是一個含有2和4的數組

将數組轉化為字元串

利用join方法可以将數組轉化為字元串

console.log(a.join(""));

輸出結果為字元串1234

周遊數組，映射一個新數組

例如，可以聲明一個b數組，使其裡面的值為a數組每個值的平方，寫法如下

var b=a.map(function (val, index, arr) {
            return val*val;
    })
    console.log(b,a);

輸出為b數組和a數組

b數組：[1, 4, 9, 16]

a數組：[1, 2, 3, 4]

數組的截取

使用slice方法可以對數組進行截取，對原數組是無影響的，例如，截取數組a的1号到3号位置輸出後，再輸出原數組a

console.log(a.slice(1, 3));
    console.log(a);

輸出結果為[2, 3]

[1, 2, 3, 4]

數組的截斷

splice方法是對數組進行截斷，與使用slice截取不同的是，splice可以影響到原數組，截取之後，原數組會删除掉截取的這些值，例如對數組a的0号到3号進行截斷後，再輸出原數組

console.log(a.splice(0, 3));
    console.log(a);

輸出結果為[1, 2, 3]

[4]

數組的往前追加和往後追加

往前追加是unshift，往後追加是push

先在數組後追加一個9，輸出後再往前追加一個7，再輸出

a.push(9)
    console.log(a);
    a.unshift(7)
    console.log(a);

兩次輸出結果為[4, 9]

[7, 4, 9]

數組的前删和後删

前删是shift，後删是pop

使用上面[7, 4, 9]那個數字，先前删輸出，再後删輸出

a.shift()
    console.log(a)
    a.pop();
    console.log(a);

兩次輸出結果為[4, 9]

[4]

數組的翻轉

使用reverse方法可以使數組翻轉，例如

var  a=[1,2,3,4];
a.reverse();
    console.log(a);

輸出結果為[4, 3, 2, 1]

數組的簡單排序

sort方法的用途是對數組進行排序，預設是從小到大排序

var b=[2,1,4,3,6,5];
    console.log(b.sort());

輸出結果[1, 2, 3, 4, 5, 6]

檢測數組裡面的值

some方法，用于檢測數組裡面的值，傳回值是true和false，代表檢測到或未檢測到

console.log(b.some(function (val, index, arr) {
        return val == 11;
    }));
    console.log(b.some(function (val, index, arr) {
        return val == 1;
    }));

輸出結果分别為false和true

累加器

console.log(b.reduce(function (totle, current, index) {
        console.log(totle,current);
        return totle *= current;
    }));

輸出結果為1 2

2 3

6 4

24 5

120 6

720

前面一列代表總數，後面的則為目前要加上去的數

四、JavaScript中數組的排序

冒泡排序

var arr = [3, 2, 0, 1, 7, 5, 4, 6, 9, 8];
    function maopao(array) {
        if (array.length == 1) {
            return array;
        }
        var temp;
        for (var i = 0; i < array.length - 1; i++) {
            for (var k = 0; k < array.length - i - 1; k++) {
                if (array[k] < array[k + 1]) {
                    temp = array[k];
                    array[k] = array[k + 1];
                    array[k + 1] = temp;
                }
            }
        }
        return array;
    }
    console.time();
    console.log(maopao(arr));
    console.timeEnd();

快速排序

function quickSort(array) {
        if (array.length <= 1) {
            return array;
        }
        var center = array.splice(parseInt(array.length / 2), 1);
        var left = []; //相對于中間值  左邊放  右邊放
        var right = [];
        for (var i = 0; i < array.length; i++) {
            if (array[i] < center) {
                left.push(array[i]);
            }
            else {
                right.push(array[i]);
            }
        }
        return quickSort(left).concat(center).concat(quickSort(right));
    }
    console.time();
    console.log(quickSort(arr));
    console.timeEnd();

選擇排序

function selectSort(array){
        if(array.length<=1)
        {
            return array;
        }
        //預設一個值  數組裡面第一個
        for(var i=0;i<array.length;i++)
        {
            var temp;
            for(var k=i+1;k<array.length;k++)
            {
                if(array[k]>array[i])
                {
                    temp=array[i];
                    array[i]=array[k];
                    array[k]=temp;
                }
            }

        }
        return array;
    }
    console.time();
    console.log(selectSort(arr));
    console.timeEnd();

西部開源 2019.6.22 Web全棧開發學習筆記（十一）

JavaScript Day 4

上課日期：2019年8月8日

課程内容

繼續閱讀

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

判斷浏覽器類型與版本以及ios安卓判别

JS生成uuid的四種方法

layui多任務上傳添加進度條

西部開源 2019.6.22 Web全棧開發 學習筆記（十一）

JavaScript Day 4

上課日期：2019年8月8日

課程内容

繼續閱讀

西部開源 2019.6.22 Web全棧開發學習筆記（十一）