js数组方法学习

1. join()

将数组中的元素拼接起来,并返回一个字符串,参数可填,默认用逗号(,)分隔拼接后的元素。

var a = [1,2,3];
var b = a.join();// =>1,2,3
b = a.join('');// =>123
b = a.join(' ')// =>1 2 3
b = new Array(10);
b = b.join('-');// =>---------

数组的join()方法是字符串split()方法的逆操作,后者是将字符串分割成若干块来创建数组。

2. reverse()

将数组中的元素颠倒,改变原来的数组。

var a = [1,2,3];
a.reverse();
console.log(a); // =>[ 3, 2, 1 ]

3. sort()

对原来的数组进行操作排序,将改变原来的数组

当不带参数调用sort时,默认按照字母表排序

var a = ['banana','cherry','apple'];
a.sort();
console.log(a); // =>[ 'apple', 'banana', 'cherry' ]  如果为元素为数字=>[ 1, 22, 333, 4 ]

如果包含undefined元素,排序时会排到末尾,

当需要按照其他方式排序时,需要传入一个参数,必须为一个比较函数,

var a = [22,4,1,333];
a.sort(function(a,b){
  return a-b;
});
console.log(a); // =>[ 1, 4, 22, 333 ]

自己的理解,相邻两个元素作比较,返回值是正时,将换位。

同理,执行不区分大小写字母排序时

var a = ['ant','cat','Bug','Dog'];
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;
});
console.log(a); // =>[ 'ant', 'Bug', 'cat', 'Dog' ]


4. concat()

创建并返回一个新数组,新数组元素包括原始数组的元素和每个参数。参数如果是数组,会连接其中的每个元素。

不会修改原始数组。

var a = [1, 2, 3];
var b = a.concat(4, 5); // =>[ 1, 2, 3, 4, 5 ]
b = a.concat([4, 5]); // =>[ 1, 2, 3, 4, 5 ]
b = a.concat([4, 5], [6, 7]); // =>[ 1, 2, 3, 4, 5, 6, 7 ]
b = a.concat(4, [5, [6, 7]]); // =>[ 1, 2, 3, 4, 5, [ 6, 7 ] ]

5. slice()

返回数组的一个片段或者子数组。不会修改原始数组。

只有一个参数时,返回该参数下标至最后的一个子数组。

有两个参数时,返回从第一个参数下标开始至第二个参数下标前一个元素位置的子数组。

(第一个参数对应元素包含,第二个参数对应元素不包含)

参数为负数时,如-1就是最后第一个元素,-2就是倒数第二个元素

当第一个参数对应元素位置在第二个参数对应元素位置之后或位置相同,返回空数组[]

var a = [1, 2, 3, 4, 5];
var b = a.slice(0, 3); // =>[ 1, 2, 3 ]
b = a.slice(3); // =>[ 4, 5 ]
b = a.slice(1, -1); // =>[ 2, 3, 4 ]
b = a.slice(-3, -2); // =>[ 3 ]

6. splice()

当只用作删除元素操作时

对原始数组分割,把删去的部分返回一个新的数组,原始数组只保留剩下 的。

当只有一个参数时,表示从该参数下标开始,将后面所有都截去。

当两个参数时,第一个参数表示从参数下标开始 截取,第二个参数表示截取元素个数。

var a = [1, 2, 3, 4, 5, 6, 7, 8];
var b = a.splice(4);  // => a=[ 1, 2, 3, 4 ]; b=[ 5, 6, 7, 8 ]
b = a.splice(1,2);  // => a=[ 1, 4 ]; b=[ 2, 3 ]
b = a.splice(1,1);  // => a=[ 1 ]; b=[ 4 ]

splice()前两个参数制定了需要删除的数组元素。紧随其后的任意个数的参数指定了需要插入到数组中的元素,

从第一个参数指定的位置开始插入。注意:返回值是新的数组是被删除的元素,该方法是对原数组操作。

