JS数组Array方法总结详解(包含ES6-10)

JS数组Array方法总结详解(包含ES6-10)

1.push()方法:在数组的末尾添加一项或者多项, 返回添加数据后的数组的新长度

var arr = [1, 2, 3, 4];
var a = arr.push('a', 'b', 'c');
console.log(arr, a);//a输出结果7

2.pop()方法:在数组的末尾删除一项, 返回被删除的项

var arr = [1,2,3,4];
var b = arr.pop();
console.log(arr, b);//输出b结果是4

3.unshift()方法:在数组的首位添加一项或者多项, 返回添加数据后的数组的新长度

var arr = [1, 2, 3, 4];
var c = arr.unshift('小乔', '大乔', '王昭君');
console.log(arr, c);//输出c结果7

4.shift()方法:在数组的首位删除一项, 返回被删除的项

var arr = [1,2,3,4];
var b = arr.shift();
console.log(arr, b);//输出b结果是1

5.splice: 增删改, 返回被删除的项组成的新数组 语法:splice(起始下标, 删除的个数, [....data])

var arr = [1,2,3,4,5];
var a = arr.splice(2,1,0);
console.log(arr,a)
// 输出arr = [1,2,0,4,5]  a = [3]

6.concat()方法: 拼接数组和项, 返回新数组

var arr = [1, 2, 3];
var brr = [6, 7, 8];
var crr = arr.concat(4, 5, brr);
console.log(arr, brr);
console.log(crr); // [1, 2, 3, 4, 5, 6, 7, 8]

7.slice()方法截取指定位置的数组  语法: 数组.slice([起始下标], [结束下标])返回截取出来的新数组

var crr = [1,2,3,4,5,6,7,8];
console.log(crr.slice()); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(crr.slice(2)); // [3, 4, 5, 6, 7, 8]
console.log(crr.slice(2, 5)); // [3, 4, 5]

8.join()方法将数组按照拼接符连接起来, 返回字符串,连接符可以是一切字符, 默认以,作为连接符

var arr = ['小乔', '吕布', '貂蝉'];
console.log(arr.join('和')); // 小乔和吕布和貂蝉
console.log(arr.join('<b>+++</b>')); // 小乔<b>+++</b>吕布<b>+++</b>貂蝉
console.log(arr.join()); // 小乔,吕布,貂蝉
console.log(arr.join('')); // 小乔吕布貂蝉

9. reverse()方法:数组翻转, 改变原数组, 具有返回值, 返回翻转以后的数组

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

10.indexOf()方法:查询某个元素在数组中第一次出现的位置,存在该元素,返回下标,不存在 返回 -1

//语法: 数组.indexOf(要找的字符[, 起始下标])
var arr = [1, '1', 2];
console.log(arr.indexOf('1')); // 1

11.lastIndexOf ()方法:查询某个元素在数组中第一次出现的位置,存在返回下标,不存在 返回 -1

//语法: 数组.indexOf(要找的字符[, 起始下标]) 从右往左查找
var arr = [1, '1', 2];
console.log(arr.lastIndexOf('1')); // 1

12.sort()方法:默认按照字符串的排序规则进行排序有2个形参

var arr = [1, 31, 4, 15, 81, 11];
arr.sort();
console.log(arr);// [1, 11, 15, 31, 4, 81]

var brr = [2,34,66,12,16,88]
brr.sort(function (a, b) {
     console.log(a, b); // 相邻的两项
     // return a - b; // 从小到大 [2, 12, 16, 34, 66, 88]
     return b - a; // 从大到小 [88, 66, 34, 16, 12, 2]
});
console.log(brr);

var crr =  [
               { id: 1, name: '小米20', price: 7599 },
               { id: 2, name: '小米30', price: 5000 },
               { id: 3, name: '小米40', price: 6599 }
           ]
