ES6ES6入门

Posted totoro-cat

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6ES6入门相关的知识,希望对你有一定的参考价值。

1.概要

- ECMAScript2015(ES6)是javascript最标准的语法式样,是在2015年6月由Ecma国籍组织公布的最新版本,现在已经被多个领域和浏览器所广泛采纳和使用。

2.学习网址:

- https://github.com/lukehoban/es6features- https://babeljs.io/learn-es2015/
- https://es6.ruanyifeng.com/#docs

3.开发工具

- nodejs 10.x

4.编辑器

- vscode

- 运行命令 node test001.js

5.新特性

  1. let 和 const
  2. 变量结构赋值
  3. 数组
  4. 字符串
  5. 函数
  6. 面向对象
  7. Promise
  8. generator
  9. 模块化

 

6.let 和 const 命令

- let 知识点

1.限定作用域
2.不允许重复定义

-- 作用域

1.ES6 新增了let 命令,他用法类似var ,但是所声明的变量,只能再代码块中有用 ,说明 : var 不够严谨,let 只能作用再块级作用域;

if (true) 
let a = 1;
var b = 2;

console.log(b); // 2 
console.log(a); // ReferenceError: a is not defined 报错,提示a未定义;

2.不允许重复定义,重复声明一个变量,这种情况本身就不合适,不管是再java ,python中都没有这种定义

var i = 0;
switch (i) 
case 0 :
var value = "hello";
break;
case 1 :
var value = "world";
break;


console.log(value); // hello

 

var i = 0;
switch (i) 
case 0 :
let value = "hello";
break;
case 1 :
let value = "world";
break;


console.log(value); // SyntaxError: Identifier ‘value‘ has already been declared 已经被定义过了,不能重复定义

- const 命令

- 知识点

定义常量

-- 声明一个只读的常量,一旦声明,不能修改

const num = 10;
console.log(num); // 10

-- const 声明变量不得改变值,说明,一旦声明必须初始化

const num ;
console.log(num); // SyntaxError: Missing initializer in const declaration 没有初始化

-- const 也是只有在块级作用域中有效

if (true) 
const num = 10;


console.log(num); // ReferenceError: num is not defined

-- const 与 let 命令一样,变量不可重复定义


7.变量的结构赋值

  1. 数组赋值
  2. 对象赋值
  3. 函数赋值
  4. 函数参数指明

-- 数组赋值 按照对应的位置,赋值

let [a,b,c] = [10,20,30];
console.log(a,b,c); // 10,20,30

-- 如果对应的位置没有值的话,解析会不成功,对应的变量会是undefined

let [a,b,c] = [10,20];
console.log(a,b,c); // 10 20 undefined

-- ... 赋值,其他后面的

let [a,b,...other] = [10,20,30,40,50];
console.log(a,b,other); // 10 20 [ 30, 40, 50 ]

  

-- 对象赋值 对象赋值变量必须与属性同名,才能取到值

let name , age = name : "wx" , age : 18 ;
console.log(name,age);

  

-- 函数赋值

function sum () 
return [10,20];


let [num1,num2] = sum();
console.log(num1,num2);

  

-- 函数指明赋值

function sum (x=1,y=2) 
return x + y ;


console.log(sum()); //3
console.log(sum(x:2)); // 4
console.log(sum(x:2,y:5)); // 7

 

 

8.嵌入字符串

- 知识点

  1. 字符串嵌入方式
  2. 字符串模板定义

- 模板,反单引号`$`

let name = ‘john‘;
let mystr = `hello $name`;
console.log(mystr); //hello john

 

9.数组

- 知识点

新的数组循环方式 for of

- 循环所有的值

let list = [10,20,30];
for(let val of list)
console.log(val);

  

- 循环所有的下标

let list = [10,20,30];
for(let val in list)
console.log(val, list[val]);

10.箭头函数

- 知识点

  1. 通过箭头函数简化代码2.当只有一个参数的时候可以省略()
  2. 当只有一个return 的时候可以省略

- 普通函数

function sum(x) 
return x ;


console.log(sum(1)); // 1

  

- 箭头函数简化, 去掉 funtion , 改成 =>

let sum = (x) => 
return x;


console.log(sum(1)); // 1

只有一个 参数的时候可以省略()

let sum = x => 
return x;


console.log(sum(1)); // 1

只有一个return 可以省略  最终简化成

let sum = x => x;

console.log(sum(1));

11.类

- 知识点

  1. 新的类定义 
  2. 类的实例
  3. setter / getter
  4. 类的继承

- 更像java python ES6 中 class 用来定义类 constructor 定义构造方法 通过new 生成新的实例对象

class show 
constructor (name,age) 
this.name = name;
this.age = age;


showName() 
console.log(this.name)


showAge() 
console.log(this.age)



let name = new show(‘wx‘,18);
name.showName(); //wx

- 类的实例

let name = show(‘wx‘,18) // TypeError: Class constructor show cannot be invoked without ‘new‘
let name = new show(‘wx‘,18); //true


- setter / getter  set get, 某个属性存储值和取值函数

class show 
constructor (name,sex) 
this.name = name;
this.sex = sex;


get age() 
return this._age;


set age(val) 
this._age = val;



let name = new show(‘wx‘,‘F‘);
console.log(name); // name: ‘wx‘, sex: ‘F‘ 
name.age = 19;
console.log(name); // name: ‘wx‘, sex: ‘F‘, _age: 19 

  

- 类继承

- 知识点

  1. extends

  2. super

- super 调用父类的 constructor 使用super(),代表父类有构造函数

class A 
class B extends A 
constructor() 
super();


  

// 实例 
class Name 
constructor(name)
this.name = name;

show()
console.log(`用户名$this.name`);



class User extends Name 
constructor(name, age) 
super(name);
this.age = age;

showUser()
return (`年龄是$this.age`)



let mycar = new User("wx", "18");
mycar.show();
console.log(mycar.showUser()); // 用户名wx 年龄是18

  


 

 

12.generator 迭代器

- 知识点

1.function *xx 迭代生成器
2.yield :迭代返回
3.next() 方法参数

- generator 函数 需要在function 关键字与函数名之间加个星号, 一般函数用return ,return 就直接返回了,但是generator 函数 用yield 返回,可以多次返回

// 实例
function *show() 
yield "h";
yield "e";
yield ‘l‘;
yield ‘l‘;
yield ‘0‘;


for (let val of show()) 
console.log(val);

  

- next()

遍历器对象的next方法的运行逻辑如下。

(1)遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值。

(2)下一次调用next方法时,再继续往下执行,直到遇到下一个yield表达式。

(3)如果没有再遇到新的yield表达式,就一直运行到函数结束,直到return语句为止,并将return语句后面的表达式的值,作为返回的对象的value属性值。

(4)如果该函数没有return语句,则返回的对象的value属性值为undefined。

function *show() 
console.log(1);
yield;
console.log(2);


let generator = show();
generator.next();
generator.next();

  

以上是关于ES6ES6入门的主要内容,如果未能解决你的问题,请参考以下文章

从零开始学 Web 之 ES6ES6基础语法一

从零开始学 Web 之 ES6ES6基础语法四

ES6 从入门到精通系列学习笔记 23 篇(完结)

ES6 从入门到精通系列学习笔记 23 篇(完结)

ES6标准入门 论文随笔

快速入门ES6