Javascript中数组方法以及数组方法的扩展--基础篇

最近一直在努力的恶补javascript中的各种知识,比如说闭包,作用域,继承,构造函数,变量,内置对象等概念。同时,也在学习着ES6的新知识。最近想给大家分享的就是数组实例方法的练习以及如何去扩展一个数组方法。

以下的分享会分为如下内容

1.数组实例方法的练习

  1.1:reduce()

  1.2:map()

  1.3:sort()

  1.4:slice()

  1.5:push()

  1.6:实例方法习题

2.数组方法的扩展

1.数组实例方法的练习

  首先,我们应该知道数组实例方法有哪些。

    console.log(Object.getOwnPropertyNames(Array));
    // ["isArray", "concat", "lastIndexOf", "indexOf", "forEach", "map", "filter", "every", "some", "reduce", "reduceRight", "join", "reverse", "sort", "push", "pop", "shift", "unshift", "splice", "slice", "from", "of", "prototype", "length", "name"]

  上面代码中,使用对象的原生方法getOwnPropertyNames方法来返回对象实例的所有方法。

  下面对一些实例方法做一些简单的介绍。

  1.1:reduce方法

  reduce方法和reduceRight方法都是依次处理数组的每个成员,最终累计为一个值。它们的差别是,reduce是从左到右处理(从第一个成员到最后一个成员),reduceRight则是从右到左(从最后一个成员到第一个成员),其他完全一样。

  这两个方法的第一个参数都是一个函数。该函数接受以下四个参数。

    累积变量,默认为数组的第一个成员

    当前变量,默认为数组的第二个成员

    当前位置(从0开始)

    原数组

  只有前两个才是必须传入的,reduce方法最常用的就是用于数组元素的相加,然后返回累加的值

1     var arr = [1,2,3,4,5];
2
3     function sum(first,last){
4         return first+last;
5     }
6
7     console.log(arr.reduce(sum))    //15

  1.2:map()

  map方法对数组的所有成员依次调用一个函数,根据函数结果返回一个新数组。要注意的是,map方法返回一个新数组,而原数组是没有发生变化的。

1     var arr = [1,2,3,4,5];
2
3     var newArr = arr.map(function(value, index) {
4         return value+1;
5     });
6
7     console.log(newArr);    // [2, 3, 4, 5, 6]
8     console.log(arr);    //  [1, 2, 3, 4, 5]

  上面代码中,arr数组的所有成员都加上1,组成一个新数组返回,原数组没有变化。

  map方法接受一个函数作为参数。该函数调用时,map方法会将其传入三个参数,分别是当前成员、当前位置和数组本身。

  1.3:sort()

  sort方法对数组成员进行排序,默认是按照ascii字母顺序排序。排序后,原数组将被改变

1     var arr1 = [5,6,7,2,6,8,1];
2     console.log(arr1.sort()); //[1, 2, 5, 6, 6, 7, 8]
3    console.log(arr1);    //[1, 2, 5, 6, 6, 7, 8]
4     var arr2 = [1,2,3,11,22,33];
5     console.log(arr2.sort());    //[1, 11, 2, 22, 3, 33]6     console.log(arr2);      //[1, 11, 2, 22, 3, 33]

  如果要让sort方法正常排序,可以传入一个函数。函数带有两个参数,表示进行比较的两个元素。

    var arr2 = [1,2,3,11,22,33];
    console.log(arr2.sort(function(a,b){
        return a - b;
    }));    // [1, 2, 3, 11, 22, 33]

  

  1.4:slice()

  slice方法用于提取原数组的一部分,返回一个新数组,原数组不变。它的第一个参数为起始位置(从0开始),第二个参数为终止位置(但该位置的元素本身不包括在内)。如果省略第二个参数,则一直返回到原数组的最后一个成员。

1     var arr = [1,2,3,4,5];
2
3     console.log(arr.slice(0));    // [1, 2, 3, 4, 5]
4     console.log(arr.slice(1,2));    //[2]
5     console.log(arr.slice(2,5));    //[3, 4, 5]
6     console.log(arr.slice(3));    //[4, 5]
7     console.log(arr);    //[1, 2, 3, 4, 5]

  如果slice为负数,则表示倒数计算的位置。

