01-先了解ES6语法

1.声明变量let和const

<script type="javascript">

    //es5声明变量 var 先声明，后赋值

    //var a = 10;

    //console.log(a);

    //因变量提升 导致 1.var声明的变量属于 全局作用域;

    //2.var声明的变量存在覆盖现象;

    var a;

    console.log(a);

    {

        a = 20;

        //var a = 30;

    }

    console.log(a);

    //打印结果：i=10

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

    }

    console.log(i);

    //es6声明变量 let和const

    //let 声明变量的好处：1.属于局部作用域；2.没有覆盖现象

    //const 声明的是 常量, 1.这个常量一旦声明 就不可修改；2.局部作用域；

    const pai = 3.14;

</script>

2.模板字符串

语法:` ${变量名} `

注：` ` 是tab键上面的反引号。

<body>

<ul>

    <li>

        <a href="javascript:;">

            <img src="" alt="">

        </a>

    </li>

</ul>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script type="javascript">

    //es6模板字符串

    /*

    let name='hyp';

    let age=18;

    // `` 使用反引号

    let desc=`${name}的年龄是${age}`;//'hyp的年龄是18'

    console.log(desc);

    */

    //示例

    let imgSrc = './1.png';

    $(function () {

        $('ul').append(

            `<ul>

                <li>

                    <a href="javascript:;">

                        <img src="${imgSrc}" alt="">

                    </a>

                </li>

            </ul>`

        );

    })

</script>

</body>

3.函数的书写

es6箭头函数的书写：

function() {} 等价于 ()=>{}

箭头函数的使用 带来的问题：

    1.使用使用箭头函数this的指向发生了改变

    2.使用箭头函数 arguments 不能使用
<script type="text/javascript">

    /*

    普通函数

    function add(a,b) {

        return a+b;

    };

    alert(add(1,2));

    */

    /*

    // 函数对象

    var add  = function (a,b) {

        return a+b;

    };

    alert(add(3,4))

    */

    /*

    var add = (a,b)=>{

        return a+b;

    };

    alert(add(3,7))

    */

    /*

    var person = {

        name:"alex",

        age: 20,

        fav:function () {

            console.log('喜欢AV');

            // this指的是当前的对象

            console.log(this.age);

        }

    };

    person.fav();

    */

    /*

    var person = {

        name:"alex",

        age: 20,

        fav: () => {

            // this的指向发生了改变,指向了定义person的父级对象 window

            console.log('喜欢AV');

            console.log(this);

        }

    };

    person.fav();

    */

    /*

    var person = {

        name:"alex",

        age: 20,

        fav: function () {

            console.log('喜欢AV');

            // this指的是当前的对象

            console.log(this);

            console.log(arguments[0])

        }

    };

    person.fav('哈哈哈');

    */

    var person = {

        name:"alex",

        age: 20,

        fav: (content) =>{

            // this的指向发生了改变,指向了定义person的父级对象 window

            console.log('喜欢AV');

            console.log(this);
　　　　　　　//arguments 是实参，此处结果为 undefined

            // console.log(arguments)

        }

    };

    person.fav('哈哈哈');

</script>

4.对象的创建

es6中对象的单体模式

fav(){} 等价于 function fav(){} 等价于 var fav = function(){}
<script type="text/javascript">

    // 字面量方式创建对象

    /*

    var person = {

        name:"alex",

        age: 20,

        fav:function () {

            console.log('喜欢AV');

            // this指的是当前的对象

            console.log(this.age);

        }

    };

    person.fav();

    */

    // es6中对象的单体模式

    var person = {

        name:"alex",

        age: 20,

        fav(){
　　　　　　  //此处的this 指的是 当前对象Object；
　　　　　　  //使用单体模式 解决了 箭头函数的this指向的问题 和 arguments 也可以使用了

            console.log(this);

            console.log(arguments);

        }

    };

    person.fav();

</script>

5.es6中类的概念class

<script type="text/javascript">

    /*

    function Person(name,age){

        this.name = name;

        this.age = age;

    }

    Person.prototype.showName = function(){

        alert(this.name);

    };

    // 使用new关键字来创建对象

    var p = new Person('alex',19);

    p.showName()

    */

    // es6中创建对象的方式 使用class

    class Person{
　　　　 //constructor 相当于 __init__

        constructor(name,age){

            this.name = name;

            this.age = age;

        }
　　　　 //函数

        showName(){

            alert(this.name);

        }

    }

　　// 相当于实例化对象

    var p2 = new Person('张三',20);

    p2.showName();

</script>

6.global对象

ES5 的顶层对象，本身也是一个问题，因为它在各种实现里面是不统一的。

　　1.浏览器里面，顶层对象是window，但 Node 和 Web Worker 没有window。

　　2.浏览器和 Web Worker 里面，self也指向顶层对象，但是 Node 没有self。

　　3.Node 里面，顶层对象是global，但其他环境都不支持。

同一段代码为了能够在各种环境，都能取到顶层对象，现在一般是使用this变量，但是有局限性。

　　1.全局环境中，this会返回顶层对象。但是，Node 模块和 ES6 模块中，this返回的是当前模块。

　　2.函数里面的this，如果函数不是作为对象的方法运行，而是单纯作为函数运行，this会指向顶层对象。但是，严格模式下，这时this会返回undefined。

　　3.不管是严格模式，还是普通模式，new Function('return this')()，总是会返回全局对象。
　　  但是，如果浏览器用了 CSP（Content Security Policy，内容安全策略），那么eval、new Function这些方法都可能无法使用。