crr.sort((x, y) => {
if (true) {
//y - x 降序 从大到小
// return y.price - x.price
//中文排序 字符a.localeCompare(字符b)
return y.name.localeCompare(x.name)
} else {
//x - y 降序 从小到大
// return x.price - y.price
return x.name.localeCompare(y.name)
}

13.toString方法 将数组转化为字符串

var arr = [1,3,4,67,8];
var b = arr.toString();
console.log(arr,'--',b);//[1,3,4,67,8] '--' '1,3,4,67,8'

14.forEach()方法 数组迭代 无返回值

arr.forEach((item,index,arr)=>{
//数组有多少数据执行多少回
//item 每一项 index 下标 arr 原始数组
//无返回值 纯粹for循环
})

15.every()方法 数组迭代  全真为真 一假为假

arr.every((item,index,arr)=>{
/*
    数组有多少数据执行多少回 全真为真 一假为假
    item 每一项 index 下标 arr 原始数组
    作用 判断遍历原始数组是不是每一个都满足条件
    返回值:数组每一个都满足条件返回true,只要有任意一个不满足条件返回false
    循环结束条件:从数组第一个开始遍历,发现后续数据只要有一个不满足条件返回false,结束循环,不再
往下遍历数据
*/
})

16.some()方法 数组迭代  全假为假 一真为真

arr.some((item,index,arr)=>{
/*
    数组有多少数据执行多少回 全假为假 一真为真
    item 每一项 index 下标 arr 原始数组
    作用 判断遍历原始数组是不是有某一个满足条件
    返回值:数组有任意一个数据满足条件返回true,数组中所有数据都不满足条件返回false
    循环结束条件:从数组第一个开始遍历,发现后续数据只要有任意一个满足条件返回true,结束循环,不再
往下遍历数据
*/
})

17. filter()方法:对数组中的做一些过滤, 将符合条件的(函数的返回值是true)项组成一个新数组返回

var brr = ['a','b','c','d','e'];
var res = brr.filter(function (item,index,a) {
           return index > 1; //返回下标大于1项组成新数组
        })
console.log(res);// ['c', 'd', 'e']

18.map()方法 数组迭代 有返回值会造成内存浪费

var arr = ['q','e','v','d'];
var res = arr.map(function (item, index, a) {
            return item + '2';
        })
console.log(res);//["q2", "e2", "v2", "d2"]

19.find()方法  找到第一个满足条件返回对应条件数组中的值

<script>
//当数组当前的对象的age属性等于21时，返回该对象。从数据中我们可以看到，有1项值符合该条件，但
//是find会找到第一个符合该条件的值，最终返回了第一个符合该条件的所对应的数据且后面的值不再进行检测
    let arr = [{name: '小艺',sex: '男',age: 23},{name: '小红',sex: '女',age: 18},{name: '小兰',sex: '女',age: 21},{name: '小黑',sex: '男',age: 24},{name: '小2',sex: '男',age: 22}];
    const Result = arr.find((value, index, arr) => {
    console.log(value);
    /*
    上式输出为前3个对象 找到符合条件就不再遍历
    {name: '小艺', sex: '男', age: 23}
    {name: '小红', sex: '女', age: 18}
    {name: '小兰', sex: '女', age: 21}
    */
    return (value.age === 21);
    });
    console.log(Result);//{name: '小兰', sex: '女', age: 21}
</script>

20.findIndex()方法 找到第一个满足条件返回下标

<script>
//给定条件，返回数组中第一个满足该条件的值的下标，之后的值不再进行检测，当没有找到满足该条件的
值时，返回 -1
       let arr = [{name: '小1',sex: '男',age: 22},{name: '小红',sex: '女',age: 18},{name:         '小兰',sex: '女',age: 21},{name: '小黑',sex: '男',age: 23}];

       const Result = arr.findIndex((value, index, arr) => {

       // console.log(value);//输出前3个对象 找到符合条件就不再遍历

       return (value.age === 21);

    });
    console.log(Result); // 2
</script>

21.from()方法:把伪数组或可遍历的对象转换成真正的数组

let obj = {
            0: "I",
            1: "OK",
            2: 99,
            length: 3
        };
let arr = Array.from(obj);
console.log(arr);// ['I', 'OK', 99]

function uniqueArr(arr) {
      //sets为伪数组需转换真正数组
      let sets = new Set(arr);
      return Array.from(sets);
}

22.of()方法: 将一组数值转变为数组,只分数量，数量为0返回空数组

let arr = Array.of(5);
console.log(arr);//[5]

let brr = Array.of();
console.log(brr);//[]

23.reduce()方法:数组中的每一个元素依次执行回调函数callback 方法有两参数

第一参数是callback回调函数有四个形参(     previousValue:上一次调用回调返回的值,或者是提供的初始值（initialValue）,  currentValue:数组当前被处理的元素,   index:数组当前被处理的元素的下标,arr:调用reduce函数的数组),

第二个参数initValue提供的初始值,可选

注: reduceRight()则从数组的最后一项开始，向前遍历到第一项

回调函数第一次执行时,previousValue和currentValue可以是一个值
如果initlValue传值,那么第一个previousValue等于initialValue,并且currentValue等于数组中的第一个值,数组循环次数为数组长度
如果initlValue未传,那么previousValue等于数组中的第一个值,currentValue等于数组中的第二个值,数组循环次数为数组长度-1

var arr = [1, 2, 3, 4, 5];

var result = arr.reduce(function (pre, cur, index, arr) {
            console.log(pre,cur,index);
                1 2 1
                3 3 2
                6 4 3
                10 5 4
            return pre + cur;// return后表达式就是要做的处理累加或者累积 
        });

console.log("结果：" + result);//结果：15

//列子:数组的扁平化,将多维数组变成一维数组

var test = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
    return a.concat(b);
});

console.log(test)//[0, 1, 2, 3, 4, 5]

24.includes()方法: 判断一个数组是否包含指定的值，如果是返回 true，否则false

//语法: 数组.includes(查询的项[, 起始下标]) 起始下标可以是负值从右往左查询
var arr = [1, '1', 2];
console.log(arr.includes('1')); // false
console.log(arr.includes('1',2)); // true

对于检查数组是否包含某个值indexOf缺点
一是不够语义化,是找到参数值的第一次出现的位置,找不到时会返回-1,所以还需要比较是否等于-1,不够方便
二是，其内部使用的是严格等式运算符(===)进行判断,会导致对NaN的误判(因为NaN === NaN会返回false,如果数组中存在该元素,则无法找到)

25.fill()方法: 用一个固定值填充一个数组中,从起始下标到终止下标内的全部元素,不包含结束下标

Array.fill(value,start,end)
value:用来填充数组元素的值
start:起始下标,默认值为0
end:终止下标,默认值为数组长度
// 填充数组
const arr = Array(3).fill(1);  // [1, 1, 1]
const brr = [1,2,3,4,5].fill(0,1,3); // [1, 0, 0, 4, 5]

26.copyWithin() 方法:从数组的指定位置拷贝元素到数组的另一个指定位置中

Array.copyWithin(target, start, end)
target 复制到指定目标下标位置  把start和end中复制出来的元素从该位置粘贴进去 原来的值将会被覆盖
start 可选 元素复制的起始下标位置
end 可选 停止复制的下标位置,默认数组的长度,如果为负值表示倒数

var arr = [1,2,3,4,5,6,7,8,9,10]

arr.copyWithin(1,3,7) 
console.log(arr10) // [1, 4, 5, 6,  7, 6, 7, 8, 9, 10]