JavaScript編程基礎(chǔ)實(shí)例

JavaScript概述

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)、鐵山港網(wǎng)絡(luò)推廣、微信小程序定制開發(fā)、鐵山港網(wǎng)絡(luò)營銷、鐵山港企業(yè)策劃、鐵山港品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供鐵山港建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：bm7419.com

JavaScript是一種屬于網(wǎng)絡(luò)的高級(jí)腳本語言,已經(jīng)被廣泛用于Web應(yīng)用開發(fā),常用來為網(wǎng)頁添加各式各樣的動(dòng)態(tài)功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實(shí)現(xiàn)自身的功能的。 

是一種解釋性腳本語言（代碼不進(jìn)行預(yù)編譯）。

主要用來向HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）頁面添加交互行為。 

可以直接嵌入HTML頁面，但寫成單獨(dú)的js文件有利于結(jié)構(gòu)和行為的分離。 

跨平臺(tái)特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺(tái)下運(yùn)行（如Windows、Linux、Mac、Android、iOS等）。

Javascript腳本語言同其他語言一樣，有它自身的基本數(shù)據(jù)類型，表達(dá)式和算術(shù)運(yùn)算符及程序的基本程序框架。Javascript提供了四種基本的數(shù)據(jù)類型和兩種特殊數(shù)據(jù)類型用來處理數(shù)據(jù)和文字。而變量提供存放信息的地方，表達(dá)式則可以完成較復(fù)雜的信息處理。

可以實(shí)現(xiàn)web頁面的人機(jī)交互。

在 JavaScript 中 數(shù)組（Array）隨處可見，使用ECMAScript 6 中的新特性 擴(kuò)展運(yùn)算符 我們可以做很多很棒事情。

1. 迭代一個(gè)空數(shù)組

JavaScript 中直接創(chuàng)建的數(shù)組是松散的，以至于會(huì)有很多坑。試著用數(shù)組的構(gòu)造方法創(chuàng)建一個(gè)數(shù)組，你就會(huì)瞬間明白了。

const arr = new Array(4);
[undefined, undefined, undefined, undefined]
// 谷歌瀏覽器中是 [empty x 4]

你會(huì)發(fā)現(xiàn)，通過一個(gè)松散的數(shù)組去循環(huán)調(diào)用一些轉(zhuǎn)換是非常難的。

const arr = new Array(4);
arr.map((elem, index) => index);
[undefined, undefined, undefined, undefined]

想要解決這個(gè)問題，你可以使用在創(chuàng)建新數(shù)組的時(shí)候使用 Array.apply。

const arr = Array.apply(null, new Array(4));
arr.map((elem, index) => index);
[0, 1, 2, 3]

2. 給方法傳一個(gè)空參數(shù)

如果你想調(diào)用一個(gè)方法，并不填其中的一個(gè)參數(shù)時(shí)，JavaScript 就會(huì)報(bào)錯(cuò)。

method('parameter1', , 'parameter3'); // Uncaught SyntaxError: Unexpected token ,

一個(gè)我們常用的解決方法是傳遞 null 或 undefined。

method('parameter1', null, 'parameter3') // or
method('parameter1', undefined, 'parameter3');

根據(jù) ES6 中對(duì)擴(kuò)展運(yùn)算符的介紹，有一個(gè)更簡潔的方法可以將空參數(shù)傳遞給一個(gè)方法。正如上面所提到的，數(shù)組是松散的，所以給它傳空值是可以的，我們正是用到了這個(gè)優(yōu)點(diǎn)。

method(...['parameter1', , 'parameter3']); // 代碼執(zhí)行了...

3. 數(shù)組去重

我一直不明白為什么數(shù)組不提供一個(gè)內(nèi)置函數(shù)可以讓我們方便的取到去重以后的值。擴(kuò)展運(yùn)算符幫到了我們，使用擴(kuò)展運(yùn)算符配合 Set可以生成一個(gè)不重復(fù)的數(shù)組。

const arr = [...new Set([1, 2, 3, 3])];
// [1, 2, 3]

4.從后向前獲取數(shù)組元素

如果你想從后向前獲取一個(gè)數(shù)組的元素，可以這樣寫：

var arr = [1, 2, 3, 4]

console.log(arr.slice(-1)) // [4]
console.log(arr.slice(-2)) // [3, 4]
console.log(arr.slice(-3)) // [2, 3, 4]
console.log(arr.slice(-4)) // [1, 2, 3, 4]

5.短路條件句

如果你想在某個(gè)條件邏輯值為true時(shí)，執(zhí)行某個(gè)函數(shù)，就像這樣：

