<sup id="sjju3"><noscript id="sjju3"></noscript></sup>
    <big id="sjju3"></big>

  • <blockquote id="sjju3"></blockquote>
    <blockquote id="sjju3"></blockquote>

      <td id="sjju3"></td>

      <big id="sjju3"></big>
        <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
      1. JavaScript面试技巧之数组的一些不low操作

         更新时间:2019年03月22日 11:41:47   作者:大漠火狼   我要评论

        这篇文章主要给大家介绍了关于JavaScript面试技巧之数组的一些不low操作的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

        前言

        本文主要从应用来讲数组api的一些骚操作;

        如一行代码扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等;

        上面这些应用场景你可以用一行代码实现?

        1.扁平化n维数组

        1.终极篇

        [1,[2,3]].flat(2) //[1,2,3]
        [1,[2,3,[4,5]].flat(3) //[1,2,3,4,5]
        [1,[2,3,[4,5]]].toString() //'1,2,3,4,5'
        [1[2,3,[4,5[...]].flat(Infinity) //[1,2,3,4...n] 

        Array.flat(n)是ES10扁平数组的api,n表示维度,n值为Infinity时维度为无限大

        2.开始篇

        function flatten(arr) {
         while(arr.some(item=>Array.isArray(item))) {
         arr = [].concat(...arr);
         }
         return arr;
        }
        flatten([1,[2,3]]) //[1,2,3]
        flatten([1,[2,3,[4,5]]) //[1,2,3,4,5]

        实质是利用递归和数组合并方法concat实现扁平

        2.去重

        1.终极篇

        Array.from(new Set([1,2,3,3,4,4])) //[1,2,3,4]
        [...new Set([1,2,3,3,4,4])] //[1,2,3,4]

        set是ES6新出来的一种一种定义不重复数组的数据类型

        Array.from是将类数组转化为数组

        ...是扩展运算符,将set里面的值转化为字符串

        2.开始篇

        Array.prototype.distinct = function(){
         var arr = this,
         result = [],
         i,
         j,
         len = arr.length;
         for(i = 0; i < len; i++){
         for(j = i + 1; j < len; j++){
         if(arr[i] === arr[j]){
         j = ++i;
         }
         }
         result.push(arr[i]);
         }
         return result;
        }
        [1,2,3,3,4,4].distinct(); //[1,2,3,4]

        取新数组存值,循环两个数组值相比较

        3.排序

        1.终极篇

        [1,2,3,4].sort((a, b) => a - b); // [1, 2,3,4],默认?#24039;?#24207;
        [1,2,3,4].sort((a, b) => b - a); // [4,3,2,1] 降序

        sort是js内置的排序方法,参数为一个函数

        2.开始篇

        冒泡排序:

        Array.prototype.bubleSort=function () {
         let arr=this,
         len = arr.length;
         for (let outer = len; outer >= 2; outer--) {
         for (let inner = 0; inner <= outer - 1; inner++) {
         if (arr[inner] > arr[inner + 1]) {
          //升序
          [arr[inner], arr[inner + 1]] = [arr[inner + 1], arr[inner]];
          console.log([arr[inner], arr[inner + 1]]);
         }
         }
         }
         return arr;
         }
        [1,2,3,4].bubleSort() //[1,2,3,4] 

        选择排序

         Array.prototype.selectSort=function () {
         let arr=this,
          len = arr.length;
         for (let i = 0, len = arr.length; i < len; i++) {
         for (let j = i, len = arr.length; j < len; j++) {
         if (arr[i] > arr[j]) {
         [arr[i], arr[j]] = [arr[j], arr[i]];
         }
         }
         }
         return arr;
         }
         [1,2,3,4].selectSort() //[1,2,3,4] 

        4.最大值

        1.终极篇

        Math.max(...[1,2,3,4]) //4
        Math.max.apply(this,[1,2,3,4]) //4
        [1,2,3,4].reduce( (prev, cur,curIndex,arr)=> {
         return Math.max(prev,cur);
        },0) //4

        Math.max()是Math对象内置的方法,参数是字符串;

        reduce是ES5的数组api,参数有函数和默认初始值;

        函数有四个参数,pre(上一次的返回值),cur(当前值),curIndex(当前值索引),arr(当前数组)

        2.开始篇

        先排序再取值

        5.求和

        1.终极篇

        [1,2,3,4].arr.reduce(function (prev, cur) {
         return prev + cur;
         },0) //10 

        2.开始篇

        function sum(arr) {
         var len = arr.length;
         if(len == 0){
         return 0;
         } else if (len == 1){
         return arr[0];
         } else {
         return arr[0] + sum(arr.slice(1));
         }
        }
        sum([1,2,3,4]) //10

        利用slice截取改变数组,再利用递归求和

        6.合并

        1.终极篇

        [1,2,3,4].concat([5,6]) //[1,2,3,4,5,6]
        [...[1,2,3,4],...[4,5]] //[1,2,3,4,5,6]
        [1,2,3,4].push.apply([1,2,3,4],[5,6]) //[1,2,3,4,5,6]

        2.开始篇

        let arr=[1,2,3,4];
        [5,6].map(item=>{
         arr.push(item)
        }) //arr值为[1,2,3,4,5,6],注意不能直接return出来,return后只会返回[5,6]

        7.判断是否包含值

        1.终极篇

        [1,2,3].includes(4) //false
        [1,2,3].indexOf(4) //-1 如果存在换回索引
        [1, 2, 3].find((item)=>item===3)) //3 如果数组中无值返回undefined
        [1, 2, 3].findIndex((item)=>item===3)) //2 如果数组中无值返回-1

        includes(),find(),findIndex()是ES6的api

        2.开始篇

        [1,2,3].some(item=>{
         return item===3
        }) //true 如果不包含返回false

        8.类数组转化

        1.终极篇

        Array.prototype.slice.call(arguments) //arguments是类数组(伪数组)
        Array.prototype.slice.apply(arguments)
        Array.from(arguments)
        [...arguments]

        类数组:表示有length属性,但是不具备数组的方法

        call,apply:是改变slice里面的this指向arguments,所以arguments也可调用数组的方法

        Array.from是将类似数组或可迭代对象创建为数组

        ...是将类数组扩展为字符串,再定义为数组

        2.开始篇

        Array.prototype.slice = function(start,end){ 
         var result = new Array(); 
         start = start || 0; 
         end = end || this.length; //this指向调用的对象,当用了call后,能够改变this的指向,也就是指向传进来的对象,这是关键 
         for(var i = start; i < end; i++){ 
          result.push(this[i]); 
         } 
         return result; 
         } 

        9.每一项设置值

        1.终极篇

        [1,2,3].fill(false) //[false,false,false] 

        fill是ES6的方法
        2.开始篇

        [1,2,3].map(() => 0)

        10.每一项是否满足

        [1,2,3].every(item=>{return item>2}) //false

        every是ES5的api,每一项满足返回 true

        11.有一项满足

        [1,2,3].some(item=>{return item>2}) //true

        some是ES5的api,有一项满足返回 true

        12.过滤数组

        [1,2,3].filter(item=>{return item>2}) //[3]

        filter是ES5的api,返回满足添加的项的数组

        13.对象和数组转化

        Object.keys({name:'张三',age:14}) //['name','age']
        Object.values({name:'张三',age:14}) //['张三',14]
        Object.entries({name:'张三',age:14}) //[[name,'张三'],[age,14]]
        Object.fromEntries([name,'张三'],[age,14]) //ES10的api,Chrome不支持 , firebox输出{name:'张三',age:14}

        总结

        以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

        相关文章

        最新评论

        2018白小姐一肖中特马
        <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
        <big id="sjju3"></big>

      2. <blockquote id="sjju3"></blockquote>
        <blockquote id="sjju3"></blockquote>

          <td id="sjju3"></td>

          <big id="sjju3"></big>
            <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>
          1. <sup id="sjju3"><noscript id="sjju3"></noscript></sup>
            <big id="sjju3"></big>

          2. <blockquote id="sjju3"></blockquote>
            <blockquote id="sjju3"></blockquote>

              <td id="sjju3"></td>

              <big id="sjju3"></big>
                <code id="sjju3"><strong id="sjju3"><dl id="sjju3"></dl></strong></code>