\u672c\u7ae0\u5185\u5bb9\u662f\u5bf9\u524d\u9762JS\u57fa\u7840\u77e5\u8bc6\u7684\u590d\u4e60\uff0c\u590d\u4e60\u5185\u5bb9\u4e3b\u8981\u6d89\u53ca\u5230React\u4e2d\u5e38\u7528\u4e14\u5bb9\u6613\u72af\u9519\u4ea7\u751f\u7591\u60d1\u7684\u70b9\u3002<\/p>\n\n\n\n
\u5982\u679c\u4f60\u5df2\u7ecf\u5bf9JS\u57fa\u7840\u77e5\u8bc6\u638c\u63e1\u7684\u975e\u5e38\u7262\u56fa\u4e86\uff0c\u5b8c\u5168\u53ef\u4ee5\u8df3\u8fc7\u672c\u7ae0\u3002<\/p>\n\n\n\n
JS\u4e2d\u58f0\u660e\u53d8\u91cf\uff08\u5e38\u91cf\uff09\u7684\u65b9\u5f0f\u6709\u4e09\u79cd\uff1avar\u3001let\u3001const\uff08\u5e38\u91cf\uff09\u3002<\/p>\n\n\n\n
var\u662fJS\u4e2d\u6700\u53e4\u8001\u7684\u58f0\u660e\u53d8\u91cf\u7684\u65b9\u5f0f\uff0c\u53ef\u8c13\u5386\u53f2\u60a0\u4e45\u3002\u4f46\u662f\u73b0\u5728\u7684\u524d\u7aef\u9879\u76ee\u4e2d\u5e76\u4e0d\u63a8\u8350\u4f7f\u7528var\u5173\u952e\u5b57\u6765\u58f0\u660e\u53d8\u91cf\uff0c\u8fd9\u5176\u4e2d\u6700\u91cd\u8981\u7684\u539f\u56e0\u662fvar\u58f0\u660e\u7684\u53d8\u91cf\u6ca1\u6709\u5757\u4f5c\u7528\u57df\uff0c\u4ee5\u4e0b\u5217\u4ee3\u7801\u4e3a\u4f8b\uff1a<\/p>\n\n\n\n
\u4ee3\u78011-1\uff1a<\/p>\n\n\n\n
for(var i=0; i<4; i++){
\/\/ \u968f\u4fbf\u5199\u70b9\u4ec0\u4e48
}
console.log(i); \/\/ \u8f93\u51fa 4<\/pre>\n\n\n\n\u4ee3\u78011-2\uff1a<\/p>\n\n\n\n
if(true){
var a = 10;
}
console.log(a); \/\/ \u8f93\u51fa10<\/pre>\n\n\n\n\u4ee3\u78011-3\uff1a<\/p>\n\n\n\n
if(false){
var a = 10;
}
console.log(a); \/\/ undefined<\/pre>\n\n\n\n\u7531\u4e8evar\u58f0\u660e\u7684\u53d8\u91cf\u6ca1\u6709\u5757\u4f5c\u7528\u57df\uff0c\u6240\u4ee5\u4ee3\u78011-1\u4e2d\u7684\u53d8\u91cfi\u867d\u7136\u58f0\u660e\u5728\u4e86for\u5faa\u73af\u4e2d\uff0c\u4f46\u5728for\u5faa\u73af\u7684\u5916\u90e8\u4f9d\u7136\u53ef\u4ee5\u8bbf\u95ee\u5230\u3002\u4ee3\u78011-2\u548c\u4ee3\u78011-3\u5c06\u53d8\u91cf\u58f0\u660e\u5728\u4e86if\u8bed\u53e5\u4e2d\uff0c\u540c\u6837\u7531\u4e8e\u6ca1\u6709\u5757\u4f5c\u7528\u57df\uff0c\u5728if\u8bed\u53e5\u7684\u5916\u90e8\u53ef\u4ee5\u8bbf\u95ee\u5230\u53d8\u91cfa\u3002\u4ee3\u78011-3\u7684\u6761\u4ef6\u8868\u8fbe\u5f0f\u662f\u4e3afalse\uff0c\u8d4b\u503c\uff08a = 10\uff09\u5e76\u4e0d\u4f1a\u6267\u884c\uff0c\u4f46\u7531\u4e8evar\u662f\u6ca1\u6709\u5757\u4f5c\u7528\u57df\u7684\uff0c\u6240\u4ee5\u5e76\u4e0d\u5f71\u54cd\u53d8\u91cf\u7684\u58f0\u660e\uff0c\u5728\u5916\u90e8\u4f9d\u7136\u53ef\u4ee5\u6253\u5370\u51faundefined\u3002<\/p>\n\n\n\n
\u548cvar\u4e0d\u540c\uff0clet\u58f0\u660e\u7684\u53d8\u91cf\u90fd\u5177\u6709\u5757\u4f5c\u7528\u57df\uff0c\u5982\u679c\u5c06\u4e0a\u8ff0\u4e09\u4e2a\u4ee3\u7801\u4e2d\u7684var\u6362\u6210let\uff0c\u5219\u901a\u901a\u90fd\u4f1a\u62a5\u627e\u4e0d\u5230\u53d8\u91cf\u7684\u9519\u8bef\u3002\u8fd9\u662f\u56e0\u4e3a\uff0c\u4f7f\u7528let\u58f0\u660e\u7684\u53d8\u91cf\u53ea\u5728\u5f53\u524d\u4ee3\u7801\u5757\u4e2d\u6709\u6548\uff0c\u5728\u4ee3\u7801\u5757\u5916\u90e8\u65e0\u6cd5\u8bbf\u95ee\u3002let\u7684\u51fa\u73b0\u6709\u6548\u7684\u9694\u79bb\u4e86\u4ee3\u7801\u5757\u5185\u5916\u7684\u53d8\u91cf\uff0c\u4f7f\u5f97\u4ee3\u7801\u7684\u7ed3\u6784\u66f4\u6e05\u6670\uff0c\u7ef4\u62a4\u8d77\u6765\u66f4\u52a0\u5bb9\u6613\u3002\u8981\u77e5\u9053\uff0c\u5728\u6ca1\u6709let\u7684\u65e5\u5b50\u91cc\uff0c\u6211\u4eec\u53ea\u80fd\u901a\u8fc7\u95ed\u5305\u6765\u6a21\u62df\u5757\u4f5c\u7528\u57df\u3002<\/p>\n\n\n\n
\u603b\u4e4b\uff0c\u5bf9\u4e8elet\u548cvar\u6765\u8bf4\uff0c\u80fd\u7528let\u7edd\u5bf9\u4e0d\u7528var\uff01<\/p>\n\n\n\n
const<\/h3>\n\n\n\n
const\u5728JS\u4e2d\u7528\u6765\u58f0\u660e\u5e38\u91cf\uff0c\u6240\u8c13\u5e38\u91cf\u5c31\u662f\u53ea\u80fd\u8d4b\u503c\u4e00\u6b21\u7684\u53d8\u91cf\u3002\u5728JS\u4e2d\u5bf9const\u7684\u4f7f\u7528\u662f\u975e\u5e38\u9891\u7e41\u7684\uff0c\u5f53\u4e00\u4e2a\u53d8\u91cf\u7528\u6765\u4fdd\u5b58\u4e00\u4e2a\u5bf9\u8c61\u65f6\uff08\u51fd\u6570\u6216\u5176\u4ed6\u5bf9\u8c61\uff09\uff0c\u4e3a\u4e86\u907f\u514d\u53d8\u91cf\u88ab\u4fee\u6539\u901a\u5e38\u4f1a\u4f7f\u7528const\u6765\u58f0\u660e\u3002<\/p>\n\n\n\n
\u4e09\u79cd\u58f0\u660e\u65b9\u5f0f\u4e2d\uff0c\u7b2c\u4e00\u4f18\u5148\u4f7f\u7528\u7684\u662fconst\uff0c\u5982\u679c\u5e0c\u671b\u53d8\u91cf\u88ab\u6539\u53d8\u5219\u4f7f\u7528let\uff0c\u81f3\u4e8evar\u6700\u597d\u4e0d\u8981\u5728\u4ee3\u7801\u4e2d\u51fa\u73b0\uff01<\/mark><\/strong><\/p>\n\n\n\n<\/th> \u5757\u4f5c\u7528\u57df<\/th> \u53ef\u4ee5\u91cd\u65b0\u8d4b\u503c<\/th> \u662f\u5426\u63a8\u8350\u4f7f\u7528<\/th><\/tr><\/thead> const<\/td> \u221a<\/td> \u00d7<\/td> \u221a<\/td><\/tr> let<\/td> \u221a<\/td> \u221a<\/td> \u221a<\/td><\/tr> var<\/td> \u00d7<\/td> \u221a<\/td> \u00d7<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n\u89e3\u6784\u548c\u5c55\u5f00<\/h2>\n\n\n\n\u89e3\u6784\u8d4b\u503c<\/h3>\n\n\n\n
\u901a\u8fc7\u89e3\u6784\u8d4b\u503c\u53ef\u4ee5\u76f4\u63a5\u5c06\u6570\u7ec4\u4e2d\u7684\u5143\u7d20\uff0c\u5bf9\u8c61\u4e2d\u7684\u5c5e\u6027\u8d4b\u503c\u7ed9\u5176\u4ed6\u7684\u53d8\u91cf\u3002<\/p>\n\n\n\n
\u4ee3\u78011-4\uff08\u6570\u7ec4\u89e3\u6784\uff09\uff1a<\/p>\n\n\n\n
let a, b, rest;
[a, b] = [10, 20]; \/\/ \u7b2c\u4e00\u4e2a\u5143\u7d20\u7ed9a\uff0c\u7b2c\u4e8c\u4e2a\u5143\u7d20\u7ed9b
console.log(a); \/\/ 10
console.log(b); \/\/ 20
\u200b
[a, , b] = [10, 20, 30]; \/\/ \u7b2c\u4e00\u4e2a\u5143\u7d20\u7ed9a\uff0c\u7b2c\u4e09\u4e2a\u5143\u7d20\u7ed9b\uff0c\u4e2d\u95f4\u7a7a\u51fa\u4e00\u4e2a
console.log(a); \/\/ 10
console.log(b); \/\/ 30
\u200b
[a, b, ...rest] = [10, 20, 30, 40, 50]; \/\/ \u7b2c\u4e00\u4e2a\u5143\u7d20\u7ed9a\uff0c\u7b2c\u4e8c\u4e2a\u5143\u7d20\u7ed9b\uff0c\u5269\u4e0b\u7684\u7ed9rest
console.log(a); \/\/ 10
console.log(b); \/\/ 20
console.log(rest); \/\/ [30, 40, 50]
\u200b
const [d, e, f] = [40, 50, 60] \/\/ \u53ef\u4ee5\u5728\u8d4b\u503c\u65f6\u76f4\u63a5\u58f0\u660e\u53d8\u91cf
console.log(d); \/\/ 40
console.log(e); \/\/ 50
console.log(f); \/\/ 60
\u200b
[a=5, b=7] = [1]; \/\/ \u8d4b\u503c\u662f\u53ef\u4ee5\u6307\u5b9a\u9ed8\u8ba4\u503c
console.log(a); \/\/ 1
console.log(b); \/\/ 7<\/pre>\n\n\n\n\u4ee3\u78011-5 \uff08\u5bf9\u8c61\u89e3\u6784\uff09<\/p>\n\n\n\n
let a, b;
({ a, b } = { a: 10, b: 20 }); \/\/\u5c5e\u6027a\u8d4b\u503c\u7ed9\u53d8\u91cfa\uff0c\u5c5e\u6027b\u8d4b\u503c\u7ed9\u53d8\u91cfb
console.log(a); \/\/ 10
console.log(b); \/\/ 20
\u200b
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); \/\/\u5c5e\u6027a\u8d4b\u503c\u7ed9\u53d8\u91cfa\uff0c\u5c5e\u6027b\u8d4b\u503c\u7ed9\u53d8\u91cfb\uff0c\u5176\u4f59\u7684\u4fdd\u5b58\u5230rest\u4e2d
console.log(a); \/\/ 10
console.log(b); \/\/ 20
console.log(rest); \/\/ {c: 30, d: 40}
\u200b
({a = 10, b = 5} = {a: 3}); \/\/ \u53ef\u4ee5\u6307\u5b9a\u9ed8\u8ba4\u503c
console.log(a); \/\/ 3
console.log(b); \/\/ 5
\u200b
const {name, age} = {name:'\u5b59\u609f\u7a7a', age:18}; \/\/ \u5bf9\u8c61\u89e3\u6784\u65f6\u5982\u679c\u4f7f\u7528const\u3001let\u3001var\u5f00\u5934\uff0c\u53ef\u4ee5\u4e0d\u52a0()
console.log(name); \/\/ \u5b59\u609f\u7a7a
console.log(age); \/\/ 18
\u200b
const {len: width} = {len:100}; \/\/ \u5c06\u5bf9\u8c61\u7684len\u5c5e\u6027\u503c\u8d4b\u503c\u7ed9\u53d8\u91cfwidth
console.log(width); \/\/ 100
\u200b
const {inner:{size}} = {a: 10, b: 20, inner:{size: 5}}; \/\/ \u5c06\u5bf9\u8c61\u4e2dinner.size\u8d4b\u503c\u7ed9\u53d8\u91cfsize
console.log(size) \/\/ 5
\u200b
const {inner:{size:mySize}} = {a: 10, b: 20, inner:{size: 5}}; \/\/ \u5c06\u5bf9\u8c61\u4e2dinner.size\u8d4b\u503c\u7ed9\u53d8\u91cfmySize
console.log(mySize); \/\/ 5
\u200b<\/pre>\n\n\n\n\u4ee3\u78011-6\uff08\u4ea4\u6362\u53d8\u91cf\u503c\uff09<\/p>\n\n\n\n
let a = 1;
let b = 3;
\u200b
[a, b] = [b, a]; \/\/ \u4ea4\u6362\u53d8\u91cfa\u548cb\u7684\u503c
console.log(a); \/\/ 3
console.log(b); \/\/ 1
\u200b
const arr = [1,2,3];
[arr[2], arr[1]] = [arr[1], arr[2]]; \/\/ \u4ea4\u6362\u6570\u7ec4\u4e2d\u4e24\u4e2a\u5143\u7d20\u7684\u4f4d\u7f6e
console.log(arr); \/\/ [1,3,2]<\/pre>\n\n\n\n\u4ee3\u78011-7\uff08\u89e3\u6784\u51fd\u6570\u8fd4\u56de\u503c\uff09<\/p>\n\n\n\n
function f() {
return [1, 2];
}
\u200b
let [a, b] = f();
console.log(a); \/\/ 1
console.log(b); \/\/ 2<\/pre>\n\n\n\n\u4ee3\u78011-8\uff08\u5d4c\u5957\u89e3\u6784\uff09<\/p>\n\n\n\n
const props = [
{ id: 1, name: '\u5b59\u609f\u7a7a'},
{ id: 2, name: '\u732a\u516b\u6212'},
{ id: 3, name: '\u6c99\u548c\u5c1a'}
];
\u200b
const [,, { name }] = props;
\u200b
console.log(name); \/\/ \"\u6c99\u548c\u5c1a\"<\/pre>\n\n\n\n\u5c55\u5f00<\/h3>\n\n\n\n
\u5c55\u5f00\u53ef\u4ee5\u5728\u51fd\u6570\u8c03\u7528\u65f6\uff0c\u5c06\u6570\u7ec4\uff08\u6216\u5b57\u7b26\u4e32\uff09\u5c55\u5f00\u4e3a\u51fd\u6570\u7684\u53c2\u6570\uff0c\u4e5f\u53ef\u4ee5\u5728\u901a\u8fc7\u5b57\u9762\u91cf\u521b\u5efa\u6570\u7ec4\uff08\u6216\u5bf9\u8c61\uff09\u65f6\uff0c\u76f4\u63a5\u5c06\u5176\u4ed6\u6570\u7ec4\uff08\u6216\u5bf9\u8c61\uff09\u5728\u65b0\u6570\u7ec4\uff08\u6216\u5bf9\u8c61\uff09\u4e2d\u5c55\u5f00\uff08\u7c7b\u4f3c\u4e8e\u6d45\u62f7\u8d1d\uff09\u3002<\/p>\n\n\n\n
\u8bed\u6cd5\uff1a<\/p>\n\n\n\n
myFunction(...iterableObj); \/\/ \u5c55\u5f00\u6570\u7ec4\u4f20\u53c2
\u200b
[...iterableObj, '4', 'five', 6]; \/\/ \u521b\u5efa\u6570\u7ec4\u65f6\u5c55\u5f00\u5176\u4ed6\u6570\u7ec4
\u200b
let objClone = { ...obj }; \/\/ \u5c06\u4e00\u4e2a\u5bf9\u8c61\u4e2d\u7684\u6240\u6709\u952e\u503c\u5bf9\u5c55\u5f00\u5230\u4e00\u4e2a\u65b0\u5bf9\u8c61\u4e2d\uff08\u6d45\u62f7\u8d1d\uff09<\/pre>\n\n\n\n\u4ee3\u78011-9\uff08\u5c06\u6570\u7ec4\u4e2d\u7684\u5143\u7d20\u89e3\u6784\u4e3a\u51fd\u6570\u7684\u53c2\u6570\uff09<\/p>\n\n\n\n
function fn(x, y, z) {
console.log('x =', x);
console.log('y =', y);
console.log('z =', z);
}
\u200b
const numbers = [1, 2, 3];
\u200b
fn(...numbers);
\/*
\u8f93\u51fa\uff1a
x = 1
y = 2
z = 3
*\/
\u200b
function myFunction(v, w, x, y, z) { }
let args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);<\/pre>\n\n\n\n\u4ee3\u78011-10 \uff08\u521b\u5efa\u6570\u7ec4\u65f6\u5c55\u5f00\u5176\u4ed6\u6570\u7ec4\uff09<\/p>\n\n\n\n
const arr = [0, 1, 2];
const newArr = [...arr, 12];
console.log(newArr); \/\/ [0, 1, 2, 12]
\u200b
let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];
\/\/ [\"head\", \"shoulders\", \"knees\", \"and\", \"toes\"]
\u200b
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];
\u200b
let obj1 = { name: '\u5b59\u609f\u7a7a', age: 18 };
let obj2 = { name: '\u732a\u516b\u6212', address: '\u9ad8\u8001\u5e84' };
\u200b
let clonedObj = { ...obj1 }; \/\/ \u6d45\u62f7\u8d1d\u5bf9\u8c61
\/\/ Object { name: '\u5b59\u609f\u7a7a', age: 18 }
\u200b
let mergedObj = { ...obj1, ...obj2 }; \/\/ \u5408\u5e76\u4e24\u4e2a\u5bf9\u8c61
\/\/ Object {name: '\u732a\u516b\u6212', age: 18, address: '\u9ad8\u8001\u5e84'}<\/pre>\n\n\n\n\u7bad\u5934\u51fd\u6570<\/h2>\n\n\n\n
\u7bad\u5934\u51fd\u6570\u662f\u4f20\u7edf\u51fd\u6570\u8868\u8fbe\u5f0f\u7684\u7b80\u5199\u65b9\u5f0f\uff0c\u5b83\u7b80\u5316\u4e86\u51fd\u6570\u7684\u7f16\u5199\uff0c\u4e5f\u5e26\u6765\u4e86\u4e00\u4e9b\u9650\u5236\u5bfc\u81f4\u5728\u4e00\u4e9b\u573a\u666f\u4e0b\u5b83\u65e0\u6cd5\u4f7f\u7528\u3002<\/p>\n\n\n\n
\u7279\u70b9\uff1a<\/p>\n\n\n\n
- \u7bad\u5934\u51fd\u6570\u6ca1\u6709\u81ea\u5df1\u7684this<\/li>
- \u7bad\u5934\u51fd\u6570\u4e2d\u6ca1\u6709arguments<\/li>
- \u4e0d\u80fd\u4f5c\u4e3a\u6784\u9020\u51fd\u6570\u8c03\u7528<\/li>
- \u65e0\u6cd5\u901a\u8fc7call\u3001apply\u3001bind\u6307\u5b9a\u51fd\u6570\u7684this<\/li><\/ol>\n\n\n\n
\u4ee3\u78011-10 \uff08\u7bad\u5934\u51fd\u6570\u8bed\u6cd5\uff09<\/p>\n\n\n\n
\/\/ \u57fa\u672c\u8bed\u6cd5
param => expression
\u200b
\/\/ \u591a\u4e2a\u53c2\u6570\u65f6\uff0c\u53c2\u6570\u9700\u8981\u4f7f\u7528()\u62ec\u8d77\u6765
(param1, paramN) => expression
\u200b
\/\/ \u591a\u6761\u8bed\u53e5\u65f6\uff0c\u8bed\u53e5\u9700\u8981\u4f7f\u7528{}\u62ec\u8d77\u6765\uff0c\u540c\u65f6\u4f7f\u7528return\u8bbe\u7f6e\u8fd4\u56de\u503c
param => {
let a = 1;
return a + param;
}
\u200b
\/\/ \u8fd4\u56de\u503c\u662f\u4e00\u4e2a\u5bf9\u8c61\u65f6\uff0c\u5bf9\u8c61\u9700\u8981\u52a0()
params => ({foo: \"a\"})
\u200b
\/\/\u591a\u4f59\u53c2\u6570\u3001\u9ed8\u8ba4\u53c2\u6570\u548c\u4f20\u7edf\u51fd\u6570\u65e0\u5f02
(a, b, ...r) => expression
(a=400, b=20, c) => expression
\u200b<\/pre>\n\n\n\n\u6a21\u5757\u5316<\/h2>\n\n\n\n
\u521d\u671f\u7684JavaScript\u9879\u76ee\u662f\u975e\u5e38\u5c0f\u7684\uff0c\u5e76\u4e0d\u9700\u8981\u5f15\u5165\u6a21\u5757\u5316\u6765\u5bf9\u5176\u8fdb\u884c\u5904\u7406\u3002\u4f46\u662f\u968f\u7740\u524d\u7aef\u9879\u76ee\u590d\u6742\u5ea6\u7684\u63d0\u9ad8\uff0c\u9879\u76ee\u4e2d\u7684\u4ee3\u7801\u8d8a\u6765\u8d8a\u591a\uff0c\u5f15\u5165\u6a21\u5757\u5316\u6210\u4e3a\u4e00\u4e2a\u8feb\u5728\u7709\u776b\u7684\u95ee\u9898\u3002<\/p>\n\n\n\n
\u6240\u8c13\u7684\u6a21\u5757\u5316\u6307\u5c06\u4e00\u4e2a\u5927\u7684\u9879\u76ee\u62c6\u5206\u6210\u4e00\u4e2a\u4e00\u4e2a\u5c0f\u7684\u6a21\u5757\u3002\u62c6\u5206\u6a21\u5757\u7684\u597d\u5904\u6709\u5f88\u591a\uff0c\u6bd4\u5982\u4f7f\u4ee3\u7801\u53d8\u5f97\u7ed3\u6784\u6e05\u6670\u3001\u6613\u4e8e\u7ef4\u62a4\u3001\u63d0\u9ad8\u590d\u7528\u5ea6\u7b49\u3002\u4f20\u7edf\u7684JS\u4e2d\u5f15\u5165\u5916\u90e8\u7684\u811a\u672c\u4e5f\u53ef\u4ee5\u5f53\u6210\u662f\u4e00\u79cd\u521d\u7ea7\u7684\u6a21\u5757\u5316\u65b9\u5f0f\uff0c\u4f46\u90a3\u79cd\u65b9\u5f0f\u5b58\u5728\u7740\u5f88\u591a\u4e0d\u8db3\uff0c\u5bf9\u6211\u4eec\u5f00\u53d1\u4eba\u5458\u6765\u8bf4\u5e76\u4e0d\u5341\u5206\u53cb\u597d\u3002\u6240\u4ee5\u6709\u4e00\u4e9b\u524d\u8f88\u5f00\u59cb\u8bbe\u8ba1\u65b0\u7684\u6a21\u5757\u5316\u65b9\u6cd5\u6765\u5bf9JS\u8fdb\u884c\u6269\u5c55\uff0c\u50cfCommonJS\u3001AMD\u3001ReauireJS\u7b49\u6a21\u5757\u7cfb\u7edf\u90fd\u662f\u5f88\u597d\u7684\u5c1d\u8bd5\u3002CommonJS\u73b0\u5728\u4f9d\u7136\u662fNode.js\u4e2d\u9ed8\u8ba4\u7684\u6a21\u5757\u5316\u65b9\u5f0f\u3002<\/p>\n\n\n\n
\u7b2c\u4e09\u65b9\u7684\u6a21\u5757\u5316\u8fdb\u884c\u7684\u5982\u706b\u5982\u837c\uff0cECMA\u5b98\u65b9\u5f53\u7136\u4e0d\u80fd\u8896\u624b\u65c1\u89c2\uff0c\u4e8e\u662f\u5c31\u6709\u4e86ES6\u7684\u6a21\u5757\u5316\u65b9\u6848\u3002ES6\u7684\u6a21\u5757\u5316\u5206\u6210\u4e24\u4e2a\u90e8\u5206\uff1aexport\u548cimport\u3002<\/p>\n\n\n\n
export\uff08\u5bfc\u51fa\uff09<\/h3>\n\n\n\n
\u5728\u521b\u5efaJS\u6a21\u5757\u65f6\uff0c\u6211\u4eec\u901a\u8fc7export\u5411\u6a21\u5757\u5916\u90e8\u66b4\u9732\u5185\u5bb9\uff08\u51fd\u6570\u3001\u5bf9\u8c61\u3001\u539f\u59cb\u503c\uff09\u3002\u5728\u5176\u4ed6\u6a21\u5757\u4e2d\u53ef\u4ee5\u901a\u8fc7import\u5f15\u5165\u8fd9\u4e9b\u5185\u5bb9\u3002\u4f7f\u7528\u4e86export\u7684\u6a21\u5757\u4f1a\u81ea\u52a8\u5f00\u542f\u4e25\u683c\u6a21\u5f0f\u3002<\/p>\n\n\n\n
export\u5bfc\u51fa\u7684\u65b9\u5f0f\u6709\u4e24\u79cd\uff1a<\/p>\n\n\n\n
- \u9ed8\u8ba4\u5bfc\u51fa<\/li>
- \u547d\u540d\u5bfc\u51fa<\/li><\/ol>\n\n\n\n
\u4ee3\u78011-11\uff08export\u8bed\u6cd5\uff09<\/p>\n\n\n\n
\/\/ \u5bfc\u51fa\u53d8\u91cf\uff08\u547d\u540d\u5bfc\u51fa\uff09
export let name1, name2, \u2026, nameN;
export let name1 = \u2026, name2 = \u2026, \u2026, nameN;
\u200b
\/\/ \u5bfc\u51fa\u51fd\u6570\uff08\u547d\u540d\u5bfc\u51fa\uff09
export function functionName(){...}
\u200b
\/\/ \u5bfc\u51fa\u7c7b\uff08\u547d\u540d\u5bfc\u51fa\uff09
export class ClassName {...}
\u200b
\/\/ \u5bfc\u51fa\u4e00\u7ec4
export { name1, name2, \u2026, nameN };
\u200b
\/\/ \u91cd\u547d\u540d\u5bfc\u51fa
export { variable1 as name1, variable2 as name2, \u2026, nameN };
\u200b
\/\/ \u89e3\u6784\u8d4b\u503c\u540e\u5bfc\u51fa
export const { name1, name2: bar } = o;
\u200b
\/\/ \u9ed8\u8ba4\u5bfc\u51fa
export default expression;
export default function (\u2026) { \u2026 } \/\/ also class, function*
export default function name1(\u2026) { \u2026 } \/\/ also class, function*
export { name1 as default, \u2026 };
\u200b
\/\/ \u805a\u5408\u6a21\u5757
export * from \u2026; \/\/ \u5c06\u5176\u4ed6\u6a21\u5757\u4e2d\u7684\u5168\u90e8\u5185\u5bb9\u5bfc\u51fa\uff08\u9664\u4e86default\uff09
export * as name1 from \u2026; \/\/ ECMAScript\u00ae 2O20 \u5c06\u5176\u4ed6\u6a21\u5757\u4e2d\u7684\u5168\u90e8\u5185\u5bb9\u4ee5\u6307\u5b9a\u522b\u540d\u5bfc\u51fa
export { name1, name2, \u2026, nameN } from \u2026; \/\/ \u5c06\u5176\u4ed6\u6a21\u5757\u4e2d\u7684\u6307\u5b9a\u5185\u5bb9\u5bfc\u51fa
export { import1 as name1, import2 as name2, \u2026, nameN } from \u2026; \/\/ \u5c06\u5176\u4ed6\u6a21\u5757\u4e2d\u7684\u6307\u5b9a\u5185\u5bb9\u91cd\u547d\u540d\u5bfc\u51fa
export { default, \u2026 } from \u2026;
\u200b<\/pre>\n\n\n\nimport\uff08\u5f15\u5165\uff09<\/h3>\n\n\n\n
import\u7528\u6765\u5f15\u5165\u5176\u4ed6\u6a21\u5757\u4e2d\u5bfc\u51fa\u7684\u5185\u5bb9\uff0c\u6ce8\u610f\uff01\u53ea\u6709\u901a\u8fc7export\u5bfc\u51fa\u7684\u5185\u5bb9\u624d\u80fd\u591f\u901a\u8fc7import\u5f15\u5165\u3002\u548cexport\u4e00\u6837\uff0c\u4f7f\u7528\u4e86import\u7684\u6a21\u5757\u4f1a\u81ea\u52a8\u542f\u7528\u4e25\u683c\u6a21\u5f0f\u3002<\/p>\n\n\n\n
\u4ee3\u78011-12\uff08import\u8bed\u6cd5\uff09<\/p>\n\n\n\n
\/\/ \u5f15\u5165\u9ed8\u8ba4\u5bfc\u51fa
import defaultExport from \"module-name\";
\u200b
\/\/ \u5c06\u6240\u6709\u6a21\u5757\u5bfc\u5165\u5230\u6307\u5b9a\u547d\u540d\u7a7a\u95f4\u4e2d
import * as name from \"module-name\";
\u200b
\/\/ \u5f15\u5165\u6a21\u5757\u4e2d\u7684\u6307\u5b9a\u5185\u5bb9
import { export1 } from \"module-name\";
import { export1 , export2 } from \"module-name\";
\u200b
\/\/ \u4ee5\u6307\u5b9a\u522b\u540d\u5f15\u5165\u6a21\u5757\u4e2d\u7684\u6307\u5b9a\u5185\u5bb9
import { export1 as alias1 } from \"module-name\";
import { export1 , export2 as alias2 , [...] } from \"module-name\";
\u200b
\/\/ \u5f15\u5165\u9ed8\u8ba4\u548c\u5176\u4ed6\u5185\u5bb9
import defaultExport, { export1 [ , [...] ] } from \"module-name\";
import defaultExport, * as name from \"module-name\";
\u200b
\/\/ \u5f15\u5165\u6a21\u5757
import \"module-name\";<\/pre>\n\n\n\n\u7c7b\uff08class\uff09<\/h2>\n\n\n\n
\u7c7b\u662f\u5bf9\u8c61\u7684\u6a21\u677f\uff0c\u7c7b\u4e2d\u5b9a\u4e49\u4e86\u5bf9\u8c61\u4e2d\u5305\u542b\u4e86\u54ea\u4e9b\u5c5e\u6027\u548c\u65b9\u6cd5\u3002\u4e5f\u53ef\u4ee5\u76f4\u63a5\u901a\u8fc7function\u6765\u5b9a\u4e49\u7c7b\uff0c\u4f46\u8fd9\u4e24\u79cd\u5b9a\u4e49\u65b9\u5f0f\u5e76\u4e0d\u662f\u5b8c\u5168\u901a\u7528\u3002<\/p>\n\n\n\n
\u4ee3\u78011-13\uff08\u7b80\u5355\u7684\u7c7b\uff09<\/p>\n\n\n\n
class Person {
\/\/\u5c5e\u6027
name = \"\u5b59\u609f\u7a7a\";
\/\/ \u5c5e\u6027
age = 18;
\/\/ \u65b9\u6cd5
sayHello() {
console.log(`\u5927\u5bb6\u597d\uff0c\u6211\u662f${this.name}`);
}
}
const p = new Person(); \/\/ \u521b\u5efa\u5bf9\u8c61
p.sayHello(); \/\/ \u8c03\u7528\u65b9\u6cd5<\/pre>\n\n\n\n\u4ee3\u78011-14\uff08\u5728\u6784\u9020\u51fd\u6570\u4e2d\u521d\u59cb\u5316\u5c5e\u6027\uff09<\/p>\n\n\n\n
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
\/\/ \u4f7f\u7528\u7bad\u5934\u51fd\u6570\u5b9a\u4e49\u65b9\u6cd5
say = ()=>{
console.log(this.name);
};
}<\/pre>\n\n\n\n\u4ee3\u78011-15\uff08\u7ee7\u627f\uff09<\/p>\n\n\n\n
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}
\u200b
say() {
console.log('\u54c8\u54c8\uff0c\u6211\u662f' + this.name);
}
}
\u200b
\/\/ Dog\u7c7b\u7ee7\u627fAnimal\u7c7b
class Dog extends Animal {
constructor(name, age) {
\/\/ \u8c03\u7528\u7236\u7c7b\u6784\u9020\u51fd\u6570
super(name, age);
this.legs = 4;
}
\/\/ \u91cd\u5199\u7236\u7c7b\u65b9\u6cd5
say() {
console.log('\u6c6a\u6c6a\u6c6a\uff01\u6211\u662f' + this.name);
}
}
\u200b
\/\/ Snake\u7ee7\u627fAnimal\u7c7b
class Snake extends Animal{
constructor(name, age, len) {
\/\/ \u8c03\u7528\u7236\u7c7b\u6784\u9020\u51fd\u6570
super(name, age);
this.len = len;
}
\/\/ \u91cd\u5199\u7236\u7c7b\u65b9\u6cd5
say(){
console.log('\u5636\u5636\u5636~ \u6211\u662f' + this.name);
}
}<\/pre>\n\n\n\n\u6570\u7ec4\u7684\u65b9\u6cd5<\/h2>\n\n\n\n
map()\uff0c\u53ef\u4ee5\u6839\u636e\u5df2\u6709\u6570\u7ec4\u8fd4\u56de\u4e00\u4e2a\u65b0\u7684\u6570\u7ec4\u3002map\u9700\u8981\u4e00\u4e2a\u51fd\u6570\u4f5c\u4e3a\u53c2\u6570\uff0c\u5e76\u4e14\u4f1a\u5bf9\u6570\u7ec4\u4e2d\u7684\u6bcf\u4e00\u4e2a\u5143\u7d20\u8c03\u7528\u8be5\u51fd\u6570\uff0c\u5e76\u5c06\u51fd\u6570\u6bcf\u6b21\u6267\u884c\u65f6\u6240\u8fd4\u56de\u7684\u7ed3\u679c\u4f5c\u4e3a\u65b0\u6570\u7ec4\u4e2d\u7684\u5143\u7d20\u3002<\/p>\n\n\n\n
\/\/ Arrow function
map((element) => { \/* ... *\/ })
map((element, index) => { \/* ... *\/ })
map((element, index, array) => { \/* ... *\/ })
\u200b
const array1 = [1, 4, 9, 16];
\/\/ pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
\/\/ expected output: Array [2, 8, 18, 32]
\u200b<\/pre>\n\n\n\nfilter()\uff0c\u53ef\u4ee5\u5c06\u6570\u7ec4\u4e2d\u7b26\u5408\u6761\u4ef6\u7684\u5143\u7d20\u8fd4\u56de\u3002filter\u540c\u6837\u9700\u8981\u4e00\u4e2a\u51fd\u6570\u4f5c\u4e3a\u53c2\u6570\uff0c\u5b83\u4f1a\u5bf9\u6570\u7ec4\u4e2d\u7684\u6bcf\u4e00\u4e2a\u5143\u7d20\u8c03\u7528\u51fd\u6570\uff0c\u5982\u679c\u51fd\u6570\u8fd4\u56detrue\uff0c\u5219\u8be5\u5143\u7d20\u4f1a\u653e\u5165\u5230\u65b0\u6570\u7ec4\u4e2d\u3002\u5982\u679c\u8fd4\u56defalse\uff0c\u5219\u65b0\u6570\u7ec4\u4e2d\u4e0d\u4f1a\u51fa\u73b0\u8be5\u5143\u7d20\u3002<\/p>\n\n\n\n
\/\/ Arrow function
filter((element) => { \/* ... *\/ } )
filter((element, index) => { \/* ... *\/ } )
filter((element, index, array) => { \/* ... *\/ } )
\u200b
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
\/\/ expected output: Array [\"exuberant\", \"destruction\", \"present\"]
\u200b<\/pre>\n\n\n\nreduce()\uff0c\u7528\u6765\u6574\u5408\u6570\u7ec4\u3002\u5b83\u53ef\u4ee5\u5bf9\u6570\u7ec4\u4e2d\u7684\u503c\u8fdb\u884c\u8ba1\u7b97\uff0c\u6700\u7ec8\u5c06\u6570\u7ec4\u4e2d\u7684\u6240\u6709\u5143\u7d20\u5408\u5e76\u4e3a\u4e00\u4e2a\u503c\u3002<\/p>\n\n\n\n
\/\/ Arrow function
reduce((previousValue, currentValue) => { \/* ... *\/ } )
reduce((previousValue, currentValue, currentIndex) => { \/* ... *\/ } )
reduce((previousValue, currentValue, currentIndex, array) => { \/* ... *\/ } )
reduce((previousValue, currentValue, currentIndex, array) => { \/* ... *\/ }, initialValue)
\u200b
const array1 = [1, 2, 3, 4];
\/\/ 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
(previousValue, currentValue) => previousValue + currentValue,
initialValue
);
console.log(sumWithInitial);
\/\/ expected output: 10<\/pre>\n","protected":false},"excerpt":{"rendered":"\u672c\u7ae0\u5185\u5bb9\u662f\u5bf9\u524d\u9762JS\u57fa\u7840\u77e5\u8bc6\u7684\u590d\u4e60\uff0c\u590d\u4e60\u5185\u5bb9\u4e3b\u8981\u6d89\u53ca\u5230React\u4e2d\u5e38\u7528\u4e14\u5bb9\u6613\u72af\u9519\u4ea7\u751f\u7591\u60d1\u7684\u70b9\u3002 \u5982\u679c\u4f60\u5df2\u7ecf\u5bf9J […]<\/p>\n","protected":false},"author":1,"featured_media":5608,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[198],"tags":[200,210,202,199,207,201,211,208,209,203,212],"_links":{"self":[{"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/posts\/5563"}],"collection":[{"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lilichao.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5563"}],"version-history":[{"count":8,"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/posts\/5563\/revisions"}],"predecessor-version":[{"id":5748,"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/posts\/5563\/revisions\/5748"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lilichao.com\/index.php?rest_route=\/wp\/v2\/media\/5608"}],"wp:attachment":[{"href":"https:\/\/lilichao.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5563"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lilichao.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5563"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lilichao.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}