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.新特性
- let 和 const
- 变量结构赋值
- 数组
- 字符串
- 函数
- 面向对象
- Promise
- generator
- 模块化
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.变量的结构赋值
- 数组赋值
- 对象赋值
- 函数赋值
- 函数参数指明
-- 数组赋值 按照对应的位置,赋值
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.嵌入字符串
- 知识点
- 字符串嵌入方式
- 字符串模板定义
- 模板,反单引号`$`
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.箭头函数
- 知识点
- 通过箭头函数简化代码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.类
- 知识点
- 新的类定义
- 类的实例
- setter / getter
- 类的继承
- 更像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
- 类继承
- 知识点
-
extends
-
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入门的主要内容,如果未能解决你的问题,请参考以下文章