es6常见问题

本文详细介绍了JavaScript中数组增删改查的各种方法,包括push、unshift、splice、concat、shift、pop、slice、indexOf、includes等,并通过实例演示了它们的用法和区别。此外,还探讨了如何使用这些方法进行数组去重和查找操作,以及常见的数组遍历方法如forEach、map、filter、every等的区别。文章最后提到了拓展运算符的使用场景和去重方法,以及冒泡排序和快速排序的基本原理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Js数组增删改查的方法以及他们的区别,
   增:
      push()方法:在数组最后一个添加参数,并隐含返回数组长度;
         let arrs= []; // 创建一个数组
         let count = arrs.push("a", "b"); 
         console.log(arrs) // ['a','b']
         console.log(count ) // 2
      用法: arr.push(‘小李’);//其中加’,'可插入多条数据

      unshift()方法: 在数组最前面添加参数,并隐含返回数组长度
         let arrs= ['c']; // 创建一个数组
         let count = arrs.unshift("a", "b"); 
         console.log(arrs) // ['a','b','c']
         console.log(count ) // 2
      用法:arr.unshift(‘小李’); //其中加’,'可插入多条数据

      splice()替换/添加/删除 一段元素
      必填。整数,指定在什么位置添加/删除元素,使用负值指定从数组末尾开始的位置。
      选填。要删除的元素数。如果设置为 0,则不会删除任何项目。
      选填。要添加到数组中的新元素。
      let arrs= ['a','b','c']; // 创建一个数组
      let count = arrs.splice(1,0,"d", "e"); // 从索引为1开始,删除0个元素,添加 'd','e'
      console.log(arrs) // ['a','d','e','b','c']
      console.log(count ) // []  新数组,包含删除的元素(如果有)。

      concat()在被拼接的数组的末尾拼接任意数量的元素或数组
      let arrs= ['a','b','c']; // 创建一个数组
      let arrs2= ['d','e','f']; // 创建一个数组
      let newArr=arrs.concat('d',arrs2,['g','h'])  //拼接会按照先后顺序
      console.log(newArr) // ['a', 'b', 'c', 'd', 'd', 'e', 'f', 'g', 'h']


   删:
      1.shift();方法:删除数组最前面的一条数据,并将删除的东西返回给我
         let arrs= ['a','b','c']; // 创建一个数组
         let count = arrs.shift(); 
         console.log(arrs) // ['b','c']
         console.log(count ) // a

      2.pop();方法: 删除数组最后面的一条数据,并将删除的东西返回给我
         let arrs= ['a','b','c']; // 创建一个数组
         let count = arrs.pop(); 
         console.log(arrs) // ['a','b']
         console.log(count ) // c
      3. splice()方法: 替换/添加/删除 用法: splice (‘想删除的索引元素’,’删除的元素数量‘)
         let arrs= ['a','b','c']; // 创建一个数组
         let count = arrs.splice(0,1); //从索引0开始 ,删除一个 
         console.log(arrs) // ['b','c']
         console.log(count ) // a
      4.slice()截取数组某一截 ,返回新的数组
         两个参数 :
         可选。整数,指定从哪里开始选择(第一个元素的索引为 0)。
         可选。整数,指定结束选择的位置。
         let arrs= ['a','b','c']; // 创建一个数组
         let count = arrs.slice(0,1); 
         let count2 = arrs.slice();  // 默认0开始,末尾结束
         console.log(arrs) // ['a','b','c']
         console.log(count ) // ['a']
         console.log(count2 ) // ['a','b','c']

   改:
      splice()方法: 一次替换多个值 用法:arr.splice(|想更改的下角标|,|想替换的几个元素 如两个|
         slice()
         截取数组某一截 ,返回新的数组
         两个参数 :
         可选。整数,指定从哪里开始选择(第一个元素的索引为 0)。
         可选。整数,指定结束选择的位置。
         let arrs= ['a','b','c']; // 创建一个数组
         let count = arrs.slice(0,1); 
         let count2 = arrs.slice();  // 默认0开始,末尾结束
         console.log(arrs) // ['a','b','c']
         console.log(count ) // ['a']
         console.log(count2 ) // ['a','b','c']
         ,‘替换内容1’,‘替换的内容2’)

   查:
      indexOf()返回元素在数组中的的索引值,没有则返回-1 所以可以根据返回的索引是否为-1 就可判断该数组是否包含该元素
         let numbers = ['a', 'b', 'c', 'd', 'e', 'f'];
         let i = numbers.indexOf('d')
         console.log(i); // 3

      includes()返回元素是否存在该元素的布尔值,存在为true,否则false
         let numbers = ['a', 'b', 'c', 'd', 'e', 'f'];
         let i = numbers.includes('d')
         console.log(i); // true

      find()
         通过遍历,返回第一个符合条件的元素,剩下的不会检测直接跳过
         参数:

         回调函数 回调函数有三个参数:
         1.当前的元素       2.当前元素的索引【选填】    3.当前元素的所属数组对象【选填】
         1
         const nums = [1, 2, 3, 4, 5, 6];
         const num = nums.find((item, index, arr) => {
            return item >= 5 // 返回 大于等于 5 的数
         });
         console.log(num);  // 5

