Array对象的常用方法

数组对象的常用方法

一、检验数组

instanceof

var arr = []; 
arr instanceof Array; //=> true;

Object.prototype.toString.call()

var arr = []; 
Object.prototype.toString.call(arr) //=> "[object Array]"

Array.isArray(arr)

var arr = []; 
Array.isArray(arr); //=> true;

二、转换方法

toString()

• 把数组转字符串，逗号分隔每一项。不会改变原数组，返回值是String类型

var arr = ['a','b','hhh']; 
arr.toString(); //=>"a,b,hhh"

valueOf()

• 不会改变原数组，返回数组对象本身

var arr = ['a','b','hhh']; 
arr.valueOf(); //=>["a", "b", "hhh"]

join()

• 把数组转字符串，使用分隔符分隔每一项。不会改变原数组，返回值是String类型

var arr = ['a','b','hhh']; 
arr.join(); //=>"a,b,hhh"
arr.join('-'); //=>"a-b-hhh"

Array.from()

• 将一个类似数组或可迭代对象，转为一个新的数组。浅拷贝

Array.from('foo');// [ "f", "o", "o" ]

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
Array.from(arrayLike);// ['a', 'b', 'c']

Array.from([1, 2, 3], x => x + x);// [2, 4, 6]

const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);// [ "foo", "bar", "baz" ]

三、栈方法

push()、pop()

• push()：值追加到数组末尾。会改变原数组，返回值是数组的长度。
• pop()：移除数组中最后一个元素，减少length值。会改变原数组，返回值是移除的值。

var arr = ['a','b','hhh']; 
var a=arr.push('123','456'); //a=5
console.log(arr);// ["a", "b", "hhh", "123", "456"]
var b=arr.pop();  //b="456"
console.log(arr); //["a", "b", "hhh", "123"]

四、队列方法

unshift()、shift()

• unshift()：值追加到数组最前面。会改变原数组，返回值是数组的长度。
• shift()：移除数组中第一个元素，减少length值。会改变原数组，返回值是移除的值。

var arr = ['a','b','hhh']; 
var a=arr.unshift('123','456'); //a=5
console.log(arr);// [  "123","456","a", "b", "hhh"]
var b=arr.shift();  //b="123"
console.log(arr); //["456","a", "b", "hhh"]

五、排序方法

reverse()

• 反转数组项的顺序。会改变原数组，返回值是新数组

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

sort()

• 默认升序排列。会先成转字符串，后排序。会改变原数组，返回值是原数组

var arr = [1, 'a', 12,4, 'hh'];
arr.sort();
console.log(arr);//[1, 12, 4, "a", "hh"]

//4比12小不合理。
/*sort()可接收一个 比较函数 作为参数。
  比较函数(a,b):a在b前=>-1;a在b后1。
*/
//升序
function compareAsc(a,b)    {
    if (a < b) {
        return -1;
    } else if (a > b) {
        return 1;
    } else {
        return 0;
    }
}
//降序序
function compareDes(a,b)    {
    if (a < b) {
        return 1;
    } else if (a > b) {
        return -1;
    } else {
        return 0;
    }
}
arr.sort(compareAsc);
console.log(arr.sort(compareAsc););//[1, 4, 12, "a", "hh"]
arr.sort(compareDes);
console.log(arr);//[12, 4, 1, "hh", "a"]

六、操作方法

concat()

• 用于连接两个或多个数组。不会改变原数组，返回值是新数组。

var arr = ['a','b']; 
arr.concat('hhh',[1,2]); //=> ["a", "b", "hhh", 1, 2]

slice()

• 从原数组中截取一个新的数组。不会改变原数组，返回值是新数组。

var arr = ["a", "b", "c", "d", "e"];
arr.slice(1);//["b", "c", "d", "e"];
arr.slice(1,2);//["b"]
//负数+数组长度,来确定相应的位置。NaN=>0
arr.slice(-1,-2);//=>arr.slice(-1+5,-2+5);=>arr.slice(4,3)=>[]
arr.slice(-2,-1);//=>arr.slice(-2+5,-1+5);=>arr.slice(3,4)=>["d"]

splice()

• splice(开始的位置，要删除的个数，要替换的值)：删除、插入、替换当前数组的某些项。 会改变原数组，返回值是替换或删除项