1     var arr = [1,2,3,4,5];
2
3     console.log(arr.slice(-3));//[3, 4, 5]
4     console.log(arr.slice(-3,-1));// [3, 4]
5     console.log(arr);    // [1, 2, 3, 4, 5]

  注意,传入负数时,index值是从-1开始计算的。而传入正数时,index值是从0开始计算的。

  1.5:push()

  push方法用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度。注意,该方法会改变原数组

    var arr = [1,2,3,4,5];

    arr.push(6);
    console.log(arr);    // [1, 2, 3, 4, 5, 6]
    arr.push([7,8]);
    console.log(arr);    // [1, 2, 3, 4, 5, 6, [7, 8]]
    arr.push(true);
    console.log(arr);    // [1, 2, 3, 4, 5, 6, [7, 8], true]

  1.6:实例方法习题

  ★数组中去掉最大值,去掉最小值,其余元素进行相加。

    function sumArray(array) {
        if (array === null || array.length < 2) {
            return 0;
        } else {
            array = array.sort(function(a, b) {
                return a - b;
            })
            var sum = 0;
            for (var i = 1; i < array.length - 1; i++) {
                sum += array[i];
            }
            return sum;
        }
    }

    console.log(sumArray([1,2,3,4,5,9]));    //14

  上面代码中,使用了sort方法对数组进行排序。然后巧妙地使用for循环,让变量初始化的值等于第二个元素,让循环的长度值等于数组的长度减一,这样就实现了去掉一个最小值和最大值,剩余值进行相加的方法。

  ★将字符串中的元素分隔,首字符大写,然后再按照index值加入相同小写字母。比较难描述,看例子,就很容易理解。

 1     function accum(s) {
 2         var arr = s.split(‘‘);
 3         return arr.map(function(value, index) {
 4             var upper = value.toUpperCase();
 5             for (var i = 1; i <= index; i++) {
 6                 upper += value.toLowerCase();
 7             }
 8             return upper;
 9         }).join(‘-‘)
10     }
11
12     console.log(accum(‘keith‘));    //‘K-Ee-Iii-Tttt-Hhhhh‘
13     console.log(accum(‘studyhard‘));    //‘S-Tt-Uuu-Dddd-Yyyyy-Hhhhhh-Aaaaaaa-Rrrrrrrr-Ddddddddd‘

  上面代码中,使用字符串对象的实例方法先将字符串分割,接着用map方法循环每一个字符。要注意的是map方法会返回一个新数组,不改变原数组,最后使用字符串对象实例方法join方法将字符串以‘-‘的形式分割。

  ★将平均数与个人成绩进行比较。如果大于平均数,则返回true;否则为false。

 1     function betterThanAverage(classPoints, yourPoints) {
 2         var len=classPoints.length;
 3         var sum=0;
 4         for (var i = 0; i < classPoints.length; i++) {
 5             sum+=classPoints[i];
 6         }
 7         if (yourPoints>(sum/len)) {
 8             return true;
 9         } else{
10             return false;
11         }
12     }
13
14     console.log(betterThanAverage([62,83,74,66,99,100],80));    //false

  上面代码中,先获取数组的长度,然后将数组进行相加,再除以长度值,最后进行比较。

  ★当数组中的数为正数时,计算正数的个数;当数组中的数为负数时,将所有负数相加。注意,对负数和正数的处理方式不同。

    function countPositivesSumNegatives(input) {
     if (input===null||input.length===0) {
            return [];
        } else{
            var count = 0;
            var sum = 0;
            for(var i = 0;i < input.length; i++){
                if (input[i]<0) {
                    sum+=input[i];
                } else if(input[i]!==0){
                    count+=1;
                }
            }
            return [count,sum];
        }
    }

    console.log(countPositivesSumNegatives([1, 2, 3, 4, 5, 6, 7, 8, 9, 131,10, -11, -12, -13, -14, -15]));    //[11, -65]

  上面代码中,对数组进行了简单的判断。使用for循环再对数组的正负值进行判断。

  ★创建一个函数,这个函数有2个参数,第一个参数为有x个值得数组,第二个参数为数组的长度。功能就是将最后x个值进行相加然后传入数组末尾。有两种解决方法,第二种方法采用了es6的方法箭头函数。同样,看实例比较容易理解题目的意思。

    function Sum(first,last){
        return first+last;
    }

    function Xbonacci(signature,n){
        var indexArr = signature.length;
        for (var i = 0; i < n - indexArr; i++) {
            var sum = signature.slice(-indexArr).reduce(Sum);
            signature.push(sum);
        }
        return signature.slice(0,n);
    }

    console.log(Xbonacci([0,0,0,0,1],10));    //[0, 0, 0, 0, 1, 1, 2, 4, 8, 16]
    console.log(Xbonacci([1,1],10));    // [1, 1, 2, 3, 5, 8, 13, 21, 34, 55]
    console.log(Xbonacci([1,0,0,0,0,0,1],10));    // [1, 0, 0, 0, 0, 0, 1, 2, 3, 6]
    console.log(Xbonacci([0, 19, 16, 3, 6, 14, 17, 14, 15, 20, 8, 19, 7, 8, 12, 14, 11, 11, 18],4)); // [0, 19, 16, 3]
    const Xbonacci = (sig, n) => {
      let len = sig.length;
      for (let i = len; i < n; i++)
        sig[i] = sig.slice(i - len).reduce((a, b) => a + b);
      return sig.slice(0, n);
    }

  上面代码中,将[0,0,0,0,1]相加得2,然后将2push到数组中;将[0,0,0,1,2]相加4,然后将4push到数组中,以此类推。最后返回处理后的数组。

  个人认为,熟悉数组实例方法最好的办法就是去尝试做这些题目,每一次做的题目对数组的方法都会有一个新的理解,每一次理解都会让你意识到哪一个方法需要在哪一种场景使用,而哪一个方法在某个场景使用是不合适的。光看不练对知识的掌握程度总是稍显不足。