if (condition) {
  dosomething()
}

這時(shí)，你可以這樣子運(yùn)用短路：

condition && dosomething()

6.用操作符 “||” 來設(shè)置默認(rèn)值

如果你必須給一個(gè)變量賦默認(rèn)值，可以簡單的這樣寫：

var a

console.log(a) // undefined
a = a || 'default value'
console.log(a) // default value
a = a || 'new value'
console.log(a) // default value

7.在相等比較中使用 Object.is()

我們都知道 JavasSript 是弱類型的，并且當(dāng)我們使用==作比較時(shí)，在一些情況下由于類型轉(zhuǎn)換或者說“把兩個(gè)操作數(shù)中的一個(gè)轉(zhuǎn)換成另一個(gè)，然后再比較”，會(huì)出現(xiàn)意想不到的結(jié)果。就像這樣：

0 == ' ' //true
null == undefined //true
[1] == true //true

因此 JavaScript 中給我們提供了全等操作符 ===, 它比不全等操作符更加嚴(yán)格并且不會(huì)發(fā)生類型轉(zhuǎn)換。但是用 === 來進(jìn)行比較并不是最好的解決方案。你可能會(huì)得到：

NaN === NaN //false

ES6 中提供了新的 Object.is() 方法，它具有 === 的一些特點(diǎn)，而且更好、更精確，在一些特殊案例中表現(xiàn)的很好：

Object.is(0 , ' '); //false
Object.is(null, undefined); //false
Object.is([1], true); //false
Object.is(NaN, NaN); //true

8.給一個(gè)函數(shù) Bind 對(duì)象

我們經(jīng)常需要將一個(gè)對(duì)象綁定到一個(gè)方法的 this 上。在 JS 中，如果你想要調(diào)用一個(gè)函數(shù)并指定它的 this 時(shí)可以使用 bind 方法。

Bind 語法

fun.bind(thisArg[, arg1[, arg2[, ...]]])

參數(shù)

thisArg

當(dāng)綁定函數(shù)被調(diào)用時(shí)，該參數(shù)會(huì)作為原函數(shù)運(yùn)行時(shí)的 this 指向。

arg1, arg2, …

當(dāng)綁定函數(shù)被調(diào)用時(shí)，這些參數(shù)將置于實(shí)參之前傳遞給被綁定的方法。

返回值

返回由指定的this值和初始化參數(shù)改造的原函數(shù)拷貝

JS 中的實(shí)例

const myCar = {
 brand: 'Ford',
 type: 'Sedan',
 color: 'Red'
};

const getBrand = function () {
 console.log(this.brand);
};

const getType = function () {
 console.log(this.type);
};

const getColor = function () {
 console.log(this.color);
};

getBrand(); // object not bind,undefined

getBrand(myCar); // object not bind,undefined

getType.bind(myCar)(); // Sedan

let boundGetColor = getColor.bind(myCar);
boundGetColor(); // Red

9.獲取文件拓展名

解決方法 1: 正則表達(dá)式

function getFileExtension1(filename) {
  return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename)[0] : undefined;
}

解決方法 2: String的split方法

function getFileExtension2(filename) {
  return filename.split('.').pop();
}

這兩種解決方法不能解決一些邊緣情況，這有另一個(gè)更加強(qiáng)大的解決方法。

解決方法 3: String的slice、lastIndexOf方法

function getFileExtension3(filename) {
  return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
}

console.log(getFileExtension3(''));                            // ''
console.log(getFileExtension3('filename'));                    // ''
console.log(getFileExtension3('filename.txt'));                // 'txt'
console.log(getFileExtension3('.hiddenfile'));                 // ''
console.log(getFileExtension3('filename.with.many.dots.ext')); // 'ext'

這是如何實(shí)現(xiàn)的呢?

  • String.lastIndexOf() 方法返回指定值（本例中的'.'）在調(diào)用該方法的字符串中最后出現(xiàn)的位置，如果沒找到則返回 -1。

  • 對(duì)于'filename'和'.hiddenfile'，lastIndexOf的返回值分別為0和-1無符號(hào)右移操作符(?>) 將-1轉(zhuǎn)換為4294967295，將-2轉(zhuǎn)換為4294967294，這個(gè)方法可以保證邊緣情況時(shí)文件名不變。

  • String.prototype.slice() 從上面計(jì)算的索引處提取文件的擴(kuò)展名。如果索引比文件名的長度大，結(jié)果為""。

10.預(yù)防unapply攻擊

