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]