2.数组方法的扩展

  数组的实例方法中,没有给我们提供数组求和,求平方,求立方,求平均数,求偶数元素,求奇数元素的方法。所以我们需要去扩展数组的方法以方便实际工作中的开发。

    Array.prototype.square  = function () { return this.map(function(n) { return n*n; }); }
    Array.prototype.cube    = function () { return this.map(function(n) { return n*n*n; }); }
    Array.prototype.average = function () { return this.sum() / this.length; }
    Array.prototype.sum     = function () { return this.reduce(function(a, b) { return a + b; }, 0); }
    Array.prototype.even    = function () { return this.filter(function(item) { return 0 === item % 2; }); }
    Array.prototype.odd     = function () { return this.filter(function(item) { return 0 !== item % 2; }); }

    var arr = [1,2,3,4,5,6];

    console.log(arr.square());    // [1, 4, 9, 16, 25, 36]
    console.log(arr.cube());    // [1, 8, 27, 64, 125, 216]
    console.log(arr.average());    // 3.5
    console.log(arr.sum());        // 21
    console.log(arr.even());    // [2, 4, 6]
    console.log(arr.odd());        // [1, 3, 5]

  上面代码中,为构造函数Array的原型对象添加square,cube等方法的目的是让所有实例都可以共享这些方法。而prototype属性的作用也就是让所有实例对象可以共享属性和方法。  

  如果想理解数组方法的扩展,需要知道的知识有:

  1.原型对象和构造函数的关系。

  2.this关键字的指向性问题。

  如果想要详细了解,可以前往这这些文章。Javascript中prototype属性的详解javascript之 this 关键字详解Javascript 中构造函数与new命令的密切关系深入理解Javascript中构造函数和原型对象的区别 等。

  

完。

感谢大家的阅读。

