【第一课:ES发展历史】
*******************************************************************************
*******************************************************************************
ES -> ECMA标准
ES6 -> 2015年6月 ES6.0
ESnext ->下一代js语言
标准委员会(TC39)要求更改语言标准
提案->标准
Stage 0 展示阶段
Stage 1 征求意见阶段
Stage 2 草案阶段
Stage 3 候选阶段
Stage 4 定案阶段(标准)
【第二课:let,const】
*******************************************************************************
*******************************************************************************
定义(声明)变量
ES5 作用域>>>>>函数作用域:
<script> function fn() { for (var i = 0; i < 10; i++) { console.log(i) } } fn(); </script>
ES5 作用域>>>>>全局用域:
<script> for (var i = 0; i < 10; i++) { //console.log(i) } console.log(i); </script>
特性>>>>>预解析,变量提升
<script> console.log(i); var i = 1; </script>
打印:undefined(语法未出现错误)
特性>>>>>同一作用域里面可以定义相同变量
<script> var i = 1; var i = 2; console.log(i); </script>
打印:2;赋值被重写掉。
ES6 作用域>>>>>块级作用域 {}
特性>>>>>没有预解析,不存在变量提升;先定义后使用
<script> let i= 1; console.log(i); </script>
特性>>>>>统一作用域里面只能定义一次变量,不能重复定义变量
<script> let i = 1; let i = 2; console.log(i); </script>
Uncaught SyntaxError: Identifier 'i' has already been declared
特性>>>>>for循环时类似于一个父级作用域
<script> for (let i = 0; i < 10; i++) { console.log(i); } { let i = 100; console.log(i); { console.log(i); { let i = 111; console.log(i); } } } </script>
Const 定义变量特性和let一致,但定义的变量不可修改。
<script> const arr = ["a","b", "c"]; arr = ["a"]; console.log(arr); </script>
ES6.html:11 Uncaught TypeError: Assignment to constant variable.
但满足对象的基本特性:
<script> const arr = ["a","b", "c"]; arr.push("d"); console.log(arr); </script>
(4) ["a", "b", "c", "d"]
【第三课:解构赋值】
*******************************************************************************
*******************************************************************************
常规应用解构赋值
<script> { let [a, b, c] = ["a", "b", "c"]; console.log(a, b, c); //a b c } { let [a, b, c] = ["a", "b"]; console.log(a, b, c); //a b undefined } { let [a, [b, c]] = ["a", ["b"]]; console.log(a, b, c); //a b undefined } { //交换位置 // let a = "a"; // let b = "b"; let [a, b] = ["a", "b"]; [a, b] = [b, a] console.log(a, b); //b a } { //json解构赋值 let json = { age: 12, name: "姓名", sex: "男" }; let { name, age, sex } = json;//注意为花括号,两边对象格式一致 console.log(age, name, sex); //12 "姓名" "男" } //解构赋值重命名 { let json = { age: 12, name: "姓名", sex: "男" }; let { name: name_a, age: age_b, sex: sex_c } = json;//注意为花括号,两边对象格式一致 console.log(name_a, age_b, sex_c); //姓名 12 男 } //解构赋值初始值(默认值undefined) { let json = { age: 12, name: "姓名", //sex : undefined }; let { name: name_a, age: age_b, sex: sex_c = "暂无性别" } = json;//注意为花括号,两边对象格式一致 默认值只针对于undefined情况 console.log(name_a, age_b, sex_c); //姓名 12 暂无性别 } //解构赋值初始值(默认值null) { let json = { age: 12, name: "姓名", sex: null }; let { name: name_a, age: age_b, sex: sex_c = "暂无性别" } = json;//注意为花括号,两边对象格式一致 console.log(name_a, age_b, sex_c); //姓名 12 null } </script> 函数应用: <script> { function fn() { return { a: 1, b: 2 }; } let { a, b } = fn(); console.log(a, b); //1 2 } { function fn() { return { a: 1 }; } let { a, b: temp_b = "暂无数据" } = fn(); console.log(a, temp_b); //1 "暂无数据" } { function fn({ a, b }) { console.log(a, b); } fn({ a: 1, b: 2 }); //1 2 } { function fn({ a, b ="暂无数据" }) { console.log(a, b); } fn({ a: 1 }); //1 "暂无数据" } { function fn({ a="a暂无数据", b ="b暂无数据" }) { console.log(a, b); } fn({ }); //a暂无数据 b暂无数据 } { function fn({ a="a暂无数据", b ="b暂无数据" }={}) { console.log(a, b); } fn(); //a暂无数据 b暂无数据 } </script>
【第四课:字符串模板及新增函数】
*******************************************************************************
*******************************************************************************
字符串模板:波浪线反飘符号。``
<script> { let [title, count] = ["ES6学习案例", 100]; let str = `标题${title};浏览次数${count};`; console.log(str); //标题ES6学习案例;浏览次数100; } { //新增字符串函数 let str = "apple orange pear panda"; let str1 = "123"; console.log(str.includes("app")); //true console.log(str.startsWith("app")); //true console.log(str.endsWith("app")); //false console.log(str1.padStart(10, "x")); //xxxxxxx123 console.log(str1.padStart(10, "xa")); //xaxaxax123 console.log(str1.padEnd(10, "x")); //123xxxxxxx console.log(str1.padEnd(10, "xa")); //123xaxaxax } </script>
【第五课:函数默认参数、箭头函数、剩余参数】
*******************************************************************************
*******************************************************************************
函数默认参数
<script> { function fn() { return { a: 1, b: 2 }; } let { a, b } = fn(); console.log(a, b); //1 2 } { function fn() { return { a: 1 }; } let { a, b: temp_b = "暂无数据" } = fn(); console.log(a, temp_b); //1 "暂无数据" } { function fn({ a, b }) { console.log(a, b); } fn({ a: 1, b: 2 }); //1 2 } { function fn({ a, b = "暂无数据" }) { console.log(a, b); } fn({ a: 1 }); //1 "暂无数据" } { function fn({ a = "a暂无数据", b = "b暂无数据" }) { console.log(a, b); } fn({}); //a暂无数据 b暂无数据 } { function fn({ a = "a暂无数据", b = "b暂无数据" } = {}) { console.log(a, b); } fn(); //a暂无数据 b暂无数据 } { //函数参数默认已经定义,不可再次使用let,const声明定义 function fn(a = 1) { let a = 2; console.log(a); } //Uncaught SyntaxError: Identifier 'a' has already been declared } </script>
…及剩余参数
<script> { function fn(a){ console.log(...a);//将数组展开 } fn([1,2,3,4,5]); //1 2 3 4 5 } { function fn(...a){ console.log(a);//将散数合并成数组 } fn(1,2,3,4,5); //[1 2 3 4 5] } { function fn(a,b,...c){ console.log(c);//将散数合并成数组 } fn(1,2,3,4,5); //...c表示剩余参数,只能放在最后一个参数位置 //[3 4 5] } </script>
箭头函数
<script> { let fn = () => { return 1 } console.log(fn()); //1 } { let fn = (a,b) => { return a+b } console.log(fn(2,3)); //5 } { let fn = (a,b) => { return `标题${a};浏览次数${b}。`; } console.log(fn("ES学习案例",30)); //标题ES学习案例;浏览次数30。 } { // this问题, 定义函数所在的对象,不在是运行时所在的对象 let json = { id : 1, fn :function(){ setTimeout(() => { console.log(this.id); }, 2000); } } json.fn(); } </script>
Ps注意事项:
1. this问题, 定义函数所在的对象,不在是运行时所在的对象
2. 箭头函数里面没有arguments, 用 ‘...’
3. 箭头函数不能当构造函数
【第六课:数组循环】
*******************************************************************************
*******************************************************************************
<script> { //for循环、 let arr = [1, 2, 3, 4, 5]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]) } } { //forEach 代替普通for,无返回值不需要return let arr = [1, 2, 3, 4, 5]; arr.forEach(function (value, idnex, arr) { console.log(value) }); } { //forEach 代替普通for,无返回值不需要return let arr = [1, 2, 3, 4, 5]; arr.forEach((value, idnex, arr) => { console.log(value) }); } { //map //非常有用,做数据交互 "映射" //正常情况下,需要配合return,返回是一个新的数组 //若是没有return,相当于forEach //注意:平时只要用map,一定是要有return let arr = [{ title: "title1", hot: 10 }, { title: "title2", hot: 20 }, { title: "title3", hot: 30 }]; let newArr = arr.map((val, idnex, arr) => { return val.hot > 10 }); //重新整理数据结构 let newArr1 = arr.map((val, idnex, arr) => { return `主题为${val.title};热度为${val.hot}。` }); console.log(newArr); console.log(newArr1); // [false, true, true] //["主题为title1;热度为10。", "主题为title2;热度为20。", "主题为title3;热度为30。"] } { //filter 过滤,过滤一些不合格“元素”, 如果回调函数返回true,就留下来 let arr = [{ title: "title1", hot: 10 }, { title: "title2", hot: 20 }, { title: "title3", hot: 30 }]; let newArr = arr.filter((val, idnex, arr) => { return val.hot > 10 }); console.log(newArr); //0: { title: "title2", hot: 20 } //1: { title: "title3", hot: 30 } } { //arr.some(): 类似查找, 数组里面某一个元素符合条件,返回true let arr = [1, 3, 5, 7, 9, 10]; let res = arr.some((val, index, arr) => { return val % 2 == 0 }); console.log(res); //true } { //arr.every(): 类似查找, 数组里面某一个元素符合条件,返回true let arr = [1, 3, 5, 7, 9, 10]; let res = arr.every((val, index, arr) => { return val % 2 == 0 }); console.log(res); //false } { //arr.reduce() 从左往右 求数组的和、阶乘 let arr = [2, 2, 3]; let res = arr.reduce((prev, cur, index, arr) => { return prev * cur }); let res1 = arr.reduce((prev, cur, index, arr) => { return prev ** cur });//幂运算 console.log(res); console.log(res1); //12 //64 } { //arr.reduce() 从右往左 求数组的和、阶乘 let arr = [2, 2, 3]; let res = arr.reduceRight((prev, cur, index, arr) => { return prev * cur }); let res1 = arr.reduceRight((prev, cur, index, arr) => { return prev ** cur }); console.log(res); console.log(res1); //12 //81 } { //for...of...类似于普通for //但新增了arr.keys() 数组下标 // arr.entries() 数组某一项 let arr = [2, 2, 3]; for (let val of arr) { console.log(val); } for (let val of arr.keys()) { console.log(val); } for (let [key,val] of arr.entries()) { console.log(key,val); } } </script>
【第七课:数组新增特性】
*******************************************************************************
*******************************************************************************
<script> { //扩展运算符... let arr1 = [1, 2, 3]; let arr2 = [...arr1]; console.log(arr2); //(3) [1, 2, 3] } { //Array.from(); //作用: 把类数组(获取一组元素、arguments...) 对象转成数组 //个人观点: 具备 length这个东西,就靠谱 let arr1 = [1, 2, 3]; let arr2 = Array.from(arr1); console.log(arr2); //[1, 2, 3] let str = "123"; console.log(Array.from(str)); //["1", "2", "3"] let json = { 0: "name1", 1: "男", 2: 18, length: 3 }; console.log(Array.from(json))//json key比较特殊 // ["name1", "男", 18] let json1 = { 0: "name1", 1: "男", 2: 18, length: 2 }; console.log(Array.from(json1))//json key比较特殊 // ["name1", "男"] } { //Array.of(): 把一组值,转成数组 let arr = Array.of("1", "2", "3"); console.log(arr); //["1", "2", "3"] } { //arr.find(): 查找,找出第一个符合条件的数组成员,如果没有找到,返回undefined let arr = [10, 20, 30]; console.log(arr.find((val, index, arr) => { return val > 10 })); } { //arr.findIndex(): 找的是第一个符合条件位置, 没找到返回-1 let arr = [10, 20, 30]; console.log(arr.findIndex((val, index, arr) => { return val > 10 })); } { //arr.fill() 填充 //arr.fill(填充的东西, 开始位置, 结束位置); let arr = [10, 20, 30]; arr.fill([1, 2, 3, 4], 1); console.log(arr); } { //在ES2016里面新增: //arr.indexOf() //arr.includes() let arr = [10, 20, 30]; let res = arr.includes(20); console.log(res); //true } </script>
【第八课:对象简洁语法及对象新增】
*******************************************************************************
*******************************************************************************
对象简洁语法
<script> { let name = "name1"; let sex = "男"; let age = 18 let json1 = { name: name, sex: sex, age: age } console.log(json1); let json2 ={ name, sex, age }; console.log(json2); //json2 为json1 的简介语法 //Object age: 18name: "name1"sex: "男" //Object age: 18name: "name1"sex: "男" } </script>
对象新增特性
两个对象是否相等Object.is()新增
<script> { //判断两个对象是否相等Object.is()新增对NaN以及+0,-0的处理 console.log(NaN == NaN); //false console.log(NaN===NaN); //false console.log(Number.isNaN(NaN)); //true console.log(Object.is(NaN,NaN)); //true console.log(Object.is(+0,-0)); //false console.log(+0==-0); //true console.log(+0===-0); //true } </script> Object.assign():合并对象 let 新的对象 = Object.assign(目标对象, source1, srouce2....) <script> { let json1 = { a: 1 }; let json2 = { b: 2 }; let json3 = { c: 3 }; let json4 = { d: 4, a: 4 }; let newJson1 = Object.assign({}, json1, json2, json3); let newJson2 = Object.assign({}, json1, json2, json3, json4); console.log(newJson1); //{a: 1, b: 2, c: 3} console.log(newJson2); //{a: 4, b: 2, c: 3, d: 4} //a变成4,覆盖前面的值 } </script>
对象新增函数属性
<script> { //对象新增属性 //ES2017引入: //Object.keys() //Object.entries(); //Object.values(); var json = { a: 1, b: 2, c: 3 }; for (let key of Object.keys(json)) { console.log(key); } //a //b //c for (let val of Object.values(json)) { console.log(val); } //1 //2 //3 for (let item of Object.entries(json)) { console.log(item); } //(2) ["a", 1] //(2) ["b", 2] //(2) ["c", 3] for (let [key, val] of Object.entries(json)) { console.log(key, val); } //a 1 //b 2 //c 3 //对象的扩展函数... 拷贝json对象 let json1 = {...json}; console.log(json1); //{a: 1, b: 2, c: 3} } </script>
【第九课:Promise】
*******************************************************************************
*******************************************************************************
<script> //Promise //承诺,许诺 作用: 解决异步回调问题 //语法: //let promise = new Promise(function(resolve, reject){ // //resolve, 成功调用 // //reject 失败调用 //}); //promise.then(res=>{ // //}, err=>{ // //}) //promise.catch(err => { }) { let status = 2 let promise = new Promise(function (resolve, reject) { if (status == 1) { resolve("成功了"); } else { reject("失败了"); } }) promise.then(res => { console.log(res); },err=>{ console.log(err); }) //promise.catch(err=>{console.log(err)}); } //简洁用法 //new Promise().then(res=>{ //}).catch(err=>{ //}) { let status = 1; new Promise(function (resolve, reject) { if (status == 1) { resolve("成功了"); } else { reject("失败了"); } }).then(res=>{console.log(res)}).catch(err=>{console.log(err)}); } //Promise.resolve('aa') : 将现有的东西,转成一个promise对象, resolve状态,成功状态 //等价于: //new Promise(resolve =>{ // resolve('aaa') //}); { Promise.resolve("111").then(res=>{console.log(res)}).catch(err=>{console.log(err)});; new Promise((resolve,reject)=>{ resolve("111"); }).then(res=>{console.log(res)}).catch(err=>{console.log(err)}); } //Promise.reject('aaa'): 将现有的东西,转成一个promise对象,reject状态,失败状态 //等价于: //new Promise((resolve, reject) =>{ // reject('aaa') //}); { Promise.reject("222").then(res=>{console.log(res)}).catch(err=>{console.log(err)});; new Promise((resolve,reject)=>{ reject("222"); }).then(res=>{console.log(res)}).catch(err=>{console.log(err)}); } //Promise.all([p1, p2, p3]): 把promise打包,扔到一个数组里面,打包完还是一个promise对象 //必须确保,所有的promise对象,都是resolve状态,都是成功状态 //Promise.race([p1, p2, p3]): 只要有一个成功,就返回 </script>
【第十课:模块化】
*******************************************************************************
<script type="module"> //模块化: // 注意: 需要放到服务器环境 // a). 如何定义模块? // export 东西 // export const a =12; // export{ // a as aaa, // b as banana // } // b). 如何使用? // import // import './modules/1.js'; // import {a as a, banana, c} from './modules/2.js' // import * as modTwo from './modules/2.js'; //使用模块: // <script type="module"><?script> //1.js //console.log("模块1加载") //export default "默认值"; //export const a = "a的值"; //export const b = "b值"; import dVal, { a as apple, b } from './modules/1.js'; //模块里面是默认值(export default "默认值"; );外部接受时不使用{}。 console.log(dVal, apple, b); ///模块1加载 ///默认值 a的值 b值 //import: 特点 // a). import 可以是相对路径,也可以是绝对路径 // import 'https://code.jquery.com/jquery-3.3.1.js'; // b). import模块只会导入一次,无论你引入多少次 // c). import './modules/1.js'; 如果这么用,相当于引入文件 // d). 有提升效果,import会自动提升到顶部,首先执行 // e). 导出去模块内容,如果里面有定时器更改,外面也会改动,不想Common规范缓存 // import() 类似node里面require, 可以动态引入, 默认import语法不能写到if之类里面 // 返回值,是个promise对象 // import('./modules/1.js').then(res=>{ // console.log(res.a+res.b); // }); //动态引入 import('./modules/1.js').then(res => { console.log(res.default + res.a + res.b); }); //默认值a的值b值 // 优点: // 1. 按需加载 // 2. 可以写if中 // 3. 路径也可以动态 // Promise.all([]) </script>
【第十一课:类和继承】
*******************************************************************************
*******************************************************************************
<script type="module"> let aaa = "test"; //定义变量作为方法名 let bbb = "t111"; class Person { constructor(name, age) { console.log(`传入参数name${name};age${age};`); this.name = name; this.age = age; } showName() { console.log(this.name); } showAge() { console.log(this.age); } //方法名拼接 [aaa]() { // 调用方法名变量 console.log("test"); } [bbb]() { // 调用方法名变量 console.log("t111"); } [aaa + bbb]() { // 调用方法名变量 console.log("testt111"); } //静态方法 static sfn() { console.log("调用静态函数sfn"); } } class Student extends Person { constructor(name, age, skill) { super(name, age); this.skill = skill; } showName() { super.showName(); console.log("子类"); } showSkill() { console.log(this.skill); } } let person = new Person("张三", 18); //传入参数name张三;age18; console.log(person.name); // 张三 console.log(person.age); //18 person.showName(); //张三 person.showAge(); ///////////////////////////////////方法名拼接 //18 person.test(); //test person[aaa](); //test person.t111(); //t111 person[bbb](); //t111 person.testt111(); //testt111 person[aaa + bbb](); //testt111 Person.sfn(); //调用静态函数sfn let stu = new Student("学生张", 18, "逃学"); stu.showName(); //传入参数name学生张; age18; //学生张 //子类 </script>
【第十二课:Symbol&generator】
*******************************************************************************
*******************************************************************************
Symbol
<script> //数据类型:number、string、boolean、Object、undefined、function、symbol(ES6新增数据类型) // symbol 使用情况一般 // //定义: // let syml = Symbol('aaa'); // //注意: // 1. Symbol 不能new // 2. Symbol() 返回是一个唯一值 // 坊间传说, 做一个key,定义一些唯一或者私有一些东 // 3. symbol是一个单独数据类型,就叫 symbol, 基本类型 // // 4. 如果symbol作为key,用for in循环,出不来 let syml = Symbol('aaa'); console.log(syml); //Symbol(aaa) </script> Generator <script> //generator 解决异步深度嵌套的问题, async //定义: function* gen() { yield 'welcome'; yield 'to'; return '牧码人'; } //调用: let g1 = gen(); g1.next(); // {value:'welcome', done:false} //console.log(g1.next()); g1.next(); // {value:'to', done:false} g1.next(); // {value:'牧码人', done:true} // for .. of 自动遍历 generator // return的东西,它不会遍历 </script>
异步: 不连续,上一个操作没有执行完,下一个操作照样开始
同步: 连续执行,上一个操作没有执行完,下一个没法开始
关于异步,解决方案:
a). 回调函数
b). 事件监听
c). 发布/订阅
d). Promise对象
e).generator,
【第十三课:async,await】
*******************************************************************************
*******************************************************************************
<script> //ES2017,规定 async //nodeJs //读取文件 fs.readFile //1. promise //2. genrator //3. async const fn = function (status) { return new Promise(function (resolve, reject) { if (status % 2 == 1) { resolve(status); } else { throw new Error("出错了") } }).then(res => { console.log(res) }).catch(err => { console.log(err) }); } //async function fn(){ //表示异步,这个函数里面有异步任务 //let result = await xxx //表示后面结果需要等待 //} async function test() { let t1 = await fn(1); let t2 = await fn(2); let t3 = await fn(3); } test(); //async特点: // 1. await只能放到async函数中 // 2. 相比genrator语义化更强 // 3. await后面可以是promise对象,也可以数字、字符串、布尔 // 4. async函数返回是一个promise对象 // 5. 只要await语句后面Promise状态变成 reject, 那么整个async函数会中断执行 //如何解决async函数中抛出错误,影响后续代码: // a). // try{ // // }catch(e){ // // } // b). promise本身catch //个人建议大家: // try{ // let f1 = await readFile('data/a.txt'); // let f3 = await readFile('data/c.txt'); // let f2 = await readFile('data/b.txt'); // }catch(e){} </script>
【第十四课:Set和WeakSet】
*******************************************************************************
*******************************************************************************
Set
<script> //数据结构 //数组 //json, 二叉树.... // //set数据结构: //类似数组,但是里面不能有重复值 //let setArr = new Set("a", "c", "a", "b"); let setArr = new Set(); setArr.add("a").add("c").add("a").add("b"); console.log(setArr); setArr.delete("a"); console.log(setArr); let isHas = setArr.has("a"); console.log(isHas); console.log(setArr.size); setArr.forEach((val, index) => { console.log(val, index); }); setArr.clear(); </script>
WeakSet
new Set([]); 存储数组, 这种写法对
new WeakSet({}) 存储json,这种写法不靠谱
WeakSet没有size,也没有clear()
有, add(), has(), delete()
确认,初始往里面添加东西,是不行的。最好用add添加
【第十五课:Map和WeakMap】
*******************************************************************************
*******************************************************************************
map:
类似 json, 但是json的键(key)只能是字符串
map的key可以是任意类型
使用:
let map = new Map();
map.set(key,value); 设置一个值
map.get(key) 获取一个值
map.delete(key) 删除一项
map.has(key) 判断有没有
map.clear() 清空
循环:
for(let [key,value] of map){}
for(let key of map.keys()){}
for(let value of map.values()){}
for(let [k,v] of map.entries()){}
map.forEach((value, key) =>{
console.log(value, key);
})
WeakMap(): key只能是对象
Set 里面是数组,不重复,没有key,没有get方法
Map 对json功能增强,key可以是任意类型值
【第十六课:数字的变化及Math新增对象】
*******************************************************************************
*******************************************************************************
数字(数值)变化:
二进制: (Binary)
let a = 0b010101;
八进制: (Octal)
let a = 0o666;
十六进制:
#ccc
Nunber()、parseInt()、 parseFloat()
Number.isNaN(NaN) -> true
Number.isFinite(a) 判断是不是数字
Number.isInteger(a) 判断数字是不是整数
Number.parseInt();
Number.parseFloat();
安全整数:
2**3
安全整数: -(2^53-1) 到 (2^53-1), 包含-(2^53-1) 和(2^53-1)
Number.isSafeInteger(a);
Number.MAX_SAFE_INTEGER 最大安全整数
Number.MIN_SAFE_INTEGER 最小安全整数
Math:
Math.abs()
Math.sqrt()
Math.sin()
Math.trunc() 截取,只保留整数部分
Math.trunc(4.5) -> 4
Math.trunc(4.9) -> 4
Math.sign(-5) 判断一个数到底是正数、负数、0
Math.sign(-5) -> -1
Math.sign(5) -> 1
Math.sign(0) -> 0
Math.sign(-0) -> -0
其他值,返回 NaN
Math.cbrt() 计算一个数立方根
Math.cbrt(27) -> 3
【第十七课:ES2018新增对象】
*******************************************************************************
*******************************************************************************
ES2018(ES9):
1. 命名捕获
语法: (?<名字>)
let str = '2018-03-20';
let reg = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
let {year, month ,day} = str.match(reg).groups;
console.log(year, month, day);
反向引用:
\1 \2 $1 $2
反向引用命名捕获:
语法: \k<名字>
let reg = /^(?<Strive>welcome)-\k<Strive>$/;
匹配: ‘welcome-welcome’
let reg = /^(?<Strive>welcome)-\k<Strive>-\1$/;
匹配: 'welcome-welcome-welcome'
替换:
$<名字>
let reg = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
str = str.replace(reg,'$<day>/$<month>/$<year>');
console.log(str);
str = str.replace(reg, (...args)=>{
//console.log(args)
let {year, month, day} = args[args.length-1];
return `${day}/${month}/${year}`;
});
console.log(str);
2. dotAll 模式 s
之前 '.' 在正则里表示匹配任意东西, 但是不包括 \n
let reg = /\w+/gims;
3. 标签函数
function fn(){
}
fn() //这样调用就是普通函数
fn`aaa` //标签函数使用
function fn(args){
return args[0].toUpperCase();
}
console.log(fn`welcome`);
【第十八课:Proxy的使用】
*******************************************************************************
*******************************************************************************
<script> let obj = { name: "name1", age: 18 }; let newObj = new Proxy(obj, { get(target, property) { console.log(target, property); if (property == "age") { console.log(`您访问了${property}属性。禁止访问年龄属性`); return undefined; } else { console.log(`您访问了${property}属性。`); return target[property]; } } }) console.log(newObj.name); console.log(newObj.age); //语法: // new Proxy(target, handler); // let obj = new Proxy(被代理的对象,对代理的对象做什么操作) // // handler: // // { // set(){}, //设置的时候干的事情 设置,拦截:设置一个年龄,保证是整数,且范围不能超过200 // get(){}, //获取干的事情 获取拦截 // deleteProperty(){}, //删除 删除,拦截: // has(){} //问你有没有这个东西 ‘xxx’ in obj 检测有没有 // apply() //调用函数处理 拦截方法 // ..... // } // //实现一个,访问一个对象身上属性,默认不存在的时候给了undefined,希望如果不存在错误(警告)信息: </script>
【第十九课:Reflect的使用】
*******************************************************************************
*******************************************************************************
Reflect.apply(调用的函数,this指向,参数数组);
fn.call()
fn.apply() 类似
Reflect: 反射
Object.xxx 语言内部方法
Object.defineProperty
放到Reflect对象身上
通过Reflect对象身上直接拿到语言内部东西
'assign' in Object -> Reflect.has(Object, 'assign')
delete json.a -> Reflect.deleteProperty(json, 'a');
<script> function sum(a, b) { return a + b; } let newSum = new Proxy(sum, { apply(target, context, args) { return Reflect.apply(...arguments) ** 2; } }); console.log(newSum(2,3)); console.log(Reflect.apply(sum,"aaa",[2,3])); let json = { a:1, b:2 }; Reflect.deleteProperty(json, 'a'); console.log(json); </script>
来源:https://www.cnblogs.com/obchy/p/11149358.html