2016年10月21日 星期五

公用:grep、contains、merge、map、noop、now、trim、type、unique (jQuery30)

※grep

$(function(){
    var rtn = $.grep([1,2,3,4,5,6,7,8,9,8,7,6,5,4,3,2,1], function(element, index){
        console.log(index + '=' + element);
        return (element != 5 && index > 4);
    },false);
    alert(rtn);
    // 第三個參數是false或不給,結果為 6,7,8,9,8,7,6,4,3,2,1
    // 第三個參數是true,結果為 1,2,3,4,5,5 也就是上一行的相反
    
    var rtn = $.grep([{'a':1, 'b':2}, {'c':3, 'd':4}, 'e', 5], function(element, index){
        console.log('index=' + index);
        if($.isPlainObject(element)){
            for(e in element){
                console.log(e); // a b c d
            }
        } else {
            console.log(element); // e 5
        }
    });
});

※過濾陣列用的,如果過濾物件不會出錯,但好像沒有執行一樣



※contains

$(function(){
    console.log($.contains(document.documentElement, document.body)); // true
    console.log($.contains(document.body, document.documentElement)); // false
    console.log($.contains(document.getElementsByTagName("div"), document.getElementsByTagName("span"))); // false
});
----------
<div>
    <span></span>
</div>

※右邊的參數是否被左邊的參數包括,這個我不太懂



※merge

$(function(){
    console.log($.merge([0,1,2], [2,3,4])); // [0, 1, 2, 2, 3, 4]
    console.log($.merge([], [2,3,4] ));  // [2, 3, 4]
    console.log($.merge($.merge([0,1,2], [2,3,4]), [4,5,6])); // [0, 1, 2, 2, 3, 4, 4, 5, 6]
    
    var test = $.merge([0,{1:function(){return 'x'}},{2:'two'}], [{2:'owt'},3,{1:function(){return 'o'}}]);
    for(t in test){
        if($.isPlainObject(test[t])){
            for(tt in test[t]){
                console.log(test[t][tt]);
            }
        } else {
            console.log(test[t]); 
        }
    }
});

※將兩個陣列合併



※map

$.map(['a','b','c'], function(val, index) {
    console.log('val=' + val); // a b c
    console.log('index=' + index); // 0 1 2
});
    
$.map({'a':1,'b':2,'c':3}, function(val, index) {
    console.log('val=' + val); // 1 2 3
    console.log('index=' + index); // a b c
});

※用法和each一樣



※noop、now、trim

console.log($.noop);// function(){}
console.log($.noop()); // undefined
console.log($.now); // function(){return (new Date()).getTime();}
console.log($.now()); // long的數字
    
var $trim = $.trim('  1 2 3  ');
console.log($trim); // 1 2 3
console.log($trim.length); // 5





※type

console.log($.type()); // undefined
console.log($.type(undefined)); // undefined
console.log($.type(window)); // object
console.log($.type(null)); // null
    
console.log('----------');
console.log($.type(true)); // boolean
console.log($.type(3)); // number
console.log($.type("test")); // string
console.log($.type(function(){} )); // function
console.log($.type([])); // array
    
console.log('----------');
console.log($.type({})); // object
console.log($.type(new Date())); // date
console.log($.type(new Error())); // error
console.log($.type(/test/)); // regexp





※unique

$(function(){
    var divs = $("div").get();
    console.log(divs.length); // 5
    console.log($.unique(divs).length); // 5
    
    divs = divs.concat($(".d").get());
    console.log(divs.length); // 7
    var xxx = $.unique(divs);
    console.log(xxx.length); // 5
    
    $('input[type="button"]').one('click', function(){
        $('p').append(xxx);
    });
});
----------
<div>d1</div>
<div class="d">d2</div>
<div>d3</div>
<div class="d">d4</div>
<div>d5</div>
<input type="button" value="click me"/>
<p>p</p>



沒有留言:

張貼留言