javascript Array 方法学习

原生对象Array学习

Array.from()   从类似数组的对象或可迭代的对象返回一个数组

参数列表

arraylike  类似数组的对象或者可以迭代的对象

mapfn(可选)   对对象遍历映射的函数

this(可选)  选择映射函数的this对象

     var charArr = Array.from("abc");
        console.log(charArr[0]); //a

        var str = "abc";
        console.log(str[0]);   //a

        var a = Array.from(document.querySelectorAll("div"));
        console.log(a[0]); //  <div>1</div>

        var test = new Set("a","b","c");
        var testget = Array.from(test);
        console.log(testget[0]); //a

        var testfun = Array.from([1,2,3],x => x*10);
        console.log(testfun[0]);  //10

Array.isArray 参数  判断一个对象是否为数组

    var test = [];
        console.log(Array.isArray(test));  //true   最可靠
        console.log(typeof test); //object
        console.log(test instanceof Array);  //true 

Array.of()   参数  element0 ... elementn   置于数组中的参数  区分 new Array()

    var test = Array.of("str","sss");
        console.log(test[0]); //str

        var num = Array.of(2);
        console.log(num[0]);//2
        console.log(num.length);  //长度为1

        var num2 = new Array(3);
        console.log(num2[0]);  //undefined
        console.log(num2.length);  //3

数组对象的方法  concat()  组合两个或者两个以上的数组

当数组中存在引用对象的时候要注意

var obj = {
            a:1
        };

        var num = [1,obj,2];

        console.log(num[1]); //Object{a:1}

        obj.a = 100;
        console.log(obj);  //Object{a:100}
        console.log(num[1]); // Object{a:100}   //引用类型理解 指向的修改

array.entries()   返回数组的键值对

    var num = [1,2,3];
        var map = num.entries();

        console.log(map)  //ArrayIterator对象
        console.log(map.next().value);// [0,1]

array.every(function(value,index,array){},thisArg)  会对数组的每个元素调用函数 直到返回false或者到数组的末尾  确认数组中的所有成员是否都满足测试  数组为空返回true;  遇到一个返回false立即停止检测 返回false

function(value,index,array)  array 代表之前的数组参数  这样我们就可以在回调函数中修改数组对象

var obj = {min:10,max:20};

        var num = [10,12,15];

        var checkNumRange = function(value) {
            if(typeof value !== ‘number‘) {
                return false;
            } else {
                return value >= this.min && value <= this.max;
            }

        };

        if(num.every(checkNumRange,obj)) {
            console.log(‘in range‘);
        } else {
            console.log(‘out of range‘);
        }  //in range    关于thisArg

array.fill(value,start,end) start 用于填充数组值的起始索引 默认值为0   end 用于数组值的结束索引  默认值为this对象的length属性   如果start为负值  start取值 start+length  如果end为负值  end取值为end+length

var a = [1,2,3];

        a.fill(7);

        for(var i of a) {
            console.log(i);
        }    7 7 7//fill方法会重写之前的值

array.filter(function(value,index,arr){},thisArg)  filter方法会为每一个array数组的的值调用回调函数  返回一个包含回调函数为其返回true的所用值得新数组    thisArg可选  如果不传为undefined  传值的时候可在回调函数中通过this关键字调用

var num = [1,2,5,8,10];

        function check(value) {
            if(value%2 === 0) {
                return true;
            } else {
                return false;
            }
        }

        var nums = num.filter(check);

        console.log(nums);    2 8 10 

array.findIndex(function(value,index,arr),thisArg)  会对数组中的每一个值调用回调函数  直到有元素返回true  有元素返回true的时候 就会立即返回它的索引值 没有的时候返回-1

  var num = [1,2,4];

     var i = num.findIndex(function(value){if(value == 2) return true;});
     console.log(i);

array.forEach(function(value,index,array),thisArg)     为数组中的每个元素执行指定的操作

var num = [1,2,4];

     function test(value,index,arr) {
        arr[index] = arr[index] + 2;
     }

     num.forEach(test);
     console.log(num);

但是forEach不支持break   不如上面的例子中我们想要arr[index]的值为2的时候就break或者continue的时候 会报错 (for of  语句)

array.indexOf(searchElement,fromIndex)  返回某个值在数组中第一个匹配项的索引值   fromIndex 可选  默认为0     未找到返回 -1     如果fromIndex的等于或者数组的长度  返回-1  fromIndex的值为负值  起始位置从数组的长度加上fromIndex处开始  并且 indexOf()中执行的比较是 ===

var num = [1,20,8,6];

     var a = num.indexOf(20);
     console.log(a);  //1

     var b = num.indexOf(20,2);
     console.log(b);  //-1

     var c = num.indexOf(20,-3);
     console.log(c); // 1

array.join([separator])  用指定的separator分割数组中的所有元素  返回字符串   当不传值的时候   使用逗号进行分割

