ES6基础2（块级作用域、数组对象解构）-学习笔记

文章目录

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（块级作用域、数组对象解构）-学习笔记相关推荐

搭建Babel运行环境，Traceur ES6模板，块级作用域，let和const命令
搭建Babel运行环境 Babel(http://babeljs.io/)可用于将使用ES6语法的脚本转化为ES5语法的脚本,基本功能的安装步骤如下: 1.安装node解释器和npm包管理工具 2.安 ...
es6中的块级作用域
块级作用域凡是带{}都是块级作用域,if(){} for(){} 对象{} 1.在块级作用域下,var 和function跟在window下一样, function有个特殊的一点,在块级作用域下会提 ...
ES6规范前后块级作用域与函数声明的缠缠绵绵
今天我们就以上面的这个例子来说一下,块级作用域与函数声明在ES6前后的纠葛,当然在ES6之前是没有块级作用域的,但为了与ES6统一,使文章更简明,所以把这对'{}'统一称为块级作用域. 开正题之前,还 ...
ES6基础语法（let、const、解构赋值、模板字符串、简化对象、箭头函数、扩展运算符）（一）
系列文章目录第二章:ES6深入(Symbol.类.迭代器.Set.Map)(二) 第三章:ES6深入(生成器.Promise.async/await)(三) 第四章:ES6+新增API拓展(对象AP ...
ES6（一）——字面量的增强、解构、let/const、块级作用域、暂时性死区
一.字面量的增强 ES6中对对象字面量进行了增强,称之为 Enhanced object literals(增强对象字面量). 字面量的增强主要包括下面几部分: 属性的简写:Property Sh ...
es6 ie不兼容函数_ES6：什么是块级作用域？
在 ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景. 我们先来看一下下面这种情况:内层变量可能会覆盖外层变量. var txt = '外层变量-->你好呀';func ...
ES6 块级作用域详解
什么是块级作用域 ES6 中新增了块级作用域.块作用域由 { } 包括,if 语句和 for 语句里面的 { } 也属于块作用域. 为什么需要块级作用域第一种场景:内部变量会覆盖外部变量 var t ...
java区块作用域_ES6-let、const和块级作用域
1.介绍总的来说,ES6是在ES2015的基础上改变了一些书写方式,开放了更多API,这样做的目的最终还是为了贴合实际开发的需要.如果说一门编程语言的诞生是天才的构思和实现,那它的发展无疑就是不断填 ...
let、const和var的区别（涉及块级作用域）
let .const和var的区别 let.const.var在js中都是用于声明变量的,在没有进行ES6的学习前,我基本只会使用到var关键字进行变量的声明,但在了解了ES6之后就涉及到了块级作用域 ...

ES6基础2（块级作用域、数组对象解构）-学习笔记

文章目录

ES6基础2（块级作用域、数组对象解构）-学习笔记

块级作用域

数组解构

对象解构

字符串解构

函数的参数解构

ES6基础2（块级作用域、数组对象解构）-学习笔记相关推荐

最新文章

热门文章