JavaScript数组方法和es6数组方法

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

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
}
}

效果：