js 原生靠谱数组方法整理

数组方法

push

• 作用：向数组末尾追加项（可以是一项或者多项）
• 参数：添加的具体项（可以是一项或者多项）
• 返回值：新数组的长度
• 是否改变原数组：改变

var ary = [1, 2, 3]; 
ary.push(4); 
console.log(ary); 
var res = ary.push(5); 
// ary.push的返回结果为新数组的长度
console.log(res); // 5

unshift

• 作用：向数组的开头追加项
• 参数：添加的具体项（可以是一项或者多项）
• 返回值：新数组的长度
• 是否改变原数组：改变

var ary1 = [2, 3, 5]; 
ary1.unshift(1); 
console.log(ary1); // [1, 2, 3, 5]
var res1 = ary1.unshift(0); 
console.log(res1); // 5

pop

• 作用：删除数组末尾的项
• 参数：无
• 返回值：删除的末尾项
• 是否改变原数组：改变

var ary2 = [1, 2]; 
ary2.pop(); 
2 // 返回值
console.log(ary2); 
[1] // 删除末尾项后的新数组
undefined

shift

• 作用：删除数组的开头项
• 参数：无
• 返回值：删除的开头项
• 是否改变原数组：改变

splice

• 作用：从索引n开始删除m项，并且用x进行替换
• 参数：splice(n, m, x);
• 返回值：返回值是一个数组，数组里边是删除的项
• 是否改变原数组：改变

var ary = [1, 2, 3, 4, 5]; 
// 把索引1，2两项 替换为5，6
var res = ary.splice(1, 2, 5, 6); 
res; // [2, 3]
ary; // [1, 5, 6, 4, 5]

只删除不替换

var res1 = [1, 2, 3]; 
undefined
res1.splice(1, 2); 
(2) [2, 3] // 删除项的数组
res1; 
[1] // 新数组

splice实现增加项

var res2 = [0, 1, 2]; 
undefined
res2.splice(2, 0, 5); // 在索引2的前面删除0项，并且替换为5
[] // 删除项的数组
res2; 
(4) [0, 1, 5, 2]

思考题！！

删除数组最后一项

• ary.pop();
• ary.splice(ary.length-1, 1);
• ary.length--;

数组的末尾追加项的三种方法

• ary.push();
• ary.splice(ary.length, 0, 8);
• ary[ary.length] = 8;

slice

• 作用：从索引n开始复制到索引m结束（不包含第m项）
• 参数：slice(n, m)
• 返回值：复制的新数组
• 是否改变原数组：不改变
• 注意：

• • 如果不写参数m ==> 从索引n开始一直复制到最后一项
  • 复制整个数组：ary.slice() 或者 ary.slice(0)

var res = [1, 2, 3, 4, 5]; 
undefined
res.slice(1, 3); 
(2) [2, 3] // 复制的新数组
var res1 = slice(); 
var res1 = res.slice(); 
res1
(5) [1, 2, 3, 4, 5]
var res2 = res.slice(0); 
res2; // [1, 2, 3, 4, 5]
console.log(res1 == res2); // false res1和res2的空间地址不同
undefined

concat（拼接数组）

• 作用：拼接数组
• 参数：可以是拼接的一项，或者数组
• 返回值：拼接后的新数组
• 是否改变原数组：不改变

var ary = [1, 2, 3]; 
undefined
ary.concat(1); // [1, 2, 3, 1]
ary // [1, 2, 3]

toString()

• 作用：转为字符串
• 参数：无
• 返回值：转化为字符串的值
• 是否改变原数组：不改变

join

• 作用：那数组转换为字符串，并且用指定的连接符链接
• 参数：连接符
• 返回值：用连接符连接之后的字符串
• 是否改变原数组：不改变

var ary1 = [1, 2, 3, 4]; 
undefined
ary1.join("-"); 
"1-2-3-4"
ary1.join("+"); 
"1+2+3+4"
eval(ary1.join("+")); 
10

reverse

• 作用：实现数组的倒序
• 参数：无
• 返回值：倒序之后的数组
• 是否改变原数组：改变

var res = [1, 2, 3, 4]; 
undefined
res.reverse(); 
(4) [4, 3, 2, 1]
res; 
(4) [4, 3, 2, 1]

sort 排序

• 作用：实现数组的排序
• 参数：无/函数
• 返回值：倒序之后的数组
• 是否改变原数组：改变
• 注意：

• • 如果不传参数，只能排10以内的；10以外的可以跟一个函数

// 不传参数，排序10以内
var ary = [4, 5, 8, 3, 7]; 
undefined
ary.sort(); 
(5) [3, 4, 5, 7, 8]
// 参数为函数时，可以排序任意数值
var ary1 = [11, 2, 5, 9, 7, 55, 5, 1]; 
undefined
ary1.sort(function (a, b) {return a-b; }); //a-b 升序
(8) [1, 2, 5, 5, 7, 9, 11, 55]
ary1.sort(function (a, b) {return b-a; }); // b-a 降序
(8) [55, 11, 9, 7, 5, 5, 2, 1]

