数组和字符串的es6新方法使用和综合案例

一、数组

1.forEach() 对数组中的每个元素执行回调函数，无返回值。

 numList:[1,2,3,4,5],
 newList:[],//变成1，4，9，16，25
 getNewList(){
  this.numList.forEach(item=>{
    this.newList.push(item*item)
  })
 }

2.map() 通过对数组中的每个元素执行回调函数生成新的数组

 numList:[1,2,3,4,5], //变成1，4，9，16，25
getNewList(){
 this.numList = this.numList.map(item=>item*item)
  console.log(this.numList)
}

3.filter() 过滤返回一个符合条件的新数组

...
list:[1,0,2,0,3,0,4,0,5,0]
...
methods:{
      del(){
            this.list=this.list.filter(item=>item !=0)
            //console.log(this.list)
            //打印出来的新数组就是[1,2,3,4,5]
        },
      // 综合案例，购物车产品数量加减
   }

4.find() 返回符合条件的第一个数组元素，如果不存在则返回undefined

add (id) {
	// 1. 根据 id 找到数组中的对应项 → find
	const fruit = this.fruitList.find(item => item.id === id)
	// 2. 操作 num 数量
	fruit.num++
 },
sub (id) {
	// 1. 根据 id 找到数组中的对应项 → find
	const fruit = this.fruitList.find(item => item.id === id)
	// 2. 操作 num 数量
	fruit.num--
}

5.every() 检测数组中所有元素是否都符合条件，返回布尔值Boolean

// 综合案例，购物车全选反选功能
 computed: {
          // 默认计算属性：只能获取不能设置，要设置需要写完整写法
          // isAll () {
          //   // 必须所有的小选框都选中，全选按钮才选中 → every
          //   return this.fruitList.every(item => item.isChecked)
          // }
          // 完整写法 = get + set
          isAll: {
            get () {
              return this.fruitList.every(item => item.isChecked)
            },
            set (value) {
              // 基于拿到的布尔值，要让所有的小选框 同步状态
              this.fruitList.forEach(item => item.isChecked = value)
            }
          },
   }

6.reduce() 数组求和，0为初始位置

<p>{{total}}</p>
...
arr:[1,2,3,4,5,6]
...
computed:{
  total(){
    return this.arr.reduce((sum,item)=> sum + item,0)
      },
      // 统计选中的总数 reduce
  totalCount () {
     return this.fruitList.reduce((sum, item) => {
        if (item.isChecked) {
          // 选中 → 需要累加
          return sum + item.num
        } else {
          // 没选中 → 不需要累加
          return sum
        }
    //简写三元表达式
    // return item.isChecked ? sum + item.num * item.price : sum
      }, 0)
    },
  },

7.fill() 把数组元素重置为指定的值，会改变原数组

用于填充一个数组

arr:[1,2,3,4,5],

getNewList(){
   //1、fillValue:必须填充的值
   //2、start:可选，开始填充的位置；如果是负数，则表示从数组末尾开始计数。默认值为0
   //3、end:可选，结束填充的位置（不包括该位置。）默认值为array.length
   this.arr.fill(1,3,5)
   console.log(this.arr)//1,2,3,1,1
}

8.includes()检测数组是否包含指定元素，返回布尔值。

includes()方法两个参数：
1、searchElement:必须，要查找的元素
2、fromIndex:可选，开始查找的位置；如果是负数，则从数组末尾开始计数；默认值为0

arr:[1,2,3,4,5],

console.log(this.arr.includes(2))//true
console.log(this.arr.includes(2,3))//false
console.log(this.arr.includes(2,-2))//false，从末尾往后边查找，2再-4的位置

9.copyWithin()从数组中复制元素到指定位置

arr:[1,2,3,4,5],

console.log(this.arr.copyWithin(0,4))//[5,2,3,4,5]
//从下标4开始复制到下标0的位置

11.indexOf()返回在数组中找到的第一个元素的索引，如果不存在则返回 -1。

区分大小写，并且不会检查NaN值

arr:[1,2,3,4,5],

console.log(this.arr.indexOf(4))//输出4的下标3
console.log(this.arr.indexOf(0))//没有找到0，输出-1
console.log(this.arr.indexOf(3,2))//输出3的下标2
console.log(this.arr.indexOf(3,-1))//从数组末尾最后一个开始往后查找，没有找到输出-1
console.log(this.arr.indexOf(3,-4))//从数组末尾第四个开始往后查找，输出3的下标2

12.lastIndexOf():返回在数组中找到的最后一个元素的索引，如果不存在则返回 -1。

arr:[1,1,2,2,4,4],

console.log(this.arr.lastIndexOf(4))//输出最后一4的下标5
console.log(this.arr.lastIndexOf(0))//没有找到0，输出-1
console.log(this.arr.lastIndexOf(2,2))//从数组下标2开始往前查找，输出2
console.log(this.arr.lastIndexOf(3,-1))//从数组末尾最后一个开始往前查找，输出6
console.log(this.arr.lastIndexOf(3,-2))//从数组末尾第二个开始往前查找，没有找到输出-1

13.some()检测数组中是否有元素符合条件，返回布尔值。

arr:[1,1,2,2,4,4],
 let res = this.arr.some(item=>{
          return item > 4
        })
  console.log(res) //false

14.findIndex():返回符合条件的第一个数组元素的索引，如果不存在则返回-1。

不会改变原数组，并且不会检测NaN值

arr:[1,1,2,2,4,4],
let res1 = this.arr.findIndex(item=>{
     return item > 1
 })
  console.log(res1) //输出2