-哪个方法既可以进行添加也可以进行删除和修改,
   splice()方法: 替换/添加/删除
-自己封装一个方法实现此方法,
   1.输入一个值,返回其数据类型
      function type(para) {
         return Object.prototype.toString.call(para)
      }

   2.数组去重
         function unique1(arr) {
            return [...new Set(arr)]
         }

         function unique2(arr) {
            var obj = {};
            return arr.filter(ele => {
               if (!obj[ele]) {
                     obj[ele] = true;
                     return true;
               }
            })
         }

         function unique3(arr) {
            var result = [];
            arr.forEach(ele => {
               if (result.indexOf(ele) == -1) {
                     result.push(ele)
               }
            })
            return result;
         }
   3.字符串去重
         String.prototype.unique = function () {
            var obj = {},
               str = '',
               len = this.length;
            for (var i = 0; i < len; i++) {
               if (!obj[this[i]]) {
                     str += this[i];
                     obj[this[i]] = true;
               }
            }
            return str;
         }

         ###### //去除连续的字符串 
         function uniq(str) {
            return str.replace(/(\w)\1+/g, '$1')
         }

-总结数组遍历的方法,并说出它们的区别,
   foreach遍历数组中的每一项,没有返回值,对原数组没有影响,不支持IE
         //1 没有返回值
      arr.forEach((item,index,array)=>{
         //执行代码
      })
   //参数:value数组中的当前项, index当前项的索引, array原始数组;
   //数组中有几项,那么传递进去的匿名回调函数就需要执行几次
   
   map有返回值 map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了);
      arr.map(function(value,index,array){
     //do something
     return XXX
      })
      var ary = [12,23,24,42,1]; 
      var res = ary.map(function (item,index,ary ) { 
         return item*10; 
      }) 
      console.log(res);//-->[120,230,240,420,10];  原数组拷贝了一份,并进行了修改
      console.log(ary);//-->[12,23,24,42,1];  原数组并未发生变化
   
   filter不会改变原始数组,返回新数组
      var arr = [
      { id: 1, text: 'aa', done: true },
      { id: 2, text: 'bb', done: false }
      ]
      console.log(arr.filter(item => item.done))
   
   every()是对数组中的每一项运行给定函数,如果该函数对每一项返回true,则返回true。返回布尔值
      var arr = [ 1, 2, 3, 4, 5, 6 ]; 
      console.log( arr.every( function( item, index, array ){ 
         return item > 3; 
      })); 

   find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined
            var stu = [
         {
            name: '张三',
            gender: '男',
            age: 20
         },
         {
            name: '王小毛',
            gender: '男',
            age: 20
         },
         {
            name: '李四',
            gender: '男',
            age: 20
         }
      ]
      function getStu(element){
         return element.name == '李四'
      }

   stu.find(getStu)
   //返回结果为
   //{name: "李四", gender: "男", age: 20}

   findIndex返回索引值,如果没有符合条件的元素则返回-1
      findIndex 不会改变数组对象。
      [1,2,3].findIndex(function(x) { x == 2; });
      // Returns an index value of 1.
      [1,2,3].findIndex(x => x == 4);
      // Returns an index value of -1.

   keys,values,entries
      ES6 提供三个新的方法 —— entries(),keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象,可以用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"
-什么样的数据可以使用拓展运算符转换成数组,
   遍历器接口的对象,都可以用扩展运算符转为真正的数组。
      以遍历到DOM节点为例:
      let nodeList = document.querySelectorAll('div');
      let array = [...nodeList];
      1
      2
      但是对于没有部署遍历器Iterator的对象,扩展运算符则束手无策:
      let arrayLike = {
         '0': 'a',
         '1': 'b',
         '2': 'c',
         length: 3
      };
      let arr = [...arrayLike];
      console.log(arr);//TypeError: arrayLike is not iterable
-拓展运算符的遍历原理是什么
   是否是数组,数组直接浅拷贝属性
   是否实现Iterator接口,检测方式包括是否有实现Symbol.iterator、@@Iterator、是否是其他可迭代对象等(叫可迭代也不合适好像)、或者对象本身是否是Arguments
   都不满足的话抛出类型错误。
