js day26

ES6

一、解构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为结构赋值,解构赋值主要包括数组的结构赋值、对象的结构赋值、字符串的结构赋值、函数参数的结构赋值。

数组的解构赋值

代码如下

//传统赋值
var num1=1;
var num2=2;
var num3=3;

//结构赋值
let [str1,str2,str3]=['aa','bb','cc'];
console.log(str1);
console.log(str2);
console.log(str3);

对象的解构赋值
代码如下:

 let {num1,num2}={num1:100,num2:10};
 console.log(num1);
 console.log(num2);

字符串的解构赋值
代码如下:

let [a,b,c,d,e]=['hello'];
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);

函数参数的解构赋值
代码如下

function fn([x,y]){
    return x+y;
}
console.log(fn([10,20]));

解析:由于平时传入的参数x,y作为变量进行传入,加上“[ ]”表示以一个数组的形式进行传入参数,在调用函数的同时也是同样。

调换两个数的值
之前的写法

var a=3;
var b=5
var c;
交换两个数的值:声明第三个变量
 c=b;
 b=a;
 a=c;

 //使用es6语法
 let num1=10;
 let num2=20;
 [num1,num2]=[num2;num1];
 console.log(num1);
 console.log(num2);

模板字符串

多行字符串
用单引号或是双引号表示的字符串在编辑的过程中只能在一行显示,若要在多行显示需要在每一行结尾添加一个斜杠,这样的编辑方式对开发者显然不够友好,我们可以使用模板字符串的功能换行编辑字符串,代码如下所示

let str=`hello 
     world
     `;
     console.log(str);

字符串中定义变量
es5写法

var name='jack';
console.log('我的名字叫'+name);

模版字符串

var name='jack';
console.log(`我的名字叫${name}`);

模板字符串调用函数

let x='hello';
let y='world';
function fn(x,y){
    return x+y;
}
console.log('程序猿最常说的一句话是${fn(x,y)}');

函数

在ES2015中扩展了很多函数的功能,我们在本节讲解两个最常用的功能:

  • 设置函数参数默认值
  • 箭头函数

参数默认值

在ES2015版本之前,我们可以通过下面的方法设置函数参数的默认值,代码如下所示

es5设置默认值
function fun(x,y){
   x=x||10;
   y=y||20;
   return x+y;
}
console.log(fun());

如果逻辑或运算符的左侧是undefined,那么表达式的值就是右侧的值,如果左侧不是undefined,那么表达式的值就是左侧的值,我们可以通过这种方法设置函数参数的默认值,但是这种方法看上去并不是那么友好,所以ES2015为函数增加了设置默认值的功能。代码如下所示

//es6设置默认值
function fn(x=100,y=200){
    return x+y;
}
console.log(fn(1,2));

箭头函数

在ES2015中增加了箭头函数的语法,我们可以使用=>来定义函数,而不必每次都要写一个function。具体写法如下所示

var fun=x=>x*x;
console.log(fun(6));

箭头的前面是函数的参数,箭头的后面是函数的返回值,程序运行后会在控制台输出36。

如果函数没有参数,并且函数体不止一行代码,可以用如下的代码表示

let fun=()=>{
    var x=10;
    var y=20;
    return x+y;
}
console.log(fun());

面向对象语法

在ES2015版本之前,JavaScript是没有类的概念的,我们可以使用构造函数来模拟一个类,这在我们之前的课程中已经讲解过了,这里我们简单复习一

创建一个猫的构造函数

function Cat(name,age){
    this.name=name;
    this.age=age
}
var cat=new Cat('miaomiao',2);
console.log(cat.name);

在上面的代码中,我们定义了一个构造函数Cat,通过new关键字创建了一个变量cat,cat有两个属性,name和age。我们可以直接输出cat.name;

我们可以通过原型属性为构造函数添加方法,例如我们给这个Cat添加一个shout方法,让这只猫可以叫。代码如下所示

function Cat(name,age){
    this.name=name;
    this.age=age
}
var cat=new Cat('miaomiao',2);
Cat.prototype.say=function(){
    console.log('喵喵喵!');
}
console.log(cat.name);
cat.say();

通过上面的代码,我们可以模拟一个类的概念,但是这样的写法与真正面相对象语言的写法相比,确实更难以理解。所以ES2015中增加了类的概念。

class
我们可以用class来定义一个类,然后可以在这个类中定义构造函数,方法和属性。代码如下

class Cat{
    constructor(name,age){
        this.name=name;
        this.age=age;
    }

    shot(){
        console.log('喵喵喵');
    }
}
let cat=new Cat('miaomiao',2);
cat.shot();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,684评论 0 13
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,751评论 0 4
  • 官网 中文版本 好的网站 Content-type: text/htmlBASH Section: User ...
    不排版阅读 4,786评论 0 5
  • 绕操场连跑带走16圈,一个半小时,第一天,加油吧,真希望你可以穿上那件小文艺裙子,晚安。
    青梅煮酒柠檬酸阅读 285评论 2 1
  • 现在舒服的躺床上,想想今天的经历,历历在目。 早上起床吃"饱"了早餐,一样的小马驹,一样的山涧小路,可是不一样的是...
    腾哥阅读 1,289评论 0 1

友情链接更多精彩内容