数组对象常用方法

作者: 不染事非 | 来源:发表于2019-08-15 10:26 被阅读0次

Array数组循环全解1
# 数组常用属性和方法总结
数组去重
js 常用方法总结
JS数组常用方法大全
数组对象常用方法
js与ES6数组常用方法区别
数组定时器
JavaScript 基础
前端数组

push 向数组的末尾添加一个或更多元素，并返回新的长度。
unshift 向数组的开头添加一个或更多元素，并返回新的长度。
pop 删除数组的最后一个元素并返回删除的元素。
shift 删除并返回数组的第一个元素(知道即可,用得很少)。
reverse 反转数组的元素顺序。
find 返回符合传入测试（函数）条件的数组元素。
findIndex 返回符合传入测试（函数）条件的数组元素索引。
slice 选取数组的的一部分，并返回一个新数组。
splice 从数组中添加或删除元素。
join 把数组的所有元素放入一个字符串。
forEach 迭代数组。
map 通过指定函数处理数组的每个元素，并返回处理后的数组。
filter 检测数值元素，并返回符合条件所有元素的数组。
indexOf 搜索数组中的元素，并返回它所在的位置。
includes 判断一个数组是否包含一个指定的值
isArray 判断对象是否为数组。
sort 数组排序

具体例子

push 从后面添加一个成员

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

unshift 从数组前面添加一个成员

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

pop 删除数组的最后一个成员

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

shift 删除数组的第一个成员

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

reverse 反转数组的元素顺序

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

find 查找符合条件的数组成员

 var arr = [
        { name: '邓紫棋', age: 20 },
        { name: '张碧晨', age: 30 },
        { name: '张靓颖', age: 25 },
        { name: '薛之谦', age: 28 }
    ]
    // js5写法
    var person = arr.find(function(item) {
        return item.name === '薛之谦';
    })

    // es6写法
    var person = arr.find(item => {
        return item.name === '薛之谦';
    })
    console.log(person);  // { name: "薛之谦", age: 28 }

findIndex 返回符合条件的成员在数组中的位置(下标)

    var arr = [
        { name: '邓紫棋', age: 20 },
        { name: '张碧晨', age: 30 },
        { name: '张靓颖', age: 25 },
        { name: '薛之谦', age: 28 },
    ]
    // js5
   var index = arr.findIndex(function(item) {
        return item.name === '张靓颖';
    })

    // es6
    var index = arr.findIndex(item => {
        return item.name === '张靓颖';
    })
    console.log(index); // 2

slice 选取数组的的一部分，并返回一个新数组。

var arr = [1,2,3,4,5];
var newArr1 = arr.slice(2);  // 从位置2(包含)开始截取到最后
console.log(newArr1); // [3,4,5]
var newArr2 = arr.slice(2,4); //  从位置2(包含)开始截取到位置4(不包含)
console.log(newArr2); // [3,4]

splice 删除或添加元素

// 例1
var arr = [0,1,2,3,4,5];
arr.splice(2,1);  // 从下标为2的元素开始,删除一个元素
console.log(arr);  // [0,1,3,4,5];
// 例2
var arr = [0,1,2,3,4,5];
arr.splice(2,2);  // 从下标为2的元素开始,删除2个元素
console.log(arr);  // [0,1,4,5];
// 例3
var arr = [0,1,2,3,4,5];
arr.splice(2,0,'我是新成员');  // 在下标为2地方添加一个新成员
console.log(arr);  // [0, 1, "我是新成员", 2, 3, 4, 5]
// 例4
var arr = [0,1,2,3,4,5];
arr.splice(2,1,'我是新成员');  // 用新成员替换下标为2的成员
console.log(arr);  // [0, 1, "我是新成员", 3, 4, 5]

join 把数组变成字符串

var arr = ['a','b','c'];
var str = arr.join('-');
console.log(str);  // "a-b-c"
var str2 = arr.join(',');
console.log(str2); // "a,b,c"

forEach 迭代数组(遍历数组)

