摘要:主要用于枚舉對象數組遍歷效率最低的方法。當前數組元素的值。傳遞給函數的初始值注意對于空數組是不會執行回調函數的。
前言
PS: 2018/04/26 優化一下排版,重新梳理一下方法,補充一些信息,刪除JQuery庫用法,只講解Javascript自帶的,
for in語句用于遍歷數組或者對象的屬性(對數組或者對象的屬性進行循環操作)。主要用于枚舉對象, 數組遍歷效率最低的方法。
</>復制代碼
var ary = [1, 2, 3],
obj = {
name: "Tom",
age: 18
},
i;
for (i in ary) {
console.log(i);
}
for (i in obj) {
console.log(obj[i]);
}
注意:
1, 遍歷數組時, i表示當前索引值,ary[i]對應的元素遍歷對象時, i表示key值, obj[i]表示key值對應的value值;
2, 跳出循環的方式有如下幾種:return 函數執行被終止, break 循環被終止, continue 循環被跳過;
缺點:
1, 遍歷所有屬性包括原型鏈;
2, 忽略 enumerable 為 false 的屬性;
</>復制代碼
//構造函數
function Person() {
this.name = "mike";
};
//原型鏈屬性
Person.prototype.age = 18;
//實例賦值
var mike = new Person,
i;
mike.sex = "man";
mike.height = "180";
//設置不可枚舉
Object.defineProperty(mike, "height", {
enumerable: false
});
for (i in mike) {
console.log(mike[i]);
}
優化方案:
hasOwnProperty:是用來判斷一個對象是否有你給出名稱的屬性或對象。不過需要注意的是, 此方法無法檢查該對象的原型鏈中是否具有該屬性, 該屬性必須是對象本身的一個成員;
</>復制代碼
//構造函數
function Person() {
this.name = "mike";
};
//原型鏈屬性
Person.prototype.age = 18;
//實例賦值
var mike = new Person,
i;
mike.sex = "man";
for (i in mike) {
//過濾出對象自身的屬性
if (mike.hasOwnProperty(i)) {
console.log(mike[i]);
}
}
注意: 這里依然會遍歷所有屬性,只是過濾出操作屬性而已
For循環可以將代碼塊執行指定的次數。
</>復制代碼
var ary = [1, 2, 3],
i = 0,
len = ary.length;
for (; i < len; i++) {
console.log(ary[i]);
}
注意:
1, (如果使用var聲明的話),for循環中的i在循環結束之后依然存在于作用域中, 為了避免影響作用域中的其他變量, 通常使用閉包或其他方式做處理
2, 避免使用for(var i=0, len = ary.length;i < len; i++){} 的方式, 數組長度每次循環都被計算, 效率低。將變量聲明放在for的前面來執行
3, 跳出循環的方式有如下幾種:return 函數執行被終止, break 循環被終止, continue 循環被跳過;
有種稍高逼格寫法:
</>復制代碼
var ary = [1, 2, 3],
i = ary.length - 1;
for (; i <= 0; i--) {
console.log(ary[i]);
}
不考慮順序情況下還不錯,少一個變量并且能唬到一些新手
forEach(function(currentValue, index, arr), thisValue)按照原始數組元素順序依次處理元素.
參數 | 描述 |
---|---|
function(currentValue, index, arr) | 匿名函數,默認傳參第1個是遍歷的數組內容;第2個是對應的數組索引, 第3個是數組本身 |
thisValue | 可選。對象作為該執行回調時使用, 傳遞給函數, 用作 "this" 的值。如果省略了 thisValue , "this" 的值為 "undefined" |
注意: forEach() 對于空數組是不會執行回調函數的。
</>復制代碼
var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9];
ary.forEach(function (_ele, _index, _ary) {
console.log(_ele, _index, _ary);
})
// 1 0 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 2 1 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 3 2 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 4 3 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 5 4 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 6 5 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 7 6 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 8 7 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 9 8 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
簡單實現兼容寫法:
</>復制代碼
Array.prototype._forEach = function (callback, context) {
//指定指向, 默認window
context = context || window;
//瀏覽器支持直接調用方法, 終止后續操作
if ("forEach" in Array.prototype) {
this.forEach(callback, context);
return;
}
//保證回調函數
if (typeof callback !== "function") throw "callback must be a function"
//遍歷數組, 設置指向
var i = 0,
len = this.length;
for (; i < len; i++) {
callback.call(context, this[i], i, this)
}
}
var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9];
ary._forEach(function (_ele, _index, _ary) {
console.log(_ele, _index, _ary);
})
map(function(currentValue,index,arr), thisValue)
按照原始數組元素順序依次處理元素并返回一個新數組, 數組中的元素為原始數組元素調用函數處理后的值。
參數 | 描述 |
---|---|
function(currentValue, index, arr) | 匿名函數,默認傳參第1個是遍歷的數組內容;第2個是對應的數組索引, 第3個是數組本身 |
thisValue | 可選。對象作為該執行回調時使用, 傳遞給函數, 用作 "this" 的值。如果省略了 thisValue , "this" 的值為 "undefined" |
注意: map() 對于空數組是不會執行回調函數的。
</>復制代碼
var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var _ary = ary.map(function (_ele, _index, _ary) {
console.log(_ele, _index, _ary);
return _ele * 2
})
console.log("原數組: " + ary);
console.log("返回數組: " + _ary);
// 1 0 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 2 1 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 3 2 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 4 3 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 5 4 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 6 5 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 7 6 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 8 7 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 9 8 [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
// 原數組: 1,2,3,4,5,6,7,8,9
// 返回數組: 2,4,6,8,10,12,14,16,18
簡單實現兼容寫法:
</>復制代碼
Array.prototype._map = function (callback, context) {
//指定指向, 默認window
context = context || window;
//瀏覽器支持直接調用方法, 終止后續操作
if ("map" in Array.prototype) {
return this.map(callback, context);
}
//保證回調函數
if (typeof callback !== "function") throw "callback must be a function"
//遍歷數組, 返回操作過的數組
var _ary = [],
i = 0,
len = this.length;
for (; i < len; i++) {
_ary[i] = callback.call(context, this[i], i, this);
}
return _ary;
}
var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9],
_ary = ary._map(function (_ele, _index, _ary) {
return _ele * 10
});
console.log("原數組: " + ary);
console.log("返回數組: " + _ary);
filter(function(currentValue,index,arr), thisValue)
使用指定的函數測試所有元素, 并創建一個包含所有通過測試的元素的新數組。
參數 | 描述 |
---|---|
function(currentValue, index, arr) | 匿名函數,默認傳參第1個是遍歷的數組內容;第2個是對應的數組索引, 第3個是數組本身 |
thisValue | 可選。對象作為該執行回調時使用, 傳遞給函數, 用作 "this" 的值。如果省略了 thisValue , "this" 的值為 "undefined" |
注意: filter() 對于空數組是不會執行回調函數的。
</>復制代碼
var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9],
_ary = ary.filter(function (_ele, _index, _ary) {
return _ele < 5
});
console.log("原數組: " + ary);
console.log("返回數組: " + _ary);
// 原數組: 1,2,3,4,5,6,7,8,9
// 返回數組: 1,2,3,4
簡單實現兼容寫法:
</>復制代碼
Array.prototype._filter = function (callback, context) {
//指定指向, 默認window
context = context || window;
//瀏覽器支持直接調用方法, 終止后續操作
if ("filter" in Array.prototype) {
return this.filter(callback, context);
}
//保證回調函數
if (typeof callback !== "function") throw "callback must be a function"
//遍歷數組, 返回操作過的數組
var _ary = [],
i = 0,
len = this.length;
for (; i < len; i++) {
if (callback.call(context, this[i], i, this)) {
_ary.push(this[i])
}
}
return _ary;
}
var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9],
_ary = ary._filter(function (_ele, _index, _ary) {
return _ele & gt; 3
});
console.log("原數組: " + ary);
console.log("返回數組: " + _ary);
every(function(currentValue,index,arr), thisValue)
用于檢測數組所有元素是否都符合指定條件,返回布爾值.
參數 | 描述 |
---|---|
function(currentValue, index, arr) | 匿名函數,默認傳參第1個是遍歷的數組內容;第2個是對應的數組索引, 第3個是數組本身 |
thisValue | 可選。對象作為該執行回調時使用, 傳遞給函數, 用作 "this" 的值。如果省略了 thisValue , "this" 的值為 "undefined" |
注意: every() 對于空數組是不會執行回調函數的。
</>復制代碼
var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9],
bol = ary.every(function (_ele, _index, _ary) {
return _ele < 5
});
console.log(bol); // false
簡單實現兼容寫法:
</>復制代碼
Array.prototype._every = function (callback, context) {
//指定指向, 默認window
context = context || window;
//瀏覽器支持直接調用方法, 終止后續操作
if ("every" in Array.prototype) {
return this.every(callback, context);
}
//保證回調函數
if (typeof callback !== "function") throw "callback must be a function"
//遍歷數組, 返回操作過的數組
var _ary = [],
i = 0,
len = this.length;
for (; i < len; i++) {
if (callback.call(context, this[i], i, this)) {
return false;
}
}
return true;
}
var ary = [1, 2, 3, 4, 5, 6, 7, 8, 9],
bol = ary._every(function (_ele, _index, _ary) {
return _ele & gt; 5
});
console.log(bol);
reduce/reduceRight(function(previousValue, currentValue, currentIndex, array), initialValue)
reduce對數組中的所有元素調用指定的回調函數。該回調函數的返回值為累積結果, 并且此返回值在下一次調用該回調函數時作為參數提供。
reduceRight反向操作.
參數 | 描述 |
---|---|
function(previousValue, currentValue, currentIndex, array) | previousValue:通過上一次調用回調函數獲得的值。如果向 reduce 方法提供 initialValue, 則在首次調用函數時, previousValue 為 initialValue。currentValue:當前數組元素的值。currentIndex:當前數組元素的數字索引。array:包含該元素的數組對象。 |
initialValue | 可選。傳遞給函數的初始值, |
注意: reduce() 對于空數組是不會執行回調函數的。
先來打印看看里面的傳參和沒初始值的情況:
</>復制代碼
var ary = [1, 2, 3, 4],
sum = ary.reduce(function (previousValue, currentValue, currentIndex, array) {
console.log(previousValue, currentValue, currentIndex, array);
return previousValue + currentValue
});
console.log(sum);
// 1 2 1 [ 1, 2, 3, 4 ]
// 3 3 2 [ 1, 2, 3, 4 ]
// 6 4 3 [ 1, 2, 3, 4 ]
// 10
</>復制代碼
var ary = [1, 2, 3, 4],
sum = ary.reduce(function (previousValue, currentValue, currentIndex, array) {
console.log(previousValue, currentValue, currentIndex, array);
return previousValue + currentValue
}, 10);
console.log(sum);
// 10 1 0 [ 1, 2, 3, 4 ]
// 11 2 1 [ 1, 2, 3, 4 ]
// 13 3 2 [ 1, 2, 3, 4 ]
// 16 4 3 [ 1, 2, 3, 4 ]
// 20
兩者區別在于多了一層運算,文檔說明如下
在第一次調用回調函數時, 作為參數提供的值取決于 reduce 方法是否具有 initialValue 參數。
1, 有:
</>復制代碼
1) previousValue 參數為 initialValue。
2) currentValue 參數是數組中的第一個元素的值。
2, 沒有:
簡單實現兼容寫法:</>復制代碼
1) previousValue 參數是數組中的第一個元素的值。
2) currentValue 參數是數組中的第二個元素的值。
</>復制代碼
Array.prototype._reduce = function (callback, initValue) {
//瀏覽器支持直接調用方法, 終止后續操作
if ("reduce" in Array.prototype) {
this.reduce(callback, context);
return;
}
//保證回調函數
if (typeof callback !== "function") throw "callback must be a function"
//遍歷數組, 設置指向
var add = initValue || this.unshift(initValue),
i = 0,
len = this.length;
for (; i < len; i++) {
add = callback.call(null, add, this[i], i, this)
}
}
var ary = [1, 2, 3, 4],
sum = ary.reduce(function (previousValue, currentValue, currentIndex, array) {
return previousValue + currentValue
}, 20);
console.log(sum);
entries(), keys()和values()
它們都返回一個遍歷器對象,可以用for...of循環進行遍歷, 唯一的區別是keys()是對鍵名/索引值的遍歷、values()是對鍵值的遍歷, entries()是對鍵/索引值值對的遍歷
</>復制代碼
var ary = [1, 2, 3, 4];
for (let elem of ary.keys()) {
console.log(elem);
}
for (let elem of ary.values()) {
console.log(elem);
}
for (let elem of ary.entries()) {
console.log(elem);
}
寫到這里就差不多了,ES5還有壹些篩選方法例如find(), includes()等其實都是大同小異就不繼續寫了,ES6還會涉及到疊代器的知識點,大家有興趣自行研究吧.
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/106245.html
摘要:問題是處理完了,卻也引發了自己的一些思考處理的異步操作,都有一些什么方法呢一回調函數傳說中的就是來自回調函數。而回調函數也是最基礎最常用的處理異步操作的辦法。 引言 js的異步操作,已經是一個老生常談的話題,關于這個話題的文章隨便google一下都可以看到一大堆。那么為什么我還要寫這篇東西呢?在最近的工作中,為了編寫一套相對比較復雜的插件,需要處理各種各樣的異步操作。但是為了體積和兼容...
摘要:在此,我們首先根據變量的作用域,將變量劃分為三級,具體是全局變量局部變量和參數變量。 【摘要】本文是專為JavaScript入門者而總結的,總體上將JavaScript的基礎部分分成了九大塊,分別是變量、運算符、數組、流程控制結構、字符串函數、函數基礎、DOM操作基礎、文檔對象模型DOM和正則表達式。 【關鍵字】變量、運算符、數組、流程控制結構、函數、DOM、正則表達式。 本篇文章的主...
摘要:更多詳情請看下面例舉了日常前段開發中遇到的場景,解決方案有很多,但從開發階段就進行規范,可以很大程度避免很多后續的潛在和兼容問題。 更多詳情請看http://blog.zhangbing.club/%E... 下面例舉了日常前段開發中遇到的場景,解決方案有很多,但從開發階段就進行規范,可以很大程度避免很多后續的潛在和兼容問題。 獲取body元素 非標準做法 document.body ...
摘要:基本概念學習目標學會如何使用,掌握的常用,能夠使用實現常見的效果。想要實現簡單的動畫效果,也很麻煩代碼冗余。實現動畫非常簡單,而且功能更加的強大。注意選擇器返回的是對象。 jQuery基本概念 學習目標:學會如何使用jQuery,掌握jQuery的常用api,能夠使用jQuery實現常見的效果。 為什么要學習jQuery? 【01-讓div顯示與設置內容.html】 使用javasc...
閱讀 2172·2023-04-25 20:45
閱讀 1087·2021-09-22 15:13
閱讀 3653·2021-09-04 16:48
閱讀 2589·2019-08-30 15:53
閱讀 942·2019-08-30 15:44
閱讀 959·2019-08-30 15:43
閱讀 1014·2019-08-29 16:33
閱讀 3443·2019-08-29 13:08
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要