javascript语法|ES6总结上

es6总结上 ES6总结下

文章目录

  • es6总结上
  • 一、let与const 关键字
  • 二、解构赋值
  • 三、模板字符串和对象的扩展
  • 四、参数默认值,不定参数,拓展参数
  • 五、箭头操作符
  • 六、Class类
  • 七、增强的对象字面量

一、let与const 关键字 var与let差别:
var
  1. 声明提升
  2. 变量覆盖
  3. 没有块级作用域
let
  1. 不存在声明提前
  2. 不会有变量覆盖
  3. 有块级作用域
let的缺点:
暂时性死区:在一个块级作用域内,如果用let声明了某个变量,那么该变量就自动绑定了该作用域,该作用域就形成了一个封闭的作用域。
const
const 声明一个只读的常量,一旦声明,常量的值就不能改变,一般用于全局变量
通常变量名全部大写
二、解构赋值 自动解析数组或对象中的值。比如若一个函数要返回多个值,常规的做法是返回一个对象,将每个值做为这个对象的属性返回。但在ES6中,利用解构这一特性,可以直接返回一个数组,然后数组中的值会自动被解析到对应接收该值的变量中。
1.变量的解构赋值
2.扩展运算符 …
3.对象的解构赋值
//变量的解构赋值 let [a, b, c] = [1, 2, 3]; // , = 占位符 let arr = ["小董", "小刘", "小王", "小涂"]; let [,,one] = arr; // 这里会取到小王//扩展运算符 ... //将数组或者类数组结构拆分为参数序列 // 解构整个数组,输出数组中的每一个。 console.log(...arr); //对象的解构赋值 let obj = {className : "dzq", age: 21 } let { className} = obj; // 得到dzq let { age} = obj; // 得到21//如果出现多层嵌套的对象需要解构 let dataJson = {title:"abc", name:"winne", test:[{title:"ggg", desc:"对象解构赋值" }] } //我们需要取出需要的两个title值(注意结构和键名) let { title:oneTitle,test:[{ title:twoTitle}]} = dataJson; //剩余运算符 let { a, b, ...demo} = { a: 1, b: 2, c: 3, d: 4}; // a = 1 // b = 2 // demo = {c: 3, d: 4}

三、模板字符串和对象的扩展 模板字符串是用反引号 ``
允许换行,除了作为普通字符串,还可以用来定义多行字符串,可以在字符串中加入变量和表达式,变量和表达式要写在${}里面。
//模板字符串 //产生一个随机数 var num=Math.random(); //将这个数字输出到console console.log(`your num is ${ num}`);

对象的扩展
1.允许在对象之中,直接写变量
2.如果对象的属性值是个变量,并且该变量名跟属性名一样,那么可以省略为一个
3.对象中的函数属性,可以省略:function
// ES6 允许在对象之中,直接写变量。 const name = 'wjx'; const names = { name}; //等同于const names1 = {name: name}; console.log(names); //{name: "wjx"} //变量名跟属性名一样,那么可以省略为一个,比如: function f(x, y) {return { x, y}; // 等同于return {x: x, y: y}; } f(1, 2) // {x: 1, y: 2} //对象中的函数属性,可以省略:function const h = {method() { // 等同于method: function() {return "Hello!"; } };

四、参数默认值,不定参数,拓展参数 默认参数值
现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了。
需要注意的是:只有在未传递参数,或者参数为 undefined 时,才会使用默认参数,null 值被认为是有效的值传递。
function sayHello(name){ //传统的指定默认参数的方式 var name=name||'dude'; console.log('Hello '+name); } //运用ES6的默认参数 function sayHello2(name='dude'){ console.log(`Hello ${ name}`); }

不定参数
不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖,在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。
比如下面这个例子中,…x代表了所有传入add函数的参数。
//将所有参数相加的函数 function add(...x){ return x.reduce((m,n)=>m+n); } //传递任意个数的参数 console.log(add(1,2,3)); //输出:6 console.log(add(1,2,3,4,5)); //输出:15

拓展参数
拓展参数则是另一种形式的语法糖,它允许传递数组或者类数组直接做为函数的参数而不用通过apply。
五、箭头操作符 箭头函数是一种更加简洁的函数书写方式
基本语法:参数 => 函数体 例(let fn=(m)=>{return m})
如果只有一个参数,可以省略小括号,如果想返回一个值,return连同大括号一起省 略,如果要返回一个对象的话,对象外面要套括号避免歧义
箭头函数中的this指向:指向的是函数定义时所在的对象 。
箭头函数不允许当作构造函数,也就是不能new
//只有一个参数,且只返回一个值写法 let fn = v => v; /*等价于 let fn = function(num){ return num; }*/ fn(100); // 输出100//箭头函数中的this指向 let Person1 = {'age': 18, sayHello(){setTimeout(()=>{console.log(this.age); }); } }; var age = 20; Person1.sayHello(); // 18

六、Class类 可以通过 class 关键字定义类,可以看作一个语法糖,让对象原型的写法更加清晰,对象的创建,继承更加直观了,并且父类方法的调用,实例化,静态方法和构造函数等概念都更加形象化,更加标准的面向对象编程语法。
class的注意点:
1.类的所有方法都定义在类的prototype属性上面。
2.定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了
3.方法之间不需要逗号分隔,加了会报错
4.ES6的class使用方法与ES5的构造函数一模一样
5.类不能重复声明,类定义不会被提升,必须在访问前对类进行定义,否则就会报错
//类的声明 // 匿名类 let Demo = class {constructor(a) {this.a = a; } } // 命名类 let Demo = class Demo {constructor(a) {this.a = a; } }//公共属性(依然可以定义在原型上) class Demo{ } Demo.prototype.a = 2;

Class的基本语法之constructor
constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。constructor方法默认返回实例对象(即this),完全可以指定返回另外一个对象
Class的基本语法之类的调用方式
类必须使用new调用,否则会报错。这是它跟普通构造函数 ( 普通构造函数完全可以当做普通函数使用 ) 的一个主要区别,后者不用new也可以执行。
//实例化对象 class Demo {constructor(a, b) {this.a = a; this.b = b; console.log('Demo'); } sum() {return this.a + this.b; } } let demo1 = new Demo(2, 1); let demo2 = new Demo(3, 1); // 两者原型链是相等的 console.log(demo1._proto_ == demo2._proto_); // true demo1._proto_.sub = function() {return this.a - this.b; } console.log(demo1.sub()); // 1 console.log(demo2.sub()); // 2

七、增强的对象字面量 对象字面量被增强了,写法更加简洁与灵活,同时在定义对象的时候能够做的事情更多了。
具体表现在:
1.可以在对象字面量里面定义原型
2.定义方法可以不用function关键字
3.直接调用父类方法
【javascript语法|ES6总结上】这样一来,对象字面量与前面提到的类概念更加吻合,在编写面向对象的JavaScript时更加轻松方便了。
//通过对象字面量创建对象 var human = {breathe() {console.log('breathing...'); } }; var worker = {__proto__: human, //设置此对象的原型为human,相当于继承human company: 'freelancer', work() {console.log('working...'); } }; human.breathe(); //输出 ‘breathing...’ //调用继承来的breathe方法 worker.breathe(); //输出 ‘breathing...’

    推荐阅读