var num = [2,6,10];
     var test = num.join();
     console.log(test);   //2,6,10
     console.log(typeof  test); //string

     var test2 = num.join("-");
     console.log(test2);//2-6-10

array.lastIndexOf(searchElement,fromIndex)   对比indexOf()      lastIndexOf()  是降序查找  从数组的后尾开始  如果没有fromIndex 则查找整个数组    如果fromIndex为负数 则为数组的长度+ fromIndex 处开始查询  返回第一个查找到的位置  没有返回-1

var num = [1,10,5,7,19];
    var a = num.lastIndexOf(7);
    console.log(a); //3
    var b = num.lastIndexOf(7,2);
    console.log(b);  //-1

array.map(function(value,index,arr),thisArg)     返回一个数组 其中每一个元素都是关联原始数组执行回调函数的返回值

var obj = {
        num:2,
        count:function(value) {
          return value+this.num;
        }
      }
    //定义一个对象  它上面的方法根据传入的值 返回一个加他自身的一个变量的值

      var nums = [1,2,3];

      var getNum1 = nums.map(obj.count,obj);
      console.log(getNum1);  //  可以理解为每次map都将nums的值传递给力obj的count()方法
   // 3 4 5
      var getNum2 = nums.map(function(value){ return this.count(value)},obj);  //this的值代表后面传入的obj
      console.log(getNum2);  //  3 4 5

array.pop() 用于在数组中移除最后一个元素并返回该元素   数组为空 返回 undefined

array.push(array) 用于将新元素追加到数组的末尾  返回的是新数组的长度

通过pop() push() 方法可以模拟后进先出栈

var arr = new Array();

      arr.push(1,2);
      arr.push(3);
      console.log(arr); [1,2,3]
      arr.pop();

      console.log(arr);[1,2]

array.shift()  从数组中移除第一个元素 并返回该元素  数组为空 返回undefined

array.unshift(array) 在数组的开头加入元素  返回新数组的长度

通过 push() shift() 可以模拟先进先出栈

array.reduce(function(previousValue,currentValue,currentIndex,array){},initialvalue) 对数组中的所有元素调用回调函数 回调函数的返回值作为累积结果并且作为先一个元素调用回调函数的参数传入  返回值为最后一个元素调用回调函数的返回值

如果没有传入initialvalue 从数组第二个元素调用回调函数 如果传入了initialvalue从数组的第一个元素调用回调函数

也就是当没有传递初始值的时候   previousValue的值为数组的第一个元素  currentValue的值为数组的第二个元素  这个的计算结果作为previousValue传入下一个回调函数的调用

传递了初始值  第一次调用的时候  previousValue的值为传入的初始值  currentValue值为数组的第一个元素的值 计算结果作为previousValue传入下一次回调函数的调用

function test(previous,current,index,array) {
      return previous + current;
    }

    var num = [1,2,3];

    var sum = num.reduce(test,0);
    console.log(sum);  //6    

    function getarr(previousArr,currentValue) {
      var nextArr = null;

      if(currentValue >= 10 && currentValue <= 20) {
        nextArr = previousArr.concat(currentValue);
      } else {
        nextArr = previousArr;
      }

      return nextArr;

    }

    var nums = [1,26,8,12,90];

    var emptyArr = [];

    var result = nums.reduce(getarr,emptyArr);
    console.log(result); //12   可以通过filter()实现上面的功能

array.reduceRight() 对比 array.reduce()   以降序的方式执行  这个方法可以实现数组和字符串的反转

function test(previousArr,currentValue) {
      return previousArr.concat(currentValue);
    }

    var num = [1,2,3];
    var empty = new Array();
    var result = num.reduceRight(test,empty);

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

array.reverse()   反转数组   返回反转后的数组

array.slice(start,end)  返回一个Array对象 包含数组中的一部分 (复制到end的位置 不包括end元素)  如果start为负值 为length+ start    如果end为负值为end+length  如果end出现在start之前将不会复制任何元素

var num = [1,2,3];
    var b = num.slice(0,2);
    console.log(b);  //[1,2]

    var c = num.slice(0);
    console.log(c);//[1,2,3]  省略end 一直复制到末尾

array.some(function(value,index,array),thisArg)  确认数组中的元素是否为数组的每一个值均返回true  对比 every()     every() 方法对数组中的元素调用回调函数 当有不符合的立即返回false

some()方法当有数组元素调用回调函数返回true的时候 就返回true 否则遍历到数组末尾

array.sort(function(){})  对数组进行排序  返回排序后的数组   sort()方法会对当前的数组进行修改 不会产生新的数组对象

 function compare(pre,next) {
      if(pre === next) {
        return 0;
      } else if(pre >= next) {
        return 1;
      } else {
        return -1;
      }
    }

    var num = [10,1,12,100,0];

    num.sort(compare);
    console.log(num); //[0,1,10,12,100]  通过调整返回的1 -1 来实现升序和降序的排列

