ES6 简单整理

Wesley13
• 阅读 740

1.变量声明 let 和 const

let与const 都是块级作用域,

  • let

    function name(){ let age = 12; //age只在name()函数中存在 }

  • const

    const name = 'tom' name = 'jack'//再次赋值会报错

2.字符串模板

  • Es5

    //例1 var name = 'jack'; console.log('hello '+name) //例2 var msg = 'Hi
    man! '//以反斜杠用来换行

  • Es6

    //例1 const name = 'jack' console.log('hello ${name}');//hello jack //例2 onst template = <div> <span>hello world</span> </div>

3.扩展的对象的功能

  • Es5

    //例1 function people(name,age){ return { name:name age:age } } //例2 const people = { name : 'tom', getThisName:function(){ console.log(this.name) } }

  • Es6

    //例1 function people(name,age){ return { name age } } //例2 const people = { name : 'tom', getThisName(){ console.log(this.name) } }

4.import 和 export

//全部导入
import people from './example'

//有一种特殊情况,即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

//导入部分
import {name, age} from './example'

// 导出默认, 有且只有一个默认
export default App

// 部分导出
export class App extend Component {};

5.class类的支持

Es6中添加了对class类的支持:

//定义class
class Animal(){
    //ES6中新型构造器
    constructor(name) {
        this.name = name;
    }
    //实例方法
    sayName() {
        console.log('My name is '+this.name);
    }
}

//类的继承
class Programmer extends Animal {
    constructor(name) {
        //直接调用父类构造器进行初始化
        super(name);
    }
    program() {
        console.log("I'm coding...");
    }
}
//测试我们的类
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();//输出 ‘My name is dummy’
wayou.sayName();//输出 ‘My name is wayou’
wayou.program();//输出 ‘I'm coding...’

6.for of

var someArray = [ "a", "b", "c" ];
 
for (v of someArray) {
    console.log(v);//输出 a,b,c
}
点赞
收藏
评论区
推荐文章
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
小嫌 小嫌
3年前
js中箭头函数在对象内部的继承
function函数functionPerson()this.name'Jack',this.age25,this.sayNamefunction()console.log(this.name)functioninner()console.log(this.n
Jacquelyn38 Jacquelyn38
3年前
你所知道的JS变量作用域
变量的作用域,指的是变量在脚本代码中的可读、可写的有效范围,也就是脚本代码中可以使用这个变量的区域。在ES6之前,变量的作用域主要分为全局作用域、局部作用域(也称函数作用域)两种;在ES6及其之后,变量的作用域主要分为全局作用域、局部作用域、块级作用域这3种。相应作用域变量分别称为全局变量、局部变量、块级变量。全局变量声明在所有函数之外;局部变量是在函数体内
Wesley13 Wesley13
3年前
ES6之常用开发知识点:入门(一)
ES6介绍ES6,全称ECMAScript6.0,2015.06发版。let和const命令let命令let命令,用来声明变量。它的用法类似于var,区别在于var声明的变量全局有效,let声明的变量只在它所在的代码块内有效。使用var声明:vara
Stella981 Stella981
3年前
Lua基础(对象)
:和.区别.   stu{id100,name"Tom",age21}成员变量   function stu.toString()成员函数    return stu.id .. stu.name .. stu.age   endprint(stu
Wesley13 Wesley13
3年前
ES6新增内容(部分)
ES6新增内容(部分)一、两个声明变量的方法let、constlet:不能重复声明、有暂时性死区,不能提前访问、{}块级作用域。const:声明常量、声明之后不能被修改。二、箭头函数语法:(参数){表达式}箭头函数中this没有固定指向,一般指向宿主对象。
Stella981 Stella981
3年前
ES6+(前端面试题整合)
谈一谈let与var和const的区别let为ES6新添加申明变量的命令,它类似于var,但是有以下不同:let命令不存在变量提升,如果在let前使用,会导致报错let暂时性死区的本质,其实还是块级作用域必须“先声明后使用”的性质,let暂时性死区的原因:var会变量提升,let不会。
Wesley13 Wesley13
3年前
ES6的语法
一,定义变量let(类似var)在js一直有一个bug是var:1、var声明的变量会有变量提升console.log(name);//jhonvarname'jhon';2、var没有块级作用域varname2'jjjon';{varname2'tom';
Wesley13 Wesley13
3年前
ES6新增的一些特性
1、let关键字,用来代替var的关键字,特点: 1、变量不允许被重复定义2、不会进行变量声明提升3、保留块级作用域中i的2、const定义常量,特点:1、常量值不允许被改变2、不会进行变量声明提升3、箭头函数  与普通函数的区别:1、书写上用代替了function         2、普通函数的this指向window而ES6
Wesley13 Wesley13
3年前
ES6快速入门
快速了解ES6部分新特性。。。let和const letES6新增了let命令,用于声明变量。其用法类似var,但是声明的变量只在let命令所在的代码块内有效。{letx10;vary20;}x//ReferenceE