JavaScript常用的列表方法

JavaScript中常用的列表方法有很多:

push():在列表尾部添加一个或者多个元素。

    let arr = [1,2,4,5]
    arr.push(1)
    console.log(arr)//[1,2,4,5,1]

pop():移除并返回列表的尾部最后一个元素

let arr = [1,2,3,4,5]
console.log(arr.pop())//5
console.log(arr)//[ 1, 2, 3, 4 ]

unshift():在列表开头添加一个元素或者多个元素

let arr = [1,2,3,4,5]
arr.unshift(111)
console.log(arr)//[ 111, 1, 2, 3, 4, 5 ]

shift():在列表开头删除一个元素

let arr = [1,2,3,4,5]
arr.shift(111)
console.log(arr)//[ 2, 3, 4, 5 ]

concat():连接两个或多个列表,并返回一个新的列表

let arr = [1,2,3,4,5]
let arr2 = ["张三","李四"]
let res = arr.concat(arr2)
console.log(res)//[1,2,3,4,5,'张三','李四']

slice():返回子列表

let arr = [1,2,3,4,5]
arr2 = arr.slice(1,3)//从数组下标1开始(包含1)到下标3结束(不包含下标3)
console.log(arr)//[ 1, 2, 3, 4, 5 ],不改变原数组
console.log(arr2)//[ 2, 3 ]
console.log(arr.slice(1))//[ 2, 3, 4, 5 ],一位参数默认是从开始的下标一直截取到数组末尾包含末尾
console.log(arr.slice(1,-1))//[ 2, 3, 4 ],参数可以是负数,-1表示最后一位向左递减

splice():从列表中添加、移除或替换元素。

  1. 删除元素:
    let array = [1, 2, 3, 4, 5];
    let removed = array.splice(2, 2); // 从索引2开始删除2个元素
    console.log(array); // [1, 2, 5]
    console.log(removed); // [3, 4]

  2. 插入元素:
    let array = [1, 2, 3, 4, 5];
    array.splice(2, 0, 'a', 'b'); // 从索引2开始插入两个元素 'a' 和 'b'
    console.log(array); // [1, 2, 'a', 'b', 3, 4, 5]

  3. 替换元素:
    let array = [1, 2, 3, 4, 5];
    array.splice(3, 1, 'a', 'b'); // 从索引3开始删除1个元素,并插入 'a' 和 'b'
    console.log(array); // [1, 2, 3, 'a', 'b', 5]

  4. 删除并插入元素:
    let array = [1, 2, 3, 4, 5];
    array.splice(1, 2, 'a', 'b'); // 从索引1开始删除2个元素,并插入 'a' 和 'b'
    console.log(array); // [1, 'a', 'b', 4, 5]
    

  5. 负数索引的应用:
    let array = [1, 2, 3, 4, 5];
    array.splice(-2, 1); // 从倒数第2个位置开始删除1个元素
    console.log(array); // [1, 2, 3, 5]

indexof():返回指定元素在列表中首次出现的索引

let arr = [1,2,3,4,5,1,1,1]
console.log(arr.indexOf(1))//0
console.log(arr.lastIndexOf(1))//7

lastIndexof():返回指定元素在列表中最后一次出现的索引

let arr = [1,2,3,4,5,1,1,1]
console.log(arr.indexOf(1))//0
console.log(arr.lastIndexOf(1))//7

join():将列表中的所有元素以join函数中参数指定的字符形式连接起来

let arr = [1,2,3,4,5,1,1,1]
console.log(arr.join(","))//1,2,3,4,5,1,1,1
console.log(arr.join("?"))//1?2?3?4?5?1?1?1

forEach():遍历列表中的每个元素,并对其执行指定的操作

  1. 基本用法:
    let array = [1, 2, 3, 4, 5];
    
    array.forEach(function(element) {
      console.log(element);
    });
    
    // 输出:
    // 1
    // 2
    // 3
    // 4
    // 5

  2. 使用索引和数组本身:
    let array = [1, 2, 3, 4, 5];
    
    array.forEach(function(element, index, arr) {
      console.log(`Element ${element} is at index ${index} in array [${arr}]`);
    });
    
    // 输出:
    // Element 1 is at index 0 in array [1,2,3,4,5]
    // Element 2 is at index 1 in array [1,2,3,4,5]
    // Element 3 is at index 2 in array [1,2,3,4,5]
    // Element 4 is at index 3 in array [1,2,3,4,5]
    // Element 5 is at index 4 in array [1,2,3,4,5]

  3. 改变数组中元素的值:注意只有这种方法可以改基本数据类型应用数据类型的化基础用法也是可以改的。
    let array = [1, 2, 3];
    
    array.forEach(function(element, index, arr) {
      arr[index] = element * 2;
    });
    
    console.log(array); // 输出 [2, 4, 6]

  4. 指定 this 的值:
    function Counter() {
      this.sum = 0;
      this.count = 0;
    }
    
    Counter.prototype.add = function(array) {
      array.forEach(function(entry) {
        this.sum += entry;
        ++this.count;
      }, this); // 使用 this 作为回调函数内部的 this
    };
    
    let obj = new Counter();
    obj.add([2, 5, 9]);
    console.log(obj.sum); // 输出 16
    console.log(obj.count); // 输出 3

    错误的使用forEach修改数组姿势:

