javascript数组方法之(二)

pop()

pop()方法是从数组末尾一处最后一项减少数组length的值然后返回移除的项,该数组会改变原来的数组。

var a = ['a', 'b', 'c'];
console.log(a,a.pop()); // ['a', 'b'] 'c'

对于空数组使用pop()方法,不会报错,会返回undefined

var a = [];
console.log(a,a.pop()); // [] undefined

shift()

shift()方法移除数组的第一项并返回该项,同时数组的长度减一,所以,该数组会改变来的数组。

var a = ['a', 'b', 'c'];
console.log(a,a.shift());//['b', 'c'] 'a'

  对空数组使用shift()方法,不会报错,而是返回undefined
  

var a = [];
console.log(a,a.shift());// [] undefined

unshift()

unshift()方法是向数组前端添加任意项并返回新数组的长度,所以,会改变元数组。

var a = ['a', 'b', 'c'];
console.log(a,a.unshift('x')); //['x', 'a', 'b', 'c'] 4

  当使用多个参数调用unshift()时,参数是一次性插入的而非一次一个地插入。这意味着最终的数组中插入的元素的顺序和它们在参数列表中的顺序一致
  

var a = ['a', 'b', 'c'];
console.log(a,a.unshift('x','y','z')); //['x','y','z','a', 'b', 'c'] 6

数组的排序

数组中存在两个可以直接用来重排序的方法: reverse()和sort();

reverse() and sort();

reverse用于反转原来的数组顺序,经过排序之后的数组。原来的数组也会改变。

var array = [1,2,4,3,5];
console.log(array,array.reverse());//[5,3,4,2,1] [5,3,4,2,1]
var array = ['str',true,3];
console.log(array,array.reverse());//[3,true,'str'] [3,true,'str']

sort()默认是按照字符串升序排列数组。sort()方法会调用数组每个项的toString()方法然后比较得到的字符串,返回进过排序之后的数组。而元数组也发生了变化。

var array = [1,2,4,3,5];
console.log(array,array.sort());//[1,2,3,4,5] [1,2,3,4,5]
var array = ['3str',3,2,'2'];
console.log(array,array.sort());//[2, "2", 3, "3str"] [2, "2", 3, "3str"]
var array = [1,5,10,50];
console.log(array,array.sort());//[1, 10, 5, 50] [1, 10, 5, 50]

如果数组包含undefined元素,它们会被排到数组的尾部

var array = ['3',3,undefined,2,'2'];
console.log(array,array.sort());//["2", 2, "3", 3, undefined] ["2", 2, "3", 3, undefined]

sort()方法可以接受一个比较函数作为参数,以便制定谁在谁的前面,比较函数解释两个数作为参数 ,如果第一个参数应该位于第二个参数之前的话,则返回一个负数,如果两个参数相等,则返回0;如果第一个参数应该位于第二个参数之后的话,则返回一个正数,

function sortNumber(value1,value2){
    if(value1 > valu2){
        return 1
    } else if (value1 < value2) {
        return -1
    }else if(value2 = value1) {
        return 0;
    }    
}
var arr = ['4px',90;'8',45,true];
console.log(arr.sort(sortNumber))//["4px", true, "8", 45, 90]

注意的是‘4px’在调用toString()方法时,会转化成NaN,这样结果就是false,在隐式转换一下,0;true也有隐式转换的过程. js的黑暗面啊感觉是;
这里写图片描述

对于数值型或者valueOf()方法返回数值类型的对象类型,比较函数可以简化

function sortNumber(value1,value2){
    return value1 - value2;
}

var arr = ['2px',78,9,456,];
console.log(arr.sort(sortNumber));//["2px", 9, 78, 456];
var array = [5,50,1,10];
console.log(array.sort(sortNumber));//[1,5,10,50]

如果对于一个字符串执行不区分大小写的字母表排序表,比较函数首先将参数转化为小写字符串,再进行比较。

a = ['ant','Bug','cat','Dog'];
a.sort();//['Bug','Dog','ant','cat'];
a.sort(function(s,t){
    var a = s.toLowerCase();
    var b = t.toLowerCase();
    if(a < b)return -1;
    if(a > b)return 1;
    return 0;
});//['ant','bug','cat','dog']

