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. 管道Demo

    使用管道实现读取DOS命令结果,界面如下: 主要代码如下: UpdateData(TRUE); //创建一个管道,用于接收命令执行结果 SECURITY_ATTRIBUTES sa; ZeroMemo ...

  2. spring boot自定义配置文件

    把一些可能会经常变动的东西写在配置文件中,可以增加程序的灵活性,避免多次改版发版. 在sping boot中除了自带的默认配置文件application.properties之外,我们还可以在reso ...

  3. python爬虫之PyQuery

    # -*- coding: UTF-8 -*- from pyquery import PyQuery as pq import re from datetime import datetime,ti ...

  4. Linux基础及系统优化

    1 如何实现自动挂载操作(光驱自动挂载--fstab) 1.1 方法 第一种方法:编辑fstab文件 vi /etc/fstab /dev/cdrom /mnt iso9660 default 0 0 ...

  5. VsCode 常用快捷键、debug菜单、debug插件

    常用快捷键emmet                   百度emmet即可知  Ctrl + P            转到文件Ctrl+鼠标左键不松手     预览代码Ctrl+鼠标左键松手    ...

  6. Java 泛型学习总结

    前言 Java 5 添加了泛型,提供了编译时类型安全检测机制,该机制允许程序员在编译时检测到非法的类型. 泛型的本质是参数化类型,可以为以前处理通用对象的类和方法,指定具体的对象类型.听起来有点抽象, ...

  7. webpack中添加px2rem-loader

    在buid->util.js const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 } } // gene ...

  8. js避坑历险记

    代码改变世界,世界改变码农,码农改变代码! 我就是我,我就是一个码农的武林. 前方JS巨坑出没,请注意集中力! 巨坑1:js精度问题 前段时间去一家物流公司面试,做了一个js题,印象尤为深刻: var ...

  9. docker安装gitlab-runner

    docker安装gitlab-runner docker pull gitlab/gitlab-runner:latest安装gitlab-runner 打开自己搭建的GitLab网站,点击顶栏的Sn ...

  10. Log2Net日志查询网站代码解析

    在前面的几节中,我们介绍了Log2Net的使用方法和代码设计.使用这个组件,我们可以方便地将日志记录到数据库中,那么,我们怎么能看到这些日志呢?于是,日志查询网站应运而生.效果图如下: 该代码已开源, ...