js:Array对象常用方法介绍

phpmatt 发布于2019-08-23 12:54 / 298人阅读

摘要：今天就来梳理一下常用的数组方法基础几种基础的就简单介绍一下创建数组括号可以传参，指定数组长度。返回值对数组的引用。如果数组是空的，那么方法将不进行任何操作，返回值。注用于字符串操作时，会调用这一方法将数组自动转换成字符串。

前言

在js中，数组作为一个特殊的对象。是我们常用的数据格式。今天就来梳理一下常用的数组方法.

1.基础

几种基础的就简单介绍一下:
创建数组

var arr1 = new Array();  //括号可以传参，指定数组长度。目前arr1.length是0
var arr2 = new Array(3);//arr2.length是3
var arr3 = new Array(1,2,3,4);  //当传多个参数时，js会把这些参数作为数组的初始值。
console.log(arr3);  // [1,2,3,4]

new Array()创建数组有一个需要注意的地方。只传一个参数时，如果这个值是非数字。会被当做数组的第一个参数，生成一个长度为1的数组。如果是数字，就会创建一个这个数字长度的空数组。

但其实上面的创建方法不常用。我们更习惯这么写

var arr = [];
var arr = [0,1,2,3]

基础方法

arr.length  //数组的长度
arr[1] //数组下标是1的值。数组的下标从0开始计数
arr.push(值) //往数组添加元素

2.其它方法

var arr = ["element1","element2","element3","element4"];     //下面所有案列都是用的这个数组