使用sort()创建一个一个随机数组

function compare(){
    return Math.random() - 0.5;
}
var arr = [1,3,5,7,4,89,34,66];
console.log(arr.sort(compare));

这里写图片描述

数组拼接的方法

concat()

concat()方法是基于原来的数中所有的选项创建一个新的数组,首先是创建一个原数组的副本,然后将接受到的参数添加在这和副本的末尾,然后放回新的数组,所以,concat是不会改变原来的数组。

如果不给concat传递参数的话,他只是复制当前的数组,如果参数是一个或者是多个数组,则该方法会将数组中的每一项都添加到结果数组中去;如果传递的不是数组,这些值就会简单的添加到结果数组中。

//该方法实际只复制了数组的第一维,数组第一维存放的是第二维的引用,而第二维才是实际存放他们的内容
var numbers = [1,2];
var newNumbers = numbers.concat();
console.log(numbers,newNumbers);//[1,2] [1,2]
numbers[0] = 0;
console.log(numbers,newNumbers);//[0,2] [1,2]

var numbers = [[1,2]];
var newNumbers = numbers.concat();
console.log(numbers,newNumbers);//[[1,2]] [[1,2]]
numbers[0][0] = 0;
console.log(numbers,newNumbers);//[[0,2]] [[0,2]]

concat()方法也是可以合并数组的,但是要借用call

var newArray = Array.prototype.concat.call({a: 1},{b: 2});
console.log(newArray);

创建子数组的方法

slice方法是基于当前数组一个或者是多个项创建一个新的数组,接受一个或者是两个参数,即要返回起始位置开始到结束位置,最后返回的新的数组,所以slice不会影响原来的数组。

  slice(start,end)方法需要两个参数start和end,返回这个数组中从start位置到(但不包含)end位置的一个子数组;如果end为undefined或不存在,则返回从start位置到数组结尾的所有项

  如果start是负数,则start = max(length + start,0)

  如果end是负数,则end = max(length + end,0)

  start和end无法交换位置

  如果没有参数,则返回原数组

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

console.log(numbers.slice(-3));//-3+5=2 -> [3,4,5]
console.log(numbers.slice(-8));//max(5 + -8,0)=0 -> [1,2,3,4,5]

console.log(numbers.slice(0,-3));//-3+5=2 -> [1,2]
console.log(numbers.slice(-2,-1));//-2+5=3;-1+5=4; -> [4]

如果不提供参数,slice()方法返回当前数组的一个浅拷贝

//该方法实际只复制了数组的第一维,数组第一维存放的是第二维的引用,而第二维才是实际存放他们的内容
var numbers = [1,2];
var newNumbers = numbers.slice();
console.log(numbers,newNumbers);//[1,2] [1,2]
numbers[0] = 0;
console.log(numbers,newNumbers);//[0,2] [1,2]

var numbers = [[1,2]];
var newNumbers = numbers.slice();
console.log(numbers,newNumbers);//[[1,2]] [[1,2]]
numbers[0][0] = 0;
console.log(numbers,newNumbers);//[[0,2]] [[0,2]]

  slice()方法涉及到Number()转型函数的隐式类型转换,当start被转换为NaN时,相当于start = 0;当end被转换为NaN时(end为undefined除外),则输出空数组。
  

var numbers = [1,2,3,4,5];
console.log(numbers.slice(NaN));//[1,2,3,4,5]
console.log(numbers.slice(0,NaN));//[]
console.log(numbers.slice(true,[3]));//[2,3]
console.log(numbers.slice(null,undefined));//[1,2,3,4,5]
console.log(numbers.slice({}));//[1,2,3,4,5]
console.log(numbers.slice('2',[5]));//[3,4,5]

可以使用slice()方法将类数组对象变成真正的数组。

var arr = Array.prototype.slice.call(arrayLike);

Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })// ['a', 'b']
Array.prototype.slice.call(document.querySelectorAll("div"));
Array.prototype.slice.call(arguments);

作为笔记,不懂得时候也可以所示查阅。明天继续啊

猜你喜欢

转载自blog.csdn.net/arthurwanggang/article/details/67634505