JS常用方法函數(shù)

Sike 發(fā)布于2019-08-21 17:01 / 3389人閱讀

摘要：例如，表示以上未涉及到的其他對象，例如，表示全局變量，例如，道格拉斯的方法等同于方法

JS常用方法函數(shù)

字符串長度截取

惰性求值

閉包

基本包裝類型(包裝對象)

對象遍歷（最佳方法）

數(shù)組遍歷（內(nèi)置方法）

怎么判斷一個object是否是數(shù)組(array)？

加法操作表

排序方法

前綴規(guī)范

道格拉斯的object方法（等同于object.create方法）

1. 字符串長度截取

function cutstr(str, len) {
    var temp,
        icount = 0,
        patrn = /[^x00-xff]/,
        strre = "";

    for (var i = 0; i < str.length; i++) {
        if (icount < len - 1) {
            temp = str.substr(i, 1);
            if (patrn.exec(temp) === null) {
                icount += 1;
            } else {
                icount += 2;
            }
            strre += temp;
        } else {
            break;
        }
    }
    return strre + "...";
}

2. 惰性求值

const range = function* (from, to) {
    for (let i = from; i < to; i++) {
        console.log("range	", i);
        yield i;
    }
};

const map = function* (flow, transform) {
    for (const data of flow) {
        console.log("map	", data);
        yield (transform(data));
    }
};

const filter = function* (flow, condition) {
    for (const data of flow) {
        console.log("filter	", data);
        if (condition(data)) {
            yield data;
        }
    }
};

const stop = function* (flow, condition) {
    for (const data of flow) {
        yield data;
        if (condition(data)) {
            break;
        }
    }
};

const take = function (flow, num) {
    let count = 0;
    const _filter = function (data) {
        count++;
        return count >= num;
    };
    return stop(flow, _filter);
};

class _Lazy {
    constructor() {
        this.iterator = null;
    }

    range(...args) {
        this.iterator = range(...args);
        return this;
    }

    map(...args) {
        this.iterator = map(this.iterator, ...args);
        return this;
    }

    filter(...args) {
        this.iterator = filter(this.iterator, ...args);
        return this;
    }

    take(...args) {
        this.iterator = take(this.iterator, ...args);
        return this;
    }

    [Symbol.iterator]() {
        return this.iterator;
    }
}

function lazy() {
    return new _Lazy();
}

const nums = lazy().range(0, 100).map(n => n * 10).filter(n => n % 3 === 0).take(2);
for (let n of nums) {
    console.log("num:	", n, "
");
}

3. 閉包

const Greeters = [];

//方法一
for (let i = 0; i < 10; i++) {
    Greeters.push(function () {
        return console.log(i);
    })
}
//方法二
for (var i = 0; i < 10; i++) {
    Greeters.push(console.log.bind(null, i))
}
Greeters[0]();//0
Greeters[1]();//1
Greeters[2]();//2

4. 惰性求值

var s1 = "hello world";
var s2 = s1.substr(4);

ECMAScript還提供了三個特殊的引用類型Boolean，String，Number。我們稱這三個特殊的引用類型為基本包裝類型，也叫包裝對象。

也就是說當讀取string，boolean和number這三個基本數(shù)據(jù)類型的時候，后臺就會創(chuàng)建一個對應的基本包裝類型對象，從而讓我們能夠調(diào)用一些方法來操作這些數(shù)據(jù)。

所以當?shù)诙写a訪問s1的時候，后臺會自動完成下列操作：

創(chuàng)建String類型的一個實例；// var s1 = new String(“helloworld”);

在實例上調(diào)用指定方法；// var s2 = s1.substr(4);

銷毀這個實例；// s1 = null;

正因為有第三步這個銷毀的動作，所以你應該能夠明白為什么基本數(shù)據(jù)類型不可以添加屬性和方法，這也正是基本裝包類型和引用類型主要區(qū)別：對象的生存期。

使用new操作符創(chuàng)建的引用類型的實例，在執(zhí)行流離開當前作用域之前都是一直保存在內(nèi)存中。而自動創(chuàng)建的基本包裝類型的對象，則只存在于一行代碼的執(zhí)行瞬間，然后立即被銷毀。

5. 對象遍歷（最佳方法）

//為 Object 設置三個自定義屬性（可枚舉）
Object.prototype.userProp = "userProp";
Object.prototype.getUserProp = function () {
    return Object.prototype.userProp;
};

//定義一個對象，隱式地繼承自 Object.prototype
var obj = {
    name: "percy",
    age: 21,
    [Symbol("symbol 屬性")]: "symbolProp",
    unEnumerable: "我是一個不可枚舉屬性",
    skills: ["html", "css", "js"],
    getSkills: function () {
        return this.skills;
    }
};

//設置 unEnumerable 屬性為不可枚舉屬性
Object.defineProperty(obj, "unEnumerable", {
    enumerable: false
});

