JavaScript数组方法和es6数组方法

JavaScript数组方法和es6数组方法js数组常用方法:exportclassTemplateFormsComponentimplementsOnInit{constructor(){}ngOnInit(){this.testArray()}testArr=[‘1′,’2′,’3’]testArray(){//toString()把数组转换为字符串console.log(this.testArr.toString())//1//join()方法可将所有

大家好,又见面了,我是你们的朋友全栈君。

js数组常用方法:

export class TemplateFormsComponent implements OnInit { 

constructor() { 
 }
ngOnInit() { 

this.testArray()
}
testArr=['1','2','3']
testArray(){ 

//toString() 把数组转换为字符串
console.log(this.testArr.toString()) //1
//join() 方法可将所有数组元素结合为一个字符串
console.log(this.testArr.join("*")) //2
//pop() 方法从数组中删除最后一个元素,改变原数组的值
console.log(this.testArr.pop()) //3 //返回被删除的元素
console.log(this.testArr)//3-1 //返回改变后的数组
//push() 方法(在数组结尾处)向数组添加一个新的元素,改变原数组的值
console.log(this.testArr.push("4"))//4 //返回添加元素后的数组长度
console.log(this.testArr)//4-1 //返回改变后的数组
//shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引,改变原数组的值
console.log(this.testArr.shift())//5 //返回被删除的元素
console.log(this.testArr)//5-1 //返回改变后的数组
//unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素
console.log(this.testArr.unshift("1"))//6 //返回添加元素后的数组长度
console.log(this.testArr)//6-1 //返回改变后的数组
//delete 删除某个元素,保留元素位置,把删除的元素改为 undefined
delete this.testArr[0]
console.log(this.testArr)//7 //返回改变后的数组
//splice() 方法可用于向数组添加新项,第一个参数定义了应添加新元素的位置
//第二个参数定义应删除多少元素,后面的参数表示添加的元素。
this.testArr.splice(0,1,"1")
console.log(this.testArr)//8 //返回改变后的数组
this.testArr.splice(0, 1)//后面不传参数,可用作删除元素。
console.log(this.testArr)//8-1 //返回改变后的数组
this.testArr.splice(0)//传第一个元素为0,后面不传参数,可用清空数组。
console.log(this.testArr)//8-2 //返回改变后的数组
//concat() 方法通过合并(连接)现有数组来创建一个新数组
console.log(this.testArr.concat(['1', '2', '3']))//9 //返回的新数组值
//slice() 方法用数组的某个片段切出新数组,可接受两个参数,第一个参数表示开始位置,第二个表示结束位置
//不改变原数组
this.testArr = ['1', '2', '3']
console.log(this.testArr.slice(0,1))//10
console.log(this.testArr.slice(1))//10-1 //只传入第一个参数,表示截取第一个参数之后所有的元素
}
}

效果:
在这里插入图片描述
js数组排序方法:

export class TemplateFormsComponent implements OnInit { 

constructor() { 
 }
ngOnInit() { 

this.sortArray()
}
testArrNumber = [1, 2, 3]
fruits = ["Ba", "Oc", "An", "Mv"]
sortArray(){ 

//sort() 方法默认以字母顺序对数组进行排序,改变原数组
this.fruits.sort()
console.log(this.fruits) //1
//sort() 方法还可以顺序对数组进行排序,改变原数组,传入值比较函数
this.testArrNumber.sort((a: number, b: number)=>{ 
return b-a})
console.log(this.testArrNumber) //2
//reverse() 方法反转数组中的元素,改变原数组
this.fruits.reverse()
console.log(this.fruits) //3
//Math.max.apply() 求数组中的最大值,传入两个参数,第一个参数表示this指向,第二个参数是数字数组
console.log(Math.max.apply(null, this.testArrNumber)) //4
//Math.max.apply() 求数组中的最小值,传入两个参数,第一个参数表示this指向,第二个参数是数字数组
console.log(Math.min.apply(null, this.testArrNumber)) //5
}
}

效果:
在这里插入图片描述
js数组迭代方法:

export class TemplateFormsComponent implements OnInit { 

constructor() { 
 }
ngOnInit() { 

this.iterationArray()
}
testArrNumber = [1, 2, 3]
iterationArray() { 

//forEach() 方法为每个数组元素调用一次函数(回调函数)
//回调函数可以接收3个参数,数组内元素,数组索引,数组本身,第1个参数必传,后面可选择性传入
this.testArrNumber.forEach(item => console.log(item))//1 //分别输出数组内元素
this.testArrNumber.forEach((item, index) => console.log(item, index))//2 //分别输出数组内元素和数组索引
this.testArrNumber.forEach((item, index, arr) => console.log(item, index, arr))//3 //分别输出数组内元素
//map()方法通过对每个数组元素执行函数来创建新数组,方法不会对没有值的数组元素执行函数,方法不会更改原始数组。
//该方法和forEach一样接收3个参数,大多数情况使用只接受数组内元素1个参数
console.log(this.testArrNumber.map((item) => { 
 return item * 2 }))//4
//filter() 方法创建一个包含通过测试的数组元素的新数组
//该方法和forEach一样接收3个参数,大多数情况使用只接受数组内元素1个参数
console.log(this.testArrNumber.filter((item) => { 
 return item > 2 }))//5
//reduce() 方法在每个数组元素上运行函数,以生成(减少它)单个值,方法不会改变原始数组
//函数接收4个参数,分别是先前返回的值、数组元素、数组元素索引、数组本身,大多数情况使用只接受前2个参数
console.log(this.testArrNumber.reduce((total, item) => { 
 return total = total + item }))//6 //计算数组总和
//reduce() 方法能够接受一个初始值
console.log(this.testArrNumber.reduce((total, item) => { 
 return total + item }, 100))//7 //传入初始值100
//reduceRight()与reduce()方法功能基本一样,区别是该方法在数组中从右到左工作
console.log(this.testArrNumber.reduceRight((total, item) => { 
 return total + item }, 100))//8
//every() 方法为每个数组元素调用一次函数,检查所有数组值是否通过测试,回调函数可以接收3个参数,数组内元素,数组索引,数组本身,第1个参数必传,后面可选择性传入
//大多数情况使用只接受第1个参数
console.log(this.testArrNumber.every(item=>item==1))//9
//some()用法和every()相同,功能相反,只需有值通过测试即为真
console.log(this.testArrNumber.some(item => item == 1))//10
//indexOf() 方法在数组中搜索元素值并返回其位置
console.log(this.testArrNumber.indexOf(1)) //11
//lastIndexOf() 与 indexOf() 类似,但是从数组结尾开始搜索
console.log(this.testArrNumber.lastIndexOf(1))//12
}
}

效果:
在这里插入图片描述
es6数组新方法:

export class TemplateFormsComponent implements OnInit { 

constructor() { 
 }
ngOnInit() { 

this.ArrayES()
}
testArrNumber = [1, 2, 3]
fruits = ["Ba", "Oc", "An", "Mv"]
testObj=[
{ 

"id":1,
name:"张三"
},
{ 

"id": 2,
name: "李四"
}
]
arrLike={ 

"0":1,
"1":2,
"length":2
}
ArrayES(){ 

//扩展运算符合并数组
console.log([...this.testArrNumber,...this.fruits]) //1
//from() 将伪数组转换为真数组,第1个参数为伪数组,第2个参数可传入1个函数对数组元素进行加工,也可不传
console.log(Array.from(this.arrLike, (item) => { 
 return item * 2 })) //2
//find()用于找出第一个符合条件的数组成员,如果没找到返回undefined
console.log(this.testObj.find((item)=>item.id==2)) //3
//findIndex()用于找出第一个符合条件的数组成员的索引,如果没找到返回-1
console.log(this.testArrNumber.findIndex((item) => item>1)) //4
//includes() 判断数组中是否包含某一元素,返回布尔值
console.log(this.testArrNumber.includes(1)) //5
}
}

效果:
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/132980.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号