美文网首页
JS数组的方法及详细使用

JS数组的方法及详细使用

作者: 凌晨4点的简书 | 来源:发表于2019-06-08 23:33 被阅读0次

JS数组的方法极多,我们一一尝试方法的使用

pop() 删除一个数组中的最后的一个元素

定义: pop() 方法删除一个数组中的最后的一个元素,并且返回这个元素。

let a = [1,2,3];
let item = a.pop(); // 3
console.log(a); // [1,2]

shift() 删除数组的第一个元素

定义: shift()方法删除数组的第一个元素,并返回这个元素。

let a = [1,2,3];
let item = a.shift(); // 1
console.log(a); // [2,3]

push() 向数组的末尾添加元素

定义:push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

参数: item1, item2, …, itemX ,要添加到数组末尾的元素

let a = [1,2,3];
let item = a.push('末尾'); // 4
console.log(a); // [1,2,3,'末尾']

unshift()

定义:unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

参数: item1, item2, …, itemX ,要添加到数组开头的元素

let a = [1,2,3];
let item = a.unshift('开头'); // 4
console.log(a); // ['开头',1,2,3]

reverse() 颠倒数组中元素的顺序

定义: reverse() 方法用于颠倒数组中元素的顺序。

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

splice() 添加/删除数组元素

定义: splice() 方法向/从数组中添加/删除,然后返回被删除的
index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany:必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, …, itemX: 可选。向数组添加的新项目。
返回值: 如果有元素被删除,返回包含被删除项目的新数组。
只删除

let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0, 3); // [1,2,3]
console.log(a); // [4,5,6,7]
// 从数组下标0开始,删除3个元素
let item = a.splice(-1, 3); // [7]
// 从最后一个元素开始删除3个元素,因为最后一个元素,所以只删除了7

删除并添加

let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0,3,'添加'); // [1,2,3]
console.log(a); // ['添加',4,5,6,7]
// 从数组下标0开始,删除3个元素,并添加元素'添加'
 let b = [1, 2, 3, 4, 5, 6, 7];
let item = b.splice(-2,3,'添加1','添加2'); // [6,7]
console.log(b); // [1,2,3,4,5,'添加1','添加2']
// 从数组最后第二个元素开始,删除3个元素,并添加两个元素'添加1'、'添加2'

不删除只添加:

let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0,0,'添加1','添加2'); // [] 没有删除元素,返回空数组
console.log(a); // ['添加1','添加2',1,2,3,4,5,6,7]
let b = [1, 2, 3, 4, 5, 6, 7];
let item = b.splice(-1,0,'添加1','添加2'); // [] 没有删除元素,返回空数组
console.log(b); // [1,2,3,4,5,6,'添加1','添加2',7] 在最后一个元素的前面添加两个元素

从上述三个栗子可以得出:

数组如果元素不够,会删除到最后一个元素为止
操作的元素,包括开始的那个元素
可以添加很多个元素
添加是在开始的元素前面添加的

sort() 数组排序
定义: sort()方法对数组元素进行排序,并返回这个数组。
如果元素不是字符串的话,会调用toString()方法将元素转化为字符串

function sort(a,b){
  return a-b;    //正序,从小到大
  return b-a;    //倒叙,从大到小
}

join() 数组转字符串

定义: join() 方法用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串,返回生成的字符串。

let a= ['hello','world'];
let str=a.join(); // 'hello,world'
let str2=a.join('+'); // 'hello+world'

toString() 数组转字符串
该方法的效果和join方法一样,都是用于数组转字符串的,

let b= [ 'toString','演示'].toString(); // toString,演示
let a= ['调用toString','连接在我后面']+'啦啦啦'; // 调用toString,连接在我后面啦啦啦

slice()
定义: 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象,且原数组不会被修改
语法:array.slice(begin, end);

let a= ['hello','world'];
let b=a.slice(0,1); // ['hello']
a[0]='改变原数组';
console.log(a,b); // ['改变原数组','world'] ['hello']
b[0]='改变拷贝的数组';
 console.log(a,b); // ['改变原数组','world'] ['改变拷贝的数组']

cancat
定义: 方法用于合并两个或多个数组,返回一个新数组。

let a = [1, 2, 3];
 let b = [4, 5, 6];
 //连接两个数组
 let newVal=a.concat(b); // [1,2,3,4,5,6]
 // 连接三个数组
 let c = [7, 8, 9]
 let newVal2 = a.concat(b, c); // [1,2,3,4,5,6,7,8,9]
 // 添加元素
 let newVal3 = a.concat('添加元素',b, c,'再加一个'); 
 // [1,2,3,"添加元素",4,5,6,7,8,9,"再加一个"]
let d = [1,2 ];
let f = [3,[4]];
let newVal4 = d.concat(f); // [1,2,3,[4]]

相关文章

  • JS数组的方法及详细使用

    JS数组的方法极多,我们一一尝试方法的使用 pop() 删除一个数组中的最后的一个元素 定义: pop() 方法删...

  • [转载]数组的详细操作

    原文:【干货】js 数组详细操作方法及解析合集 创建数组 直接创建 Array.of() 返回由所有参数值组成的数...

  • js基础了解

    js数组常用遍历方法使用: js数组常用操作方法使用: 基本逻辑运算: 基本字符串操作方法:

  • JS------数组 reduce() 方法详解及高级技巧

    JS进阶篇--JS数组reduce()方法详解及高级技巧

  • js 常用方法总结

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

  • 数组进阶

    JS数组奇巧淫技 数组进阶方法~ 数组使用方法比较多。什么时候使用什么方法,用对方法,不用对很大的原因就是数组方法...

  • js中数组forEach方法的使用及实现

    js中数组forEach方法的使用及实现 描述 forEach() 方法按升序为数组中含有效值的每一项执行一次 c...

  • js与ES6数组常用方法区别

    js数组 数组的概念及其定义方式字面量的形式 构造函数 数组的常用方法(依赖于数组使用)获取方法:对象.方法( )...

  • js 标准二维数组变一维数组的方法

    js 标准二维数组变一维数组的方法 reduce()使用方法 : https://...

  • 【转】JS数组方法

    原文链接:JS数组方法总览及遍历方法耗时统计 01、push(value)将value添加到数组的最后,返回数组长...

网友评论

      本文标题:JS数组的方法及详细使用

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