//利用 Object.create() 新建一個對象，并且這個對象沒有任何原型鏈
var obj2 = Object.create(null, {
    name: {value: "percy"},
    age: {value: 21},
    skills: {value: ["html", "css", "js"]}
});
/*
* 針對上面的情況，我們用一個更完善的解決方案來解決。
* 使用 Object.prototype.hasOwnProperty.call(obj,’prop’…)
* */
Object.prototype.hasOwnProperty.call(obj2, "name");//true
Object.prototype.hasOwnProperty.call(obj2, "skills");//true
Object.prototype.hasOwnProperty.call(obj2, "userProp");//false

6. 數(shù)組遍歷（內(nèi)置方法）

Array.prototype.forEach()： 對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)

//如果數(shù)組在迭代時被修改了，則按照索引繼續(xù)遍歷修改后的數(shù)組
var words = ["one", "two", "three", "four"];
words.forEach(function (word) {
    console.log(word);
    if (word === "two") {
        words.shift();
    }
});

Array.prototype.map()： 返回一個新數(shù)組，每個元素都是回調(diào)函數(shù)返回的值

// map 的一個坑
[1,2,3].map(parseInt);//[1, NaN, NaN]

一些有用的數(shù)組內(nèi)置方法

Array.prototype.every(callback[,thisArg])：測試數(shù)組的各個元素是否通過了回調(diào)函數(shù)的測試，若都通過，返回 true，否則返回 false（說得本質(zhì)點兒，就是如果回調(diào)函數(shù)每次返回的值都是 true 的話，則 every() 返回 true，否則為 false）

Array.prototype.filter(callback[,thisArg])：返回一個新數(shù)組，數(shù)組的元素是原數(shù)組中通過測試的元素（就是回調(diào)函數(shù)返回 true 的話，對應的元素會進入新數(shù)組）

Array.prototype.find(callback[,thisArg])：返回第一個通過測試的元素

Array.prototype.findIndex(callback[,thisArg])：與上面函數(shù)類似，只不過這個是返回索引

Array.prototype.some(callback[,thisArg])：類似 find() ，只不過它不返回元素，只返回一個布爾值。只要找到一個通過測試的，就返回 true

Array.prototype.reduce(callback,[initialValue])：習慣性稱之為累加器函數(shù)，對數(shù)組的每個元素執(zhí)行回調(diào)函數(shù)，最后返回一個值（這個值是最后一次調(diào)用回調(diào)函數(shù)時返回的值）

這個函數(shù)的回調(diào)函數(shù)有 4 個參數(shù)

accumulator：上一次調(diào)用回調(diào)函數(shù)返回的值

currentValue：當前在處理的值

currentIndex

array

initialValue：可選項，其值用于第一次調(diào)用 callback 的第一個參數(shù)

Array.prototype.reduceRight(callback[, initialValue])：用法和上面的函數(shù)一樣，只不過遍歷方向正好相反

總結(jié)一下上面這些函數(shù)的共性

都是通過每次的回調(diào)函數(shù)的返回值進行邏輯操作或判斷的
回調(diào)函數(shù)都可以寫成更簡潔的箭頭函數(shù)（推薦）
都可以通過形如 Array.prototype.map.call(str,callback) 的方式來操作字符串

7. 怎么判斷一個object是否是數(shù)組(array)

方法一：使用 Object.prototype.toString 來判斷是否是數(shù)組

function isArray(obj) {
    return Object.prototype.toString.call(obj) === "[object Array]";
}

這里使用call來使 toString 中 this 指向 obj，進而完成判斷。

方法二：使用 原型鏈 來完成判斷

function isArray(obj) {
    return obj.__proto__ === Array.prototype;
}

基本思想是利用實例如果是某個構(gòu)造函數(shù)構(gòu)造出來的，那么它的 __proto__ 是指向構(gòu)造函數(shù)的 prototype 屬性。

方法三：利用 JQuery

function isArray(obj){
    return $.isArray(obj)
}

JQuery isArray 的實現(xiàn)其實就是方法一。

8. 加法操作表

Number + Number -> 加法

Boolean + Number -> 加法

Boolean + Boolean -> 加法

Number + String -> 連接

String + Boolean -> 連接

String + String -> 連接

9. 排序方法

冒泡排序

