ES6新语法(二)
2019-08-14 10:18:43来源:博客园 阅读 ()
1.解构
解构:自动解析数组或对象中的值,并赋值给指定的变量。、
1.1
var arr = [3,4,5]; var [a, b, c] = arr; console.log(a, b, c); //还可以忽略值 需要使用,占位 var arr = [3,4,5]; var [a,, c] = arr; console.log(a, c); //函数返回值为数组,进行解构 function f5(){ return [1,2,3]; } var [a, b, c] = f5(); console.log(a, b, c);
1.2
var person = { "nickname": "老三", "age": 30, "sex": "男" }; //解构时 {}中的变量名,不能加引号 var {nickname, age, sex} = person; console.log(nickname, age, sex); //可以忽略值 直接忽略 不需要占位 var {nickname, sex} = person; console.log(nickname, sex);
1.3
函数参数使用解构数组或解构对象形式
//1.函数形参,使用解构数组形式,调用函数时需要传递数组实参 function f1([x,y,z]){ console.log(x,y,z); } var arr = [1,2,3]; f1(arr); //相当于 /* function f1(a){ var [x,y,z] = a; console.log(x,y,z); } var arr = [1,2,3]; f1(arr); */ //2.函数形参,使用解构对象形式,调用函数时需要传递对象实参 function f2({nickname,age,sex}){ //变量名与对象成员名一致 console.log(nickname,age,sex); } var obj = {"nickname":"zhangsan", "age":40, "sex":"男"}; f2(obj); //相当于 /* function f1(a){ var {nickname, age, sex} = a; console.log(nickname,age,sex); } var obj = {"nickname":"zhangsan", "age":40, "sex":"男"}; f2(obj); */
1.4
<script> //1.函数参数使用解构数组,调用函数不传参数会报错 function fn([x, y, z]){ console.log(x, y, z); } fn(); //会报错 </script> <script> //2.函数参数使用解构数组,对整个数组设置默认值为空数组 function f1([x, y, z] = []){ console.log(x, y, z); } f1(); //不报错 x y z 都是 undefined //3.函数参数使用解构数组,对整个数组设置默认值,数组中每个变量对应一个默认值 function f2([x, y, z] = [1,2,3]){ console.log(x, y, z); } f2(); //不报错 x=1 y=2 z=3 f2([4,5,6]); // x=4 y=5 z=6 //4.函数参数使用解构数组,对整个数组设置默认值为空数组, 在解构数组中对每个变量设置一个默认值 function f3([x=1, y=2, z=3]=[]){ console.log(x, y, z); } f3(); //不报错 x=1 y=2 z=3 f3([4,5,6]); // x=4 y=5 z=6 </script>
1.5
<script> //1.函数参数使用解构对象,调用函数不传参数会报错 function fn({x, y, z}){ console.log(x, y, z); } fn(); //会报错 </script> <script> //2.函数参数使用解构对象,对整个对象设置默认值为空对象 function f1({x, y, z} = {}){ console.log(x, y, z); } f1(); //不报错 x y z 都是 undefined //3.函数参数使用解构对象,对整个对象设置默认值,对象中每个变量对应一个默认值 function f2({x, y, z} = {"x":1,"y":2,"z":3}){ console.log(x, y, z); } f2(); //不报错 x=1 y=2 z=3 f2({"x":4,"y":5,"z":6}); // x=4 y=5 z=6 //4.函数参数使用解构对象,对整个对象设置默认值为空对象, 在解构对象中对每个变量设置一个默认值 function f3({x=1, y=2, z=3}={}){ console.log(x, y, z); } f3(); //不报错 x=1 y=2 z=3 f3({"x":4,"y":5,"z":6}); // x=4 y=5 z=6 </script>
2.
ES6新增了一种数据类型:Symbol,表示独一无二的值,Symbol最大的用途是用来定义对象的唯一属性名
var symbol1 = Symbol(); var symbol2 = Symbol("Alice"); console.log(symbol1, symbol2) // 输出:Symbol() Symbol(Alice)
Symbol类型的值是一个独一无二的值,Symbol函数的参数只是表示对当前Symbol值的描述,因此相同参数的Symbol函数的返回值是不相等的。
var attr_name = Symbol(); var obj = { [attr_name]: "Alice" }; console.log(obj[attr_name]); var obj = { [Symbol()]:"Alice" }; console.log(obj);
使用[]方括号,里面的attr_name不带引号,表示attr_name是一个变量.
3.
ES6可以使用“箭头”(=>)定义函数,注意是普通函数,不要使用这种方式定义类(构造器)。
3.1
具有一个参数并直接返回的函数
var f1 = a=>a; //相当于 var f1 = function(a){ return a;}; console.log(f1('hello'));//'hello'
没有参数的需要用在箭头前加上小括号
var f2 = () => '来了老弟'; console.log(f2());
多个参数需要用到小括号,参数间逗号间隔
var f3 = (a, b) => a+b; console.log(f3(3,4));//7
函数体多条语句需要用到大括号
var f4 = (a, b) => { console.log('来了老弟'); return a+b; } console.log(f4(5,6));//11
返回对象时需要用小括号包起来,因为大括号被占用解释为代码块
var f5 = () => { return ({"name":"老弟", "age":40}); } //var f5 = () => ({"name":"老弟", "age":40}); console.log(f5());
直接作为事件处理函数
<input type="button" value="点击" id="btn"> <script> document.getElementById('btn').onclick = evt=>{ console.log(evt);//evt 事件对象 } </script>
赋值为对象的方法
var obj = {}; obj.say = ()=>{return "hello,我是obj的say方法";} console.log(obj.say());
作为回调函数
var f6 = (f)=>{ console.log(f(100)); }; // f6(a=>a); var f7 = a=>a; f6(f7);
1.2
var f1 = a=>a; console.log(typeof f1);//'function'
instanceof判断是否Function的实例,结果为true
var f1 = a=>a; console.log(f1 instanceof Function);//true
箭头函数不绑定this, 内外this指向固定不变
var obj = { say:function(){ //非箭头函数 var _this = this; var f1 = function(){ console.log(_this);//obj console.log(this);//window }; f1(); //箭头函数 var f2 = ()=>{ console.log(this); }; f2(); } }; obj.say();
箭头函数不能做构造函数,不能用new实例化,也没有prototype属性
var Person = ()=>{}; console.log(Person.prototype);//undefined var p = new Person();//报错
不能使用arguments
var f1 = ()=>{ console.log(arguments); }; f1(); //报错
箭头函数也支持默认参数、剩余参数、解构
var f1 = (x=1,y)=>{ console.log(x, y); //3 4 }; f1(3,4); var f2 = (...x)=>{ console.log(x); //[3,4] }; f2(3,4); var f3 = ([x,y]=[])=>{ console.log(x, y); //3 4 }; f3([3,4]);
原文链接:https://www.cnblogs.com/shineguang/p/11253290.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- javascript setinterval 的正确语法如何书写 2019-12-08
- jQuery语法总结和注意事项 2019-10-16
- es6学习笔记(二) 2019-08-14
- Es6常用方法filter 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash