js 数组操作方法

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    // 修改原数组的API有: splice/reverse/fill/copyWithin/sort/push/pop/unshift/shift
    // splice 删除和添加数组
    let arr = [0, 1, 2, 3, 4, 5, 6];
    arr.splice(2, 1); // 返回被删除元素 2
    console.log(arr); // [0, 1, 3, 4, 5, 6] 原数组被改变

    // reverse 数组反转
    let arr2 = [1, 2, 3, 4, 5];
    arr2.reverse(); // [5, 4, 3, 2, 1]
    console.log(arr2); // [5, 4, 3, 2, 1] 原数组被改变

    // fill 使用固定值填充数组
    let fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
    fruits.fill('Runoob') // ["Runoob", "Runoob", "Runoob", "Runoob"]
    console.log(fruits); // ["Runoob", "Runoob", "Runoob", "Runoob"] 原数组被改变

    // copyWithin 从数组的指定位置拷贝元素到数组的另一个指定位置中
    let fruitsa = ['Banana', 'Orange', 'Apple', 'Mango', 'Kiwi', 'Papaya'];
    fruitsa.copyWithin(2, 0, 2);

    // 数组排序
    let arr3 = [2, 1, 4, 3, 6, 5];
    arr3.sort(); // [1, 2, 3, 4, 5, 6]
    arr3.sort((a, b) => b - a); // 倒序排列 [6, 5, 4, 3, 2, 1]
    console.log(arr3);

    // push 数组尾部添加元素
    let arr4 = [3];
    arr4.push(4); // 返回当前添加元素的长度 2(arr4.length)
    console.log(arr4); // [3, 4]

    // pop 删除数组最后一个元素
    let arr5 = ['a', 'b', 'c'];
    arr5.pop(); // 返回最后一个元素 c
    console.log(arr5); // ["a", "b"]

    // unshift 数组头部添加元素
    let arr6 = ['b'];
    arr6.unshift('a'); // 返回当前添加元素的长度 2(arr4.length)
    console.log(arr6); // ["a", "b"]

    // shift 删除数组首部元素并返回当前删除元素
    let arr7 = [1, 2, 3];
    arr7.shift(); // 1
    console.log(arr7); // [2, 3]

    // 不修改原数组的API有 slice/map/forEach/every/filter/reduce/entries/find

    // slice 进行数组的截取
    let bb1 = [1, 2, 3, 4, 5];
    bb1.slice(0, 2); // [1, 2]
    console.log(bb1); // [1, 2, 3, 4, 5];

    // map 对数组中的元素执行指定函数 返回新数组 不修改原数组
    let bb2 = ['a', 'b'];
    const red = bb2.map(item => item + '**');
    console.log(red); // ["a**", "b**"]
    console.log(bb2); // ["a", "b"]

    // forEach 数组进行循环
    [1, 2, 3, 4, 5, 6].forEach(item => console.log(item)); // 输出数组中的每一个元素

    // every 使用指定函数检测数组中的所有元素， 果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
    [32, 33, 16, 40].every(item => item > 18); // false

    // filter 返回满足条件的数组元素，如没有匹配返回空数组
    [32, 33, 16, 40].filter(item => item > 18); // [32, 33, 40]

    // entries 从数组 kk 创建一个可迭代对象， 该对象包含了数组的键值对：
    const kk = ['Banana', 'Orange', 'Apple', 'Mango'];
    const x = kk.entries();
    console.log(x);
    console.log(kk) // ["Banana", "Orange", "Apple", "Mango"];
        
        // find reduce
        [65, 44, 12, 4].reduce((total, num) => total + num) // 返回[65, 44, 12, 4]元素相加之和

</script>
</body>
</html>
猜你喜欢
