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

效果：