美文网首页
JS 数组方法总结

JS 数组方法总结

作者: 风之化身呀 | 来源:发表于2017-10-02 11:46 被阅读5次

1、按是否改变原数组进行区分

1.1、不改变原数组

  • 追加元素
   //1、concat
    const arr1 = ['a', 'b', 'c', 'd', 'e'];
    const arr2 = arr1.concat('f'); // ['a', 'b', 'c', 'd', 'e', 'f']
    console.log(arr1); // ['a', 'b', 'c', 'd', 'e']
     //2、ES6扩展运算符...
    const arr1 = ['a', 'b', 'c', 'd', 'e'];
    const arr2 = [...arr1, 'f']; // ['a', 'b', 'c', 'd', 'e', 'f']  
    const arr3 = ['z', ...arr1]; // ['z', 'a', 'b', 'c', 'd', 'e']
  • 删除元素
   //1、filter
    const arr1 = ['a', 'b', 'c', 'd', 'e'];
    const arr2 = arr1.filter(a => a !== 'e'); // ['a', 'b', 'c', 'd']
     //2、slice
    const arr1 = ['a', 'b', 'c', 'd', 'e'];  
    const arr2 = arr1.slice(1, 5) // ['b', 'c', 'd', 'e']  
    const arr3 = arr1.slice(2) // ['c', 'd', 'e']
  • 替换元素
   //1、map
    const arr1 = ['a', 'b', 'c', 'd', 'e']  
    const arr2 = arr1.map(item => {  
        if(item === 'c') {
          item = 'CAT';
        }
        return item;
     }); // ['a', 'b', 'CAT', 'd', 'e']

1.2、改变原数组

  • 追加
    push & unshift
  • 删除
    pop & shift
  • 替换
    splice

2、数组遍历

  • forEach
var arr = [1,2,3,4,5,6,7,8];
// Uses the usual "for" loop to iterate
for(var i= 0, l = arr.length; i< l; i++){
console.log(arr[i]);
}
console.log("========================");
//Uses forEach to iterate
arr.forEach(function(item,index){
console.log(item);
});
  • reduce
    reduce(callback, initialValue)会传入两个变量。回调函数(callback)和初始值(initialValue)
    callback有两个参数pre,next.
    当不传入initialValue时,pre是数组的第一个值,next是第二个
    当传入initValue时,pre是initValue,next是数组的第一个参数
    注:initValue可以是任意类型的数据,不一定是数组中元素的类型。该方法并未对数组中元素进行操作,可看作遍历数组的一种。
var arr = ["apple","orange"];
//未传入
function noPassValue(){
  return arr.reduce(function(prev,next){
    console.log("prev:",prev);
    console.log("next:",next);
    return prev + " " +next;
  });
}
//传入一个对象
function passValue(){
  return arr.reduce(function(prev,next){
    console.log("prev:",prev);
    console.log("next:",next);  
    prev[next] = 1;
    return prev;
  },{});
}
console.log("No Additional parameter:",noPassValue());
console.log("----------------");
console.log("With {} as an additional parameter:",passValue());

相关文章

  • js中的循环遍历方法对比

    JS循环大总结, for, forEach,for in,for of, map区别 map(数组方法): 特性:...

  • js中数组方法的总结

    js中数组的方法非常的多,功能也很强大。今天来总结一下js中数组的方法: 首先创建一个数组,数组中可以包含各种类型...

  • js数组遍历方法总结

    转自: js数组遍历方法总结 数组遍历方法 1.for循环 使用临时变量,将长度缓存起来,避免重复获取数组长度,当...

  • JS数组遍历

    本文针对JS中数组遍历做一个总结 普通 for 循环 forEach 循环(数组自带的方法) 注意: forEac...

  • JSPatch下发笔记6

    OC代码: JS代码: 总结:1.不可变数组表示方法,OC:@[image],JS:[image]。2.字典取值方...

  • 数组方法(filter、map、some...)

    数组是我们在js中常常要用到的,但是你真的熟悉数组的方法吗?今天我就总结一下Array对象具有哪些方法。 声明数组...

  • JavaScript归纳

    在freecodecamp上学习JS基础,并进行归纳总结 1. 数组的常用方法: pop():从数组中把 最后一个...

  • js数组方法总结

    数组的排序 sort()方法排序问题。 sort()方法是Array原型链上自带的方法。 默认排序顺序是根据字符串...

  • JS 数组方法总结

    1、按是否改变原数组进行区分 1.1、不改变原数组 追加元素 删除元素 替换元素 1.2、改变原数组 追加push...

  • JS 数组方法总结

    一、创建Array 创建数组主要有两种方法,第一种是使用数组构造函数,第二种是使用数组字面量表示法。 使用数组构造...

网友评论

      本文标题:JS 数组方法总结

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