var sum = 0;
var arr = [
    {name: '小王',age: 10},
    {name: '小李',age: 20},
    {name: '小林',age: 15},
    {name: '小明',age: 25}
]
// 计算这几个同学的总年龄
var sum = 0;
arr.forEach(item=> {
    sum += item.age;
})
console.log(sum);

map 通过指定函数处理数组的每个元素，并返回处理后的数组。

<script type="text/javascript">
    var arr = [
    {
        name: '张三',
        age:28
    },
    {
        name: '李四',
        age:28
    },
    {
        name: '陈武',
        age:28
    }
    ];
    // js5
        var newArr = arr.map(function(item){
        return {
            username: item.name,
            age: item.age+10
        };
    })
    console.log(newArr);

        // es6
    var newArr = arr.map(item=>{
        return {
            username: item.name,
            age: item.age+10
        };
    })
    console.log(newArr);
</script>

filter 过滤

var arr = [
    {name: '小王',age: 10},
    {name: '小李',age: 20},
    {name: '小林',age: 15},
    {name: '小明',age: 25}
];
// 找出年龄大于或等于20岁的同学
// js5
var newArr = arr.filter(function(item){
    return item.age >= 20;
});
console.log(newArr);  //  [{小明}, {小李}]
// es6
var newArr = arr.filter(item=> {
    return item.age >= 20;
});
console.log(newArr);  //  [{小明}, {小李}]

indexOf 返回数组中某个成员的位置

var arr = ['a','b','c','d'];
var index = arr.indexOf('c'); 
console.log(index); // 2
var index2= arr.indexOf('f');
console.log(index2); // 找不到返回-1

includes 判断一个数组是否包含一个指定的值

var arr = ['a','b','c','d'];
var b1 = arr.includes ('c'); 
console.log(b1); // true
var b2 = arr.includes ('f');
console.log(b2); // false

isArray 判断一个对象是不是数组

// typeof 一个数组的结果是object,要判断一个变量是不是数组可以用isArray
var obj = {
  a: 2
}
Array.isArray(obj); // false
var arr = [1,2,3];
Array.isArray(arr); // true

sort 数组排序

// 例1
var arr = [1,6,3,4];
arr.sort();
console.log(arr);  // [1, 3, 4, 6]

// 例2 通过排序函数
var arr = [10,5,40,25,1000,1]
 // 升序排列
// js5
arr.sort(function(a,b){
   return a-b;
})
// es6
arr.sort((a,b)=> {
   return a-b;
})
console.log(arr); //  [1, 5, 10, 25, 40, 1000]
// 降序排列
// js5
arr.sort(function(a,b) {
    // 升序排列
    return b-a;
})
console.log(arr); // [1000, 40, 25, 10, 5, 1]
// es6
arr.sort((a,b)=> {
    // 升序排列
    return b-a;
})
console.log(arr); // [1000, 40, 25, 10, 5, 1]

数组排序比较函数原理解析

栈操作

栈操作的原则是先进后出,我们可以使用数组的push和pop方法来实现栈操作

var arr = [];
arr.push('a');    
console.log(arr); 
arr.push('b');  
console.log(arr); 
arr.push('c');  
console.log(arr);  ['a','b','c']

var m1 = arr.pop();  // 删除最后一个
console.log(m1);   // c
var m2 = arr.pop();  
console.log(m2);   // b
var m1 = arr.pop();  
console.log(m3);   // a

在上面的例子里
push方法我们可以称它为入栈的方法,
pop方法我们可以称它出栈的方法,
这两者我们就统称栈方法.

队列操作

队列操作的原则是先进先出,跟排队买东西一个道理,
我们可以使用push(入队)和shift(出队)方法实现队列操作

var arr = [];
arr.push('a');    
console.log(arr); 
arr.push('b');  
console.log(arr); 
arr.push('c');  
console.log(arr);  ['a','b','c']

var m1 = arr.shift();  
console.log(m1);   // a
var m2 = arr.shift();  
console.log(m2);   // b
var m1 = arr.shift();  
console.log(m3);   //