function_url构造函数

URL构造函数

作用

创建并返回指定url对象

语法

new URL(url,[base])

• url(必填): 若是url 是相对 URL，则会将 base 用作基准 URL，如果 url 是绝对 URL，则无论参数base是否存在，都将被忽略
• base: 是一个表示基准 URL 的 DOMString，在 url 是相对 URL 时，它才会起效。如果未指定，则默认为 ‘’
• 举例说明

  // 由于第一个参数为相对URL，会将第二个参数作为基路径 
  // https://www.baidu.com/s?wd=2222
  new URL('/s?wd=2222', 'https://www.baidu.com')
  

  // 由于第一个参数为绝对URL，会将第二个参数忽略
  // https://www.baidu.com
  new URL('https://www.baidu.com','https://www.baidu.com')
  

返回值

返回值为一个URL对象

包含以下属性
[1]包含location对象的属性；

    const urlObj = new URL('/s?wd=2222&id=111', 'https://www.baidu.com')
    console.log( urlObj )
    // 1. 获取完整的url
    console.log(urlObj.href) // https://www.baidu.com/s?wd=2222&id=111
    // 2. 获取完整域名(带有协议)origin
    console.log(urlObj.origin) // https://www.baidu.com
    // 3. 获取域名(不带协议)host
    console.log(urlObj.host) // www.baidu.com
    // 4. 获取协议名 protocol
    console.log(urlObj.protocol) // https:
    // 5. 获取域名后面拼接的url
    console.log(urlObj.pathname) // /s
    // 6. 获取参数 ‘?参数名=参数值&参数名=参数值’
    urlObj.search.split('?')[1].split('&').forEach(item=>{
      const arr = item.split('=')
      const obj={}
      obj[arr[0]] = arr[1]
      console.log('params', obj) // {wd: '2222'} {id: '111'}
    })

[2]searchParams属性

• 只读属性
• 返回值为 URLSearchParams对象
  • 不会直接显示属性
  • 通过点语法也获取不到
  • 需要通过指定方法获取
    • 获取指定属性

      const urlObj = new URL('/s?wd=2222&id=111', 'https://www.baidu.com')
      const { searchParams } = urlObj
      // 通过get方法获取仅能获取第一个指定属性的值
      const id = searchParams.get('id') // 111
      // 通过getAll方法获取可以获取所有的指定属性的值
      const ids = searchParams.getAll('id') // ['111','222']
      

    • 判断属性是否存在

      const urlObj = new URL('/s?wd=2222&id=111', 'https://www.baidu.com')
      const { searchParams } = urlObj
      console.log(searchParams.has('id')) // true
      console.log(searchParams.has('obj')) // false
      

构造函数的特定方法

URL.createObjectURL

• 语法

  • URL.createObjectURL(object)
    

  • object参数可以是一个 File对象 或 Blob对象； 不可是远程链接！

    • URL.createObjectURL('http://test2.clipworks.com:8666/api/thirdSite/downloadTemplate') 
      // 报错 Failed to execute 'createObjectURL' on 'URL'
      

• 返回值

  • 返回表示指定的 File 对象或 Blob 对象的本地url；
  • 在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过；
    • 浏览器在 document 卸载的时候，会自动释放它们；
    • 也可主动通过 revokeObjectURL 方法去主动释放内存；

URL.revokeObjectURL

• 作用：释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象

• 语法

  • URL.revokeObjectURL(object)
    

  • object:通过调用 URL.createObjectURL() 创建的 URL 对象

应用

[1]获取url携带参数

• (1)通过location对象获取参数(繁琐)

  • const { search } = location
    const paramsArr = search.split('?')[1].split('&')
    const id = paramsArr[0].split('=')[1] // 111
    const name = paramsArr[1].split('=')[1] // 222
    

• (2)通过创建URl对象获取参数(简单)

  • const { searchParams } = new URL(window.location)
    const id = searchParams.get('id') // 111
    const name = searchParams.get('name') // 222
    

[2]创建本地url

    const xhr = new XMLHttpRequest()
  	xhr.open('POST','https://file2.clipworks.com/4c217acc09226795a7ebb8461ddf548f/20220726/469c1056-749d-4c47-819e-35f91c70e163')
	xhr.responseType = 'blob'
	xhr.send()
	xhr.onload = function(){
	const url = URL.createObjectURL(xhr.response)
	console.log('结果', url) // 本地url
  }

[3]为每个文件生成一个uuid

// uuid是独一无二的
const blobUrl = URL.createObjectURL(new Blob())
file[0].uuid = blobUrl.slice(blobUrl.lastIndexOf('/') + 1)
// 主动释放内存
URL.revokeObjectURL(blobUrl)