1. let和const

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>
let:
　　//局部作用域

    var a = [];

    for (let i = 0; i < 10; i++){

        a[i] = function () {

            console.log(i)

        }

    }

    a[2]() //2
　　 a[5]() //5
　　//不会存在变量提升
　　console.log(a); //undefined
　　{
　　var a = 1;
　　var a = 10
}
　　console.log(a); //10
　　//变量不能重复声明
　　let a = 1;
　　let a = 10;
　　console.log(a); //10

// const:局部作用域,不会存在变量提升,不能重复声明,只声明常量,不可变的量

</script>

</body>

</html>

2. es6的箭头函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    function add(x) {

        return x

    };

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

    let add1 = function (x) {

        return x

    };

    console.log(add1(10)); //10

    let add2 = (x) => x;

    console.log(add2(20)); //20

</script>

</body>

</html>

3. es6的对象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    let person1 = {

        methods:{

            fav:function () {

            }

        },

        name:"ritian",

        age:30,

        fav:function () {

            console.log(this); //this指当前的person1对象

            console.log(this.name);

            console.log(this.age);

        }

    };

    person1.fav();

    let person2 = {

        name:"ritian2",

        age:30,

        fav:() => {

            console.log(this); //this指定义person的父级对象(window)

            console.log(this.name);

        }

    };

    person2.fav();

    let person3 = {

        name:"ritian",

        fav(){

            console.log(this); //当前this,即person3

        }

    };

    person3.fav()

</script>

</body>

</html>

4. es6的类

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>4</title>

</head>

<body>

<script>

    function Vue(name,age) {

        this.name = name;

        this.age = age;

        console.log(this.name); //ritian

        console.log(this.age); //18

    }

    //基于原型给对象声明方法

    Vue.prototype.showName = function(){

      console.log(this.name);

    };

    Vue("ritian",18);

    class Person{

        constructor(name="ritian",age=18){

            this.name = name;

            this.age = age;

        }

        showname(){

            console.log(this.name);

        }

        showage(){

            console.log(this.age);

        }

    }

    let V = new Person();

    V.showname(); //ritian

    V.showage(); //18

</script>

</body>

</html>

es6的基本用法的更多相关文章

  1. ES6语法 promise用法

    ES6语法 promise用法 function doSomething(){ return new Promise((resolve,reject)=>{ resolve('jjjj');// ...

  2. es6的promise用法详解

    es6的promise用法详解 promise 原理 promise是es6的异步编程解决方案, 是es6封装好的对象: 一个promise有三种状态:Pending(进行中).Resolved(已完 ...

  3. ES6之Promise用法详解

    一 前言 本文主要对ES6的Promise进行一些入门级的介绍.要想学习一个知识点,肯定是从三个方面出发,what.why.how.下面就跟着我一步步学习吧~ 二 什么是Promise 首先是what ...

  4. ES6 Class基本用法

    JavaScript 语言中,生成实例对象的传统方法是通过构造函数.下面是一个例子. function Point(x, y) { this.x = x; this.y = y; } Point.pr ...

  5. es6 reduce的用法

    一.forEach回调函数参数,item(数组元素).index(序列).arr(数组本身)循环数组,无返回值,不改变原数组不支持return操作输出,return只用于控制循环是否跳出当前循环 二. ...

  6. 非vue等框架中html 中使用es6的模块用法小结

    以下是html中使用es6模块化引入的方法 一.html中的引入 <!DOCTYPE html> <html lang="en"> <head> ...

  7. 数组的高级应用含ES6 for of 用法

    // 在ES5中常用的10种数组遍历方法: // 1. 原始的for循环语句 // 2. Array.prototype.forEach数组对象内置方法 // 3. Array.prototype.m ...

  8. es6 map的用法

    let arr =[ {title:'aaaa',read:100,hot:true}, {title:'bbbb',read:50,hot:false}, {title:'ccc',read:100 ...

  9. ES6中Class的用法及在微信小程序中的应用实例

    1.ES6的基本用法 ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6 的class可以看作只是一个语法糖,它的绝 ...

随机推荐

  1. C语言宏定义##连接符和#符的使用（MFC就是靠##自动把消息和消息函数对应起来了，借助宏来减少switch case代码的编写量）

    C语言中如何使用宏C(和C++)中的宏(Macro)属于编译器预处理的范畴,属于编译期概念(而非运行期概念).下面对常遇到的宏的使用问题做了简单总结. 关于#和## 在C语言的宏中,#的功能是将其后面 ...

  2. qt+opencv对两幅图片进行融合

    本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 源代码: #include "widget.h" #include "ui ...

  3. Oracle expdp/impdp 使用示例

    1. 创建目录 使用数据泵之前,需要创建一个存放文件的目录. 这个目录要写入Oracle的数据字典中才能识别. (1)先查看一下已经存在的目录: SQL> col owner format a5 ...

  4. abp(net core)+easyui+efcore仓储系统——定义仓储并实现 (四)

    abp(net core)+easyui+efcore仓储系统目录 abp(net core)+easyui+efcore仓储系统——ABP总体介绍(一) abp(net core)+easyui+e ...

  5. MyBatis从入门到精通(一)：MyBatis入门

    最近在读刘增辉老师所著的<MyBatis从入门到精通>一书,很有收获,于是将自己学习的过程以博客形式输出,如有错误,欢迎指正,如帮助到你,不胜荣幸! 1. MyBatis简介 ​ 2001 ...

  6. 跟我学SpringCloud | 第一篇：介绍

    首先讲一下我为什么要写这一系列的文章,现在网上大量的springcloud相关的文章,使用的springboot和springcloud的版本都相对比较老,很多还是在使用springboot1.x的版 ...

  7. HDFS Java API 的基本使用

    一. 简介 二.API的使用         2.1 FileSystem         2.2 创建目录         2.3 创建指定权限的目录         2.4 创建文件,并写入内容 ...

  8. 新手怎么学JS？JavaScript基础入门

    新手应该怎么学习JS?JavaScript入门 - 01 准备工作 在正式的学习JavaScript之前,我们先来学习一些小工具,帮助我们更好的学习和理解后面的内容. js代码位置 首先是如何编写Ja ...

  9. 【设计模式】结构型05组合模式（Composite Pattern）

    组合模式(Composite Pattern) 意图:将对象组合成树形结构以表示"部分-整体"的层次结构.组合模式使得用户对单个对象和组合对象的使用具有一致性. 主要解决:它在我们 ...

  10. redis在asp.net 中的应用

    1.redis介绍 Nosql数据库作为关系型数据库的补充,在互联网公司已经得到广泛的运用.redis便是其中的代表之一,redis是一种(key,value)基于内存的数据库,并支持多种数据结构,如 ...