關於JavaScript的小技巧總結

2021-07-22 01:46:31 字數 3491 閱讀 9978

獲取陣列的最後乙個元素

array.prototype.slice(begin,end)用來獲取beginend之間的陣列元素。如果你不設定end引數,將會將陣列的預設長度值當作end值。但有些同學可能不知道這個函式還可以接受負值作為引數。如果你設定乙個負值作為begin的值,那麼你可以獲取陣列的最後乙個元素。如:

var array = [1,2,3,4,5];

console.log(array.slice(-1));//[5]

陣列截斷

這個小技巧主要用來鎖定陣列的大小,如果用於刪除陣列中的一些元素來說,是非常有用的。例如,你的陣列有10個元素,但你只想只要前五個元素,那麼你可以通過

array.length=5

來截斷陣列。如下面這個示例:

var array = [1,2,3,4,5];

array.length = 3;

console.log(array.length)//3

console.log(array);//[1,2,3]

string.replace()函式允許你使用字串或正規表示式來替換字串,本身這個函式只替換第一次出現的字串,不過你可以使用正則表達多中的/g來模擬replaceall()函式功能:

var str = "shao shao";

console.log(str.replaceall(/ao/,"uai"));//"shuai shao"

console.log(str.replaceall(/ao/g,"uai"));//"shuai shuai"

如果你要合併兩個陣列,一般情況之下你都會使用array.concat()函式:

var array1 = [1,2,3];

var array2 = [4,5,6];

console.log(array1.concat(array2));//[1,2,3,4,5,6]

然後這個函式並不適合用來合併兩個大型的陣列,因為其將消耗大量的記憶體來儲存新建立的陣列。在這種情況之個,可以使用

來替代建立乙個新陣列。這種方法不是用來建立乙個新的陣列,其只是將第乙個第二個陣列合併在一起,同時減少記憶體的使用:

var array1 = [1,2,3];

var array2 = [4,5,6];

如果你執行document.queryselectorall(「p」)函式時,它可能返回dom元素的陣列,也就是nodelist物件。但這個物件不具有陣列的函式功能,比如sort()reduce()map()filter()等。為了讓這些原生的陣列函式功能也能用於其上面,需要將節點列表轉換成陣列。可以使用.slice.call(elements)來實現:

var elements = document.queryselectorall("p");

var arrayelements = .slice.call(elements);

或者var arrayelements = array.from(elements); 

有時候我們需要對乙個變數查檢其是否存在或者檢查值是否有乙個有效值,如果存在就返回true值。為了做這樣的驗證,我們可以使用!!操作符來實現是非常的方便與簡單。對於變數可以使用!!variable做檢測,只要變數的值為:0null" "undefined或者nan都將返回的是false,反之返回的是true。比如下面的示例:

function account(cash)

account a = new account(100);

console.log(a.cash);//100

console.log(a.money);/true

account a = new account(0);

console.log(a.cash);//0

console.log(a.money);/false;

這個技巧非常有用,其非常簡單,可以交字串資料轉換成數字,不過其只適合用於字串資料,否則將返回nan,比如下面的示例:

function tonumber(strnumber)

console.log(tonumber("123"));//123

console.log("asd");//nan

這個也適用於date,在本例中,它將返回的是時間戳數字:

console.log(+new date())//1542543654

if(connect)

你也可以將變數簡寫,並且使用&&和函式連線在一起,比如上面的示例,可以簡寫成這樣:

connect&&login()

如果一些屬性或函式存在於乙個物件中,你也可以這樣做檢測,如下面的**所示:

user&&user.login();

在es6中有預設引數這一特性。為了在老版本的瀏覽器中模擬這一特性,可以使用||操作符,並且將將預設值當做第二個引數傳入。如果第乙個引數返回的值為false,那麼第二個值將會認為是乙個預設值。如下面這個示例:

function user(name,age)

這個技巧很簡單,這個在處理乙個很大的陣列迴圈時,對效能影響將是非常大的。基本上,大家都會寫乙個這樣的同步迭代的陣列:

for(var i=0;iconsole.log(array[i]);

}如果是乙個小型陣列,這樣做很好,如果你要處理的是乙個大的陣列,這段**在每次迭代都將會重新計算陣列的大小,這將會導致一些延誤。為了避免這種現象出現,可以將array.length做乙個快取:

var length = array.length;

for(var i=0;i

console.log(array[i]); }

當你需要檢測一些屬性是否存在,避免執行未定義的函式或屬性時,這個小技巧就顯得很有用。如果你打算定些一些跨相容的瀏覽器**,你也可能會用到這個小技巧。例如,你想使用document.queryselector()來選擇乙個id,並且讓它能相容ie6瀏覽器,但是在ie6瀏覽器中這個函式是不存在的,那麼使用這個操作符來檢測這個函式是否存在就顯得非常的有用,如下面的示例:

if("queryselector" in document)else

Visual Studio中關於除錯的小技巧

1 debug.stepout shift f11 在除錯的時候,執行該斷點所在函式中剩餘的部分,然後跳出到上一層。2 在乙個for迴圈中,如果我們想指定的觀察迴圈變數i為某個特定的值的情況,比如說50,一般我們需要這樣,用if語句把這種情況寫出來,並且在i 50的地方設定乙個斷點,然後等待程式執行...

關於 分享一些常用的JavaScript技巧

有時候我們需要對乙個變數查檢其是否存在或者檢查值是否有乙個有效值,如果存在就返回 true 值。為了做這樣的驗證,我們可以使用 操作符來實現是非常的方便與簡單。對於變數可以使用 variable 做檢測,只要變數的值為 0 null undefined 或者 nan 都將返回的是 false,反之返...

關於javascript的幾個小實驗

猜想 不會的,現代的瀏覽器應該已經做了優化。實驗方法 在頁面中放一段執行時間超過2 秒的js 然後在阻塞 的後面判斷能不能去的後續的 dom元素。靠!沒想到是這樣的結果!script 檔案果真阻塞了 dom的解析。瀏覽器真的是乙個檔案乙個檔案的解析的。實驗 外部js 指令碼 var begin ne...