array.valueOf()  返回当前数组的引用

var num = [1,2,3];
    var c = num.valueOf();

    console.log(c === num);  //true
    

array.splice(start,deletecount,array)  从数组中删除元素返回删除的元素    array参数可选 表示插入的元素   从删除的位置插入

返回值 是删除元素构成的数组     修改是在原来的数组上进行的

var num = [1,2,5,10];

    var b = num.splice(1,2,10,20);
    console.log(b);  //[2,5]
    console.log(num); //[1,10,20,10]
时间: 2024-10-17 00:38:31

javascript Array 方法学习的相关文章

Javascript Array 方法整理

Javascript Array 方法整理 Javascript 数组相关方法 说明 大多数其它编程语言不允许改变数组大小,越界访问索引会报错,但是 javascript不会报错,不过不建议直接修改array大小,访问索引时确保不要越界. indexOf 搜索一个指定的元素的位置. slice slice() 就是对应 String 的 substing() 版本,它截取 array 的部分元素,然后返回一个新的 array. push & pop 向数组末尾添加或删除. unshift &

Javascript -- 数组方法学习

1.Array.from() 参考文献 这个方法比较有意思,可以将一个类似数组或可迭代对象分割,然后将值返回为一个新数组 伪数组对象(拥有一个 length 属性和若干索引属性的任意对象) 可迭代对象](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/iterable)(可以获取对象中的元素,如 Map和 Set 等) 这个方法有三个参数,第一个就是要转换成数组的伪数组或者可迭代对象,第二个参数就是相当于一个map方法,

javascript Array学习

首先感谢Dash 我再也不用到处乱找文档了 再次感谢日食记 让我的看到了世界的美好 好的 我们进入正题 注解 我所有的学习心得都建立在ECMAscript5之后 IE9之前的浏览器概不负责 javascript Array是一个好玩的对象 如何检测她呢 首先instanceof是个不错的方法 if (value instanceof Array) { } 不过根据javascript高级程序设计说 这样做 如果一个人重新构造了Array函数 你完了 so 这样 if(Arrays.isArray

JavaScript数组方法对比(深度学习数组)

JavaScript数组方法对比 众所周知,JavaScript提供了许多对数组进行改变的方法,但是有些会对原数组进行影响,有些不会.下边就列举出来. 一.新增 影响原数组 array.push()  //向数组的末尾添加一个或更多元素,并返回新的长度. var array =[1,2,3,4,5]; array.push(6); // [1,2,3,4,5,6]; array.unshift() //向数组的开头添加一个或更多元素,并返回新的长度. var array =[1,2,3,4,5]

JavaScript - reduce方法 (Array)

JavaScript - reduce方法 (Array) 解释:reduce() 方法接收一个函数作为累加器(accumulator),数组 中的每个值(从左到右)开始合并,最终为一个值. 语法:arr.reduce(callback,[initialValue]) 参数: callback:执行数组中每个值的函数,包含四个参数 previousValue:上一次调用回调返回的值,或者是提供的初始值(initialValue) currentValue:数组中当前被处理的元素 index:当前

JavaScript面向对象-静态方法-私有方法-公有方法-特权方法,学习

var baseClass= function(){ function show(){//私有方法 alert("访问私有方法"); } function showName(){ alert(this.name); } this.showw = function (){//特权方法 showName(); } } //静态方法 baseClass.showStatic = function(){ alert("访问静态方法"); } //公有方法 baseClass

JavaScript ES6 数组新方法 学习随笔

JavaScript ES6 数组新方法 学习随笔 新建数组 var arr = [1, 2, 2, 3, 4] includes 方法 includes 查找数组有无该参数 有返回true var includes = arr.includes(2) map方法 map 遍历处理返回新数组 原数组不会改变 var map = arr.map(function (item) { return ++item }) reduce方法 reduce 遍历处理数组返回结果 prev与next中间的符号以

JavaScript Array 数组方法汇总

JavaScript Array 数组方法汇总 1. arr.push() 从后面添加元素,返回值为添加完后的数组的长度 var arr = [1,2,3,4,5] console.log(arr.push(5)) // 6 console.log(arr) // [1,2,3,4,5,5] 2.arr.unshift() 从前面添加元素, var arr = [1,2,3,4,5] console.log(arr.unshift(2)) // 6 console.log(arr) //[2,1

JavaScript 对象深入学习总结

JavaScript 对象深入学习总结(1) http://developer.51cto.com/art/201509/492640.htm 2015-09-29 09:27 clearbug 字号:T | T JavaScript中,除了五种原始类型(即数字,字符串,布尔值,null,undefined)之外的都是对象了,所以,不把对象学明白怎么继续往下学习呢? AD: JavaScript中,除了五种原始类型(即数字,字符串,布尔值,null,undefined)之外的都是对象了,所以,不