var a = [1, 2, 3, 4, 5];
var b = a.splice(2, 0, 'a', 'b'); // => a=[ 1, 2, 'a', 'b', 3, 4, 5 ]; b=[]
b = a.splice(2, 2, [1, 2], 3);  // => a=[ 1, 2, [ 1, 2 ], 3, 3, 4, 5 ]; b=[ 'a', 'b' ]


7. push()和 pop()

相当于栈的操作,数组头为栈底,数组尾为栈顶

是对原数组的操作,返回值pop时为栈顶删除的元素,push为新数组长度

如果原数组为空执行pop()操作,返回值为undefined,原数组还是为空。

var a = [];
var b = a.pop(); // => a=[]; b=undefined
b = a.push(1, 2); // => a=[ 1, 2 ]; b=2
b = a.pop(); // => a=[ 1 ]; b=2
b = a.push(1, [4, 5]); // => a=[ 1, 1, [ 4, 5 ] ]; b=3

8. unshift()和shift()

跟push()和pop()相反,他们是在数组头部操作,返回值类似。

需要注意的是,当unshift中有多个参数时,他是一次性插入的,参数顺序和插入后的顺序一致。

var a = [];
var b = a.unshift(1);// => a=[ 1 ]; b=1
b = a.unshift(22);// => a=[ 22, 1 ]; b=2
b = a.shift();// => a=[ 1 ]; b=22
b = a.unshift(3, [4, 5]);// => a=[ 3, [ 4, 5 ], 1 ]; b=3

9. toString()和toLocaleString()

数组和js其他对象一样拥有toString()方法。对于数组,把每个元素都转化成字符串并用逗号隔开,最后拼接起来。

注:输出不包括方括号或其他形式的包裹数组值的分隔符。

[1,2,3].toString() // => '1,2,3'
["a","b","c"].toString() // => 'a,b,c'
[1,[2,'c']].toString() // => '1,2,c'

toLocaleString 不常用,比如数组中含有时间对象,它会转换成另外一种格式,或者传入参数,自定义格式。


10. forEach()

重头遍历数组,并对每个元素执行指定函数,可以使用三个参数:数组元素、元素索引值、数组本身。

三个参数固定死,可选用,该循环一般不可以提前结束,没有对应的break。

var data = [1,2,3,4,5];
var b = 0;
data.forEach(function(value,index,a){
    return a[index]= value + 1;
}) // =>data=[ 2, 3, 4, 5, 6 ]
data.forEach(function(value){
    return b += value;
}) // =>b=20

11. map()

该方法把每个元素传给指定函数,并返回一个数组,包含了执行该函数后的所有返回值。

var data = [1,2,3,4,5];
var b = data.map(function(x){
    return x*x;
}) // =>b=[ 1, 4, 9, 16, 25 ]

需要注意的是,它返回的是一个新数组。

12. filter()

过滤得到函数逻辑判定的值,第一个参数为value,第二个参数为索引值,可选用

var data = [1,2,3,4,5];
var b = data.filter(function(x){
    return x*x;
}) // =>b=[ 1, 4, 9, 16, 25 ]

还可以压缩稀疏数组的空缺,

var data = [1, 2, , 34,];
var b = data.filter(function () {
    return true;
}) // =>b=[ 1, 2, 34 ]

甚至压缩并删除undefined和null元素

var b = data.filter(function (x) {
    return x!==undefined && x!=null;
}) // 

注意:undefined == null 为true;undefined === null 为false

上面函数 x != null 包含了 x !==undefined 的情况

13. every()和some()

every表示任意,每个; some表示 有些,存在; 它们最后返回的都是布尔值(true, false)

every 要数组中每个元素判断都为true才返回true,否则返回false

some只要在遍历过程中得到true就直接返回true

var data = [1, 2, 3, 4, 5];
var b = data.every(function (x) {
    return x < 10;
}) // b=true
b = data.every(function (x) {
    return x % 2 === 0;
}) // b=false
b=data.some(function(x){
    return x%2===0;
}) // b=true
b= data.some(isNaN) // b=false

