首頁 > web前端 > js教程 > 主體

ECMA5數組的新增方法有哪些及forEach()模仿實作_javascript技巧

WBOY
發布: 2016-05-16 15:33:56
原創
1524 人瀏覽過

以下透過一段程式碼範例為大家介紹ECMA5陣列的新方法forEach()模仿實現,具體程式碼如下所示,

var o = {
       forEach: function (callback) {
         // alert(this.length);
         for (var i = , len = this.length; i < len; i++) {
           callback && callback(this[i], i, this);
         }
       },
       get length(){
         var sum=;
         for(var n in this) {
           sum+=;
         }
         return sum;
       }
     };
     Object.defineProperty(o,"length",{enumerable:false});
     Object.defineProperty(o,"forEach",{enumerable:false});
     o[] = ;
     o[] = ;
     o[] = ;
     o.forEach(function(v,i,arr){
       arr[i]=v+;
       console.log(arr[i]+"callback");
     });
登入後複製

值得注意的是:

1.回呼函數的使用

2.defineProperty以及defineProperties函數的意義

這兩個函數都可以定義物件屬性的四大特性--值,可寫性,可枚舉性,可配置性

下面還有點時間跟大家介紹ECMA5中陣列新增的幾個方法如下圖:

今天在做練習的時候,偶遇fitter();以前看過這些數組的新方法,但一直沒有用在實戰中,趁著今天在復習一次;

forEaach()

這個方法是從頭到尾遍歷一個數組,然後為數組中的每個元素呼叫指定的函數。這個函數作為foreach的第一個參數。呼叫的函數可以有3個參數,分別是目前的陣列元素,目前元素的索引,以及被遍歷的數組,如果只有一個參數,那麼這個參數就是目前的陣列元素。

var data = [1,2,3,4,5] ;
// 计算数组的和
var sum = 0 ; 
data.forEach(function(value){sum += value; }); // 这里的value 分别代指 data[0~4];
console.log( sum ) // 15
// 每个数组元素自加1
data.forEach(function(v, i, a){ a[i] = v + 1; }) // v 分别代指 data[0~4]; a 代指data;
map() ;
登入後複製

map()方法將呼叫的陣列的每個元素傳遞給制定的函數,並且傳回一個陣列(和呼叫陣列的格式一模一樣),塔包含改函數的回傳值,注意:它必須有一個返回值,並且不會改變呼叫他的陣列。

var a = [1,2,3];
b = a.map(function(x) { return x * x; });
filter() 
登入後複製

這個函數的回傳值是呼叫函數的子集,因為傳給他的函數式用來做邏輯判斷,如果為true,則把目前值推入這個要傳回的子集陣列中。

var getNum = function (a, b, k) {
return a.filter(function (v) {return b.indexOf(v) > -1;})[k-1];
}
var A = [3,4,5,6,7,8,9];
var B = [12,10,8,6];
console.log(getNum(A, B, 1))
console.log(getNum(A, B, 2));
every() some() ;
登入後複製

這兩個函數的參數都是一個判定函數,對陣列元素進行判斷,而傳回值為true或false ;

在every()中只有當所有的陣列元素呼叫判定函數且傳回true ,其傳回值才為true;有點類似&;

在some(),只要有一個陣列元素呼叫判定函數為true,就會傳回true。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板