zoukankan      html  css  js  c++  java
  • js数组小记

    添加/移除数组元素

    • arr.push(...items) —— 从尾端添加元素
    • arr.pop() —— 从尾端提取元素,返回值为尾部的元素
    • arr.shift() —— 从首端提取元素
    • arr.unshift(...items) —— 从首端添加元素

    splice

    arr.splice(str) 方法可以说是处理数组的瑞士军刀。它可以做所有事情:添加,删除和插入元素。

    arr.splice(index[, deleteCount, elem1, ..., elemN])

    从 index 开始:删除 deleteCount 个元素并在当前位置插入 elem1, ..., elemN。最后返回已删除元素的数组。

    slice

    arr.slice([start], [end])

    它会返回一个新数组,将所有从索引 start 到 end(不包括 end)的数组项复制到一个新的数组。start 和 end 都可以是负数,在这种情况下,从末尾计算索引。

    
    alert( arr.slice(1, 3) ); // e,s(复制从位置 1 到位置 3 的元素)
    
    alert( arr.slice(-2) ); // s,t(复制从位置 -2 到尾端的元素)
    

    我们也可以不带参数地调用它:arr.slice() 会创建一个 arr 的副本。其通常用于获取副本,以进行不影响原始数组的进一步转换。

    concat

    arr.concat 创建一个新数组,其中包含来自于其他数组和其他项的值。

    arr.concat(arg1, arg2...)

    它接受任意数量的参数 —— 数组或值都可以。

    结果是一个包含来自于 arr,然后是 arg1,arg2 的元素的新数组。

    如果参数 argN 是一个数组,那么其中的所有元素都会被复制。否则,将复制参数本身。

    let arr = [1, 2];
    
    // create an array from: arr and [3,4]
    alert( arr.concat([3, 4]) ); // 1,2,3,4
    
    // create an array from: arr and [3,4] and [5,6]
    alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6
    
    // create an array from: arr and [3,4], then add values 5 and 6
    alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6
    

    遍历:forEach

    arr.forEach 方法允许为数组的每个元素都运行一个函数。

    arr.forEach(function(item, index, array) {
      // ... do something with item
    });
    

    在数组中搜索

    indexOf/lastIndexOf 和 includes

    • arr.indexOf(item, from) 从索引 from 开始搜索 item,如果找到则返回索引,否则返回 -1。
    • arr.lastIndexOf(item, from) —— 和上面相同,只是从右向左搜索。
    • arr.includes(item, from) —— 从索引 from 开始搜索 item,如果找到则返回 true(译注:如果没找到,则返回 false)。

    find 和 findIndex

    let result = arr.find(function(item, index, array) {
      // 如果返回 true,则返回 item 并停止迭代
      // 对于 falsy 则返回 undefined
    });
    

    如果它返回 true,则搜索停止,并返回 item。如果没有搜索到,则返回 undefined。

    let users = [
      {id: 1, name: "John"},
      {id: 2, name: "Pete"},
      {id: 3, name: "Mary"}
    ];
    
    let user = users.find(item => item.id == 1);
    
    alert(user.name); // John
    

    arr.findIndex 方法(与 arr.find 方法)基本上是一样的,但它返回找到元素的索引,而不是元素本身。并且在未找到任何内容时返回 -1。

    filter

    find 方法搜索的是使函数返回 true 的第一个(单个)元素。

    如果需要匹配的有很多,我们可以使用 arr.filter(fn)。

    语法与 find 大致相同,但是 filter 返回的是所有匹配元素组成的数组:

    let results = arr.filter(function(item, index, array) {
      // 如果 true item 被 push 到 results,迭代继续
      // 如果什么都没找到,则返回空数组
    });
    

    转换数组

    map

    arr.map 方法是最有用和经常使用的方法之一。

    它对数组的每个元素都调用函数,并返回结果数组。

    let result = arr.map(function(item, index, array) {
      // 返回新值而不是当前元素
    })
    

    例如,在这里我们将每个元素转换为它的字符串长度:

    let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
    alert(lengths); // 5,7,6
    

    sort(fn)

    arr.sort 方法对数组进行 原位(in-place) 排序,更改元素的顺序。(译注:原位是指在此数组内,而非生成一个新数组。)

    比较数组内数字大小

    let arr = [ 1, 2, 15 ];
    
    arr.sort((a,b)=>a-b);
    
    alert(arr);  // 1, 2, 15
    

    reverse

    arr.reverse 方法用于颠倒 arr 中元素的顺序。

    let arr = [1, 2, 3, 4, 5];
    arr.reverse();
    
    alert( arr ); // 5,4,3,2,1
    

    split 和 join

    str.split(delim) 方法可以做到。它通过给定的分隔符 delim 将字符串分割成一个数组。

    let str = "test";
    
    alert( str.split('') ); // t,e,s,t
    

    arr.join(glue) 与 split 相反。它会在它们之间创建一串由 glue 粘合的 arr 项。

    let arr = ['Bilbo', 'Gandalf', 'Nazgul'];
    
    let str = arr.join(';'); // 使用分号 ; 将数组粘合成字符串
    
    alert( str ); // Bilbo;Gandalf;Nazgul
    

    reduce

    当我们需要遍历一个数组时 —— 我们可以使用 forEach,for 或 for..of。

    当我们需要遍历并返回每个元素的数据时 —— 我们可以使用 map。

    arr.reduce 方法和上面的种类差不多,但稍微复杂一点。它们用于根据数组计算单个值。

    let value = arr.reduce(function(accumulator, item, index, array) {
      // ...
    }, [initial]);
    

    该函数一个接一个地应用于所有数组元素,并将其结果“搬运(carry on)”到下一个调用。

    参数:

    • accumulator —— 是上一个函数调用的结果,第一次等于 initial(如果提供了 initial 的话)。
    • item —— 当前的数组元素。
    • index —— 当前索引。
    • arr —— 数组本身。
      应用函数时,上一个函数调用的结果将作为第一个参数传递给下一个函数。

    因此,第一个参数本质上是累加器,用于存储所有先前执行的组合结果。最后,它成为 reduce 的结果。

    累加例子

    let arr = [1, 2, 3, 4, 5];
    
    let result = arr.reduce((sum, current) => sum + current);
    
    alert(result); // 15
    

    Array.isArray

    数组是基于对象的,不构成单独的语言类型。

    所以 typeof 不能帮助从数组中区分出普通对象:

    但是数组经常被使用,因此有一种特殊的方法用于判断:Array.isArray(value)。如果 value 是一个数组,则返回 true;否则返回 false。

    alert(Array.isArray({})); // false
    
    alert(Array.isArray([])); // true
    
  • 相关阅读:
    人工智能 有信息搜索 (启发式)
    python学习之高阶函数
    文件学习
    codeblock快捷键使用
    React项目之BrowserRouter路由方式之-------生产环境404问题
    React生产环境打包&&后台环境运行(有跨域+无跨域)
    React前台改用HashRouter并解决两个问题
    React路由基础
    React前台404组件页面+路由控制重定向
    react调用方法
  • 原文地址:https://www.cnblogs.com/move-up/p/13409372.html
Copyright © 2011-2022 走看看