indexOf

• 作用：检索某项在数组中首次出现的位置(索引)
• 参数：index(n, m)

• • n：检索的项
  • m：从哪开始检索

• 返回值：索引/-1
• 是否该变原数组：不改变
• 注意：

• • 如果数组中不包含那项，返回值为-1；通过这个可以判断数组中是否包含某项

var ary = [1, 5, 6, 8, 4, 8, 1, 0, 5]; 
undefined
ary.indexOf(1); 
0 // 1首次在索引0处出现
ary.indexOf(7); 
-1 // 7不在数组中
ary.indexOf(1, 0); 
0 // 从索引0处开始检索首次出现1的索引值
ary.indexOf(1, 1); 
6 // 从索引1处开始检索首次出现1的索引值

lastIndexOf

• 作用：检索某项在数组中最后出现的位置(索引)
• 参数：index(n, m)

• • n：检索的项
  • m：到哪结束检索（包含最后一项）

• 返回值：索引/-1
• 是否该变原数组：不改变
• 注意：

• • 如果数组中不包含那项，返回值为-1

var ary3 = [1, 5, 6, 8, 4, 8, 1, 0, 5]; 
undefined
ary3.lastIndexOf(1); 
6
ary3.lastIndexOf(1, 6); // 到索引为6的值时结束检索（包含最后一项）
6
ary3.lastIndexOf(1, 5); 
0

includes

• 作用：检测数组是否包含某项
• 参数：检测的项
• 返回值：布尔值
• 是否改变原数组：不改变

forEach

• 作用：遍历数组中的每一项
• 参数：函数(item, index)  item是每一项的值  index是每一项的索引
• 返回值：undefined
• 是否改变原数组：不改变

var ary = [1, 5, 6, 8, 4, 8, 1, 0, 5]; 
undefined
ary.forEach(function(item, index){console.log(item+" ---"+index)}); 
VM237:1 1 ---0
VM237:1 5 ---1
VM237:1 6 ---2
VM237:1 8 ---3
VM237:1 4 ---4
VM237:1 8 ---5
VM237:1 1 ---6
VM237:1 0 ---7
VM237:1 5 ---8
undefined  // 返回值undefined （因为没有return ，默认return undefined；）

map

• 作用：把一个数组映射成一个新的数组
• 参数：函数
• 返回值：映射后的新数组
• 是否改变原数组：否

// map映射
var ary3 = [1, 2, 3, 4, 5, 6];
var res = ary3.map(function (item,index) {
    return `<li>${item}nizhenbang!!</li>`;
})
console.log(res);

数组去重！！

1、双for循环去重

• 原理：依次拿出数组中的每一项，和他后面的所有剩余项进行比较，如果有相同数字就删除

function unique(ary5) {

    for (i=0;i<ary5.length-1;i++) {
        var getItem = ary5[i];
        for (j=i+1;j<ary5.length;j++) {
            if(getItem == ary5[j]) {
                ary5.splice(j,1);
                // 删除一项后，（数组会发生变化）数组的每一项对应索引会变化，所以索引--，以对应删除重复项后的新数组
                j--;
            }
        }
    }
    return ary5;

}
var ary5 = [1, 1, 1, 2, 2, 23, 3, 35, 4, 5, 5, 4]; 
var res = unique(ary5); 
console.log(res);

2、利用对象进行数组去重

• 原理：首先创建一个空对象，去遍历数组中的每一项，把数组的每项作为对象的属性名和属性值，給此对象添加；添加的过程中，如果对象中已经包含此项，说明重复，则在数组中删除此项。

// 2、利用对象去重
function unique2(ary6) {

    // 首先创建一个空对象
    var obj = {};
    for (i=0;i<ary6.length;i++) {
        var item = ary6[i];
        // 判断对象中是否已经包含此项
        if (obj[item] == item) {
            ary6.splice(i,1);
            i--;
            // 结束本次循环，继续下一次循环
            continue;
        }
        // 数组中的某一项添加到对象中
        // 数组中的某一项当成属性名和属性值
        obj[item]=item;
    }
    return ary6;

}
var ary6 = [1, 2, 3, 3, 3, 5, 5, 8, 9, 9, 9, 10, 10]; 
var res = unique2(ary6); 
console.log(res);

3、利用新数组去重

function unique3(ary) {

    var newAry7 = [];
    for (i=0;i<ary.length;i++) {
        /* // 如果新数组中不包含此项，就給新数组push
        if (newAry7.indexOf(ary[i]) == -1) {
            newAry7.push(ary[i]);
        } */
        // 如果新数字中包含此项，结束本次循环，继续下一次循环
        if (newAry7.indexOf(ary[i]) > -1) {
            continue;
        }
        newAry7.push(ary[i]);
    }
    return newAry7;

}
var ary7 = [1, 1, 1, 1, 1, 5, 8, 47, 8]; 
var res7 = unique3(ary7); 
console.log(res7);