脚本宝典收集整理的这篇文章主要介绍了ES6总结上,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
let
let的缺点: 暂时性死区:在一个块级作用域内,如果用let声明了某个变量,那么该变量就自动绑定了该作用域,该作用域就形成了一个封闭的作用域。
const
const 声明一个只读的常量,一旦声明,常量的值就不能改变,一般用于全局变量 通常变量名全部大写
自动解析数组或对象中的值。比如若一个函数要返回多个值,常规的做法是返回一个对象,将每个值做为这个对象的属性返回。但在ES6中,利用解构这一特性,可以直接返回一个数组,然后数组中的值会自动被解析到对应接收该值的变量中。
1.变量的解构赋值 2.扩展运算符 … 3.对象的解构赋值
//变量的解构赋值@H_777_77@
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的注意点: 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时更加轻松方便了。
//通过对象字面量创建对象
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...’
以上是脚本宝典为你收集整理的ES6总结上全部内容,希望文章能够帮你解决ES6总结上所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。