let arr = [1,2,3,4,5,1,1,1]
arr.forEach(item=>{
    item*=2
})
console.log(arr)//[1,2,3,4,5,1,1,1],不变就是不变哈哈哈

// 试试字符串数组
let drr = ["你好","世界"]
drr.forEach(item=>{
    item = "12"
})
console.log(drr)//[ '你好', '世界' ],还是不变哈哈哈

//试试引用数据类型
let orr = [{name:"张三"},{name:"李四"}]
orr.forEach(item=>{
    item.name = "12"
})
console.log(orr)//[ { name: '12' }, { name: '12' } ],秒了

map():创建一个新的列表,其中元素是对原始列表中的每个元素指定操作的结果

注意事项

  • map() 不会对空数组进行检测,所以在空数组上调用 map() 将返回一个空数组。
  • 它不会改变调用它的数组,而是返回一个新的数组。
  • 如果已经存在的元素被更改,则其传递给 callback 的值是遍历到它们那一刻的值。
  1. 将数组中每个元素加倍:
    let array = [1, 2, 3, 4, 5];
    
    let doubled = array.map(function(element) {
      return element * 2;
    });
    
    console.log(doubled); // 输出 [2, 4, 6, 8, 10]

  2. 转换字符串数组为数字数组:
    let stringArray = ["1", "2", "3", "4", "5"];
    
    let numberArray = stringArray.map(function(element) {
      return parseInt(element);
    });
    
    console.log(numberArray); // 输出 [1, 2, 3, 4, 5]

  3. 使用箭头函数简化:
    let array = [1, 2, 3];
    
    let squared = array.map(x => x * x);
    
    console.log(squared); // 输出 [1, 4, 9]

  4. 使用索引和原数组:
    let array = [1, 2, 3];
    
    let transformed = array.map(function(element, index, arr) {
      return `Element ${element} is at index ${index} in array [${arr}]`;
    });
    
    console.log(transformed);
    // 输出:
    // ["Element 1 is at index 0 in array [1,2,3]",
    //  "Element 2 is at index 1 in array [1,2,3]",
    //  "Element 3 is at index 2 in array [1,2,3]"]

filter():创建一个新的列表,其中的元素是满足指定条件的原始列表中的元素

  1. 过滤出大于等于3的元素:
    let array = [1, 2, 3, 4, 5];
    
    let filtered = array.filter(function(element) {
      return element >= 3;
    });
    
    console.log(filtered); // 输出 [3, 4, 5]
  2. 过滤出偶数:
    let array = [1, 2, 3, 4, 5];
    
    let evenNumbers = array.filter(function(element) {
      return element % 2 === 0;
    });
    
    console.log(evenNumbers); // 输出 [2, 4]

  3. 使用箭头函数简化:
    let array = [10, 15, 20, 25, 30];
    
    let divisibleByFive = array.filter(x => x % 5 === 0);
    
    console.log(divisibleByFive); // 输出 [10, 15, 20, 25, 30]

  4. 使用索引和原数组:
    let array = [1, 2, 3];
    
    let filtered = array.filter(function(element, index, arr) {
      return index % 2 === 0; // 过滤出索引为偶数的元素
    });
    
    console.log(filtered); // 输出 [1, 3]

reduce():对列表中的元素进行累积计算,返回一个结果

  1. 数组求和:
    let array = [1, 2, 3, 4, 5];
    
    let sum = array.reduce(function(accumulator, currentValue) {
      return accumulator + currentValue;
    }, 0);
    
    console.log(sum); // 输出 15

  2. 数组中最大值:
    let array = [5, 1, 8, 3, 9];
    
    let max = array.reduce(function(accumulator, currentValue) {
      return Math.max(accumulator, currentValue);
    }, -Infinity);
    
    console.log(max); // 输出 9

  3. 将数组中的对象数组化:
    let data = [
      { id: 1, value: 'a' },
      { id: 2, value: 'b' },
      { id: 3, value: 'c' }
    ];
    
    let idArray = data.reduce(function(accumulator, currentValue) {
      accumulator.push(currentValue.id);
      return accumulator;
    }, []);
    
    console.log(idArray); // 输出 [1, 2, 3]

  4. 使用箭头函数简化:
    let array = [1, 2, 3, 4, 5];
    
    let product = array.reduce((accumulator, currentValue) => accumulator * currentValue, 1);
    
    console.log(product); // 输出 120

sort():对列表中的元素进行排序

reverse():反转列表

includes():对于数组查询是否包含指定元素返回boolean值,对于字符串则是查询是否有指定字串

  • 29
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值