ES6基础

1. let & const

letconst是es6新出的变量声明方式。其中最重要的特性就是提供了块级作用域变量不会被提升
let声明一个变量,这个变量的值能被改变。
const声明一个变量,这个变量的值不会被改变,也可以称之为常量。

2. 模板字符串

用法:把东西写在``中;${}里面可以写变量或者表达式。

const a = 'Hello';
const b = 'Sun';
// es6模板字符串
const str = `${a}, ${b}`;
// 两者结果一样,就是以前的写法很复杂。
const str1 = 'a' + ', ' + 'b';

3. 字符串重复

repeat(),返回新的字符串。注意,括号中的参数可以是小数,会自动向下取整;即repeat(2.9)会重复2次。参数如果是 NaN或者是 -1 到 0 之间的小数,结果都是repeat 0次。参数除上述外,不可以是负数或者infinity,会报错的哟。

console.log('hhh,'.repeat(2));  // 'hhh,hhh,'

4. 解析结构

数组解析结构,需要注意的是这是一个有序的对应关系:

const arr = [1, 2, 3];
const [a, b, c] = arr;
// 以上的写法等同于 es5 中
var arr = [1, 2, 3];
var a = arr[0];
... ... 

对象解析结构,这是无需的对应关系,是根据属性名来对应的:

const obj = {
  name: 'Sun',
  age: 24,
  checked: true
}
/**
  * 然后我们要取对象中的两个值;
  * 可以给这一个默认值,即如果obj对象中找不到age时,age就等于默认值18:
  **/
const { name, age = 18 } = obj;
// 上面的写法就等同于 es5 中
var name = obj.name;
var age = obj.age;

5. 展开运算符 ...

const arr = [1, 2, 3];
const arr1 = [...arr, a, b, c];  
// arr1就等于[1, 2, 3, a, b, c]

const obj = {
  name: 'sun',
  age: '20'
};
const obj1 = {...obj, fruit: 'mango'};
// obj1就等于 {name: 'sun', age: 18, fruit: 'mango'}

展开运算符可以用在函数的参数中,来表示函数的不定参数。注意,不定参需要放在最后。

const fn = (x, y, ...others) => {
  console.log(others); 
  return others.reduce((a, b) => a + b) + x + y
}
fn(1, 2, 3, 5, 7, 20);   // others: [3, 5, 7, 20]
// result: 38

reduce() 函数知识补充
语法: array.reduce(function(total, currentValue), initialValue)
最终计算返回一个值。其中initialValue是传给函数的初始值,可以不写的。

const arr = [1, 2, 4, 7, 9];
const sum = (total, num) => {
  return total+num;
}
arr.reduce(sum);  // 23

6. 函数默认参数

function fn(a=10, b=20) {
  return a+b;
}

7. 箭头函数

es5函数和es6箭头函数的写法区别:

// es5
var test = function(a, b) {
  return a+b;
}
// es6箭头函数: 当函数直接被return时,可以省略函数体的括号。
const test = (a, b) => a+b;

// 不省略括号
const test = (a, b) => {
  console.log(a);
  return a+b;
}

需要注意的是,箭头函数中没有this对象。如果在箭头函数中使用了this,那么该this一定就是外层的this。

const func = () => {
  console.log(this);
}
func(); // Window

补充说明
function这个关键字定义的东西是全局的,function a(){}这个a函数就是全局的。a()调用的时候省略了window,即原来长成这样window.a()。也就是说函数的调用者window

然后我们来整一下this。使用function关键字定义的函数中的this不是指向函数,而是指向函数的调用者。this的指向只和调用函数的对象有关。所以下面例子里面的c(),因为调用者是obj,所以this指向的就是这个obj。

箭头函数 不是function关键字定义的函数; 箭头函数中的 this 在函数被定义的时候就已经绑定好了,而不是取决于谁调用这个函数,this就指向谁。箭头函数的this取决于最近的一个非箭头父级函数的this指向。

var obj = {
  a: 10,
  b: () => {
    console.log(this.a); //undefined
    console.log(this); //window
  },
  c: function() {
    console.log(this.a); //10
    console.log(this); //obj{...}
  }
}
obj.b(); 
obj.c();
var obj1 = {
  a: 20,
  b: function() {
     return () => console.log(this.a);
  },
  c: function() {
     console.log(this.a);
  }
};
obj1.b()();  // 20 

8. class

class是es6提供的语法糖,用于创建对象。

es5例子

// 构造函数
function Animal(name, voice) {
  this.name = name;
  this.voice = voice;
  this.getVoice = function() {
    return voice;
  }
}
// 原型方法
Animal.prototype.getName = function() {
  return this.name;
}

es6例子:

class Animal {
  // 构造函数
  constructor(name, voice) {
    this.name = name;
    this.voice = voice;
  }
  // 方法将被添加到原型中
  getName() {
    return this.name;
  }
}

10. 继承

es6继承需要使用关键字 extends
此外,还需要调用一个 super方法,super关键字用于访问和调用一个对象的父对象上的函数。在构造函数中使用时,super关键字将单独出现,并且必须在使用this关键字之前使用。

class Animal {
  constructor(name, voice) {
    this.name = name;
    this.voice = voice;
  }
  getName() {
    return this.name;
  }
}

// Cat类继承Animal类
class Cat extends Animal {
  constructor(name, voice, eatFish) {
    super(name, voice);
    this.eatFish = eatFish;
  }
}

待更新...

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,635评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,628评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,971评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,986评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,006评论 6 394
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,784评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,475评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,364评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,860评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,008评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,152评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,829评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,490评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,035评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,156评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,428评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,127评论 2 356

推荐阅读更多精彩内容

  • 最近在学习React,示例代码都由ES6所书写,所以对于ES6,不得不好好研究一下新的语法。这篇文章就对自己现在经...
    2Youngg阅读 379评论 0 1
  • 1、新的声明方式 以前我们在声明时只有一种方法,就是使用var来进行声明,ES6对声明的进行了扩展,现在可以有三种...
    令武阅读 1,009评论 0 7
  • this的应用及指向问题 this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象...
    azure_1122阅读 241评论 0 0
  • 在2015年2月20号 ECMAScript 第六版就正式推出了,这门语言一直保持稳定快速的发展而且新功能也在慢慢...
    kiaizi阅读 345评论 0 3
  • 《七年就是一辈子》 在《把时间当作朋友》的基础上,涉及观念认知方面内容。名字有新生二字,更鼓舞人心,通过点滴积累,...
    晴方好也阅读 354评论 0 0