前端处理数据常用的方法

一、处理对象{ }

1.Object.keys() 返回一个数组,这个数组包含该对象中所有的key

  // 1.可以拿到对象的key

      const a = { a: 1, b: 2, c: 3 }

      const ak = Object.keys(a)

      console.log('ak', ak) // ['a', 'b', 'c']

      const akk = ak.map(key => {

        return { name: key }

      })

      console.log('akk', akk) // [ {name:'a'},{name:'b'},{name:'c'}]

 2.Object.values() 返回一个数组,这个数组包含obj对象中的所有value

 // 2.可以拿到对象的value

      const b = { a: 1, b: 2, c: 3 }

      const bk = Object.values(b)

      console.log('bk', bk) // [1, 2, 3]

3.for() 同时获取对象的key和value

 // 3、同时获取key和value

      const obj ={ a: 1, b: 2, c: 3 }

      let keys = []

      let values = []

      for(var key in obj){

        keys.push(key)

        values.push(obj[key])

      }

      console.log('keys',keys);  // ['a', 'b', 'c']

      console.log('values',values); // [1, 2, 3]

二、处理数组[ ]

(一)不会改变原数组

1.find() 是返回数组中符合条件的第一个元素,否则返回 undefined. 不会改变原数组

适用场景:一个由多个对象组成的数组,你明确知道对象中的属性有且仅有一个是你需要的,你就可以通过此方法返回这个对象

 // 2.从该数组中找到符合该条件的第一个值

      const c = [2, 4, 6, 8, 10]

      const ck = c.find(item => {

        return item > 8

      })

      console.log('ck', ck) // 10

  2.findIndex() 返回数组中符合条件的第一个元素的索引,否则返回-1.不会改变原数组

  // 3.从该数组中找到符合条件的第一个元素的索引

      const d = [5, 10, 15, 20, 25]

      const dk = d.findIndex(item => {

        return item > 20

      })

      console.log('dk', dk) // 4

 3. filter() 从该数组中过滤出符合条件的所有元素,否则返回[ ] ,不会改变原数组

// 4.从该数组中过滤出来符合条件的数组

      const e = [1, 3, 5, 7, 9]

      const ek = e.filter(item => {

        return item > 5

      })

      console.log('ek', ek) // [7,9]

4.indexOf()  从该数组中查询出符合条件的返回索引,不符合的返回-1

     const f = ['张', '三', '李', '四']

      // const fk = f.indexOf('三') // 1

      const fk = f.indexOf('王') // -1

      console.log('fk', fk) 

5.some()  从该数组中查询出符合条件的返回布尔值,有一个符合条件的就返回true,都不符合条件的返回false,不会改变原数组

const g = [10,20,50,60,70,80]

const gk = g.some(item => item == 20)

console.log('gk',gk) // true

6.join()  将数组转换为字符串(默认以逗号为分隔符),不会改变原数组

      const l = [2,4,6,8,10]

      const lk = l.join()

      console.log('lk',lk); // 2,4,6,8,10

 7.concat() (连接两个或多个数组),返回拼接后的数组,不会改变原数组

      const r = [1,10,5,8,3]

      const r1 = [2,4,6]

      const r2 = [2,0,6]

      console.log(r.concat(r1,r2));     // [1, 10, 5, 8, 3, 2, 4, 6, 2, 0, 6]

      console.log('r',r);     //[1,10,5,8,3]

8.slice(参数1 , 参数2)(数组截取) 不会改变原数组

参数1:开始下标,可选。规定从何处开始选取。如果是负数,从数组尾部开始算起的位置(即-1 指最后一个元素,-2 指倒数第二个元素,以此类推)

参数2:结束下标,可选。规定从何处结束选取。

 注意:1.包含开始位置但是不包含结束位置;

2.只告诉开始位置 会从开始裁剪到字符串结束 

3.裁剪方向始终是从左往右;

4.参数可以是一个负数,slice(-start)

      const s = [1,10,5,8,3]

      const sk = s.slice(1,2)

      console.log('sk',sk);  // 10

      console.log('s',s);    // [1, 10, 5, 8, 3]

(二)会改变原数组

