视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JavaScript中Array数组的tips的讲解
2020-11-27 19:33:48 责编:小采
文档


参数:compareFunction
可选。用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。

如果指明了compareFunction,那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素:

  • 如果compareFunction(a, b)小于 0 ,那么 a 会被排列到 b 之前;

  • 如果compareFunction(a, b)等于 0 , a 和 b 的相对位置不变;

  • 如果compareFunction(a, b)大于 0 , b 会被排列到 a 之前。

  • 比较函数格式如下(字符串与数组都可以比较):

    function compare(a, b) {
     if (a < b ) { // 按某种排序标准进行比较, a 小于 b
     return -1;
     }
     if (a > b ) {
     return 1;
     }
     // a must be equal to b
     return 0;
    }

    3. Array.prototype.unshift()

    var arr = [1, 2];
    arr.unshift(-2, -1); // = 5
    // arr is [-2, -1, 1, 2]

    4. Array.prototype.concat()

    返回新的数组(浅拷贝),不会影响原数组。

  • 如果参数是数组,则把数组的元素放入结果中;

  • 如果参数不是数组,则把参数本身放入结果中。

  • var num1 = [1, 2, 3],
     num2 = [4, 5, 6],
     num3 = [7, 8, 9];
    
    var nums = num1.concat(num2, num3);
    
    console.log(nums); 
    // results in [1, 2, 3, 4, 5, 6, 7, 8, 9];
    
    var alpha = ['a', 'b', 'c'];
    
    var alphaNumeric = alpha.concat(1, [2, 3]);
    
    console.log(alphaNumeric); 
    // results in ['a', 'b', 'c', 1, 2, 3]

    5. Array.prototype.forEach()

    array.forEach(callback(currentValue, index, array){
     //do something
    }, thisArg)
    
    array.forEach(callback[, thisArg])

    其中:thisArg为可选参数,当执行回调 函数时用作this的值(参考对象)。

    下列函数也有thisArg这个可选参数,用法与Array.prototype.forEach()一致:

  • Array.prototype.forEach()

  • Array.prototype.every()

  • Array.prototype.some()

  • Array.prototype.filter()

  • Array.prototype.map()

  • Array.prototype.reduce()

  • Array.prototype.reduceRight()

  • 6. Array.prototype.map()

    使用技巧案例

    // 下面的语句返回什么呢:
    ["1", "2", "3"].map(parseInt);
    // 你可能觉的会是[1, 2, 3]
    // 但实际的结果是 [1, NaN, NaN]
    
    // 通常使用parseInt时,只需要传递一个参数.
    // 但实际上,parseInt可以有两个参数.第二个参数是进制数.
    // 可以通过语句"alert(parseInt.length)===2"来验证.
    // map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 
    // 元素索引, 原数组本身.
    // 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,
    // parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.
    
    function returnInt(element) {
     return parseInt(element, 10);
    }
    
    ['1', '2', '3'].map(returnInt); // [1, 2, 3]
    // 意料之中的结果
    
    // 也可以使用简单的箭头函数,结果同上
    ['1', '2', '3'].map( str => parseInt(str) );
    
    // 一个更简单的方式:
    ['1', '2', '3'].map(Number); // [1, 2, 3]
    // 与`parseInt` 不同,下面的结果会返回浮点数或指数:
    ['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]

    7.Array.prototype.reduce()

    arr.reduce(callback[, initialValue])

    Array.prototype.reduceRight()是与其用法类似,是从右向左遍历。

    参数:

  • callback: 执行数组中每个值的函数,包含四个参数:

  • accumulator: 累加器累加回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(如下所示)。

  • currentValue: 数组中正在处理的元素。

  • currentIndex: 可选,数组中正在处理的当前元素的索引。 如果提供了initialValue,则索引号为0,否则为索引为1。

  • array: 可选,调用reduce的数组。

  • initialValue: 可选,用作第一个调用 callback的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用reduce将报错。

  • reduce如何运行

    [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
     return accumulator + currentValue;
    }, 10);
    
    // 20

    实例:将二维数组转化为一维

    var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
     function(a, b) {
     return a.concat(b);
     },
     []
    );
    // flattened is [0, 1, 2, 3, 4, 5]

    实例:使用扩展运算符和initialValue绑定包含在对象数组中的数组

    // friends - an array of objects 
    // where object field "books" - list of favorite books 
    var friends = [{
     name: 'Anna',
     books: ['Bible', 'Harry Potter'],
     age: 21
    }, {
     name: 'Bob',
     books: ['War and peace', 'Romeo and Juliet'],
     age: 26
    }, {
     name: 'Alice',
     books: ['The Lord of the Rings', 'The Shining'],
     age: 18
    }];
    
    // allbooks - list which will contain all friends' books + 
    // additional list contained in initialValue
    var allbooks = friends.reduce(function(prev, curr) {
     return [...prev, ...curr.books];
    }, ['Alphabet']);
    
    // allbooks = [
    // 'Alphabet', 'Bible', 'Harry Potter', 'War and peace', 
    // 'Romeo and Juliet', 'The Lord of the Rings',
    // 'The Shining'
    // ]

    实例:数组去重

    let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
    let result = arr.sort().reduce((init, current)=>{
     if(init.length===0 || init[init.length-1]!==current){
     init.push(current);
     }
     return init;
    }, []);
    console.log(result); //[1,2,3,4,5]

    下载本文
    显示全文
    专题