🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 一、概述 ES6是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等等,也就是下一代 JavaScript 语言; ## 一、高级数据类型 **值类型(基本类型)**:字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。 **引用数据类型**:数组(Array)、对象(Object)、函数(Function)。 ### 1、数组: ``` var data=new Array(); data[0]="a"; data[1]="b"; data[2]="c"; ``` 或 ``` var data=new Array("a","b","c"); ``` 或 ``` var data=["a","b","c"]; ``` ### 2、对象: 对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔: ``` var person={firstname:"ray", lastname:"framework", id:123}; ``` 对象属性有两种寻址方式: ``` name=person.lastname; name=person["lastname"]; ``` 对象的方法定义了一个函数,并作为对象的属性存储。对象方法通过添加 () 调用 (作为一个函数)。 定义方法: ``` methodName : function() { code lines } ``` 使用方法: ``` objectName.methodName() ``` 实例: ``` //定义对象 var p={ a:1, b:"d", c:function(){alert(this.b)} } //使用对象 alert(p.a); p.c(); ``` ### 3、函数: ``` var x = function (a, b) {return a * b}; var z = x(4, 3); ``` ES6标准新增了一种新的函数:Arrow Function(箭头函数)。箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种像上面的,只包含一个表达式,连`{ ... }`和`return`都省略掉了。还有一种可以包含多条语句,这时候就不能省略`{ ... }`和`return`: ``` (参数1, 参数2, …, 参数N) => { 函数声明 } (参数1, 参数2, …, 参数N) => 表达式(单一) // 相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; } ``` ``` // ES5 var x = function(x, y) { return x * y; } // ES6 const x = (x, y) => x * y; ``` ``` 简单来说,箭头左侧是参数,右侧是函数体; ``` ## 二、prototype 每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,通过prototype 属性可以向函数定义的对象添加属性和方法。也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。 ``` object.prototype.name=value ``` 实例: ``` <script type="text/javascript"> function employee(name,job,born) { this.name=name; this.job=job; this.born=born; } var bill=new employee("Bill Gates","Engineer",1985); employee.prototype.salary=null; bill.salary=20000; document.write(bill.salary); </script> ``` ## 三、ES6方法(默认参数) 函数定义时传入形参对象,参数直接赋予默认值。但注意,当以参数列表形式设置默认值时,赋值方式是按序赋值。 ``` function doSome({a,b=2,c}){ console.log(a,b,c); } doSome({a:5,c:22}) // 5 2 22 //参数列表方式 function doSome(a,b=2,c){ console.log(a,b,c); } doSome(5,22) // 5 2 22 ``` ## 四、展开运算符... 展开运算符(spread operator)允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。 ## 五、简写 简写有两条基本原则: * 同名的属性可以省略不写 * 对象中的方法中的 : function 可以省略不写 ~~~ var studentES5 = { name: '小方哥', age: 20, sex: '男', getName: function () { return this.name; } } console.log('ES5', studentES5); console.log('ES5', studentES5.getName()); ~~~ ES6则允许我们简写成下面这种形式 ~~~ const name = 'Jack'; const age = 25; const sex = '女'; const studentES6 = { name,// 同名的属性可以省略不写 age, sex, getName() {// 可以省略方法中的 : function return this.name; } }; console.log('ES6', studentES6); console.log('ES6', studentES6.getName()); ~~~