美文网首页
javascript数组方法&类数组

javascript数组方法&类数组

作者: zlqinying | 来源:发表于2021-04-16 08:24 被阅读0次

    arr.push(...items) —— 从尾端添加元素,

    arr.pop() —— 从尾端提取元素,

    arr.shift() —— 从首端提取元素,

    arr.unshift(...items) —— 从首端添加元素。

    1、删除数组

    数组是对象,所以可以使用delete

    let arr = ['dd', 'go', 'home']

    delete arr[1]

    console.log(arr, arr[1]) // ["dd", '', "home"] undefined

    delete obj.key 是通过 key 来移除对应的值。对于对象来说是可以的。但是对于数组来说,我们通常希望剩下的元素能够移动并占据被释放的位置。我们希望得到一个更短的数组。

    2、splice它可以做所有事情,添加、删除、插入元素

    语法:splice(start,[deleteNum, elem1....elemN])

    它从索引start开始修改数组,删除deleteNum个元素并在当前位置插入elem1....elemN

    let arr = ["I", "study", "JavaScript"];

    arr.splice(1,1);// 从索引 1 开始删除 1 个元素

    alert( arr ) // ["I", "JavaScript"]

    let arr = ["I","study","JavaScript", "right", "now"];

    arr.splice(0, 3, "Let's", "dance");

    alert( arr ) //  ["Let's", "dance", "right", "now"]

    let arr = ["I", "study", "JavaScript"];

    // 从索引 2 开始, 删除 0 个元素,然后插入 "complex" 和 "language"

    arr.splice(2, 0, "complex", "language");

    alert( arr ); // "I", "study", "complex", "language", "JavaScript"

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

    let arr = ["t", "e", "s", "t"];

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

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

    4、concat数组合并

    5、数组搜索

    arr.indexOf(item, from) 从索引 from 开始搜索 item,如果找到则返回索引,否则返回 -1。

    arr.lastIndexOf(item, from) —— 和上面相同,只是从右向左搜索。

    arr.includes(item, from) —— 从索引 from 开始搜索 item,如果找到则返回 true(译注:如果没找到,则返回 false)。

    let arr = [1, 0, false];

    alert( arr.indexOf(0) ); // 1

    alert( arr.indexOf(false) ); // 2

    alert( arr.indexOf(null) ); // -1

    alert( arr.includes(1) ); // true

    请注意,这些方法使用的是严格相等 === 比较。所以如果我们搜索 false,会精确到的确是 false 而不是数字 0。

    如果我们想检查是否包含某个元素,并且不想知道确切的索引,那么 arr.includes 是首选。

    此外,includes 的一个非常小的差别是它能正确处理NaN,而不像 indexOf/lastIndexOf:

    const arr = [NaN];

    alert( arr.indexOf(NaN) ); // -1(应该为 0,但是严格相等 === equality 对 NaN 无效)

    alert( arr.includes(NaN) );// true(这个结果是对的)

    find 和 findIndex

    let result = arr.find(function(item,index,array) { 

     // 如果返回 true,则返回 item 并停止迭代 

     // 对于假值(falsy)的情况,则返回 undefined

    });

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

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

    6、sort

    let arr = [ 1, 2, 15 ];

    arr.sort(function(a,b) { return a - b; });

    alert(arr); //1, 2, 15

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

    let arr = [1, 2, 3, 4, 5];

    arr.reverse();

    alert( arr ); // 5,4,3,2,1

    8、split和join

    let str = "test";

    alert( str.split('') ); // t,e,s,t 字符串拆为字母数组

    let arr = ['Bilbo', 'Gandalf', 'Nazgul'];

    let str = arr.join(';'); // 使用分号 ; 将数组粘合成字符串

    alert( str ); // Bilbo;Gandalf;Nazgul

    9、reduce/reduceRight 它们用于根据数组计算单个值。

    let value = arr.reduce(function(accumulator,item,index,array) { 

     // ...

    }, [initial]);

    accumulator —— 是上一个函数调用的结果,第一次等于 initial(如果提供了 initial 的话)。

    item —— 当前的数组元素。

    index —— 当前索引。

    arr —— 数组本身。

    initial —— 初始值

    应用函数时,上一个函数调用的结果将作为第一个参数传递给下一个函数。

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

    let arr = [1, 2, 3, 4, 5];

    let result = arr.reduce((sum,current) => sum + current, 0);

    alert(result); // 15

    arr.reduceRight 和 arr.reduce 方法的功能一样,只是遍历为从右到左。

    let arr = [];

    // Error: Reduce of empty array with no initial value

    // 如果初始值存在,则 reduce 将为空 arr 返回它(即这个初始值)。

    arr.reduce((sum, current) => sum + current, 10);

    所以建议始终指定初始值。

    10、Array.isArray

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

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

    alert(typeof {}); // object

    alert(typeof []); // object

    alert(Array.isArray({})); // false

    alert(Array.isArray([])); // true

    11、function camelize(str) {

        return str.split('-').map((item, index) => {

          return index === 0 ? item : item[0].toUpperCase()+item.slice(1)

        }).join('')

      }

      console.log(camelize('background-color')) // backgroundColor

      console.log(camelize('list-style-image')) // listStyleImage

      console.log(camelize('-webkit-transition')) // WebkitTransition

    12、类数组array-like有索引和length属性的对象,所以看起来很像数组

    let arrayLike = { 

    // 有索引和 length 属性 => 类数组对象

     0: "Hello", 

     1: "World", 

     length: 2

    };

    // Error (no Symbol.iterator)

    for(letitemofarrayLike){}

    可迭代对象和类数组对象通常都 不是数组,它们没有 push 和 pop 等方法。

    13、Array.from

    有一个全局方法 Array.from 可以接受一个可迭代或类数组的值,并从中获取一个“真正的”数组。然后我们就可以对其调用数组方法了。

    let arrayLike = { 

     0: "Hello", 

     1: "World",

     length: 2};

    let arr = Array.from(arrayLike);// (*)

    alert(arr.pop()); // World(pop 方法有效)

    console.log(arr) // ['Hello', 'World']

    let str = 'xy';// 将 str 拆分为字符数组

    let chars = Array.from(str);

    alert(chars[0]); // x

    alert(chars[1]); // y

    alert(chars.length); // 2

    Array.from与split方法不同,它依赖于字符串的可迭代性,因此就i像for...of一样,可以正确的处理代理对。

    其实Array.from就跟下面一些代码做着同样的事:

    let str = 'xy'

    let chars = []

    for (let char of str) {

      chars.push(char)

    }

    console.log(chars) // ['x','y']

    14、可以应用 for..of 的对象被称为 可迭代的,Symbol.iterator 方法会被 for..of 自动调用,但我们也可以直接调用它。

    相关文章

      网友评论

          本文标题:javascript数组方法&类数组

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