时间: 2024-08-06 20:08:26

Javascript中数组方法以及数组方法的扩展--基础篇的相关文章

Javascript中call方法和apply方法用法和区别

第一次在博客园上面写博客,知识因为看书的时候发现了一些有意思的知识,顺便查了一下资料,就发到博客上来了,希望对大家有点帮助. 连续几天阅读<javascript高级程序设计>这本书了,逐渐发现了以前很多自己完全没有用过甚至见过的神奇知识点.今天在阅读到有关函数的属性和方法的时候,略感高级,于是乎,查阅了不少他人的博客,在此总结一下这两个方法的以下几个方面: 1.call()和apply()的作用和用法 2.什么时候用apply(),什么时候用call() 书上提到,每个函数都包含两个非继承而来

javascript中的call()和apply()方法的使用

1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象. 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj. apply方法: 语法:apply([thisObj[,argArray]])

JavaScript中的常用的数组操作方法

JavaScript中的常用的数组操作方法 一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2,3]; var arr2 = [4,5]; var arr3 = arr1.concat(arr2); console.log(arr1); //[1, 2, 3] console.log(arr3); //[1, 2, 3, 4, 5] 二.join() join() 方法用于把数组中的所有元素

在JavaScript中重写jQuery对象的方法

jQuery是一个很好的类库,它给我们解决了很多的客户端编程,任何东西都不是万能的,当它不能满足我们的需求时我们需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:我现在的web应用程序大多数时候的数据交互都是通过Ajax来完成的,这样就可以将一些隐藏字段的数据保存在HTML标签的属性中,使HTML标签的代码量减少,如:ID,Timestamp等等,这些不需要用户输入但又不得不提交的字段,通过表单提交的做法是 <input name="ID" value="

JavaScript中Number常用属性和方法

title: JavaScript中Number常用属性和方法 toc: false date: 2018-10-13 12:31:42 Number.MAX_VALUE--1.7976931348623157e+308,可表示的最大数 Number.MIN_VALUE--5e-324,可表示的最小数 toExponential(x)--把对象的值转换为指数计数法 toFixed(x)--把数字转换为字符串,x为小数点后位数 toPrecision(x)--把数字格式化为指定的长度 toStri

JavaScript中创建自定义对象的方法

本文内容参考JavaScript高级程序设计(第3版)第6章:面向对象的程序设计 ECMA-262中把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”我所理解的就是对象就是一个结构体,结构体中有一些它的基本属性以及对结构体处理的方法,把它们封装起来称为一个整体.JS中所有的对象都是基于一个引用类型创建,这个引用类型可以是原生类型,如Array,Date等,也可以是开发人员自定义的类型. 下面主要总结下JS中创建对象的几种模式,分析他们各自的优缺点. 1. 工厂模式 /****

JavaScript中valueOf函数与toString方法的使用

所有JS数据类型都拥有valueOf和toString这两个方法,null除外. JavaScript中valueOf函数方法是返回指定对象的原始值. 使用方法: object.valueOf( ). object是必选参数,是任意固有 JavaScrip对象. JavaScript 的 valueOf() 方法 valueOf() 方法可返回 Boolean 对象的原始值. 用法booleanObject.valueOf(),返回值为booleanObject 的原始布尔值.如果调用该方法的对

JavaScript中valueOf函数与toString方法

基本上,所有JS数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下 JavaScript中valueOf函数方法是返回指定对象的原始值.使用方法: object.valueOf( )object是必选项参数是任意固有 JScript 对象. 每个JavaScript固有对象的 valueOf 方法定义不同. 对象 返回值 Array 数组的元素被转换为字符串,这些字符串由逗号分隔,连接在

深刻领悟javascript中的exec与match方法之异同

阅读本文之前,请先看下面一道题: 题目17:Read the following javascript code: var someText="web2.0 .net2.0"; var pattern=/(\w+)(\d)\.(\d)/g; var outCome_exec=pattern.exec(someText); var outCome_matc=someText.match(pattern); What is outCome_exec[1] and outCome_matc[