-其他可以将数据转换成数组的方法有哪些?
   Array.from()方法  使用场景: 该方法只可以将类似数组的对象和可遍历的对象转换成数组.
      //  这里的对象得有伪索引,数组长度
      let arr = {
      0: 'a',
      1: 'b',
      length: 2
      }
      a = Array.from(arr)
      console.log(a) // [ 'a', 'b' ]
   扩展运算符...  使用场景:1)Dom操作返回的NodeList. 2) 函数的arguements对象.
      1)Dom操作返回的NodeList
      //  获取所有的P标签
      let a = document.querySelectorAll('p');
      //  将p标签转换成数组,并过滤到p中文字长度小于等于100的标签
      a = Array.from(a).filter(n => n.textContent.length > 100) // (4) [p, p, p, p]

      2)函数的arguements对象.
      //  
      function foo() {
      return [...arguments]
      }
      console.log(foo(1, 2, 3, 4, 5, 6)) //[ 1, 2, 3, 4, 5, 6 ]

      split("")方法 使用场景:将字符串转换成数组
      let arr = Array.from('hello')
      console.log(arr) // [ 'h', 'e', 'l', 'l', 'o' ]

      Array.of()  使用场景:将一组值转换成数组
      //  只有一个参数时也会返回新的数组,Array()不会.
      let arr = Array.of(1)
      console.log(arr);

      //  返回新的数组
      let arr = Array.of(1, 2, 3, 4, 5)
      console.log(arr);// [ 1, 2, 3, 4, 5 ]

-如何实现数组的去重操作(将知道的方法都写出来,可以使用数组的方法实现),
   1.双循环去重
      双重for(或while)循环是比较笨拙的方法,它实现的原理很简单:先定义一个包含原始数组第一个元素的数组,然后遍历原始数组,将原始数组中的每个元素与新数组中的每个元素进行比对,如果不重复则添加到新数组中,最后返回新数组;因为它的时间复杂度是O(n^2),如果数组长度很大,那么将会非常耗费内存
            function unique(arr) {
         if (!Array.isArray(arr)) {
            console.log('type error!')
            return
         }
         let res = [arr[0]]
         for (let i = 1; i < arr.length; i++) {
            let flag = true
            for (let j = 0; j < res.length; j++) {
                  if (arr[i] === res[j]) {
                     flag = false;
                     break
                  }
            }
            if (flag) {
                  res.push(arr[i])
            }
         }
         return res
      }
   2.indexOf方法去重1
      数组的indexOf()方法可返回某个指定的元素在数组中首次出现的位置。该方法首先定义一个空数组res,然后调用indexOf方法对原来的数组进行遍历判断,如果元素不在res中,则将其push进res中,最后将res返回即可获得去重的数组
               function unique(arr) {
            if (!Array.isArray(arr)) {
               console.log('type error!')
               return
            }
            let res = []
            for (let i = 0; i < arr.length; i++) {
               if (res.indexOf(arr[i]) === -1) {
                     res.push(arr[i])
               }
            }
            return res
         }
   3.indexOf方法去重2利用indexOf检测元素在数组中第一次出现的位置是否和元素现在的位置相等,如果不等则说明该元素是重复元素
               function unique(arr) {
            if (!Array.isArray(arr)) {
               console.log('type error!')
               return
            }
            return Array.prototype.filter.call(arr, function(item, index){
               return arr.indexOf(item) === index;
            });
         }
   4.相邻元素去重 这种方法首先调用了数组的排序方法sort(),然后根据排序后的结果进行遍历及相邻元素比对,如果相等则跳过改元素,直到遍历结束
               function unique(arr) {
            if (!Array.isArray(arr)) {
               console.log('type error!')
               return
            }
            arr = arr.sort()
            let res = []
            for (let i = 0; i < arr.length; i++) {
               if (arr[i] !== arr[i-1]) {
                     res.push(arr[i])
               }
            }
            return res
         }
   5.利用对象属性去重  创建空对象,遍历数组,将数组中的值设为对象的属性,并给该属性赋初始值1,每出现一次,对应的属性值增加1,这样,属性值对应的就是该元素出现的次数了
                  function unique(arr) {
            if (!Array.isArray(arr)) {
               console.log('type error!')
               return
            }
            let res = [],
               obj = {}
            for (let i = 0; i < arr.length; i++) {
               if (!obj[arr[i]]) {
                     res.push(arr[i])
                     obj[arr[i]] = 1
               } else {
                     obj[arr[i]]++
               }
            }
            return res
         }
   6.set与解构赋值去重
      ES6中新增了数据类型set,set的一个最大的特点就是数据不重复。Set函数可以接受一个数组(或类数组对象)作为参数来初始化,利用该特性也能做到给数组去重

               function unique(arr) {
            if (!Array.isArray(arr)) {
               console.log('type error!')
               return
            }
            return [...new Set(arr)]
         }
   
   7.Array.from与set去重
      Array.from方法可以将Set结构转换为数组结果,而我们知道set结果是不重复的数据集,因此能够达到去重的目的

         function unique(arr) {
            if (!Array.isArray(arr)) {
               console.log('type error!')
               return
            }
            return Array.from(new Set(arr))
         }

-说说数组冒泡排序和快速排序的原理。
冒泡排序:数组中前一位元素和后一位元素依次比较,如果前一位元素大于(或小于)后一位元素,就交换两元素的位置,这样就能保证最后在每一轮比较过后,后面的元素值是最大的。
快速排序:从0索引开始,依次和后面元素比较,小的往前放,第一次完毕,最小值出现在了最小索引处。
 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值