总结自己的常用数组方法

forEach() 方法

对数组的每个元素执行一次给定的函数

接收两个参数 这里讲通常情况 只接收一个的

arr[abc,cba,bbc]

forEach(fuction(item,index,arr))

第一个参数:item是指数组元素 必填

比如abc

index是指索引 选填

比如abc的索引0

arr是执行的数组本体

       const fruits = ["Banana", "Orange", "Apple", "Mango"];
        fruits.forEach(function(item,index,arr){
            console.log(item);
            console.log(index);
            console.log(JSON.stringify(arr));
        })
        console.log(fruits);

map() 方法

创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

和上面的forEach非常像 最大的区别就在于forEach是直接返回原数组 这里是返回新数组

map()也是一样的,方法对数组的每个元素执行一次给定的函数

map(fuction(item,index,arr))

item是指数组元素 必填

比如abc

index是指索引 选填

比如abc的索引0

arr是执行的数组本体

    const array = [1,3,5,7,9]
        const map1 = array.map(function(x)
        {
            if(x > 3)
            {
              return x 
            }
        })
        console.log(map1); //[undefined,undefined,5,7,9]

Split方法

这里就是把字符串转变为数组

console.log(reformattedArray)
//分割每个字符,包括空格
var a = "Hello world"
const abc = a.split('');
console.log(abc);
['H', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']


var str="How are you doing today?";
var n=str.split(" ",3);
//How,are,you n输出三个字母的词语

//使用一个字符作为分隔符:
var str="How are you doing today?";
var n=str.split("o");
H,w are y,u d,ing t,day?

pop()方法

删除数组的最后一个属性并返回 会改变原来的数组

 consconst plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
 console.log(plants.pop()); // expected output: "tomato" 
 console.log(plants); // expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

shift方法

删除数组第一个属性 并返回它

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1); //[2,3]

console.log(firstElement);[1]

unshift方法

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

splice方法

var a = ['a','b','c']
var b = a.splice(1,1,'e','f')
console.log(a);//a是原数组 被操作的[a,e,f,c]
console.log(b); //b是返回值,是被替换的数组元素 此方法会改变原数组 [b]

// splice(start,deletecount,item)
// start:起始位置
// deletecount:删除位数
// item:替换的item
// 返回值为被删除的字符串
// 如果有额外的参数,那么item会插入到被移除元素的位置上。
// splice:移除,splice方法从array中移除一个或多个数组,并用新的item替换它们。
// 举一个简单的例子 
// 这里是slice方法
var arr = [1,2,3,4,5,6,7]
console.log(arr.slice(3)); //[4,5,6,7]从第三个开始截取因为没有给end 所以全部截完 arr=[1,2,3]
console.log(arr.slice(0,3));//[]从0开始截取到下标为3但是吧截 你可以理解为数学里面的[ ) [1,2,3]
console.log(arr.slice(0,-2));  //  [1,2,3,4,5]负数就是倒数第几个 这里的-2就是倒数第二个
console.log("被删除的为:", a.splice(1, 0, 2, 2)) //插入 第二个数为0,表示删除0个  
console.log("a数组元素:", a) //1,2,2,2,3,4,5,6,7

个人总结:slice的参数如果是正数就从左往右数,如果是负数的话就从右往左边数,

截取的数组与数的方向一致,如果是2个参数则截取的是数的交集,没有交集则返回空数组

slice也可以切割字符串,用法和数组一样,但要注意空格也算字符

concat方法

很简单理解就是合并字符串

A字符串.concat(B字符串)

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);[a,b,c,d,e,f]

注意 以上的slice方法 concat方法 以及上面的split方法都可以把一个类数组转成数组

arr.indexOf(searchElement[, fromIndex]) 可以传两个参数 第一个参数必填 是你要找从元素 第二个参数是开找的位置

indexof方法

很简单 找索引 就是下标

输入一个元素如果有返回元素的下标 没有返回-1

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

includes() 方法

用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

find() 方法

返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。记住了 是第一个

const array1 = [5,12,8,130,44]
const found = array1.find(function(item){
    if(item > 6 )
    {
        return item
    }
})
console.log(found);//12

filter()

方法创建一个新数组,其包含通过所提供函数实现的测试的所有元素。

filter()函数接收一个函数作为其参数,返回值为“true”的元素会被添加至新的 数组中,返回值为“false”的元素则不会被添加至新的数组中,最后返回这个新的 数组。如果没有符合条件的值则返回空数组

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
expected output: Array ["exuberant", "destruction", "present"]

findIndex()方法

方法返回数组中第一个满足条件的索引,如果没有找到返回-1 和上面的有点像

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = function(item)
{
    if(item > 13)
    {
        return item
    }

}

console.log(array1.findIndex(isLargeNumber));
expected output: 3

sort() 方法

方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的 UTF-16 代码单元值序列时构建的

//感觉像语法糖

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);['Dec', 'Feb', 'Jan', 'March']
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
expected output: Array [1, 100000, 21, 30, 4] //Unicode排序

arr.sort([compareFunction])
如果省略compareFunction,元素按照转换为的字符串的各个字符的 Unicode 位点进行排序。
所以这里面的compareFunction实际上一个用于排序的
所以不能给数字排序

reverse() 方法

方法将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组

原来的数组会直接被改变

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]

reduce方法

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

探索所 有点累加和累减的感觉

有两个参数 这边先说第一个 第二个是一个初始值 可选

第一个参数是一个函数

这里我们叫“reducer” 函数

这个函数也有四个参数

  • previousValue:上一次调用 callbackFn 时的返回值。在第一次调用时,若指定了初始值 initialValue,其值则为 initialValue,否则为数组索引为 0 的元素 array[0]
  • currentValue:数组中正在处理的元素。在第一次调用时,若指定了初始值 initialValue,其值则为数组索引为 0 的元素 array[0],否则为 array[1]
  • currentIndex:数组中正在处理的元素的索引。若指定了初始值 initialValue,则起始索引号为 0,否则从索引 1 起始。
  • array:用于遍历的数组。
    var numbers = [65, 44, 12, 4];
    var cc 
    function getSum(total, num) {
        return total - num;
    }
    cc = numbers.reduce(getSum)
    console.log(cc); //5

同样的这个reducer函数是可以自定义的 他的主要目的就是为了达成一个累次的目的 给我一种高中等差等比数列求和的感觉

reduce()函数最主要的作用是做累加处理,即接收一个函数作为累加器,将数 组中的每一个元素从左到右依次执行累加器,返回最终的处理结果。

 

posted @   jeffmmo  阅读(44)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示