重寫內(nèi)置對(duì)象的原型方法，外部代碼可以通過重寫代碼達(dá)到暴漏和修改已綁定參數(shù)的函數(shù)。這在es5的方法下使用polyfill時(shí)是一個(gè)嚴(yán)重的安全問題。

// bind polyfill 示例
function bind(fn) {
  var prev = Array.prototype.slice.call(arguments, 1);
  return function bound() {
    var curr = Array.prototype.slice.call(arguments, 0);
    var args = Array.prototype.concat.apply(prev, curr);
    return fn.apply(null, args);
  };
}


// unapply攻擊
function unapplyAttack() {
  var concat = Array.prototype.concat;
  Array.prototype.concat = function replaceAll() {
    Array.prototype.concat = concat; // restore the correct version
    var curr = Array.prototype.slice.call(arguments, 0);
    var result = concat.apply([], curr);
    return result;
  };
}

上面的函數(shù)聲明忽略了函數(shù)bind的prev參數(shù)，意味著調(diào)用unapplyAttack之后首次調(diào)用.concat將會(huì)拋出錯(cuò)誤。

使用Object.freeze，可以使對(duì)象不可變，你可以防止任何內(nèi)置對(duì)象原型方法被重寫。

(function freezePrototypes() {
  if (typeof Object.freeze !== 'function') {
    throw new Error('Missing Object.freeze');
  }
  Object.freeze(Object.prototype);
  Object.freeze(Array.prototype);
  Object.freeze(Function.prototype);
}());

11.Javascript多維數(shù)組扁平化

下面是將多位數(shù)組轉(zhuǎn)化為單一數(shù)組的三種不同方法。

var arr = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];

期望結(jié)果：

[1, 2, 3, 4, 5, 6, 7, 8, 9]

解決方案1：使用concat()和apply()

var newArr = [].concat.apply([], arr);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

解決方案2：使用reduce()

var newArr = arr.reduce(function(prev, curr) {
  return prev.concat(curr);
});
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

解決方案3：使用 ES6 的展開運(yùn)算符

var newArr = [].concat(...arr);
console.log(newArr);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

12. 函數(shù)中如何使用可選參數(shù)（包括可選回調(diào)函數(shù)）

實(shí)例函數(shù)中第2個(gè)與第3個(gè)參數(shù)為可選參數(shù)

function example( err, optionA, optionB, callback ) {
        // 使用數(shù)組取出arguments
        var args = new Array(arguments.length);
        for(var i = 0; i < args.length; ++i) {
            args[i] = arguments[i];
        };
        
        // 第一個(gè)參數(shù)為錯(cuò)誤參數(shù)
        // shift() 移除數(shù)組中第一個(gè)參數(shù)并將其返回
        err = args.shift();

        // 如果最后一個(gè)參數(shù)是函數(shù)，則它為回調(diào)函數(shù)
        // pop() 移除數(shù)組中最后一個(gè)參數(shù)并將其返回
        if (typeof args[args.length-1] === 'function') { 
            callback = args.pop();
        }
        
        // 如果args中仍有元素，那就是你需要的可選參數(shù)
        // 你可以像這樣一個(gè)一個(gè)的將其取出：
        if (args.length > 0) optionA = args.shift(); else optionA = null;
        if (args.length > 0) optionB = args.shift(); else optionB = null;

        // 像正常一樣繼續(xù)：檢查是否有錯(cuò)誤
        if (err) { 
            return callback && callback(err);
        }
        
        // 打印可選參數(shù)
        console.log('optionA:', optionA);
        console.log('optionB:', optionB);
        console.log('callback:', callback);

        /* 你想做的邏輯 */

    }

    // ES6語法書寫更簡短
    function example(...args) {
        // 第一個(gè)參數(shù)為錯(cuò)誤參數(shù)
        const err = args.shift();
        // 如果最后一個(gè)參數(shù)是函數(shù)，則它為回調(diào)函數(shù)
        const callback = (typeof args[args.length-1] === 'function') ? args.pop() : null;

        // 如果args中仍有元素，那就是你需要的可選參數(shù)你可以像這樣一個(gè)一個(gè)的將其取出：
        const optionA = (args.length > 0) ? args.shift() : null;
        const optionB = (args.length > 0) ? args.shift() : null;
        // ... 重復(fù)取更多參數(shù)

        if (err && callback) return callback(err);

        /* 你想做的邏輯 */
    }

以上就是JavaScript的技巧的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！

文章標(biāo)題：JavaScript編程基礎(chǔ)實(shí)例
分享鏈接：http://bm7419.com/article8/pcdjip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航、App設(shè)計(jì)、云服務(wù)器、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計(jì)