var arr = ["a", "b", "c", "d", "e"];
//删除,c
arr.splice(2,1)//["c"]
console.log(arr)//["a", "b", "d", "e"]

var arr = ["a", "b", "c", "d", "e"];
//插入,c前插入f,g
arr.splice(2,0,'f','g')//[]
console.log(arr)//["a", "b", "f", "g", "c", "d", "e"]

var arr = ["a", "b", "c", "d", "e"];
//替换,c,d替换f,g
arr.splice(2,2,'f','g')//["c","d"]
console.log(arr)//["a", "b", "f", "g", "e"]

七、位置方法

indexOf()、lastIndexOf()

• indexOf(查找的项，起点位置): 开头向后查找。找到返回位置，没找到返回-1
• lastIndexOf(查找的项，起点位置)：末尾开始向前查找。。找到返回位置，没找到返回-1

var arr = ["a", "b", "c", "d", "e"];
arr.indexOf('b',1)//1
arr.indexOf('b',2)//-1

arr.lastIndexOf('b',1)//1
arr.lastIndexOf('b',0)//-1

八、迭代方法

• 回调函数参数：
  • currentValue，index，arr
  • 当前元素的值(必)，当前元素的索引值，当前元素属于的数组对象
• 不会改变原数组

map()

• 映射 ，对数组元素一个一个进行处理。返回值是新数组。

let arr = [12, 5, 8]
let result = arr.map(function (item) {
    return item*2
})
console.log(result)//[24, 10, 16]

let result2 = arr.map(item=>item*2) // 简写
console.log(result2)//[24, 10, 16]

reduce()

• 累加。最终返回一个值。
• 回调元素参数：
  • total，currentValue，index，arr
  • 初始值(或者计算结束后的返回值,必)，当前元素的值(必)，当前元素的索引值，当前元素属于的数组对象
• 注：都不会对空数组进行操作，使用前要判空。

var arr = [1, 3, 5, 7]
var result = arr.reduce(function (tmp, item, index) {
    //tmp 上次结果，item当前数，index次数1开始
    console.log(tmp, item, index)
      //1 3 1
      //4 5 2
      //9 7 3
    return tmp + item
})
console.log(result) //16

// 求平均值
var arr = [1, 3, 5, 7]
var result = arr.reduce(function (tmp, item, index) {
    if (index != arr.length - 1) { // 不是最后一次
        return tmp + item
    } else {
        return (tmp + item)/arr.length
    }
})
console.log(result)  //4   

filter()

• 过滤器，保留为true的。返回值是新数组

let arr = [12, 4, 8, 9]
let result = arr.filter(function (item) {
    return item % 3 === 0
})
console.log(result)//[12,9]

let result = arr.filter(item => item % 3 === 0)//简写
console.log(result)//[12,9]

every()

• 检测数组所有元素是否都符合指定条件。返回值是布尔值。
• 都满足条件为true,有一个不满足为false----> 一假即假

let arr = [12, 4, 8, 9]
let result = arr.every(item => item % 3 === 0)//简写
console.log(result)//false

some()

• 检测数组所有元素是否存在符合指定条件。返回值是布尔值。
• 只要有一个满足条件就为true------> 一真即真

let arr = [12, 4, 8, 9]
let result = arr.some(item => item % 3 === 0)//简写
console.log(result)//true

forEach()

• 循环，对数组中的每一项运行给定函数。没有返回值。

let arr = [12, 4, 8, 9]
let result = arr.forEach(item => console.log(item))
//12
//4
//8
//9

find()

• 查找第一个符合条件的数组元素。返回符合条件的元素；没有符合条件的元素，返回值是undefined。

const arr=[1,2,3,4,5,6];
let result=arr.find(item=>item>4);
console.log(result);// 5

findIndex()

• 查找第一个符合条件的数组元素。返回符合条件的元素的索引值；没有符合条件的元素，返回值是-1。

const arr=[1,2,3,4,5,6];
let result=arr.findIndex(item=>item>4);
console.log(result);//4

九、清空数组

let arr = [12, 4, 8, 9]
// 方式1 推荐 
arr = [];
// 方式2 
arr.length = 0;
// 方式3
arr.splice(0, arr.length);

十、新增方法

十一、响应式方法

• push()/pop()
• unshift()/shift()
• splice()
• sort
• reverse