14. reduce()和reduceRight()

有两个参数,第一个参数为一个函数,第二个参数为初始值。

第二个参数会参与到第一个参数的函数中去,与数组的第一个元素计算。

如果没有第二个参数,第一个参数函数中会使用刚开始会使用数组中第一个元素和第二个元素。

var data = [1, 2, 3, 4, 5];
var sum = data.reduce(function (x, y) {
    return x + y;
}, 0); //数组求和,第二个参数可省略
var product = data.reduce(function (x, y) {
    return x * y;
}, 1); //数组求积,第二个参数可省略
var sum = data.reduce(function (x, y) {
    return (x > y) ? x : y;
}); //求最大值
reduceRight()和reduce()工作原理一样,不同的是它按照索引从高到低(从右到左)处理数组
var data = [2, 3, 4];
// 计算2^(3^4) ,乘方的操作需要从右至左
var big = data.reduceRight(function (accumulator, value) {
    return Math.pow(value, accumulator);
})

15. indexOf()和lastIndexOf()

在数组中检索参数的位置,返回找到的第一个位置,indexOf()从左往右检索,

lastIndexOf()从右往左检索,没有检索到就返回-1。

第一个参数是需要搜索的值,第二个参数可选,表示开始搜索的位置,可以为负数,表示相对数组末尾偏移量。

indexOf默认为0,lastIndexOf默认为-1

//从a中找出x,并返回一个匹配索引的数组
function findall(a, x) {
    var results = [];
    var len = a.length; // 得到数组长度
    var pos = 0;        // 初始遍历位置
    while (pos < len) {
        pos = a.indexOf(x, pos);// 设定起始搜索位置,返回搜索结果
        if (pos === -1) // 如果返回值为-1 结束循环
            break;
        results.push(pos);// 把索引到的位置丢入结果数组中
        pos = pos + 1;  // 搜索起始位置往后挪一个位置
    }
    return results;
}


类数组对象

构造并遍历类数组对象

var a = {};
var i = 0;
while (i < 10) {
    a[i] = i * i;
    i++;
}
a.length = i;
var total = 0;
for (var j = 0; j < a.length; j++)
    total += a[j];

判断是否是一个类数组对象

function isArrayLike(o){
    if (o&&                     //o 非null、undefined等
        typeof o ==='object'&&  //o是对象
        isFinite(o.length)&&    //o.length是有限数值
        o.length>=0&&           //o.length为非负值
        o.length===Math.floor(o.length)&&//o.length为整数
        o.length<4294967296)    //o.length < 2^32
        return true;            //o是类数组对象
    else
        return false;           //否则它不是
}

在类数组对象中,依然能用js中数组的操作方法,(concat()除外),

由于类数组对象没有继承Array.prototype,就不能直接调用数组方法。

可以间接使用Function.call方法调用。

var a = {};
a[0]='a';
a[1]='b';
a[2]='c';
a.length=3; // => { '0': 'a', '1': 'b', '2': 'c', length: 3 }
var b;
b = Array.prototype.join.call(a,'+'); // => a+b+c
b = Array.prototype.slice.call(a, 0); // => [ 'a', 'b', 'c' ]
b = Array.prototype.map.call(a, function(x){
    return x.toUpperCase();
})  // => [ 'A', 'B', 'C' ]

作为数组的字符串

字符串也可以当作是数组

var s='test';
s.charAt(0); // => 't'
s[1];   // => 'e'

一些通用的方法可以运用到字符串上

var s = 'JavaScript';
var b = Array.prototype.join.call(s,' ');// => J a v a S c r i p t
b = Array.prototype.filter.call(s,function(x){
    return x.match(/[^aeiou]/);
}).join('');// => JvScrpt

注意:字符串是不可变的值,把字符串当作数组看时,他们是只读的。只能调用不会修改参数本身的数组函数

如push(),sort(),reverse()和splice()等数组会修改数组,它们在字符串上操作是无效的。




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值