美文网首页
js数组(Array对象)常用方法总结

js数组(Array对象)常用方法总结

作者: 拾实 | 来源:发表于2019-05-09 21:17 被阅读0次

接下来会涉及到的方法名称:

  • isArray()
  • push() pop() shift() unshift()
  • concat()
  • indexOf()
  • join() split()
  • reverse()
  • sort()
  • slice()
  • splice()
  • every() filter() forEach() map() some()

下面逐一讲解:

isArray()

判断一个对象是否为数组,参数为需判断的对象。是的话返回true,否则返回false

Array.isArray('test')
//false
Array.isArray(['t','e','s','t'])
//true
var test = [1,2,8];
Array.isArray(test)
//true

push() pop() shift() unshift()

push()

参数为一个或多个元素,调用后将此参数追加至数组末尾,并返回数组长度。

var arr1 = [1,2,3,4];
arr1.push(5)
//5
arr1.push(5)
//6
arr1.push(6,6,6)
//9
arr1.push([7,8,9])
//10
arr1
//(10) [1, 2, 3, 4, 5, 5, 6, 6, 6, Array(3)]

pop()

删除数组中的最后一个元素,并将该元素作为返回值返回。

var arr2 = [1,3,5,7,10];
arr2.pop()
//10
arr2
//(4) [1, 3, 5, 7]

shift()

删除数组中的第一个元素,并将该元素作为返回值返回。

var arr3 = [1, 2, 4, 6, 8];
arr3.shift()
//1
arr3
//(4) [2, 4, 6, 8]

unshift()

参数为一个或多个元素,调用后将此参数追加至数组开始,并返回数组长度。

var arr4 = ['a','b','c','d'];
arr4.unshift(555);
//5
arr4.unshift('world')
//6
arr4
//(6) ["world", 555, "a", "b", "c", "d"]

concat()

连接两个或多个数组,返回连接后的数组。(不会改变原有数组)

var arr1 = [1,5,9];
var arr2 = ["c",'h','i'];
arr1.concat(arr2)
//(6) [1, 5, 9, "c", "h", "i"]
arr2.concat(arr1,'hello','w');
//(8) ["c", "h", "i", 1, 5, 9, "hello", "w"]

indexOf()

查找元素在数组中出现的下标。第一个参数为元素值,第二个参数指定开始检索的位置(可选),返回第一次找到该元素的下标,若查找失败,返回-1。

var arr1 = [3,4,3,5,6];
arr1.indexOf(3)
//0
arr1.indexOf(3, 0)
//0
arr1.indexOf(3, 1)
//2
arr1.indexOf(3, 5)
//-1
arr1.indexOf(7)
//-1

若想从后面开始查找,使用方法lastIndexOf()

join()、split()

join()

将数组内容拼接成一个字符串并返回,默认以','分隔,指定参数后则以参数来分隔。

var arr1 = ['hel','lo','','w','orld'];
arr1.join()
//"hel,lo,,w,orld"
arr1.join('');
//"helloworld"
arr1.join('==');
//"hel==lo====w==orld"

var arr2 = [55,4,89];
arr2.join();
//"55,4,89"

split()

将字符串按参数分割成一个个元素,返回由这些元素组成的数组。

var str1 = "helloworld";
str1.split();
//["helloworld"]
str1.split('l');
//(4) ["he", "", "owor", "d"]
str1.split('o');
//(3) ["hell", "w", "rld"]

reverse()

颠倒数组中元素的顺序并返回。(改变原来的数组)

var arr1 = ['e','s','i','h','c'];
arr1.reverse();
//(5) ["c", "h", "i", "s", "e"]
arr1
//(5) ["c", "h", "i", "s", "e"]

sort()

对数组元素进行排序(根据编码顺序,数组内容会改变)可以传入一个自定义的函数来指定比较方式。

var arr1 = [1000, 5, 20, 1, 10];
arr1.sort()
//(5) [1, 10, 1000, 20, 5] 并不是按数值的大小排序
arr1
//(5) [1, 10, 1000, 20, 5]
arr2 = ["asdd","qws,","sqwe","mlk"];
//(4) ["asdd", "qws,", "sqwe", "mlk"]
arr2.sort();
//(4) ["asdd", "mlk", "qws,", "sqwe"]

自定义方式的写法:

  • 传入两个参数a,b。
  • a < b:a将排在b之前,返回一个小于0的值。
  • a = b:返回0。
  • a > b:返回一个大于0的值。
var arr2 = [555, 1, 120, 20, 255, 10];

//可以这样写
arr2.sort(function(a,b){
    if(a>b){
        return 1;
    }else if(a==b){
        return 0;
    }else{
        return -1;
    }
});
//或者直接
arr2.sort(function(a, b){
    return a-b;
});
//(6) [1, 10, 20, 120, 255, 555]