let res2 = this.arr.findIndex(item=>{
     return item > 5
 })
  console.log(res2) //输出-1

16.sort()按升序排列数组中的元素，改变原数组

arr:[5,2,4],
//升序
let res = this.arr.sort((a,b)=>{
       return a-b
    })
 console.log(res) //[2,4,5]
//降序
let res = this.arr.sort((a,b)=>{
       return b-a
    })
 console.log(res) //[5,4,2]

17.shift() 从数组开头移除一个元素，并返回移除的元素，

arr:[1,2,3,4,5],
	
this.arr.shift(1)
console.log(this.arr) //[2,3,4,5]

18.unshift()向数组开头添加一个或多个元素，并返回新的长度

arr:[1,2,3,4,5],
	
this.arr.unshift(1)
console.log(this.arr) //[1,1,2,3,4,5]

19.push() 向数组末尾添加一个或多个元素，并返回新的长度

arr:[1,2,3,4,5],

this.arr.push(1)
console.log(this.arr) //[1,2,3,4,5,1]

20.pop()从数组未尾移除一个元素

arr:[1,2,3,4,5],

this.arr.pop(1)
console.log(this.arr) //[1,2,3,4,5,1]

21.slice()返回数组的一部分，不会改变原数组

start：包含起始位置索引
end：不包含结束位置索引

arr:[1,2,3,4,5],

let res = this.arr.slice(1,3)
console.log(res) //[2,3]

22. splice()向/从数组中添加/删除项目，然后返回被删除的项目

在这里插入代码片

23.concat():连接两个或更多数组，并返回结果，不改变原数组。

 arr:[1,2,3,4,5],
 //从索引1开始，删除一个元素
 this.arr.splice(1,1)
 console.log(this.arr) //[1,3,4,5]
 
 arr2:[1,2,3,4,5],
  //从索引1开始，删除0个，并添加6，7
 this.arr2.splice(1,0,6,7)
 console.log(this.arr2) //[1,6,7,2,3,4,5]

24.join()把数组元素拼接成一个字符串，并返回结果

arr:[1,2,3,4,5],

console.log(this.arr.join())    //1,2,3,4,5
console.log(this.arr.join(''))  //12345
console.log(this.arr.join('/')) //1/2/3/4/5

25.reverse()颠倒数组中元素顺序，改变原数组

arr:[1,2,3,4,5],

console.log(this.arr.reverse())    //[5,4,3,2,1]

二、字符串

split()拆分字符串。通过指定分隔符对字符串进行切片，并返回分割后的字符串列表

str:'12345',
console.log(this.str.split(''))    //['1', '2', '3', '4', '5']

str2:'1/2/3/4/5',
console.log(this.str2.split('/'))    //['1', '2', '3', '4', '5']

replace()字符串替换，返回一个新的字符串，但并不改变字符串本身

str:'12345',
console.log(this.str.replace(/2/i,"1"))    //"11345"

replaceAll()

在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串，该函数会替换所有匹配到的子字符串。该方法不会改变原始字符串。

str:"1abc1de",
//将1换成h
let res = this.str.replaceAll('1','h')
//或者 let res = this.str.replace(/1/g,'h')
    console.log(res) //habchde

charAt()返回指定位置的字符。原始字符串不变

str:"abcde",

let res = this.str.charAt(2)
console.log(res) // 返回下标为2的字符串c

endsWith()

判断当前字符串是否以指定的字符串结尾（区分大小写）。返回 true 或 false

indexOf()

返回某个指定的字符串值在字符串中首次出现的位置。没有找到匹配的字符串则返回 -1

//取地址后边拼接的字符串
const url = window.location.search
const index = url.indexOf("=") //找到字符串下标
if(index!=-1){
	this.paramValue = url.substring(index+1)
}

includes()

判断字符串是否包含指定的子字符串。找到匹配的字符串则返回true，否则返回false。
与数组的使用方法一样

match()

在字符串内检索指定的值，或找到一个或多个正则表达式的匹配

str:"I have 2 cats and 3 dogs.",
let res = this.str.match(/\d+/g)
console.log(res) //['2', '3']

str:"1abc2345",
let res = this.str.match(/a/)
console.log(res)
//['a', index: 1, input: '1abc2345', groups: undefined]

let res = this.str.match(/a/g)
 console.log(res)
  //['a']

search()

检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。

str:"1abc2345",
let res = this.str.search(/a/g)
let res2 = this.str.search(/6/g)
console.log(res)  //a的下标1
console.log(res2) //没有6返回-1

slice()

提取字符串的某个部分，并以新的字符串返回被提取的部分
与数组使用方法一样

startsWith()

用于检测字符串是否以指定的子字符串开始。返回 true 或 false。该方法对大小写敏感

str:"abcde",
let res = this.str.startsWith("a")
let res2 = this.str.startsWith("b")
let res3 = this.str.startsWith("b",1)
console.log(res)  //true
console.log(res2) //false
console.log(res3) //true

trim()

用于删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等。trim() 方法不会改变原始字符串。trim() 方法不适用于 null, undefined, Number 类型

valueOf()

返回 String 对象的原始值

let obj = {
  name:'aa',
  age:11,
  valueOf:function(){
     return this.age
    }
 }
   console.log(obj<1)  //false

toString()

返回一个表示 String 对象的值。通常由js内部调用，而不是由开发者显示调用

let obj = {
   name:'aa',
    age:11,
    toString:function(){
      return this.name
    }
  }
  console.log(String(obj)) //aa
  console.log(Number(obj)) //NaN