js数组方法(管饱)
有一些数组方法是ECMAScript新增的,一定要注意浏览器的兼容!!
Array对象属性:
属性 | 说明 |
constructor |
返回对创建此对象的函数引用 |
length | 返回集合内的元素的所有长度 |
prototype | 向对象添加属性和方法 |
constructor
const arr = [1, 2, 4, 5, 6, 9, 15]
console.log(arr.constructor) //输出为 ƒ Array() { [native code] }
length
const arr = [1, 2, 4]
console.log(arr.length) //输出为 3
下文的箭头函数的解释为:x => x*1 == function(x){return x*1}
如果是有多个参数则:(x,y) => x*y == function(x,y){return x*y} 。我这只是为了简写,并不代表适用。
Array对象方法:
方法 | 说明 |
shift() | 删除第一个元素,并返回结果。 |
unshift() | 插入元素至第一个元素前面,括号内放入要插入的元素。 |
splice() | 向数组内添加新元素。第一个参数定义添加新元素的位置,以拼接的方式,第二个参数是定义应删除多少个元素 |
slice() | 找出数组内的指定元素。第一个参数定义删除元素的位置,第二个参数是结束位置。 |
pop() | 删除数组内的最后一个元素,并返回结果。 |
push() | 在数组内的末尾添加一个或多个元素,并返回结果。 |
reverse() | 反转数组内的元素顺序,并返回结果。 |
toString() | 把数组转换为字符串并返回结果。注意:S为大写。 |
concat() | 合并(连接)数组创建一个新数组,也可以将括号内的值作为参数合并至当前数组。 |
sort() | 对数组内的元素进行排序。 (排序的依照我还搞不清楚....) |
valueOf() | 返回数组对象的原始值。 |
join() | 把数组内的元素拼成字符串,再以指定的分隔符进行分隔。 |
isArray() | 判断对象是否是一个数组。 |
includes() | 判断数组内是否包含指定的值,可添加多个。 |
lastIndexOf() | 返回指定的元素最后出现的位置。 |
find() | 返回数组内通过条件的第一个元素。注意:用函数判断、如果没有符合条件的元素则返回undefined。 |
indexOf() | 返回指定元素在数组内的位置。 |
copyWithin() | 指定元素位置拷贝到另一个位置。注意:后面的元素会被位移出数组,慎用! |
shift()
const myArray = [3, 1, 5, 2, 6]
console.log(myArray.shift()) //输出为 3
unshift()
const myArray = [3, 1, 5, 2, 6]
console.log(myArray.unshift(1,3,2323)) //输出为 [1, 3, 2323, 3, 1, 5, 2, 6]
splice()
const myArray = [3, 1, 5, 2, 6]
console.log(myArray.splice(1,1,'浮云共我归')) //输出为 [3, "浮云共我归", 5, 2, 6]
slice()
const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr2.slice(2, 4)) //输出为 (2) [3, 4]
pop()
const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr2.pop()) //输出为 9
push()
const arr2 = [1, 2, 3, 4]
console.log(arr2.push('233','333'))
console.log(arr2) //输出为 6 、 (6) [1, 2, 3, 4, "233", "333"]
toString()
const myArray = [3, 1, 5, 2, 6]
console.log(myArray.toString()) //输出为 3,1,5,2,6
concat()
const myArray = [3, 1, 5, 2, 6]
const MyArray = [66,77]
const result = myArray.concat(MyArray)
console.log(result.concat('add')) //输出为 [3, 1, 5, 2, 6, 66, 77, "add"]
sort()
const arr2 = [6, 2, '云', 1, 4, 'a']
const result = arr2.sort((x, y) => {
if (x > y) {
return 1
}
if (x < y) {
return -1
}
return 0
})
console.log(result) //输出为 (6) [1, 2, 4, 6, "a", "云"]
valueOf()
const arr2 = [6, 2, '云', 1]
console.log(arr2.valueOf()) // 输出为 (4) [6, 2, "云", 1]
join() (结合split()方法会有意想不到的结果,而且我发现)
const arr2 = ['浮','云','共','我','归']
console.log(arr2.join('')) // 输出为 浮云共我归
//用上这行arr2.join('').split('') 又变回原样了
//split()里不加值 输出: ["浮云共我归"]
isArray()
const myArray = [3, 1, 5, 2, 6]
console.log(Array.isArray(myArray)) //输出为 true
includes()
const arr2 = ['浮','云','共','我','归']
console.log(arr2.includes('云','浮')) // 输出为 true
lastIndexOf()
const arr2 = ['浮','云','共','我','归']
arr2.shift()
onsole.log(arr2.lastIndexOf('云')) // 输出为 0
find()
const myArray = [3, 1, 5, 2, 6]
const result = myArray.find(x => x > 5)
console.log(result) //输出为 6
indexOf()
const myArray = [3, 1, 5, 2, 6]
console.log(myArray.indexOf(6)) //输出为 4
copyWithin()
const myArray = [1, 2,'云', 3, 4, 5] const result = myArray.copyWithin(2,0)
console.log(result)
//输出为 (6) [1, 2, 1, 2, "云", 3]
Array对象-高阶函数
方法 | 说明 |
filter() 过滤 | 过滤未达成指定条件的元素,并返回结果。注意:不会对空元素进行检测,不会改变原数组 |
reduce() 累加 |
此方法接收一个函数作为累加器,数组中的每个元素从左到右相加,最终计算为一个值。可用于函数的compose。 注意:对空数组不会执行回调函数。 reduceRight()从右往左累加 |
map() 映射 | 返回一个新数组,数组中的元素为调用函数后处理的值。 |
filter()
// 过滤偶数
const arr = [1, 2, 4, 5, 6, 9, 15]
myarr = arr.filter((x) => x % 2 !== 0)
console.log(myarr)
reduce()
//将元素累加至最终全部相加的值,输出结果为42
const Nums = [1, 5, 1, 5, 10, 20]
const total = Nums.reduce((preValue, n) => {
return preValue + n
}, 0)
//后面0表示初始值,正数则在结果值上加,负数反之
map() (这个方法的用法也很多)
const myArray = [1, 2, 3, 4, 5]
console.log(myArray.map((function(x) {
return x + 1
}))) // 输出为 (5) [2, 3, 4, 5, 6]
数组遍历方法
方法 | 说明 |
forEach | 调用数组的每个元素,将元素传递给回调函数。 |
for in | 遍历出数组内的元素索引值。 keys()方法也和这个差不多 |
for of | 遍历出数组内的元素。 |
forEach
const myArray = [1, 2,'云', 3, 4, 5] //element是当前元素,index是元素索引,array是当前元素所属的数组对象
myArray.forEach(function(element, index,array) {
console.log(element,index,array)
}) /* 输出为:1 0 (6) [1, 2, "云", 3, 4, 5]
2 1 (6) [1, 2, "云", 3, 4, 5]
云 2 (6) [1, 2, "云", 3, 4, 5]
3 3 (6) [1, 2, "云", 3, 4, 5]
4 (6) [1, 2, "云", 3, 4, 5]
5 5 (6) [1, 2, "云", 3, 4, 5] */
for of
const myArray = [1, 2,'云', 3, 4, 5] for(result of myArray){
console.log(result)
}
//输出为 1 2 云 3 4 5
for in
const myArray = [1, 2,'云', 3, 4, 5] for(result in myArray){
console.log(result)
}
//输出为 0 1 2 3 4 5
数组的一些常用方法
去重
const myArray = [3, 1, 5, 1, 6]
const result = Array.from(new Set(myArray))
console.log(result) //输出为 [3,1,5,6]
字符串转数组 (数组转字符串可用toString()的方法)
const myArray = '浮云共我归'
const result = Array.from(myArray)
console.log(result) //输出为 ["浮,云,共,我,归"] //如果去掉from 输出为 ["浮云共我归"]
将首字母变为大写,其余小写
const arr = ['adam', 'LISA', 'barT']
const arr2= ['Adam', 'Lisa', 'Bart'] function result(arr) {
return arr.map(function(x) {
x = x.toLowerCase()
//toUpperCase()将元素转化为大写,substring()提取指定下标里的元素后面的字符
x = x[0].toUpperCase() + x.substring(1)
return x
})
}
console.log(result(arr).toString() === arr2.toString()) //输出为 true 转换小写的方法是 toLowperCase()
用map创建键值对集合 && 元素乘与自身
const arr1 = new Map([
['lai', 199],
['quan', 'map'],
['feng', 10]
])
console.log(arr1)
//输出为 Map(3) {"lai" => 199, "quan" => "map", "feng" => 10} const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const result = arr2.map(x => x * x)
console.log(result)
//输出为 (9) [1, 4, 9, 16, 25, 36, 49, 64, 81]
找出数组内最大的数字
const myArray = [1, 2, 3, 4, 5] const result = Math.max(...myArray)
console.log(result)
//输出为 5
//最小值的话换成min即可
去除数组内的空格 缺点是数组内不能包含数字
const myArray = ['a', ' ', null, '', undefined, 'b', 'c',' ']
const result = myArray.filter((z) => z && z.trim())
console.log(result) //输出为 (3) ["a", "b", "c"]
js数组方法(管饱)的更多相关文章
- js 数组方法比较
js 数组方法比较 table th:first-of-type { width: 80px; } table th:nth-of-type(2) { width: 120px; } table th ...
- js数组方法详解
Array对象的方法-25个 /*js数组方法详解 */ /* * 1 concat() 用于连接多个数组或者值-------------- * 2 copyWithin() 方法用于从数组的指定位置 ...
- 转载收藏(js数组方法大全)
js数组方法大全 JavaScript中创建数组有两种方式 (一)使用 Array 构造函数: var arr1 = new Array(); //创建一个空数组var arr2 = new Arra ...
- js数组方法大全(上)
# js数组方法大全(上) 记录一下整理的js数组方法,免得每次要找方法都找不到.图片有点多,注意流量,嘻嘻! 本期分享 join() reverse() sort() concat() slice( ...
- js数组方法大全(下)
# js数组方法大全(下) 记录一下整理的js数组方法,免得每次要找方法都找不到.图片有点多,注意流量,嘻嘻! 本期分享 forEach() map() filer() every() some() ...
- JS数组方法汇总 array数组元素的添加和删除
js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...
- 几个关于js数组方法reduce的经典片段
以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要 ...
- js数组方法详解(最新最全)
数组是js中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响.本文所有的栗子都是在es7环境下测试的,如果有问题欢迎留言交流 ...
- js数组方法解析
js 数组有很多方法,其中有的常用,有的不常用,归纳几个常用的方法,做个总结: 1. 转换方法: 1.1 valueOf():调用这个方法会返回数组本身 <script> var arr ...
随机推荐
- linux 中 eclipse 开发 c/c++ 多线程程序,添加 libpthread.a 库支持
导入头文件 在 linux 中开发多线程程序,在使用到 pthread 系列函数的文件中,需要导入头文件: #include <pthread.h> 链接 libpthread.a 在编译 ...
- 【4】进大厂必须掌握的面试题-Java面试-jdbc
1.什么是JDBC驱动程序? JDBC驱动程序是使Java应用程序与数据库进行交互的软件组件.JDBC驱动程序有4种类型: JDBC-ODBC桥驱动程序 本机API驱动程序(部分为Java驱动程序) ...
- h2database在springboot中的使用
h2为轻量级数据库,使用特别方便,它可以不使用数据库服务器,直接嵌入到java程序中.可以配置持久化,同样也可以不持久化(数据在内存中)进程结束后,数据就释放,用做测试和演示特别方便.自带后台管理,非 ...
- 题解:[COCI2011-2012#5] BLOKOVI
题解:[COCI2011-2012#5] BLOKOVI Description PDF : https://hsin.hr/coci/archive/2011_2012/contest5_tasks ...
- 关于【s】和[t]字符
[s]:当一个具有执行权限的文件设置 [s](SetUID) 权限后,用户执行这个文件时将以文件所有者的身份执行.passwd 命令具有 SetUID 权限,所有者为 root(Linux 中的命令默 ...
- IDEA 简拼输入
1. sout = System.out.println(); 2. soutp = System.out.println(""); 3. soutv = System.out.p ...
- day28 Pyhton 面向对象 继承
1.昨日回顾 类的命名空间 静态属性\动态属性(方法) 对象的命名空间 #对象的属性 #类指针:对象能够通过这个类指针找到类 #静态属性:属于类,多个对象共享这个资源 #尽量用类名来操作静态属性 #对 ...
- vi/vim系统编辑命令使用技巧
01前言 在Linux系统中会有很多的文件信息,这些文件的内容如果需要编辑,就必须借助vi或vim编辑命令. vi是Linux命令行界面下的重要文字编辑器.vim是vi命令的增强版. [语法格式] v ...
- C语言编程丨循环链表实现约瑟夫环!真可谓无所不能的C!
循环链表 把链表的两头连接,使其成为了一个环状链表,通常称为循环链表. 和它名字的表意一样,只需要将表中最后一个结点的指针指向头结点,链表就能成环儿,下图所示. 需要注意的是,虽然循环链表成环 ...
- 【UR #9】App 管理器
UOJ小清新题表 题目内容 UOJ链接 一句话题意:给出一个强联通的混合图,有一些有向边和无向边.删除一些边使其维持强联通的状态,求删边方案. 数据范围 \(1\leq n\leq 5000,0\le ...