<!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>
ES6入门——前端知识点总结
猜你喜欢
转载自blog.csdn.net/qq_43258252/article/details/103423926
今日推荐
周排行