//这样写便是从大向小排列
arr2.sort(function(a, b){return b-a});

slice()

返回一个新数组,使用一个参数作为开始下标,数组内容为下标对应元素一直到结尾的元素。第二个参数可以指定结束下标(不包含)。参数可以为负,-x即代表倒数第x个元素。

var arr1 = ["add", "odd", "qwq", "uuu"];
arr1.slice(1);
//(3) ["odd", "qwq", "uuu"]
arr1.slice(1, 2);
//["odd"]
arr1.slice(-2, -1)
//["qwq"]
arr1.slice(-2)
//(2) ["qwq", "uuu"]

splice()

向数组中删除内容。第一个参数指定位置(可以使用负数索引),第二个参数设置要删除的数量,第三个参数可选,向第一个参数所在位置添加。返回被删除的元素。原数组的内容会发生变化。

var arr1 = [158, "emmm", "wor", 666, 233, 666]; 
arr1.splice(1, 1)
//["emmm"]
arr1
//(5) [158, "wor", 666, 233, 666]
arr1.splice(0, 2)
//(2) [158, "wor"]
arr1
//(3) [666, 233, 666]
arr1.splice(0, 1, '999')
//[666]
arr1
//(3) ["999", 233, 666]

map()、 every()、filter()、forEach()、some()

这几个方法都含有两个参数,其第一个参数为一个回调函数(下面的解释以“函数”代替)
关于方法的两个参数:

  • 函数,该函数有包含3个参数
    • cur:当前执行这个函数的元素。
    • index(可选):当前元素的索引值。
    • arr(可选):调用方法的数组对象。
  • 执行回调函数使用的this值(可选)。

下面的示例均只使用函数参数,且只使用了函数的第一个参数。

map()

使数组中的每个元素执行函数,创建并返回一个新数组。

var arr1 = [1,3,5,7,9];
arr1.map(function(cur){
    return 2*cur;
});
//(5) [2, 6, 10, 14, 18]

filter()

使数组中的每个元素执行函数,满足函数条件的元素将作为新数组中的一个元素,返回这个新数组。(过滤作用)

var arr1 = ["a",'asdsad',"p","ser","z"];
arr1.filter(function(cur){
    return cur.length == 1
});
//(3) ["a", "p", "z"]

forEach()

使数组中的每一个元素执行函数。

var arr1 = ['first','second','third'];
arr1.forEach(function(cur){
    console.log(cur);
});
//first
//second
//third

some()

检测数组中是否有元素满足函数条件。只要有一个满足条件即返回true,全部都不满足才返回false。

var arr1 = [111, 15, 25, 66, 789];
arr1.some(function(cur){
    return cur > 100;
});
//true
arr1.some(function(cur){
    return cur < 10;
});
//false

every()

检查数组中的元素是否全部满足函数条件。只有所有元素都满足条件才会返回true,只要有一个元素不满足则会返回false。

var arr1 = [1,3,5,7,8];
arr1.every(function(cur){
    return cur%2 == 0;
});
//false

如有错误,欢迎指正,感激不尽!

相关文章

  • js 常用方法总结

    字符串的常用属性,概览 Array对象的方法; 详细js数组常用方法大全

  • js数组(Array对象)常用方法总结

    接下来会涉及到的方法名称: isArray() push() pop() shift() unshift() co...

  • 数组常用方法

    数组常用方法 一、js数组常用方法: 1、join() Array.join() 方法将数组中所有元素都转换成字...

  • Javascript中数组常用方法总结

    Javascript中数组常用方法总结 创建方式:Array构造函数字面量Array创建数组的静态方法from: ...

  • 数组方法(filter、map、some...)

    数组是我们在js中常常要用到的,但是你真的熟悉数组的方法吗?今天我就总结一下Array对象具有哪些方法。 声明数组...

  • ES5-Array-indexOf/lastIndexOf

    参考文章:Array 对象 js数组的findIndex和indexOf对比 indexOf方法返回给定元素在数组...

  • 数组方法

    内容主要转载于:js数组常用方法总结 - 半指温柔乐 - 博客园 Array是Object的实例,它除了拥有Obj...

  • JS数组 && ES6扩展

    JS数组创建 1.以 Array 对象的语法创建 2.以 字面量 方法创建 JS数组方法 1.添加元素 push(...

  • 前端笔记:JavaScript

    Array对象 Array即我们所说的数组,js中的数组对象不像java中那么严谨,Array是长度自动变化的数组...

  • 数组

    JS-数组 方法: Array.isArray(obj) : 判断对象是否是Array,是返回true,不是返回f...

网友评论

      本文标题:js数组(Array对象)常用方法总结

      本文链接:https://www.haomeiwen.com/subject/rwogoqtx.html