013*【JS】 正则表达式、ES6
目录
正文
一：正则表达式
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ES6</title> <script> /* 一：正则表达式 1：创建方法 2：正则表达式的模式 正则表达式的模式可以包括以下内容： 2.1：字面值字符：例如字母、数字、空格等，可以直接匹配它们自身。 2.2：元字符：例如 \d、\w、\s 等，用于匹配特定类型的字符，如数字、字母、空白字符等。 2.3：字符类：用方括号 [ ] 包围的字符集合，用于匹配方括号内的任意一个字符。 2.4：量词：例如 {n}、{n,}、{n,m} 等，用于指定匹配的次数或范围。 2.5：边界符号：例如 ^、$、\b、\B 等，用于匹配字符串的开头、结尾或单词边界位置 2.6：特殊字符：例如点号 .、星号 *、加号 +、问号 ? 等，它们具有特殊的含义和功能。 3: test()测试正则 exec()执行正则表达式，捕获复合正则表达式的结果,没有为 null，有的话输出结果 4: 标识符 g（全局）、i（忽略大小写）写在正则表达式的外边 5: 正则表达式和字符串的常用方法 */ //正则表达式 // js复杂类型 // 1：字面值字符：例如字母、数字、空格等，可以直接匹配它们自身 /* 1 正则表达式的创建方法 1.1 字面量 1.2 内置构造函数 */ var reg = /abc/ console.log(reg) // 内置构造函数 var reg2 = new RegExp("abc") console.log(reg2) console.log(reg.test("a")) console.log(reg.test("bc")) // 2：元字符：例如 \d、\w、\s 等，用于匹配特定类型的字符，如数字、字母、空白字符等。 // 2.1: \d 一位数字（0-9） console.log("2.1: \d 一位数字（0-9）") var reg3 = /\d\d/ // 2个数字 console.log(reg3.test("abc")) // false console.log(reg3.test("123")) // true console.log(reg3.test("1")) // false // 2.2 \D 一位非数字 console.log("2.2 \D 一位非数字") var reg4 = /\D\D/ // 2位非数字 console.log(reg4.test("123a")) // false console.log(reg4.test("123")) // false console.log(reg4.test("1")) // false console.log(reg4.test("aba")) // true // 2.3 \w 字母 数字 下划线 console.log("\w 字母 数字 下划线") var reg5 = /\w/ // 2位 console.log(reg5.test("&*")) // false console.log(reg5.test("12abc")) // true console.log(reg5.test("a")) // true console.log(reg5.test("1")) // true console.log(reg5.test("_")) // true // 2.4 \W 非字母数字下划线 console.log("2.4 \W 非字幕数字下划线") var reg = /\W/ console.log(reg.test("&*")) // true console.log(reg.test("12abc")) // false console.log(reg.test("a")) // false console.log(reg.test("1")) // false console.log(reg.test("_")) // false // 2.5 \s 1位空白 （空格 缩进 换行） console.log("2.5 \s 1位空白 （空格 缩进 换行）") var reg5 = /\s/ console.log(reg5.test("12 3a")) // true console.log(reg5.test("12\n3")) // true console.log(reg5.test("1")) // false console.log(reg5.test("a ba")) // true // 2.6 \S 1位 非空白 console.log("2.6 \S 1位 非空白") var reg6 = /\S/ console.log(reg6.test("12 3a")) // 非空白 true console.log(reg6.test("\t")) // false console.log(reg6.test("\n\n\n")) // false console.log(reg6.test(" ")) // false // 3：字符类：用方括号 [ ] 包围的字符集合，用于匹配方括号内的任意一个字符。 console.log("3：字符类：用方括号 [ ] 包围的字符集合，用于匹配方括号内的任意一个字符。") var reg7 = /[a-w]{3,5}/ console.log(reg7.test("abcd")) console.log(reg7.test("abxyz")) console.log(reg7.test("111abxy222")) // 4：量词：例如 {n}、{n,}、{n,m} 等，用于指定匹配的次数或范围。 console.log("4：量词：例如 {n}、{n,}、{n,m} 等，用于指定匹配的次数或范围。") // {n} 指定次数 var reg8 = /\d{3}/ console.log(reg8.test("111")) // true console.log(reg8.test("aaa")) // false console.log(reg8.test("ab12")) // false // {n,} >=n var reg9 = /\w{3,}/ console.log(reg9.test("aaa")) // true console.log(reg9.test("ab12")) // true console.log(reg9.test("ab123")) // true // {n,m} console.log("{n,m}") var reg10 = /\w{3,5}/ console.log(reg10.test("aa")) // false console.log(reg10.test("aaa")) // true console.log(reg10.test("aadd")) // true console.log(reg10.test("aagdf")) // true console.log(reg10.test("aagdfd")) // true 有3-5个数字 // 2.5：边界符号：例如 ^、$、\b、\B 等，用于匹配字符串的开头、结尾或单词边界位置 console.log("2.5：边界符号：例如 ^、$、\b、\B 等，用于匹配字符串的开头、结尾或单词边界位置") // true 有3-5个数字 // ^ 开头 var reg11 = /^\d/ console.log(reg11.test("aabb2")) // false console.log(reg11.test("1aabb")) // true // $ 结尾边界 var reg12 = /\d$/ console.log(reg12.test("aabb2")) // true console.log(reg12.test("1aabb")) // false // 2.6：特殊字符：例如点号 .、星号 *、加号 +、问号 ? 等，它们具有特殊的含义和功能。 /* . 任意内容 （换行不算） * 0~多次 + 1~多次 ? 0~1 */ var reg13 = /\d?/ console.log(reg13.test("abc")) // true console.log(reg13.test("ab1")) // true // 3:exec()捕获字符串片段 // 截取第一个符合条件的字符串片段 var dateStr = "2023-09-03 14:28:09.000 to 2023-10-03 14:28:09.000" var reg14 = /\d{4}-\d{1,2}-\d{1,2}/ var validDateStr = reg14.exec(dateStr) // 伪数组 console.log(validDateStr[0]) // 4: 标识符 g（global全局）、i（忽略大小写）写在正则表达式的外边 // 截取所有 符合条件的字符串片段 var dateStr1 = "2023-09-03 14:28:09.000 to 2023-10-03 14:28:09.000" var reg15 = /\d{4}-\d{1,2}-\d{1,2}/g var validDateStr1 = reg15.exec(dateStr1) // 伪数组 var validDateStr2 = reg15.exec(dateStr1) // 伪数组 console.log(validDateStr1) console.log(validDateStr2) var str = `<p class="active"><span>kerwin</span></p>` var myreg = /<p.*?>/ console.log(myreg.exec(str)) /* 5: 正则 字符串的常见方法 正则.test(字符串) 正则.exec(字符串) str.replace(/a/, "") str.search(/a/, "") str.match(/a/, "") */ // replace 替换第一个匹配的字符串 console.log("replace 替换第一个匹配的字符串") var str = "abdafplkgda" var newstr = str.replace("a", "*") console.log(newstr) var newstr = str.replace(/a/g, "*") console.log(newstr) // search 搜索 返回第一个与之匹配的子串开始的位置，如果没有任何与之匹配的子串，它返回-1。 console.log("search 搜索 返回第一个与之匹配的子串开始的位置，如果没有任何与之匹配的子串，它返回-1。") var newstr = str.search("a") console.log(newstr) var newstr = str.search(/a/) console.log(newstr) // match 捕获内容 console.log("match 捕获内容") var datestr = "time is from 2029-01-01 12:20:20 to 2029-11-01 12:20:20" console.log(datestr.match(/(\d{4})-(\d{1,2})-(\d{1,2})/)) console.log(datestr.match(/(\d{4})-(\d{1,2})-(\d{1,2})/g)) </script> </head> <body> </body> </html>
2：this 指向
代码
<script> window.onload = function () { /* 二：this 指向 this 关键字 this 谁调用我， this就指向谁 （es6 箭头函数） 1：this指向 1：全局定义的函数直接调用，this => window 2：对象内部的方法调用，this => 调用者 3：定时器的处理函数，this => window 4：事件处理函数，this => 事件源 5：自调用函数，this => window 2：修改this 指向 call 和 apply 和 bind */ // 1：全局定义的函数直接调用，this => window console.log("1：全局定义的函数直接调用，this => window") window.test() // 2：对象内部的方法调用，this => 调用者 console.log("2：对象内部的方法调用，this => 调用者") var obj = { name: "kerwin", test: function () { console.log("11111", this, this.name) } } obj.test() // 3：定时器的处理函数，this => window console.log("3：定时器的处理函数，this => window") setTimeout(function () { console.log(11111, this) }, 2000) // var num = setInterval(function(){ // console.log(11111,this) // },2000) // 4：事件处理函数，this => 事件源 console.log("4：事件处理函数，this => 事件源") box1.onclick = function () { console.log(this) } box1.addEventListener("click", function (evt) { console.log(evt.target) }) } function test() { console.log(this) } // 5：自调用函数，this => window (function () { console.log("5：自调用函数，this => window", this) })() // 此时 this 指向 window /* 二：call 和 apply 和 bind 刚才我们说过的都是函数的基本调用方式里面的 this 指向 我们还有三个可以忽略函数本身的 this 指向转而指向别的地方 这三个方法就是 call / apply / bind 是强行改变 this 指向的方法 */ /* 1:call call 方法是附加在函数调用后面使用，可以忽略函数本身的 this 指向 语法： 函数名.call(要改变的 this 指向，要给函数传递的参数1，要给函数传递的参数2， ...) fn() 的时候，函数内部的 this 指向 window fn.call(obj, 1, 2) 的时候，函数内部的 this 就指向了 obj 这个对象 使用 call 方法的时候 会立即执行函数 第一个参数是你要改变的函数内部的 this 指向 第二个参数开始，依次是向函数传递参数 */ console.log("1:call") var obj = { name: 'Jack' } function fn(a, b) { console.log(this) console.log(a) console.log(b) } fn(1, 2) fn.call(obj, 1, 2) /* 2:apply apply 方法是附加在函数调用后面使用，可以忽略函数本身的 this 指向 语法： 函数名.apply(要改变的 this 指向，[要给函数传递的参数1， 要给函数传递的参数2， ...]) fn() 的时候，函数内部的 this 指向 window fn.apply(obj, [1, 2]) 的时候，函数内部的 this 就指向了 obj 这个对象 使用 apply 方法的时候 会立即执行函数 第一个参数是你要改变的函数内部的 this 指向 第二个参数是一个 数组，数组里面的每一项依次是向函数传递的参数 */ console.log("2:apply") var obj = { name: 'Jack' } function fn(a, b) { console.log(this) console.log(a) console.log(b) } fn(1, 2) fn.call(obj, [1, 2]) /*3:bind,一般用于事件绑定 bind 方法是附加在函数调用后面使用，可以忽略函数本身的 this 指向 和 call / apply 有一些不一样，就是不会立即执行函数，而是返回一个已经改变了 this 指向的函数 语法： var newFn = 函数名.bind(要改变的 this 指向); newFn(传递参数) bind 调用的时候，不会执行 fn 这个函数，而是返回一个新的函数 这个新的函数就是一个改变了 this 指向以后的 fn 函数 fn(1, 2) 的时候 this 指向 window newFn(1, 2) 的时候执行的是一个和 fn 一摸一样的函数，只不过里面的 this 指向改成了 obj */ console.log("3:bind") var obj = { name: 'Jack' } function fn(a, b) { console.log(this) console.log(a) console.log(b) } fn(1, 2) var newFn = fn.bind(obj) newFn(1, 2) </script>
详解
二：ES6
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ES6</title> <script> /* 一：正则表达式 1：创建方法 2：正则表达式的模式 正则表达式的模式可以包括以下内容： 2.1：字面值字符：例如字母、数字、空格等，可以直接匹配它们自身。 2.2：元字符：例如 \d、\w、\s 等，用于匹配特定类型的字符，如数字、字母、空白字符等。 2.3：字符类：用方括号 [ ] 包围的字符集合，用于匹配方括号内的任意一个字符。 2.4：量词：例如 {n}、{n,}、{n,m} 等，用于指定匹配的次数或范围。 2.5：边界符号：例如 ^、$、\b、\B 等，用于匹配字符串的开头、结尾或单词边界位置 2.6：特殊字符：例如点号 .、星号 *、加号 +、问号 ? 等，它们具有特殊的含义和功能。 3: test()测试正则 exec()执行正则表达式，捕获复合正则表达式的结果,没有为 null，有的话输出结果 4: 标识符 g（全局）、i（忽略大小写）写在正则表达式的外边 5: 正则表达式和字符串的常用方法 */ //正则表达式 // js复杂类型 // 1：字面值字符：例如字母、数字、空格等，可以直接匹配它们自身 /* 1 正则表达式的创建方法 1.1 字面量 1.2 内置构造函数 */ var reg = /abc/ console.log(reg) // 内置构造函数 var reg2 = new RegExp("abc") console.log(reg2) console.log(reg.test("a")) console.log(reg.test("bc")) // 2：元字符：例如 \d、\w、\s 等，用于匹配特定类型的字符，如数字、字母、空白字符等。 // 2.1: \d 一位数字（0-9） console.log("2.1: \d 一位数字（0-9）") var reg3 = /\d\d/ // 2个数字 console.log(reg3.test("abc")) // false console.log(reg3.test("123")) // true console.log(reg3.test("1")) // false // 2.2 \D 一位非数字 console.log("2.2 \D 一位非数字") var reg4 = /\D\D/ // 2位非数字 console.log(reg4.test("123a")) // false console.log(reg4.test("123")) // false console.log(reg4.test("1")) // false console.log(reg4.test("aba")) // true // 2.3 \w 字母 数字 下划线 console.log("\w 字母 数字 下划线") var reg5 = /\w/ // 2位 console.log(reg5.test("&*")) // false console.log(reg5.test("12abc")) // true console.log(reg5.test("a")) // true console.log(reg5.test("1")) // true console.log(reg5.test("_")) // true // 2.4 \W 非字母数字下划线 console.log("2.4 \W 非字幕数字下划线") var reg = /\W/ console.log(reg.test("&*")) // true console.log(reg.test("12abc")) // false console.log(reg.test("a")) // false console.log(reg.test("1")) // false console.log(reg.test("_")) // false // 2.5 \s 1位空白 （空格 缩进 换行） console.log("2.5 \s 1位空白 （空格 缩进 换行）") var reg5 = /\s/ console.log(reg5.test("12 3a")) // true console.log(reg5.test("12\n3")) // true console.log(reg5.test("1")) // false console.log(reg5.test("a ba")) // true // 2.6 \S 1位 非空白 console.log("2.6 \S 1位 非空白") var reg6 = /\S/ console.log(reg6.test("12 3a")) // 非空白 true console.log(reg6.test("\t")) // false console.log(reg6.test("\n\n\n")) // false console.log(reg6.test(" ")) // false // 3：字符类：用方括号 [ ] 包围的字符集合，用于匹配方括号内的任意一个字符。 console.log("3：字符类：用方括号 [ ] 包围的字符集合，用于匹配方括号内的任意一个字符。") var reg7 = /[a-w]{3,5}/ console.log(reg7.test("abcd")) console.log(reg7.test("abxyz")) console.log(reg7.test("111abxy222")) // 4：量词：例如 {n}、{n,}、{n,m} 等，用于指定匹配的次数或范围。 console.log("4：量词：例如 {n}、{n,}、{n,m} 等，用于指定匹配的次数或范围。") // {n} 指定次数 var reg8 = /\d{3}/ console.log(reg8.test("111")) // true console.log(reg8.test("aaa")) // false console.log(reg8.test("ab12")) // false // {n,} >=n var reg9 = /\w{3,}/ console.log(reg9.test("aaa")) // true console.log(reg9.test("ab12")) // true console.log(reg9.test("ab123")) // true // {n,m} console.log("{n,m}") var reg10 = /\w{3,5}/ console.log(reg10.test("aa")) // false console.log(reg10.test("aaa")) // true console.log(reg10.test("aadd")) // true console.log(reg10.test("aagdf")) // true console.log(reg10.test("aagdfd")) // true 有3-5个数字 // 2.5：边界符号：例如 ^、$、\b、\B 等，用于匹配字符串的开头、结尾或单词边界位置 console.log("2.5：边界符号：例如 ^、$、\b、\B 等，用于匹配字符串的开头、结尾或单词边界位置") // true 有3-5个数字 // ^ 开头 var reg11 = /^\d/ console.log(reg11.test("aabb2")) // false console.log(reg11.test("1aabb")) // true // $ 结尾边界 var reg12 = /\d$/ console.log(reg12.test("aabb2")) // true console.log(reg12.test("1aabb")) // false // 2.6：特殊字符：例如点号 .、星号 *、加号 +、问号 ? 等，它们具有特殊的含义和功能。 /* . 任意内容 （换行不算） * 0~多次 + 1~多次 ? 0~1 */ var reg13 = /\d?/ console.log(reg13.test("abc")) // true console.log(reg13.test("ab1")) // true // 3:exec()捕获字符串片段 // 截取第一个符合条件的字符串片段 var dateStr = "2023-09-03 14:28:09.000 to 2023-10-03 14:28:09.000" var reg14 = /\d{4}-\d{1,2}-\d{1,2}/ var validDateStr = reg14.exec(dateStr) // 伪数组 console.log(validDateStr[0]) // 4: 标识符 g（global全局）、i（忽略大小写）写在正则表达式的外边 // 截取所有 符合条件的字符串片段 var dateStr1 = "2023-09-03 14:28:09.000 to 2023-10-03 14:28:09.000" var reg15 = /\d{4}-\d{1,2}-\d{1,2}/g var validDateStr1 = reg15.exec(dateStr1) // 伪数组 var validDateStr2 = reg15.exec(dateStr1) // 伪数组 console.log(validDateStr1) console.log(validDateStr2) var str = `<p class="active"><span>kerwin</span></p>` var myreg = /<p.*?>/ console.log(myreg.exec(str)) /* 5: 正则 字符串的常见方法 正则.test(字符串) 正则.exec(字符串) str.replace(/a/, "") str.search(/a/, "") str.match(/a/, "") */ // replace 替换第一个匹配的字符串 console.log("replace 替换第一个匹配的字符串") var str = "abdafplkgda" var newstr = str.replace("a", "*") console.log(newstr) var newstr = str.replace(/a/g, "*") console.log(newstr) // search 搜索 返回第一个与之匹配的子串开始的位置，如果没有任何与之匹配的子串，它返回-1。 console.log("search 搜索 返回第一个与之匹配的子串开始的位置，如果没有任何与之匹配的子串，它返回-1。") var newstr = str.search("a") console.log(newstr) var newstr = str.search(/a/) console.log(newstr) // match 捕获内容 console.log("match 捕获内容") var datestr = "time is from 2029-01-01 12:20:20 to 2029-11-01 12:20:20" console.log(datestr.match(/(\d{4})-(\d{1,2})-(\d{1,2})/)) console.log(datestr.match(/(\d{4})-(\d{1,2})-(\d{1,2})/g)) </script> <script> // window.onload = function () { /* 二：this 指向 this 关键字 this 谁调用我， this就指向谁 （es6 箭头函数） 1：this指向 1：全局定义的函数直接调用，this => window 2：对象内部的方法调用，this => 调用者 3：定时器的处理函数，this => window 4：事件处理函数，this => 事件源 5：自调用函数，this => window 2：修改this 指向 call 和 apply 和 bind */ // 1：全局定义的函数直接调用，this => window console.log("1：全局定义的函数直接调用，this => window") window.test() // 2：对象内部的方法调用，this => 调用者 console.log("2：对象内部的方法调用，this => 调用者") var obj = { name: "kerwin", test: function () { console.log("11111", this, this.name) } } obj.test() // 3：定时器的处理函数，this => window // console.log("3：定时器的处理函数，this => window") // setTimeout(function () { // console.log(11111, this) // }, 2000) // var num = setInterval(function(){ // console.log(11111,this) // },2000) // 4：事件处理函数，this => 事件源 console.log("4：事件处理函数，this => 事件源") // box1.onclick = function () { // console.log(this) // } // box1.addEventListener("click", function (evt) { // console.log(evt.target) // }) // } function test() { console.log(this) } // 5：自调用函数，this => window (function () { console.log("5：自调用函数，this => window", this) })() // 此时 this 指向 window /* 二：call 和 apply 和 bind 刚才我们说过的都是函数的基本调用方式里面的 this 指向 我们还有三个可以忽略函数本身的 this 指向转而指向别的地方 这三个方法就是 call / apply / bind 是强行改变 this 指向的方法 */ /* 1:call call 方法是附加在函数调用后面使用，可以忽略函数本身的 this 指向 语法： 函数名.call(要改变的 this 指向，要给函数传递的参数1，要给函数传递的参数2， ...) fn() 的时候，函数内部的 this 指向 window fn.call(obj, 1, 2) 的时候，函数内部的 this 就指向了 obj 这个对象 使用 call 方法的时候 会立即执行函数 第一个参数是你要改变的函数内部的 this 指向 第二个参数开始，依次是向函数传递参数 */ console.log("1:call") var obj = { name: 'Jack' } function fn(a, b) { console.log(this) console.log(a) console.log(b) } fn(1, 2) fn.call(obj, 1, 2) /* 2:apply apply 方法是附加在函数调用后面使用，可以忽略函数本身的 this 指向 语法： 函数名.apply(要改变的 this 指向，[要给函数传递的参数1， 要给函数传递的参数2， ...]) fn() 的时候，函数内部的 this 指向 window fn.apply(obj, [1, 2]) 的时候，函数内部的 this 就指向了 obj 这个对象 使用 apply 方法的时候 会立即执行函数 第一个参数是你要改变的函数内部的 this 指向 第二个参数是一个 数组，数组里面的每一项依次是向函数传递的参数 */ console.log("2:apply") var obj = { name: 'Jack' } function fn(a, b) { console.log(this) console.log(a) console.log(b) } fn(1, 2) fn.call(obj, [1, 2]) /*3:bind,一般用于事件绑定 bind 方法是附加在函数调用后面使用，可以忽略函数本身的 this 指向 和 call / apply 有一些不一样，就是不会立即执行函数，而是返回一个已经改变了 this 指向的函数 语法： var newFn = 函数名.bind(要改变的 this 指向); newFn(传递参数) bind 调用的时候，不会执行 fn 这个函数，而是返回一个新的函数 这个新的函数就是一个改变了 this 指向以后的 fn 函数 fn(1, 2) 的时候 this 指向 window newFn(1, 2) 的时候执行的是一个和 fn 一摸一样的函数，只不过里面的 this 指向改成了 obj */ console.log("3:bind") var obj = { name: 'Jack' } function fn(a, b) { console.log(this) console.log(a) console.log(b) } fn(1, 2) var newFn = fn.bind(obj) newFn(1, 2) </script> <script> /* ES6 1 let 和 const 关键字 2 箭头函数 3 解构赋值 4 递归展开运算符 5 面向对象 创建对象的方式 构造函数详解 6 原型 7 原型链 8 继承 */ // 1 let 和 const 关键字 console.log("1 let 和 const 关键字") /* var 和 let、const 的区别 1.let 和 const 不允许重复声明变量 2.let 和 const 声明的变量不会在预解析的时候解析（也就是没有变量提升） 3.let 和 const 块级别作用域 let 和 const 的区别 let 声明的变量的值可以改变，const 声明的变量的值不可以改变 let 声明的时候可以不赋值，const 声明的时候必须赋值 */ let name = "kerwin" // let name = "xiaomoing" console.log(name) // let 声明的时候可以不赋值，const 声明的时候必须赋值 let num num = 100 console.log(num) // 100 // 2 箭头函数,是函数的简写， 箭头函数只能简写赋值类函数表达式，不能简写声明式函数 /* 1. (只有一个形参的时候)可以省略 2. {} 可以省略 只有一句代码 或 只有返回值的时候，省略return 3. 没有arguments 4. 箭头函数没有this, 箭头函数this是父级作用域的， */ // 语法： (函数的行参) => { 函数体内要执行的代码 } console.log("箭头函数") var test1 = function () { console.log("11111") } // 没有参数 var test2 = () => { console.log(2222) } test1() test2() // 有参数 var test3 = (a, b) => { console.log(111, a, b) } // 只有一行代码 一个参数 var test4 = a => 100 * a /* 箭头函数没有this, 箭头函数this是父级作用域的，*/ var test5 = function () { setTimeout(() => { // console.log(this) }, 1000) } test5() // 3 解构赋值 // 数组 console.log("3 解构赋值") var arr = ["xiaoming", "teichui", "shanzhen"] let [x, y, z] = arr console.log(x, y, z) var a = 10 var b = 20 var [b, a] = [a, b] console.log(a, b) // 对象 var obj2 = { name1: "kerwin", age: 100, location: { province: "liaoning", city: "dalian" }, hobby: [111, 222, 333] } var { name1, age, location: { province, city }, hobby: [m, n, k] } = obj2 console.log(name1, age, province, city, m, n, k) /* 模版字符串 ES5 中我们表示字符串的时候使用 '' 或者 "" 在 ES6 中，我们还有一个东西可以表示字符串，就是 ``（反引号） */ let str1 = `hello world` console.log(typeof str1) // 4 递归展开运算符 console.log("4 递归展开运算符") // ... 展开数组 var a = [1, 2, 3] var b = [4, 5, 6] // console.log(a.concat(b)) var c = [...a, ...b] console.log(...a) console.log(c) // ...复制 var a = [1, 2, 3] var b = [...a] b[0] = "kerwin" console.log(a, b) // ...参数-实参-形参 console.log("...参数-实参-形参") var arr = [1, 2, 3] var test = function (a, b, c) { console.log(a, b, c) } test(...arr) //...伪数组转换 function test1() { var arr2 = [...arguments] console.log(arr2) } test1(1, 2, 3, 4, 5) //...对象 var obj1 = { name: "kerwin", age: 100 } var obj2 = { name: "tiechui", location: "dalian" } var obj = { ...obj1, ...obj2 } console.log(obj) // 5: 面向对象 // 1 字面量 console.log("字面量") var obj1 = { name: "蒸羊羔", material: ["1111", "2222", "3333"], setCook() { } } var obj2 = { name: "烧花鸭", material: ["1111", "2222", "3333"], setCook() { } } console.log(obj1, obj2) // 2 内置构造函数 new Object() console.log("内置构造函数 new Object()") var obj1 = new Object() obj1.name = "蒸羊羔" var obj2 = new Object() obj2.name = "烧花鸭" console.log(obj1, obj2) // 3 工厂函数 console.log("工厂函数") function createObj(name) { var obj = {} obj.name = name, obj.material = [] return obj } var obj1 = createObj("蒸羊羔") console.log(obj1) var obj2 = createObj("烧花鸭") console.log(obj2) // 4 自定义构造函数 console.log("自定义构造函数") //new Object() new String() new Array() function createObj(name) { //自动对象 this.name = name this.material = [] this.cook = function () { } //自动返回 } var obj1 = new createObj("蒸羊羔") var obj2 = new createObj("烧花鸭") console.log(obj1, obj2) // 5: 构造函数注意问题 console.log("5: 构造函数注意问题") //1.首字母大写 function CreateObj(name) { this.name = name } var obj1 = new CreateObj("kerwin") console.log(obj1) // 2. 构造函数不写return function CreateObj1(name) { this.name = name // return 100 return { a: 1, b: 2 } } var obj1 = new CreateObj1("kerwin") console.log(obj1) // 3 构造函数能当成普通函数用？可以 function CreateObj2(name) { console.log(this) this.name = name } var obj2 = new CreateObj2("kerwin") console.log(obj2) var obj3 = CreateObj2("kerwin") console.log(obj3, window.name) // 4 this指向 function CreateObj(name) { console.log(this) this.name = name this.cook = function () { console.log(this.name) } } var obj1 = new CreateObj("kerwin") // new过程===实例化这个过程 // 实例对象已经生成了 obj1.cook() console.log(obj1) </script> </head> <body> <div id="box1">事件处理函数</div> <div class="box2"> <h1></h1> <ul></ul> </div> <div class="box3"> <h1></h1> <ul></ul> </div> <script> var data1 = { title: "体育", list: ["体育-1", "体育-2", "体育-3"] } var data2 = { title: "综艺", list: ["综艺-1", "综艺-2", "综艺3"] } function CreateList(select, data) { this.ele = document.querySelector(select) this.title = data.title, this.list = data.list // this.render = } //原型 CreateList.prototype.render = function () { //渲染页面 var h1 = this.ele.querySelector("h1") var ul = this.ele.querySelector("ul") // console.log(h1,ul) h1.innerHTML = this.title ul.innerHTML = this.list.map(item => `<li>${item}</li>`).join("") } var obj1 = new CreateList(".box2", data1) // var obj2 = new CreateList(data2.title,data2.list) console.log(obj1.__proto__ === CreateList.prototype) // console.log() obj1.render() // obj1.kerwin() // console.log(obj2) var obj2 = new CreateList(".box3", data2) obj2.render() // 对象.__proto__ === 构造函数.prototype // 扩展：obj1.toString() // 原型链概念 </script> <script> /* 三：类： */ class CreateObject { //构造器函数 constructor(name) { this.name = name } say() { console.log(this.name, "hello") } } var obj = new CreateObject("kerwin") console.log(obj) obj.say() </script> <script> /* 四：构造函数集成 原型集成 构造函数继承 --继承属性 原型继承 ===继承原型上方法 组合继承 ==构造函数继承 + 原型继承 类集成 */ // 1: 构造函数声明类和函数 function Person(name, age) { this.name = name this.age = age } Person.prototype.say = function () { console.log(this.name, "hello") } // 构造函数继承 function Student(name, age, grade) { // Person.call(this,name,age) Person.apply(this, [name, age]) this.grade = grade } // Student.prototype = Person.prototype Student.prototype = new Person() // 添加方法 Student.prototype.printGrade = function () { console.log(this.name, this.grade) } // 覆盖 // Student.prototype.say = function(){ // console.log(this.name,this.grade) // console.log(this.name ,"您好") // } // 增强原来方法 Student.prototype.say2 = function () { this.say() console.log(this.name, "您好") } var obj = new Student("kerwin", 100, 100) console.log(obj) obj.say2() obj.printGrade() </script> <script> /* 五：类集成 */ //父类 class Person { constructor(name, age) { this.name = name this.age = age } say() { console.log(this.name, "hello") } } //子类 //extends 原型继承 class Student extends Person { constructor(name, age, grade) { super(name, age) // Person.call(this,name,age) this.grade = grade } say() { super.say() //语法糖 console.log(this.name, "你好") } } var obj = new Student("kerwin", 100, 100) console.log(obj) obj.say() </script> </body> </html>
详解
引用