综上所述，很难找到一种方法，可以在所有情况下，都取到顶层对象。下面是两种勉强可以使用的方法。
// 方法一

(typeof window !== 'undefined'

   ? window

   : (typeof process === 'object' &&

      typeof require === 'function' &&

      typeof global === 'object')

     ? global

     : this);

// 方法二

var getGlobal = function () {

  if (typeof self !== 'undefined') { return self; }

  if (typeof window !== 'undefined') { return window; }

  if (typeof global !== 'undefined') { return global; }

  throw new Error('unable to locate global object');

};
// CommonJS 的写法

require('system.global/shim')();

// ES6 模块的写法

import shim from 'system.global/shim'; shim();

上面代码可以保证各种环境里面，global对象都是存在的。

// CommonJS 的写法

var global = require('system.global')();

// ES6 模块的写法

import getGlobal from 'system.global';

const global = getGlobal();

上面代码将顶层对象放入变量global。

Vue(一)之ES6基础的更多相关文章

  1. vue初体验-ES6 基础知识补充 let 和const

    本人水平有限,如内容有误,欢迎指正,谢谢. let  : 主要特点: 1.作用域只局限于当前代码块.2.使用let 声明的变量作用域不会被提升.3.在相同的作用域下不能声明相同的变量.4.for循环体 ...

  2. ES6 基础

    转载自:ES6 基础 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升. 通过2个简单的例子来 ...

  3. 新手必看ES6基础

    ES6 基础 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升. 通过2个简单的例子来说明这两 ...

  4. vue学习笔记之基础篇

    本文主要记录学习vue的一些基础内容及常用知识点的记录. 1.搭建脚手架 vue init webpack vue-demo 初始化一个使用webpack打包的vue项目 npm install 安装 ...

  5. 【Vue】组件的基础与组件间通信

    转载:https://segmentfault.com/a/1190000016409329 Vue.js 最核心的功能就是组件(Component),从组件的构建.注册到组件间通信,Vue .x 提 ...

  6. 用vue.js学习es6（一）：基本工具及配置

    一.工具: sublime,node.js,npm 1.安装sublime 的es6插件: (1).在sublime中按Ctrl+`调出console (2).粘贴以下代码到底部命令行并回车(subl ...

  7. Webstorm添加新建.vue文件功能并支持高亮vue语法和es6语法

    转载:https://blog.csdn.net/qq_33008701/article/details/56486893 Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法 ...

  8. webstorm中es6语法报错，.vue文件中es6语法报错

    1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript把 Javascript L ...

  9. webstorm中.vue报错(es6语法报错)-转

    1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript把 Javascript L ...

随机推荐

  1. Microsoft Teams 集成 (协作, 沟通 和 行为)

    Microsoft Teams 集成 (协作, 沟通 和 行为) 概述 Microsoft Teams是在Office 365中以chat为中心的工作空间.软件开发团队可以快速获得在一个专门的团队协作 ...

  2. C#多线程图片爬虫

    写了个简单的多线程图片爬虫,整理一下.数据已经爬下来了,图片URL需要自行拼接,首先从Lawyers表中取的RawData字段,RawData中有一个list字段是json格式的数据,需要的只是lis ...

  3. 转： OVER() 系列函数介绍

    OVER(PARTITION BY)函数介绍 开窗函数               Oracle从8.1.6开始提供分析函数,分析函数用于计算基于组的某种聚合值,它和聚合函数的不同之处是:对于每个组返 ...

  4. c/c++ 多维数组和指针

    c/c++ 多维数组和指针 知识点 1,初始化多维数组,对应代码里的test1 2,遍历多维数组,除了最内层循环外,其他所有层都必须是引用类型,对应代码里的test2 3,指针和多维数组 ,对应代码里 ...

  5. App分享之微信微博等各个社交平台的分享授权规则和常见问题

    一.新浪微博分享规则 新浪微博支持分享类型: 应用内分享也就是网页分享支持: 文字,文字+图片,要分享链接需要链接添加在text里分享 客户端分享支持:文字,图片,文字+图片,图片+文字+链接 参数说 ...

  6. ADV190007 - “PrivExchange” 特权提升漏洞的指南

    Microsoft Exchange Server中存在一个特权提升漏洞.成功利用此漏洞的攻击者可能会尝试模仿Exchange服务器的任何其他用户.要利用此漏洞,攻击者需要执行中间人攻击才能将身份验证 ...

  7. IT部门不应该是一个后勤部门

    管理上最大的问题在于不重视预算与核算的管理.从管理层到员工,很少有经营的念头,只是一味地埋头做事.西方企业总结了当今几百年的经营理念,最终把企业一切活动的评价都归结到唯一的.可度量的标准上:钱来度量. ...

  8. 关于LVS负载均衡tcp长连接分发的解决思路

    虽然应用keepalived搞定了后端服务负载均衡和高可用性问题,但是在具体应用的时候,还是要注意很多问题.很多应用都用tcp或者http的长连接,因为建立tcp连接或者http连接开销比较大,而应用 ...

  9. C. Playlist Educational Codeforces Round 62 (Rated for Div. 2) 贪心+优先队列

    C. Playlist time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...

  10. 【CQOI2006】凸多边形

    1713 -- [CQOI2006]凸多边形 Description 逆时针给出n个凸多边形的顶点坐标,求它们交的面积.例如n=2时,两个凸多边形如下图: 则相交部分的面积为5.233. Input ...