JS对象之数组(2)

ES6学习, JavaScript学习 本文总阅读量次

ES6增加的方法

Array.prototype.filter()数组过滤方法

  • filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
  • 原理： filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。
  • 语法：array.filter(function(currentValue,index,arr), thisValue)
    • function(currentValue, index,arr):必须。函数，数组中的每个元素都会执行这个函数
      • currentValue:必须。当前元素的值
      • index:可选。当前元素的索引值
      • arr:可选。当前元素属于的数组对象
    • thisValue:可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。
      • 如果省略了 thisValue ，”this” 的值为 “undefined”
  • 返回值：数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。
  • 注意：
    • filter() 不会对空数组进行检测。
    • filter() 不会改变原始数组。
  • MDN参考

例子：
下例使用 filter 创建了一个新数组，该数组的元素由原数组中值大于 10 的元素组成:

1
2
3
4
5
function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

比如：12作为element传入isBigEnough，函数返回12>=10,也就是返回true，那么元素12就会成为新数组filtered的一项。

Array.from()

  • Array.from() 方法从一个类似数组或可迭代对象创建一个新的、浅拷贝的数组实例。
  • 语法：Array.from(arrayLike[, mapFn[, thisArg]])
    • arrayLike:想要转换成数组的伪数组对象或可迭代对象。
    • mapFn:可选,如果指定了该参数，新数组中的每个元素会执行该回调函数。
    • thisArg:可选,执行回调函数 mapFn 时 this 对象。
  • 返回值：一个新的数组实例。
  • MDN参考
1
2
3
4
5
6
7
8
9
10
console.log(Array.from('foo'));// Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));// Array [2, 4, 6]

//从类数组对象（arguments）生成数组
function f() {
  return Array.from(arguments);
}

f(1, 2, 3);// [ 1, 2, 3 ]

面试题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//完成以下代码段，实现b数组对a数组的拷贝，方法越多越好
var a = [1,"yes",3],
    b;
// 方法1，数组遍历，push
// 首先需要将新建为数组,注意不要重复var，也可以写作b=[];
b =new Array();
for (i=0;i<a.length;i++){
    b.push(a[i]);
}
// 方法2，concat
b=a.concat([]);//或者b=[].concat(a);
// 方法3，slice
b=a.slice(0);
console.log(b);

IE9以下的浏览器使用封装方法进行位置查找

1
2
3
4
5
6
7
8
9
10
11
12
13
var nums = [1, 7, 5, 7, 8, 1, 6, 9];
//封装一个方法实现indexof的功能
function ArrayIndexOf(arr, value) {
    //检测value在arr中出现的位置
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] **= value) {
            return i;
        }
    }
    return -1;
}
var pos5=ArrayIndexOf(nums, 8);//调用封装的方法
console.log(pos5);//4

map() 遍历数组并进行操作(返回新数组)

  • ES5中提供的map() 方法返回一个新数组，数组中的元素为原始数组元素按顺序执行回调函数处理后的值。
  • map() 方法按照原始数组元素顺序依次处理元素。
  • 注意： map() 不会对空数组进行检测。
  • 注意： map() 不会改变原始数组。
  • 例子

参数与描述

forEach()遍历数组的每个元素

  • forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
  • 注意: forEach() 对于空数组是不会执行回调函数的。
  • 语法：array.forEach(function(currentValue, index, arr), thisValue)
  • 返回值:undefined
    参数与描述
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <body>

    <p>点击按钮列出数组的每个元素。</p>
    <button onclick="numbers.forEach(myFunction)">点我</button>
    <p id="demo"></p>

    <script>
    demoP = document.getElementById("demo");
    var numbers = [4, 9, 16, 25];

    function myFunction(item, index) {
        demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>"; 
    }
    </script>

    </body>
    结果
    使用3个参数的例子

补充：in运算符

（可参考MDN的in运算符）

  • 如果指定的 属性 在指定的对象或其原型链中，则in 运算符返回true。
  • 如果指定的 数组索引 在数组中，则in 运算符返回true。
  • 注意：不是数组元素，是数组下标！
  • 语法：prop in object

    prop
    一个字符串类型或者 symbol 类型的属性名或者数组索引（非symbol类型将会强制转为字符串）。

    objectName
    检查它（或其原型链）是否包含具有指定名称的属性的对象。

例子：

1
2
3
4
5
6
7
8
// 数组
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
0 in trees        // 返回true
3 in trees        // 返回true
6 in trees        // 返回false
"bay" in trees    // 返回false (必须使用索引号,而不是数组元素的值)

"length" in trees // 返回true (length是一个数组属性)

数组的reduce()方法【累加数组元素】

  • reduce()方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。即，对数组每个元素执行回调函数，返回值用于下一次计算参数
  • reduce()方法的参数由回调函数和一个初始值参数组成。
  • 语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
  • 语法理解：
    1
    2
    3
    4
    reduce(
        function(
            回调函数返回的值,数组当前元素,当前元素索引,调用reduce的数组
            ) ,回调函数第一个参数的初始值);
  • 返回值：返回计算结果(不改变原数组)
    参数及描述
  • 例子：
    1
    2
    3
    4
    5
    6
    7
    8
    const array1 = [1, 2, 3, 4];
    const reducer = (accumulator, currentValue) => accumulator + currentValue;

    // 1 + 2 + 3 + 4
    console.log(array1.reduce(reducer));// 10

    // 5 + 1 + 2 + 3 + 4
    console.log(array1.reduce(reducer, 5));// 15
ES6学习, JavaScript学习