美文网首页
数组操作有什么作用?

数组操作有什么作用?

作者: nianxiaoge | 来源:发表于2017-04-05 19:46 被阅读101次

    <h3>数组操作有什么作用?</h3>
    <h4>1.背景介绍</h4>
    <p>JavaScript的array可以包含任意数据类型,并通过索引来访问每个元素。
    filter()、some()、map()、forEach()是 ECMAScript5为数组定义的4个迭代方法,是为了更方便的对数组进行操作。</p>

    <h4>2.知识剖析</h4>
    <h5>map() 方法创建一个新数组,其结果是该数组中的每个元素调用一个提供的函数。</h5>
    <p>map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map">MDN</a></p>
    <code>
    let numbers = [1, 5, 10, 15];
    let roots = numbers.map(function(x) {
    return x * 2;
    });
    // roots is now [2, 10, 20, 30]
    // numbers is still [1, 5, 10, 15]

    let numbers = [1, 4, 9];
    // let roots = numbers.map(Math.sqrt);
    let roots = numbers.map(function(x){
    return Math.sqrt(x);
    });
    // roots is now [1, 2, 3]
    // numbers is still [1, 4, 9]
    </code>
    <h5>some() 方法测试数组中的某些元素是否通过了指定函数的测试。</h5>
    <p>some 为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。如果找到了这样一个值,some 将会立即返回 true。否则,some
    返回 false。<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some">MDN</a></p>
    <code>
    function isBigEnough(element, index, array) {
    return (element >= 10);
    }
    var passed = [2, 5, 8, 1, 4].some(isBigEnough);
    // passed is false
    passed = [12, 5, 8, 1, 4].some(isBigEnough);
    // passed is true
    </code>

    <h5>filter() 方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组。</h5>
    <p>filter 为数组中的每个元素调用一次 callback 函数,并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。</p>
    <p>filter 不会改变原数组<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">MDN</a></p>

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

    <h5>forEach() 方法对数组的每个元素执行一次提供的函数。</h5>
    <p>forEach 方法按升序为数组中含有效值的每一项执行一次callback 函数,那些已删除(使用delete方法等情况)或者未初始化的项将被跳过(但不包括那些值为 undefined 的项)。<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">MDN</a></p>
    <p>forEach()方法中的 callback 回调函数默认支持 3 个参数,第 1 个是遍历的数组元素、第2个是元素对应的索引、第3个是数组本身。</p>
    <code>
    function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
    }

    // 注意索引2被跳过了,因为在数组的这个位置没有项
    [2, 5, ,9].forEach(logArrayElements);

    // a[0] = 2
    // a[1] = 5
    // a[3] = 9

    [2, 5,"" ,9].forEach(logArrayElements);
    // a[0] = 2
    // a[1] = 5
    // a[2] =
    // a[3] = 9

    [2, 5, undefined ,9].forEach(logArrayElements);
    // a[0] = 2
    // a[1] = 5
    // a[2] = undefined
    // a[3] = 9

    let xxx;
    // undefined

    [2, 5, xxx ,9].forEach(logArrayElements);
    // a[0] = 2
    // a[1] = 5
    // a[2] = undefined
    // a[3] = 9
    </code>
    <h4>3.常见问题</h4>
    <h5>数组操作的不同之处</h5>
    <p>map() 创建一个新数组,每个元素都是函数执行后的结果。原数组不变。</p>
    <p>some() 根据调用函数返回 true 或 false。原数组不改变。</p>
    <p>filter() 创建一个新数组,数组是满足函数的元素集合。不会改变原数组。</p>
    <p>forEach() forEach()仅仅遍历数组每个元素执行一次 callback 函数,它没有返回内容。这一点和map()方法、some()方法、every()方法不同。如果打印forEach()方法返回内容,会出现undefined。不会改变原内容</p>

    <h4>4.解决方案</h4>
    <h4>5.编码实战</h4>
    <h4>6.扩展思考</h4>
    filter()、some()、map()、forEach()的共同点是什么?
    <h4>7.参考文献</h4>
    <p>参考:<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">MDN</a>
    </p>
    <h4>8.更多讨论</h4>
    <p>还有哪些方法可以对数组进行操作?</p>
    <p>every() 方法测试数组的所有元素是否都通过了指定函数的测试。</p>
    <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every">MDN</a>
    </p>
    <p>reduce() 方法对累加器和数组的每个值 (从左到右)应用一个函数,以将其减少为单个值。</p>
    <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce">MDN</a></p>

    相关文章

      网友评论

          本文标题:数组操作有什么作用?

          本文链接:https://www.haomeiwen.com/subject/bfuxattx.html