js数组方法大全(包括es6新增以及遍历方法)

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]

    // 1、push从数组尾部添加一个或多个元素,变异方法返回数组长度,变异方法
    console.log(arr.push(10, 11));
    console.log('push', arr);

    // 2、pop从数组尾部删除,并返回删除的元素,变异方法
    console.log('pop', arr.pop())

    // 3、shift删除数组第一个元素并返回删除的元素,变异方法
    console.log('shift', arr.shift())

    // 4、unshift从数组头部添加一个或多个元素,返回添加后数组的长度,变异方法
    console.log('unsift', arr.unshift(1, 11));

    // 5、concat拼接一个或多个数组,非变异方法
    const concat = arr.concat(['a', 'aaa'], ['b'], 'c', 'd')
    console.log('concat', concat);

    // 6、join按照规定连接符拼接数组中的元素,非变异方法
    const str = arr.join('-')
    console.log('str', str);

    // 7、reverse用于颠倒数组元素的顺序,变异方法
    console.log('reverse', arr.reverse());
    console.log('arr', arr);

    // 8、sort如果里面没有任何参数,则按照字符编码排序,如果想自定义排序方式,则传入一个函数, 变异方法
    let sortArr = [7, 3, 2, 6, 4, 3, 9, 56]
    console.log('sort', sortArr.sort((a, b) => { return a - b }));
    console.log('sortArr', sortArr);
    // sort原理是用的冒泡排序的思想
    // 冒泡排序实现升序
    // 一共要冒sortArr-1次泡,每次冒泡比较次数比上一次少1(第一次比较次数为sortArr-1),所以每趟比较sortArr-1-i次
    let mySortArr = [7, 3, 2, 6, 4, 3, 9, 56]
    // for (var i = 0; i <= mySortArr.length - 1; i++) {
    //   for (var j = 0; j < mySortArr.length - i; j++) {
    //     if (mySortArr[j] > mySortArr[j + 1]) {
    //       var temp;
    //       temp = mySortArr[j];
    //       mySortArr[j] = mySortArr[j + 1];
    //       mySortArr[j + 1] = temp
    //     }
    //   }
    // }
    // console.log('mySortArr', mySortArr);
    function sort(arr, fn) {
      for (var i = 0; i <= arr.length - 1; i++) {
        for (var j = 0; j < arr.length - i; j++) {
          if (fn(arr[j], arr[j + 1]) > 0) {
            var temp;
            temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp
          }
        }
      }
      console.log('mySortArr', arr);
    }
    function fn(a, b) { return a - b }
    sort(mySortArr, fn)

    // 9、slice返回一个新数组,从start到end(不包括),注意为负时只能从左到右截取,-1代表倒数第一个元素,非变异方法
    let slice = arr.slice(-2, -1);
    console.log('arr', arr);
    console.log('slice', slice);

    // 10、splice从数组中添加或删除元素,会改变原数组,返回被删除的元素数组,可实现替换操作,变异方法
    console.log('arr', arr);
    console.log('splice', arr.splice(1, 3, 'delete'));
    console.log('arr', arr);

    // es6新增 find()/findIndex()/fill()/entries()/keys()/values()/includes()

    // 11、数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
    console.log('arr', arr);
    console.log('find', arr.find(v => { return v > 6 }));

    // 12、数组实例的findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。
    console.log('findIndex', arr.findIndex((v, i, arr) => { return v > 8 }));
    console.log('findIndex-1', arr.findIndex((v, i, arr) => { return v > 100 }));
    // 这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。
    function f(v) {
      return v > this.age;
    }
    let person = { name: 'John', age: 20 };
    console.log([10, 12, 26, 15].find(f, person));   // 26


    // indexOf方法无法识别数组的NaN成员,但是findIndex方法可以借助Object.is方法做到。
    console.log([NaN].findIndex(v => Object.is(NaN, v)))

    // 13、fill方法使用给定值,填充一个数组。
    console.log('fill', [1, 2, 3].fill('5'));
    console.log('fill', new Array(3).fill('6'));
    // 下面代码表示,fill方法从 1 号位开始,向原数组填充 7,到 2 号位之前结束。也可用来替换
    // 注意,如果填充的类型为对象,那么被赋值的是同一个内存地址的对象,而不是深拷贝对象。
    ['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']

    // 14、ES6 提供三个新的方法——entries(),keys()和values()——用于遍历数组。它们都返回一个遍历器对象(详见《Iterator》一章),可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。
    for (let index of ['a', 'b'].keys()) {
      console.log(index);
    }
    // 0
    // 1

    for (let elem of ['a', 'b'].values()) {
      console.log(elem);
    }
    // 'a'
    // 'b'

    for (let [index, elem] of ['a', 'b'].entries()) {
      console.log(index, elem);
    }
    // 0 "a"
    // 1 "b"




    // 数组的遍历方法

    // 1、forEach遍历但是有个缺点是不能用break来中断循环,也不能return跳出函数,类似于for循环
    arr.forEach((v, i, arr) => { console.log('forEach', v); })

    // 2、map 返回映射后的数组, 非变异方法
    let maparr = [1, 2, 3]
    let map = maparr.map((v, i, arr) => { return v * v })
    console.log('map', map);
    console.log(maparr.map(Math.sqrt));

    // 3、filter 过滤符合条件的元素
    let filterarr = [12, 23, 14, 56, 34]
    let newFilter = filterarr.filter((v, i, arr) => { return v > 18 })
    console.log('newFilter', newFilter);

    // 4、some 只要有一个元素满足就返回true
    let some = ['a', 'b', 'c']
    console.log('some', some.some((v, i, arr) => { return v = 'b' }));

    // 5、every 所有元素满足条件才返回true
    let every = [12, 10, 29]
    console.log('every', every.every((v, i, arr) => { return v > 20 }));

    // 6、reduce 
    let reducearr = [12, 23, 14, 56, 34]
    const Obj = reducearr.reduce((obj, v, i, arr) => { obj[i] = v; return obj }, {})
    console.log('reduce', Obj);
    // 7、for in
    // 8、for of
    // 9、for
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值