ES6入门——前端知识点总结

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>


<body>
</body>
<script>

  // ** 字符串模板语法 **
  let num1 = 18
  let str1 = `我今年${num1}岁`
  console.log("TCL: str1", str1) // TCL: str1 我今年18岁


  // ** is()方法,比较两个目标对象,用来完善“===”方法。 **
  let str2_1 = 'aa'
  let str2_2 = 'aa'
  console.log("TCL: Object.is(str2_1, str2_2)", Object.is(str2_1, str2_2)) // TCL: Object.is(str2_1, str2_2) true
  // NaN 属性代表一个“不是数字”的值。这个特殊的值是因为运算不能执行而导致的,
  // 不能执行的原因要么是因为其中的运算对象之一非数字(例如, "abc" / 4),要么是因为运算的结果非数字(例如,除数为零)。
  NaN === NaN // false
  Object.is(NaN, NaN) // true


  // ** 对象新增属性或者多个对象合并 **
  // 方法1 Object.assign()
  const obj3_1 = { a: 1 }
  const obj3_2 = { b: 2 }
  const obj3_3 = { c: 3 }
  let res3_1 = Object.assign(obj3_1, obj3_2, obj3_3)
  console.log("TCL: res3_1", res3_1) // TCL: res3_1 {a: 1, b: 2, c: 3}
  // 方法2 ... 解构
  const obj3_1_1 = { a: 1 }
  const obj3_2_2 = { b: 2 }
  const obj3_3_3 = { c: 3 }
  let res3_2 = { ...obj3_1_1, ...obj3_2_2, ...obj3_3_3 }
  console.log("TCL: res3_2", res3_2) // TCL: res3_2 {a: 1, b: 2, c: 3}


  // ** padStart() padEnd() 方法 **
  // ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。
  // padStart()用于头部补全,padEnd()用于尾部补全。
  // padStart()和padStart()一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。
  // 如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。
  let str4 = 'Hello'
  let res4_1 = str4.padStart(7, '*')
  console.log("TCL: res4_1", res4_1) // TCL: res4_1 **Hello
  let res4_2 = str4.padEnd(7, '*')
  console.log("TCL: res4_2", res4_2) // TCL: res4_2 Hello**


  // ** repeat() 方法 **
  // repeat() 方法字符串复制指定次数。
  let str5 = 'Hello'
  let res5 = str5.repeat(2)
  console.log("TCL: res5", res5) // TCL: res5 HelloHello



  // ** trimStart() trimEnd() trim() 方法 **
  // trimStart() 去掉字符串头部空格
  // trimEnd()   去掉字符串尾部空格
  // trim()      去掉字符串头部和尾部空格
  let str6 = '   hello   '
  let res6_1 = str6.trimStart()
  console.log("TCL: res6_1", res6_1) // TCL: res6_1 hello   
  let res6_2 = str6.trimEnd()
  console.log("TCL: res6_2", res6_2) // TCL: res6_2    hello
  let res6_3 = str6.trim()
  console.log("TCL: res6_3", res6_3) // TCL: res6_3 hello


  // ** 清除全部空格 replace() 搭配正则表达式 **
  let str6_4 = '   he  llo   '
  let res6_4 = str6_4.replace(/\s+/g, "")
  console.log("TCL: res6_4", res6_4) // TCL: res6_4 hello



  // ** Array.from() **
  // Array.from方法用于将两类对象转为真正的数组:
  // 类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。
  const obj7_1 = {
    // obj7_1 是 类似数组的对象
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
  }
  // Array.from将它转为真正的数组。
  let res7_1 = Array.from(obj7_1)
  console.log("TCL: res7_1", res7_1) // TCL: res7_1 (3) ["a", "b", "c"]
  // ES5 方法
  let res7_2 = [].slice.call(obj7_1)
  console.log("TCL: res7_2", res7_2) // TCL: res7_2 (3) ["a", "b", "c"]


</script>

</html>
发布了171 篇原创文章 · 获赞 499 · 访问量 11万+

猜你喜欢

转载自blog.csdn.net/qq_43258252/article/details/103423926