文章目錄

• • ES6基礎2（塊級作用域、數組對象解構）-學習筆記
  • • 塊級作用域
    • 數組解構
    • 對象解構
    • 字符串解構
    • 函數的參數解構

ES6基礎2（塊級作用域、數組對象解構）-學習筆記

塊級作用域

//let const 塊級作用域 var 函數作用域var a = 100;if(true) {var a = 1000; //塊級作用域};var a = 100;function f(){console.log(a);if(true){let a = 1000;}console.log(a);};//循環 i成為全局變量for(var i=0; i<5; i++){};console.log(i); //結果 5for(let i=0; i<5; i++){};console.log(i); //i is not defined//小實例var arr = [];for(let i=0; i<5; i++){arr[i] = function(){console.log(i)}};arr[4](); //var 結果 5 let 結果 4//暫時性死區var x = 1;function f(){if(true){x = 100;console.log(x);let x; //只要在同一個作用域下 不能聲明同樣的名稱}};f(); //報錯function f(i){let i; //error 只要在同一個作用域下 不能聲明同樣的名稱//console.log(i)if(true){let i = 100; //OK}};f(10)let x = y,y = 1;function f(){console.log(x,y)};f(); //報錯

數組解構

//解構 從數組和對象中提取值，對變量進行賦值，這被稱為解構。//ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。let [a,b,c] = [1,2,3];//es5var a = 1;var b = 2;var c = 3;//簡寫var a = 1,b = 2,c = 3;// ES6 數組解構let [a,b,c] = [1,2,3]; //模式匹配 只要兩邊模式相同，左邊的變量 右邊對應要賦的值//對象解構let {x,y,z} = {x:1,y:2,z:3};//es5var obj = {x:1,y:2,z:3};x = obj.x;y = obj.y;z = obj.z;//1)var [a,b,x] = ['b','a',[1,2]];//左邊是變量 = 右邊對應要賦的值var arr2 = ['red',{id:2},123];let [x,y,z] = arr2;console.log(y) //不是一一對應var [x,y,z] = [1,2];console.log(z);//var x = 1,y = 2,z;//默認值 備胎var arr3 = [10,20];var [x=1,y=2] = arr3;//es5// if(arr3[0]){// x = arr3[0];// }else {// x = 1;// };//三目運算// arr3[0] ? x = arr3[0]:x = 1;//簡寫// x = arr3[0] || 1;// y = arr3[1] || 2;//DEMOvar [x =1,y=2] = ['x','y'];console.log(x);//默認值發揮作用var [x =1,y=2] = ['x'];console.log(y);var [x=1,y=2] =[]; //x,y 1 2var [x,y='y'] = ['x',0] //x,y 'x' 0var [x=1,y] = [10]; //x,y 10 undefinedvar [x=1,y=2] = [10,null] // 10 nullvar [x,y=2] = [10,undefined] //10 2//重要 成員等于undefined 默認值會生效var [x=1] = [undefined];var [x,y=2] = [10,undefined]//如果默認值是一個表達式 ,表達式是默認值 這個惰性求值 只要用到它的時候才會調用，默認值不會優化處理function f(){return 100;};var [x=f()] = [10]; //10var [x=f()] = [undefined]; //100

對象解構

//對象解構 匹配不是按次序，由變量名來決定var {x,y} = {y:'x',x:'y'}; //JSONvar obj ={name:'abc',age:18,id:1,friends:['a','x','u'],flag:{x:1,y:2}};var {name,age,id,friends,flag} = obj;//沒有匹配成功 undefinedvar {x,y,z} = {y:'x',x:'y'}; //別名 x:a x是匹配模式 a才是變量var {x:a,y} = {x:1,y:2};//var a = obj.x;var {x:name,y:id} = {x:1,y:2};//默認值var {x=3} = {x:10};var {x,y:a=5} = {x:10};//默認值生效的條件 undefinedvar {x:a=10} ={x:undefined};var {x:a=10} ={};//demovar {x=3} ={};var {x,y=5} = {x:1};var {x:a=10,y=20} = {y:10};var {message:msg="hello world"} ={};var {x:a=10} ={x:null};var obj ={name:'abc',age:18,id:1,friends:['a','x','u'],flag:{x:1,y:2}};var {name,age,id,friends:f,flag:fl} = obj;f[0];

字符串解構

//字符串解構 var [a,b,c,d,e] = 'hello';

函數的參數解構

//函數的參數解構function fun(x,y){ //x,y 變量 參數才是值var x = x || 0;var y = y || 0;return x+y;};fun();//沒有參數function fun([x=0,y=0]){ // [x=0,y=0] = []return x+y;};fun([]); //0//有參數function fun([x=0,y=0]){ //[x=0,y=0] = [1,2]return x+y;};fun([1,2]); //3//參數為空function fun([x=0,y=0]){ //[x=0,y=0] = [,2]return x+y;};fun([,2]); //2//對象function fun({x=0,y=0}){ // {x=0,y=0} = {}return x+y;};fun({x:10,y:10});function fun({x=0,y=0}){ // {x=0,y=0} = {}return x+y;};fun({y:10});//函數參數解構也有默認值//1)demofunction fun({x=0,y=0}={}){ //{x=0,y=0} ?{x:10,y:8}:{}return [x,y];};fun({x:10,y:8}); // [10,8]fun({x:3}); // [3,0]fun({}); // [0,0]fun(); // [0,0]//2)demofunction fun({x,y}={x:0,y:0}){ //{x,y}?{x:10,y:8}:{x:0,y:0}return [x,y]; };fun({x:10,y:8}); // [10,8]fun({x:3}); // {x,y} = {x:3} [3,undefined]fun({}); // {x,y} = {} [undefined, undefined]fun(); // {x,y}={x:0,y:0} [0,0]

總結

以上是生活随笔為你收集整理的ES6基础2（块级作用域、数组对象解构）-学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。