function bubbleSort(arr) {
    var len = arr.length;
    for (var i = 0; i < len - 1; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    return arr;
}

選擇排序

首先在未排序序列中找到最?。ù螅┰?，存放到排序序列的起始位置

再從剩余未排序元素中繼續(xù)尋找最?。ù螅┰?，然后放到已排序序列的末尾

重復第二步，直到所有元素均排序完畢

function selectionSort(arr) {
    var len = arr.length,
        minIndex, temp;

    for (var i = 0; i < len - 1; i++) {
        minIndex = i;
        for (var j = i + 1; j < len; j++) {
            if (arr[j] < arr[minIndex]) {
                minIndex = j;
            }
        }
        temp = arr[i];
        arr[i] = arr[minIndex];
        arr[minIndex] = temp;
    }
    return arr;
}

插入排序

首先在未排序序列中找到最?。ù螅┰兀娣诺脚判蛐蛄械钠鹗嘉恢?/p>

從頭到尾依次掃描未排序序列，將掃描到的每個元素插入有序序列的適當位置。（如果待插入的元素與有序序列中的某個元素相等，則將待插入元素插入到相等元素的后面。）

function insertionSort(arr) {
    var len = arr.length,
        preIndex, current;

    for (var i = 1; i < len; i++) {
        preIndex = i - 1;
        current = arr[i];
        while (preIndex >= 0 && arr[preIndex] > current) {
            arr[preIndex + 1] = arr[preIndex];
            preIndex--;
        }
        arr[preIndex + 1] = current;
    }
    return arr;
}

歸并排序

基本原理是分治法，就是分開并且遞歸來排序。

申請空間，使其大小為兩個已經(jīng)排序序列之和，該空間用來存放合并后的序列；

設定兩個指針，最初位置分別為兩個已經(jīng)排序序列的起始位置；

比較兩個指針所指向的元素，選擇相對小的元素放入到合并空間，并移動指針到下一位置；

重復步驟 3 直到某一指針達到序列尾；

將另一序列剩下的所有元素直接復制到合并序列尾。

function insertionSort(arr) {
    var len = arr.length,
        preIndex, current;

    for (var i = 1; i < len; i++) {
        preIndex = i - 1;
        current = arr[i];
        while (preIndex >= 0 && arr[preIndex] > current) {
            arr[preIndex + 1] = arr[preIndex];
            preIndex--;
        }
        arr[preIndex + 1] = current;
    }
    return arr;
}

10. 前綴規(guī)范

每個局部變量都需要有一個類型前綴，按照類型可以分為：

s：表示字符串。例如：sName，sHtml；    
n：表示數(shù)字。例如：nPage，nTotal；      
b：表示邏輯。例如：bChecked，bHasLogin；      
a：表示數(shù)組。例如：aList，aGroup；      
r：表示正則表達式。例如：rDomain，rEmail；     
f：表示函數(shù)。例如：fGetHtml，fInit；      
o：表示以上未涉及到的其他對象，例如：oButton，oDate；      
g：表示全局變量，例如：gUserName，gLoginTime；

11. 道格拉斯的object方法（等同于object.create方法）

function object(o) {
    var F = function () {
    };
    F.prototype = o;
    return new F();
}

云服務器 GPU云服務器 js有哪些常用方法 php中常用js函數(shù) js打印函數(shù)方法 js函數(shù)定義方法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89029.html

發(fā)表評論

登陸后可評論

0條評論

Sike

男|高級講師

我要關(guān)注我要私信

TA的文章

EXCEL必備工具箱（EXCELtool）官方免費版V17.0 | 超級excel插件工具箱下載 |

閱讀 1729·2021-09-22 10:02
關(guān)于LPC824Lite開發(fā)板下載程序時提示/"Invalid ROM Table

閱讀 1948·2021-09-02 15:40
Flex 布局教程

閱讀 2850·2019-08-30 15:55
同一行內(nèi) 不同字體大小的文本底部對齊

閱讀 2261·2019-08-30 15:44
IndexedDB--HTML5本地存儲

閱讀 3603·2019-08-30 13:18
前端每日實戰(zhàn) 168# 視頻演示如何利用 Web Animation API 制作一個切換英語單詞的

閱讀 3237·2019-08-30 11:00
react 應用多入口配置 && 實踐總結(jié)

閱讀 1960·2019-08-29 16:57
css自定義屬性和聚光燈效果

閱讀 574·2019-08-29 16:41

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JS常用方法函數(shù)

相關(guān)文章

前端基礎(chǔ)入門五（掌握jQuery的常用api，實現(xiàn)動態(tài)效果）

前端基礎(chǔ)入門五（掌握jQuery的常用api，實現(xiàn)動態(tài)效果）

前端基礎(chǔ)入門五（掌握jQuery的常用api，實現(xiàn)動態(tài)效果）

前端基礎(chǔ)入門五（掌握jQuery的常用api，實現(xiàn)動態(tài)效果）

**推薦一個js常用工具函數(shù)庫**

Node.js常用工具util

發(fā)表評論

0條評論

Sike

男|高級講師

TA的文章

EXCEL必備工具箱（EXCELtool）官方免費版V17.0 | 超級excel插件工具箱下載 |

關(guān)于LPC824Lite開發(fā)板下載程序時提示/"Invalid ROM Table

Flex 布局教程

同一行內(nèi) 不同字體大小的文本底部對齊

IndexedDB--HTML5本地存儲

前端每日實戰(zhàn) 168# 視頻演示如何利用 Web Animation API 制作一個切換英語單詞的

react 應用多入口配置 && 實踐總結(jié)

css自定義屬性和聚光燈效果

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

JS常用方法函數(shù)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！