2019-06-13 关于数组遍历操作

//0 reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
 [1,2,3,4,5].reduce((sum, item) => { return sum + item }, 0)
   //1.concat() 用于连接 两个数组
    var arr1=[1,2,3];
    var arr2=[4,5];
    var arr3=arr1.concat(arr2)

    //2.join() 方法用于把数组中的所有元素放入一个字符串 默认是使用 ' ,' 分割
    console.log(arr1.join()) //
    console.log(arr1.join('.'))//1.2.3

    let [a,b,c]=arr1;
    console.log(b)
    //3. push() 用于向数组的 末尾 添加一个或多个元素 并返回新的长度  (会改变原有数组)
    var arrPush=[2,3,4];
    var a2=arrPush.push([1,4],'aa'); //向数组的末尾添加一个或多个元素
    console.log(arrPush) // [2,3,4,[1,4],'aa']
    console.log(a2)  // 返回 5
                                                                    

    //4.pop() // 用于删除并返回数组的最后一个元素 并返回最后一个元素 会改变原数组
    var arrPop=[2,3,4]; 
    console.log(arrPop.pop()) // 返回 4
    console.log(arrPop)  // [2,3]

    //5.shift() 用于删除数组的第一个元素 并返回第一个元素(即删除的元素) 改变原数组
    var arrShift=[1,2,3,4];  
    console.log(arrShift.shift()) //返回 1
    console.log(arrShift) // [2,3,4]

    //6.unshift() 用于向数组的开头添加一个或更多元素 并返回新的长度  改变原数组
    var arrUnshift=[2,3,4];
    var arrNum=arrUnshift.unshift('a',100,'b');
    console.log(arrNum) //返回 6
    console.log(arrUnshift) //['a',100,'b',2,3,4]

    //7.slice 用于截取 从start到end(不包含end) 的arrSlice中的元素  返回选定的元素 不影响原数组
    var arrSlice=[2,3,4,5,6,7];
    console.log(arrSlice.slice(0,3)) //[2,3,4]
    console.log(arrSlice) //[2,3,4,5,6,7];

    //8.splice 替换数组中的元素
    //替换功能,第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项)

        var array = ['a','b','c','d'];
        var removeArray = array.splice(1,2,'insert');
        alert(array);//弹出a,insert,d
        alert(removeArray);//弹出b

    //8.1  split() 把一个字符串分割成字符串数组 与join相反
    var name= 'he&xiao&ge';
    console.log(name.split("&"))



    //9.截取字符串 substring() substr()
    var str ='abcdefg';
    console.log(str.substr(2));    // cdefg 9.1只有一个参数的时两种方法相同 都是截取从当前下标,直到字符串最后的字符串片段
    console.log(str.substring(2))   //cdefg

        //9.2 不同点 第2个参数
        console.log(str.substr(1,5)) //bcdef  //第二个参数截取的是字符串的长度 从起始点下标1截取 往后数5个长度的字符串
        console.log(str.substring(1,5)) //bcde 截取从下标1 到下标5之间的字符串 (含头不含尾)

    //10.sort 排序  --按照unicode code 位置排序 默认升序
    var arrSort=['a','b','c','d',2,1];
    console.log(arrSort.sort())  // [1,2,'a','b','c','d']

    //11 reverse() // 倒序  -- 用于颠倒数组中元素的顺序 ,改变原有数组
    var arrReverse=[2,3,'a',4];
    console.log(arrReverse.reverse()) 

    //12indexOf 和lastIndexOf  //通过字符串找索引位置 跟charAt相反
     var arrFind=['a',2,3,'a',4];
    console.log(arrFind.indexOf('a')) //0  //查找数组里面有没有这个参数 有则返回下标 没有返回-1
    console.log(arrFind.lastIndexOf('a')) //3 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。

    //13大小写转换 toLowerCase()  toUpperCase()

    //14  charAt()  // 根据索引位置获取内容
    var str='hello word';
    console.log(str.charAt(1))

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    var arr = [1, 2, 3, 4, 5];
     console.log("原本arr-->", arr)
    //1.foreach
    //用法-->遍历数组的全部元素,利用回调函数对数组进行操作。自动遍历length次数,无法break中断
    arr.forEach(function(item,index){
        console.log("forEach-->",item)
    })

    //2.map()
    //用法 1.返回操作后的新数组 ,不改变原数组
    //     2.return什么,就输出什么新数组
    var newMapArr=arr.map(function(item,index,arr){
        return item*2
    })
    console.log("newMapArr-->", newMapArr)
     console.log("原本arr-->", arr)

    var newArr2 = newMapArr.map(function (item, index) {
        return `<li>${item}</li>`;
    })
    console.log("newArr2进行操作后的新数组",newArr2);        //数组.join(),把数组每一项连接起来,形成字符串string
    console.log(newArr2.join(''));  

    //3.filter() 
    // 在回调函数中操作 返回的是过滤后的新数组 
    var newFilterArr = arr.filter(function(item,index){
        return item>2
    })
    console.log("newFilterArr进行操作后的新数组", newFilterArr);     //数组.join(),把数组每一项连接起来,形成字符串string
     console.log("原本arr-->", arr)
 
    //4. includes()
    //判断数组是否含有某值 , 值返回Boolean值
    var newIncludes = arr.includes(5)
    console.log(newIncludes)

    //5.find() -->返回找到的元素  findIndex返回的是当前下标
    //用法: 从第一个元素开始遍历,开始进行匹配,如果满足return的条件就返回当前元素 结束循环
    var newFindArr=arr.find(function(item,index){
        console.log(item,index)
        return item > 7
    })
    console.log("newFindArr5-->", newFindArr) //如果没有匹配到元素返回的undefined


    //6.some()
    var newSomeArr6=arr.some(function(item,index){
          console.log(item, index)
        return item>2
    })
    console.log("newSomeArr6-->", newSomeArr6)  //同find一样,如果没有匹配到元素就返回boolean

    //7.every的用法 很好用  -->判断数组里面的元素是否全部满足 。 
    var arr = [1,2,3,4,5];
        var new1 = arr.every(function (item, index) {
            return item > 2;    //判断出一个不符合条件则跳出循环并输出flase
        })
        var new2 = arr.every(function (item, index) {
            return item < 10;   //判断出数组全部元素都符合条件则输出true
        })
        console.log(new1);
        console.log(new2);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容