9.splice() (数组更新)

  splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目,会改变原数组

  arr.splice(index , howmany , item1,.....,itemX)

  index:必需,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

   howmany:必需。要删除的项目数量。如果设置为 0,则不会删除项目。

   item1, ..., itemX:可选。向数组添加的新项目。

   返回值:含有被删除的元素的数组,若没有删除元素则返回一个空数组。

      const arr = ["张三","李四","王五","小明","小红"];

      // 1.删除1个

      const arr1 = arr.splice(2,1);  

      console.log('arr1',arr1);  // ["王五"]

      console.log(arr);  // ["张三", "李四", "小明", "小红"]

      //2.删除多个

      var arr2 = arr.splice(1,2);

      console.log('arr2',arr2);  //  ["李四", "小明"]

      console.log(arr);  // ["张三", "小红"]  

      // 3.添加1个

      var arr3 = arr.splice(1,0,"小刚");

      console.log('arr3',arr3);  // [] (没有删除元素,所以返回的是空数组)

      console.log(arr);  // ["张三", "小刚", "小红"]

      // 4.添加多个

      var arr4 = arr.splice(3,0,"刘一","陈二","赵六");

      console.log('arr4',arr4);  // []

      console.log(arr);  // ["张三", "小刚", "小红", "刘一", "陈二", "赵六"]

      // 5.王五"替换"小刚

      var arr5 = arr.splice(1,1,"王五");

      console.log('arr5',arr5);  // ["小刚"]

      console.log(arr);  // ["张三", "王五", "小红", "刘一", "陈二", "赵六"]

      // 6.替换多个

      var arr6 = arr.splice(1,4,"李四");

      console.log('arr6',arr6);  // ["王五", "小红", "刘一", "陈二"]

      console.log(arr);  // ["张三", "李四", "赵六"]

10.push()和pop()(数组尾操作)

  push():向数组的末尾添加一个或多个元素,并返回新的长度,会改变原数组

  pop():用于删除并返回数组的最后一个元素,会改变原数组

      const m = [2,4,6,8,10]

      const mk = m.push(12,14)

      console.log('mk',mk);   // 7

      console.log('m',m);    // [2, 4, 6, 8, 10, 12, 14]

      const k = [2,4,6,8,10]

      const kk = k.pop()

      console.log('kk',kk);   // 10

      console.log('k',k);   // [2, 4, 6, 8]

11. unshift()和shift() (数组首操作)

    unshift():向数组的开头添加一个或更多元素,并返回新的长度,会改变原数组

    shift():把数组的第一个元素从其中删除,并返回第一个元素的值,会改变原数组

      const o = [2,4,6,8,10]

      const ok = o.unshift(12,14)

      console.log('ok',ok);    // 7

      console.log('o',o);    // [12, 14, 2, 4, 6, 8, 10]

      const n = [2,4,6,8,10]

      const nk = n.shift()

      console.log('nk',nk);   // 2

      console.log('n',n);    // [4, 6, 8, 10]

12.sort()(排序)对数组的元素进行排序,会改变原数组(按照字符编码的顺序进行排序,使用排序函数进行排序

      const p = [1,10,5,8,3]

      function sortNumber(a,b){return a - b}; // 升序

      console.log(p.sort(sortNumber));    // [1, 3, 5, 8, 10]

      console.log('p',p);    // [1, 3, 5, 8, 10]

      const p1 = [1,10,5,8,3]

      function sortNumber1(a,b){return b - a}; // 降序

      console.log(p1.sort(sortNumber1));    // [10, 8, 5, 3, 1]

      console.log('p1',p1);     // [10, 8, 5, 3, 1]

  13.reverse() (反转数组)用于颠倒数组中元素的顺序,会改变原数组     

      const q = [1,10,5,8,3]

      console.log(q.reverse());  // [3, 8, 5, 10, 1]

      console.log('q',q);      //[3, 8, 5, 10, 1]

三、其他

1.逻辑或|| 和 逻辑与&&

(1)逻辑或 ||

只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值;

只要“||”前面为true,不管“||”后面是true还是false,都返回“||”前面的值。

短路原理: 知道了前面第一个的结果就知道后的输出,如果第一个值为:true,则取第一个的值,如果第一个为false,则取第二个的值。

要点:false ,undefined,null,NaN, 0, ' ' 的值都为false,只要记住这6个 其他的都为true

      // alert(true || 1) //true

      // alert(2 || 1) // 2

      // alert(false || 1)  // 1

      // alert(undefined || 1) // 1

      // alert(null || 1) // 1

      // alert(NaN || 1) // 1

      // alert('' || 1) // 1

      // alert(0 || 1) // 1

(2)逻辑与 &&

只要“&&”前面是false,无论“&&”后面是true还是false,结果都将返“&&”前面的值;

只要“&&”前面是true,无论“&&”后面是true还是false,结果都将返“&&”后面的值;

      // console.log(true && 1) // 1

      // console.log(false && 1) // false

      // console.log(undefined && 1) // undifined

      // console.log(null && 1) // null

      // console.log('' && 1) // ''

      // console.log(NaN && 1) // NaN

猜你喜欢

转载自blog.csdn.net/m0_63304840/article/details/127910638