JavaScript高阶函数(split--join) ( forEach--map--filter ) ( trim ) ( slice--splice ) concat、reverse、( toUpperCase--substring )

对函数的使用和理解都有几个关键点,函数的使用者(对象),返回值,改不改变原对象

split--join

split 分开,通过()中的字符使String分开

split()是对字符串进行操作,不会改变原对象,会返回一个数组

var a = 'abc'
var b = a.split('b')
//b=['a','c']

join 拼接,通过()中的字符使obj拼接成字符串

join()方法将数组作为字符串返回,不会改变原数组,会返回一个字符串

image

forEach--map--fliter

forEach循环遍历

forEach循环,数组中有几项,循环几次,forEach(value,index,arr){}中value为遍历的值,index为遍历的下标,arr为遍历的数组,没有返回值
forEach() 被调用时,不会改变原数组,也就是调用它的数组(尽管 callback 函数在被调用时可能会改变原数组)。(译注:此处说法可能不够明确,具体可参考EMCA语言规范:'forEach does not directly mutate the object on which it is called but the object may be mutated by the calls to callbackfn.',即 forEach 不会直接改变调用它的对象,但是那个对象可能会被 callback 函数改变。)

forEach能不能改变原数组? 基本类型不能更改,引用类型可以更改

<script>
    //split 分开,通过()中的字符使obj分开
    //forEach循环,数组中有几项,循环几次,forEach(value,index,obj){}中value为      遍历的值,index为遍历的下标,obj为遍历的数组
    //trim() 修剪,移除字符串两侧空白的字符
    var obj = "a = 100 ; b = 200"
    arrayObj = {}
    obj.split(';').forEach(resultvalue => {
      var arr = resultvalue.trim().split('=')
      var key = arr[0]
      var value = arr[1]
      arrayObj[key] = value
    })
    console.log(arrayObj)
    document.write('看控制台输出')
  </script>

map() 和 filter()参数和filter一样

map() filter()都是对数组进行操作,不会改变原数组,会返回一个新数组

map()和filter()的区别是map会返回满足条件的哪一项,filter会返回满足条件的所有项

<script>
    var arr = [
    {
      id: '605ca11351415c2770313882',
      num: 6
    },
    {
      id: '605ca11351415c2770313883',
      num: 3
    }
    ]
//使用map没有{}直接item.d,可直接返回只包含id的数组。
    var ids = arr.map(item => item.id)
    console.log(ids)

//使用filter没有{}可直接返回满足条件的数组项,包含之前过滤数组的所有项。
    var filterids = arr.filter(item => item.id==='605ca11351415c2770313882')

//使用map和filter有{}都要使用return 来返回
    ar mapids = arr.map(item => { 
	return item
	})
    console.log(mapids)
</script>

const Order = require('../../models/Order')
const Product = require('../../models/Product')
const Address = require('../../models/Address')

!(async() => {
 // 模拟一个订单的创建过程

  const username = 'zhangsan'
  const address_id = '605c8cd92fbbd5366c98299b'
  // 商店信息
  const shopId = '605c86672eab4d379c233996'
  const shopName = '沃尔玛'
  // 订单的商品 id 和数量
  const products = [
    {
      id: '605ca11351415c2770313882',
      num: 6
    },
    {
      id: '605ca11351415c2770313883',
      num: 3
    }
  ]

  //获得所有地址信息
  const address = await Address.findById(address_id)

  const productIds = products.map(p => p.id)
  const productList = await Product.find({
    _id: {
      $in: productIds
    },
    shopId
  })
  // console.log(productList)
  const productAndNumber = productList.map( p => {
    // 商品 id
    const id = p._id.toString()
//filter方法中,数组中的数组项是一项一项进行过滤的,productnum数组中只有一项,
    const productnum = products.filter(item => item.id === id)
    if (productnum.length === 0) {
      // 没有找到匹配的数量,报错
      throw new Error('未找到匹配的销量数据')
    }
    // console.log(productnum)
    return {
      orderSales: productnum[0].num,
      product: p
    }
  })
 // 创建订单
  await Order.create({
    username,
    address,
    shopId,
    shopName,
    isCanceled: false, // 是否被取消,依赖于前端的传入
    products: productAndNumber
  })
})()

trim

trim() 修剪,trim() 方法会从一个字符串的两端删除空白字符

trim()是对字符串进行操作,不会改变原字符串,会返回一个新的字符串

var str = '  hello world   '
var newStr = str.trim()
//newStr='hello world'

splice--slice--substring

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

splice()操作对象是数组不能是字符串会改变原数组,返回被删除的数组。如果没有删除元素,则返回空数组。splice(start, deleteCount, item1, item2...)start开始删除的下标值,deletCount删除几个,item从start开始加入的数组

var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);

// 运算后的 myFish: ["angel", "clown", "drum", "sturgeon"]
// 被删除的元素removed: ["mandarin"]

splice()加入元素时需要注意, 加入的开始start下标,就是加入项成为的下标

image
从下标1加入5,加入的5的下标就是1

slice() 方法从已有的数组中返回选定的元素。

slice操作对象是数组和字符串,不会改变原数组,返回一个被提取新的数组slice(start, end)start开始提取的数组下标,end结束提取的数组下标,左闭右开【start,end)提取包含start不包含end

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

参数:
start:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end: 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

substring与slice()方法不同的是,substring() 不接受负的参数。

concat

concat合并两个或多个数组

concat()操作对象是数组,不会改变现有数组,返回被连接数组的新数组。

var num1 = [1, 2, 3],
    num2 = [4, 5, 6],
    num3 = [7, 8, 9];

var nums = num1.concat(num2, num3);

console.log(nums);
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]

reverse

reverse方法用于颠倒数组中元素的顺序。

reverse()操作对象是数组,会改变原数组,返回这个被改变的数组

const a = [1, 2, 3];

console.log(a); // [1, 2, 3]

a.reverse();

console.log(a); // [3, 2, 1]

toUpperCase toLowerCase

toUpperCase() 方法用于把字符串转换为大写。
toLowerCase() 方法用于把字符串转换为小写。
操作对象都是字符串,会改回原字符串,返回新的字符串

str.toUpperCase

posted @ 2021-03-24 21:18  嘿!那个姑娘  阅读(155)  评论(0编辑  收藏  举报