|
| 1 | +# 再学JavaScript ES(6-10)全版本语法大全 |
| 2 | + |
| 3 | +`Vue.js React node` -> JS(ECMAScript) |
| 4 | + |
| 5 | +全新JavaScript体系ES6(ES2015):`Module、Scope、Array lterator、Object、Generator、Set、Proxy、Map、Function、Reflect、Class、Promise、RegExp、Destructure、Template` |
| 6 | + |
| 7 | + |
| 8 | +全新JavaScript体系 ES7~ES10: |
| 9 | +ES7 `Array.prototype.includes、Math.pow` |
| 10 | + |
| 11 | +ES8 `async/await、Object.values、Object.keys、object.entries、String padding、Object.getOwnProperty Descriptors` |
| 12 | + |
| 13 | +ES9 `for await of、Promise.prototype.finally、Object Rest Spread、RegExp Updates` |
| 14 | + |
| 15 | +ES10 `JSON、Array、String、object、Symbol、Function、BigInt` |
| 16 | + |
| 17 | + |
| 18 | +```javascript |
| 19 | +示例1：将嵌套的数组实现扁平化输出 |
| 20 | +**原生能力支持无须单独实现** |
| 21 | +//ES5实现方式 |
| 22 | +function flatten (arr) { |
| 23 | +return !Array.isArray(arr) ? arr:[].concat.apply([],arr.map(flatten))} |
| 24 | +flatten([1,[2,3],4,[[5,6],7]]) |
| 25 | +//ES6+实现方式 |
| 26 | +[1,[2,3],4,[[5,6],7].flat(3)] |
| 27 | + |
| 28 | +示例2：将复杂问题简单化 |
| 29 | +如何给已知的数组去重 |
| 30 | +//ES5实现方式 |
| 31 | +function unique(array){ |
| 32 | + var obj={} |
| 33 | + return array.filter(function (item,index,array){ |
| 34 | + return obj.hasOwnProperty(item)? false:(obj[item]=true) |
| 35 | + }) |
| 36 | +} |
| 37 | +unique([1,2,3,4,3]) |
| 38 | +//ES6+实现方式 |
| 39 | +Array.from(new Set([1,2,3,4,3])) |
| 40 | + |
| 41 | +示例3：动态渲染一个DOM片段 |
| 42 | +降低代码维护成本 |
| 43 | +//ES5实现方式 |
| 44 | +var list = [{name: "小丽",age: 20}, {name: "小明",age: 22}] |
| 45 | +function makeString(data) { |
| 46 | + var tplArr = ['<table><td>name</td><td>age</td>'] |
| 47 | + for (var i = 0; i < data.length; i++) { |
| 48 | + tplArr.push('<tr><td>' + data[i].name + '</td><td>' + data[i].age + '</td></tr>') |
| 49 | + } |
| 50 | + tplArr.push('</table>') |
| 51 | + return tplArr.join('') |
| 52 | +} |
| 53 | +document.write(makeString(list)); |
| 54 | +console.log(makeString(list)); |
| 55 | +//ES6+实现方式 |
| 56 | +const list=[{name:"小丽",age:20},{name:"小明",age:22}] |
| 57 | +function makeString (data){ |
| 58 | + let body='' |
| 59 | + for(let item of data){ |
| 60 | + body +=`<tr><td>${item.name}</td><td>${item.age}</td></tr>` |
| 61 | + } |
| 62 | + return ` |
| 63 | + <table> |
| 64 | + <td>name</td><td>age</td> |
| 65 | + ${body} |
| 66 | + </table> |
| 67 | + ` |
| 68 | +} |
| 69 | +document.write(makeString(list)); |
| 70 | +console.log(makeString(list)); |
| 71 | + |
| 72 | +示例4：请用一步操作 |
| 73 | +在"this cost is $100,not $1000 and $20 and ￥100" |
| 74 | +字符串中精确找出前面字符是$且小于四位数的金额 |
| 75 | +让无能为力变得轻而易举 |
| 76 | +//ES5实现方式 无解 |
| 77 | +//ES6+实现方式 |
| 78 | +'this cost is $100,not $1000 and $20 and ￥100'.match(/(?<=\$)\d{1,3}(?!\d)/g) |
| 79 | +``` |
| 80 | + |
| 81 | + |
| 82 | + |
| 83 | +环境->语法->阅读->练习->Vue->构建 |
| 84 | + |
| 85 | + |
| 86 | + |
| 87 | +## Let & Const作用域基础语法 |
| 88 | + |
| 89 | +全局、块级、函数、动态作用域 |
| 90 | + |
| 91 | +```javascript |
| 92 | +JavaScript 变量生命周期在它声明时初始化 |
| 93 | +局部变量在函数执行完毕后销毁 |
| 94 | +全局变量在页面关闭后销毁 |
| 95 | +var a=1//用var定义是全局变量（不可删除） |
| 96 | +b=2//不用var定义(无论函数内外)都是window(全局对象)的属性（可删除） |
| 97 | +delete a //false |
| 98 | +delete b //true |
| 99 | + |
| 100 | +function f1(){ |
| 101 | + c=3//全局作用域 |
| 102 | + if (c===3){ |
| 103 | + var d=4//存在变量提升，会在上层var d,在此处d=4;故引入let |
| 104 | + }else{ |
| 105 | + console.log(c) |
| 106 | + } |
| 107 | + console.log(d) |
| 108 | + return d+1//return向外传递 |
| 109 | +} |
| 110 | +f1() |
| 111 | +delete c //true 不用var定义(无论函数内外)都是window(全局对象)的属性（可删除） |
| 112 | + |
| 113 | +function f2(){ |
| 114 | + var a = 3 |
| 115 | + function f3(){ |
| 116 | + var b = 4 |
| 117 | + return a+b |
| 118 | + } |
| 119 | + return f3()//闭包向外传递 |
| 120 | +} |
| 121 | +f2()//f3()向上层找a的值，返回7 |
| 122 | + |
| 123 | +window.e=5 |
| 124 | +function f3(){ |
| 125 | + console.log(this.e)//this是动态指向，不是固定指向window |
| 126 | +} |
| 127 | +f3() |
| 128 | +f3.bind({e:100})()//函数动态绑定，动态作用域 |
| 129 | +``` |
| 130 | + |
| 131 | +## let和const区别 |
| 132 | + |
| 133 | +let `let具有块级作用域`+`let声明的全局变量不是全局对象的属性,不能用全局作用域window访问`+`不能重复定义变量`+`不会进行变量提升` |
| 134 | + |
| 135 | +const `const只能定义常量`+`必须在声明时进行初始化` |
| 136 | + |
| 137 | +扩展阅读： |
| 138 | + |
| 139 | +1.什么是作用域 |
| 140 | + |
| 141 | +2.JavaScript深入之词法作用域和动态作用域 |
| 142 | + |
| 143 | +3.深入理解JS中声明提升、作用域（链）和this 关键字 |
| 144 | + |
| 145 | +for(var i=0;i<3;i++){ |
| 146 | + setTimeout(function(){ |
| 147 | + console.log(i); |
| 148 | + },1000); |
| 149 | +} |
| 150 | + |
| 151 | +同步优先于异步优先于回调 |
0 commit comments