//获取指定元素的下标
var index = arr. indexOf(”element2“）;   // 1

（1）splice(index,number,item1,.....,itemX)从数组中添加/删除元素，然后返回被删除的元素。

参数	描述
index	必需。整数。添加/删除项目的位置，使用负数可从数组结尾处规定位置。
number	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

来看实际例子

//删除
let getReturn = arr.splice(1,1);
console.log(getReturn);  // ["element2"]
console.log(arr);    //["element1",","element3","element4"]

//添加
let getReturn = arr.splice(arr.length,0,"element5","element6");
console.log(getReturn);  //[]
console.log(arr);    //["element1","element2","element3","element4","element5","element6"]

（2）pop()方法,删除数组最后一位，返回被删除的元素。

let getReturn = arr.pop();
console.log(getReturn);    //element4
console.log(arr);    //["element1","element2","element3"]

（3）slice(start,end) 从已有的数组中返回选定的元素。

参数	描述
start	必需。整数。添加/删除项目的位置，使用负数可从数组结尾处规定位置。
end	必需。要删除的项目数量。如果设置为 0，则不会删除项目。

注意：请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。

let getReturn = arr.slice(1,3);
console.log(getReturn);    //["element2", "element3"]
console.log(arr);    //["element1", "element2", "element3", "element4"]

另外，slice()方法也可以实现深拷贝哦。

let copyArr = arr.slice();    //不传值
copyArr[0] = "newElement";
console.log(arr);        //["element1", "element2", "element3", "element4"]
console.log(copyArr);    //["newElement", "element2", "element3", "element4"]

（4）join(separator)把数组中的所有元素放入一个字符串。

separator:可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

let getReturn = arr.join();
console.log(getReturn);    //element1,element2,element3,element4
console.log(arr);    //["element1", "element2", "element3", "element4"]

（5）concat(array1,array2,......,arrayX) 方法用于连接两个或多个数组。

arrayX:必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

//传数组
let getReturn = arr.concat(["element5","element6"],["element7"]);
console.log(getReturn);    //["element1", "element2", "element3", "element4", "element5", "element6", "element7"]
console.log(arr);    // ["element1", "element2", "element3", "element4"]

//传元素
let getReturn = arr.concat("element5","element6");
console.log(getReturn);    //["element1", "element2", "element3", "element4", "element5", "element6"]
console.log(arr);    //["element1", "element2", "element3", "element4"]

（6）sort(sortby) 方法用于对数组的元素进行排序。

sortby:可选。规定排序顺序。必须是函数。
返回值:对数组的引用。请注意，数组在原数组上进行排序，不生成新数组。
比较规则:是按照字符编码进行排序，所以可能只有排出来的不是你想要的结果，得传参数解决

let newArr = [3,5,2,4,1];

let getReturn = newArr.sort();
console.log(getReturn);      //[1, 2, 3, 4, 5]
console.log(newArr);    //[1, 2, 3, 4, 5]

再看一个不如我们所愿的例子

let newArr = [1000,88,93,6,34];
let getReturn = newArr.sort();
console.log(getReturn);    //[1000, 34, 6, 88, 93]
console.log(newArr);    // [1000, 34, 6, 88, 93]

//要实现大小排序，我们需要传参数解决
function sortNumber(a,b){    //定义函数
    return a - b
}
let getReturn = newArr.sort(sortNumber);
console.log(getReturn);    //[6, 34, 88, 93, 1000]
console.log(newArr);    //[6, 34, 88, 93, 1000]

（7）shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。

  let getReturn = arr.shift();
  console.log(getReturn);    //element1
  console.log(arr);    //["element2","element3","element4"]

（8）unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

arr.unshift(newelement1,newelement2,....,newelementX)

  let getReturn = arr.unshift("element-1","element0");
  console.log(getReturn);    //6
  console.log(arr);    //["element-1","element0","element1","element2","element3","element4"]

（9）toString() 方法可把数组转换为字符串，并返回结果。

arr.unshift(newelement1,newelement2,....,newelementX)

  let getReturn = arr.toString();
  console.log(getReturn,typeof getReturn);    //element1,element2,element3,element4 string
  console.log(arr,typeof arr);    //["element1", "element2", "element3", "element4"] "object"

注：用于字符串操作时，JavaScript 会调用这一方法将数组自动转换成字符串。例如:

let string = arr+"123";
console.log(string);    //element1,element2,element3,element4123

（10）reverse() 方法用于颠倒数组中元素的顺序。

该方法会改变原来的数组，而不会创建新的数组。

  let getReturn = arr.reverse();
  console.log(getReturn);    //["element4", "element3", "element2", "element1"]
  console.log(arr);    //["element4", "element3", "element2", "element1"]

3.还有

此外，还有valueOf()，toLocaleString()，toSource()方法。但是从来没用过，也没想到什么使用场景，就不多带带讲了。

服务器托管 GPU服务器 ecs实例常用端口介绍对象属性介绍方法介绍 self对象介绍

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99084.html

JS Array的那些方法

摘要：的一些方法在实际中很常用，这里整理记录下来，一是为了常常回顾，二也是方便大家返回一个新的，每个元素为调用的结果语法举例返回一个符合条件的元素数组语法举例返回一个，判断是否有元素是否符合条件语法举例返回一个，判断每个元素是否符合条件语法举例没 JS Array的一些方法在实际中很常用，这里整理记录下来，一是为了常常回顾，二也是方便大家 Map map(): 返回一个新的Array，每个元...

cloud 2019-08-23 11:54 评论0 收藏0
阿里巴巴 2015 暑期实习前端笔试题

摘要：前言上周二在阿里暑期实习的前端笔试那里打了个酱油。当不存在时，将会创建它。要求单击该元素后，提示用户用户名不能为空。要求内边框宽度为，无外边框。要求在前端实现一个根据一批员工，通过查询员工信息的功能。其实是考察的内容。前言上周二在阿里暑期实习的前端笔试那里打了个酱油。题目说实话都很基础，但如果之前没有专门写过类似的东西，现想现写的话，一个小时压力还是有些大的（当然了，大神除外）。...

zhangxiangliang 2019-08-28 18:08 评论0 收藏0
阿里巴巴 2015 暑期实习前端笔试题

摘要：前言上周二在阿里暑期实习的前端笔试那里打了个酱油。当不存在时，将会创建它。要求单击该元素后，提示用户用户名不能为空。要求内边框宽度为，无外边框。要求在前端实现一个根据一批员工，通过查询员工信息的功能。其实是考察的内容。前言上周二在阿里暑期实习的前端笔试那里打了个酱油。题目说实话都很基础，但如果之前没有专门写过类似的东西，现想现写的话，一个小时压力还是有些大的（当然了，大神除外）。...

aboutU 2019-08-21 10:29 评论0 收藏0
jsweet中英文文档，java代码转js代码

摘要：例如允许的对象默认情况下，通过使用内置宏将核心对象和方法映射到。例如这被转换为以下代码类可以定义构造函数，具有超类，并且可以像在中一样实例化。因此，它不违反原则。用于声明该对象可以用作构造函数。这个工具可以将java代码转为js代码，从而可以使用java编写前端代码如果排版看着费劲可以下载下方html，打开html后使用google翻译 JSweet语言规范版本：2.x（快照）作...

Near_Li 2019-08-23 18:37 评论0 收藏0
jsweet中英文文档，java代码转js代码

摘要：例如允许的对象默认情况下，通过使用内置宏将核心对象和方法映射到。例如这被转换为以下代码类可以定义构造函数，具有超类，并且可以像在中一样实例化。因此，它不违反原则。用于声明该对象可以用作构造函数。这个工具可以将java代码转为js代码，从而可以使用java编写前端代码如果排版看着费劲可以下载下方html，打开html后使用google翻译 JSweet语言规范版本：2.x（快照）作...

Mr_houzi 2019-08-16 18:32 评论0 收藏0