javascript语法|ES6总结上
es6总结上 ES6总结下
文章目录
- es6总结上
- 一、let与const 关键字
- 二、解构赋值
- 三、模板字符串和对象的扩展
- 四、参数默认值,不定参数,拓展参数
- 五、箭头操作符
- 六、Class类
- 七、增强的对象字面量
一、let与const 关键字 var与let差别:
var
- 声明提升
- 变量覆盖
- 没有块级作用域
- 不存在声明提前
- 不会有变量覆盖
- 有块级作用域
暂时性死区:在一个块级作用域内,如果用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...’
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- (二)ES6第一节变量(let|(二)ES6第一节变量(let,const)
- 事件代理
- 六步搭建ES6语法环境
- 数组常用方法一
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)