资讯专栏INFORMATION COLUMN

javascript中常用的数组操作方法(是否改变原始数组)

silencezwm / 469人阅读

摘要:方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回。方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回,否则返回。

改变原始数组的操作方法:

push:向数组末尾添加元素,并返回新的长度

pop:删除最后一个并返回删除的元素

unshift:向数组开头添加元素,并返回新的长度

shift:将第一个元素删除并且返回删除元素,空即为undefined

reverse:颠倒数组顺序

sort:对数组排序

splice:删,增,替换数组元素,返回被删除数组,无删除则不返回

不会改变原始数组的操作方法:

concat:连接多个数组,返回新的数组

join:将数组中所有元素以参数作为分隔符放入一个字符

slice:返回选定元素

map(es6):数组映射为新的数组

filter(es6):数组过滤,返回所有通过方法判断后(判断为true时)生成的新数组

forEach:数组遍历,没有返回值

every(es6):对数组中的每一项运行给定函数,如每一项均为true时返回true,否则返回false

some(es6):数组中的的元素运行给定函数,如其中有一项为true时返回true,此时剩余的元素不会再执行检测,如果所以都为false则返回false

find(es6):寻找数组中符合测试方法(函数)条件的第一个元素,并且返回该元素

reduce(es6):方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

indexOf: 方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

includes(es7):方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回true,否则返回false。

使用
// 连接数组
//__concat方法__
var array1 = ["a", "b", "c"];
var array2 = ["d", "e", "f"];
array1.concat(array2); // ["a", "b", "c", "d", "e", "f"]
// __展开运算符方法__
[...array1, ...array2] // ["a", "b", "c", "d", "e", "f"]



//循环
var arr = ["a", "b", "c"];
arr.forEach(function(element, index) {
  console.log(element + "," + index);
});
// a , 0
// b , 1
// c , 2

// 箭头函数写法
arr.forEach((element,index) => console.log(element,index));



//循环映射(map)
var numbers = [1, 5, 10, 15];
let doubles = numbers.map((item, index) => item * 2);
// [2, 10, 20, 30]

// 数组是否元素包含(includes)
let a = [1, 2, 3];
a.includes(2);
// true
a.includes(4);
// false



//查找元素(find)
//查找数组中大于等于15的元素,并且返回第一个元素
var ret = [12, 5, 8, 130, 44].find(function(element) {
    return element >= 15; // 方法需要有返回值,判断得出true或者false,返回为true的元素
  }
);
// 130



// 过滤数组(filter)
// 过滤数组中大于等于10的元素并且返回新数组
var filtered = [12, 5, 8, 130, 44].filter(function(value) {
    return value >= 10; // 方法需要有返回值,判断得出true或者false,返回为true的元素
  }
);
// [12, 130, 44]



// 循环判断(every) 为每个元素都执行
var passed = [12, 5, 8, 130, 44].every(function (element, index, array) {
  return (element >= 10);
});
// false


// 循环判断(some) 遇到返回值为true的就停止执行
var passed = [12, 5, 8, 130, 44].some(function (element, index, array) {
  return (element >= 10);
});
// true



// 数组截取(slice) 不改变原数组
var animals = ["ant", "bison", "camel", "duck", "elephant"];
animals.slice(2)  // ["camel", "duck", "elephant"]  返回数组从下标2开始直到结尾的一个新数组
animals.slice(2, 4)  //["camel", "duck"]  返回数组从下标2到4之间到一个新数组



// 数组减接(splice)  改变原数组
var myFish = ["angel", "clown", "mandarin", "sturgeon"];
myFish.splice(2, 0, "drum"); // ["angel", "clown", "drum", "mandarin", "sturgeon"]    0为删减个数,在索引为2的位置不删减并且插入"drum"
myFish.splice(2, 1); //  ["angel", "clown", "mandarin", "sturgeon"]       从索引为2的位置删除1项(也就是"drum"这一项)



// 使用 lastIndexOf
var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2); // index === 3
var index = array.lastIndexOf(8); // index === -1



// 数组转字符串(join)
let a = ["Wind", "Rain", "Fire"];
a.join() //默认为逗号分隔
// "Wind,Rain,Fire"
a.join("-") // 用 - 分隔
// "Wind-Rain-Fire"



// es6 数组去重
let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3];
let set = new Set(array);
let newarr = Array.from(set);
// newarr === [1, 2, 3, 4, 5]

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

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

相关文章

  • JavaScript:对Object对象一些常用操作总结

    摘要:一可以用作对象的复制可以用作对象的合并注意目标对象自身也会改变。对象四返回一个数组,包括对象自身的不含继承的所有可枚举属性不含属性的键名。该方法返回被冻结的对象。方法判断一个对象是否被冻结。 JavaScript对Object对象的一些常用操作总结。 一、Object.assign() 1.可以用作对象的复制 var obj = { a: 1 }; var copy = Object....

    马龙驹 评论0 收藏0
  • 对象常用方法以及对象拷贝

    摘要:浅拷贝是按位拷贝对象,它会创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。两个对象引用都引用了同一个对象。对于字符串数字及布尔值来说不是或者对象,会拷贝这些值到新的数组里。 1、对象的理解 对象是一个包含相关数据和方法的集合(通常由一些变量和函数组成,我们称之为对象里面的属性和方法) 1.1 对象可以看成是Object对象构造出来的 showImg(https://user...

    xfee 评论0 收藏0
  • javascript数组常用算法解析

    摘要:对数组中的每一个元素都执行一次指定的回调函数,直到回调函数返回,此时返回并不再执行。二改变原数组针对每一个元素执行提供的函数。例如给定返回注意出结果中每个元素出现的次数,应与元素在两个数组中出现的次数一致。 一、不改变原数组,返回新数组(字符串) 1、concat() 连接两个或者多个数组,两边的原始数组都不会变化,返回的是被连接数组的一个副本。 2、join() 把数组中所有的...

    xumenger 评论0 收藏0
  • 【JS进阶】你真掌握变量和类型了吗

    摘要:本文从底层原理到实际应用详细介绍了中的变量和类型相关知识。内存空间又被分为两种,栈内存与堆内存。一个值能作为对象属性的标识符这是该数据类型仅有的目的。 导读 变量和类型是学习JavaScript最先接触到的东西,但是往往看起来最简单的东西往往还隐藏着很多你不了解、或者容易犯错的知识,比如下面几个问题: JavaScript中的变量在内存中的具体存储形式是什么? 0.1+0.2为什...

    fuyi501 评论0 收藏0
  • JavaScript基础

    摘要:基础标识符所谓的标识符就是指变量函数属性的名字,或者函数的参数。原始数组不会被改变。删除或替换现有元素来修改数组并以数组形式返回被修改的内容。否则返回返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回。 Javascript基础 标识符 所谓的标识符,就是指变量、函数、属性的名字,或者函数的参数。标识符主要有以下规则: 首字符必须是字母、下划线_或者美元符$ 其他字符可...

    vspiders 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<