EMCAScript 6 又叫 es2015

1、常量和变量

    常量：  const a = "hello"

        常量不能修改和重复定义

    变量：

        let:定义一个块级作用域的变量

            需要先定义再使用；(不存在变量提升)

            不能重复定义

            可以被修改

        var:定义一个变量

            存在变量提升

                变量提升：   先使用后定义和赋值

                    //        console.log(b);     undefined

                    //        var b = 123456;

                    详解：

                    //        var b;

                    //         console.log(b);    undefined

                    //         b = 123456;

    js的数据类型：

    string array number null undefined boolean object

    基本数据类型：string number null undefined boolean

    引用类型：array object
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        const a = "hello";

        console.log(a);

//        console.log(b);

//        var b = 123456;

        //变量提升

//        var b;

//         console.log(b);

//        b = 123456;

        //let c = 100;

        if(10> 9){

            let c=200;

            console.log(c);

        }

         console.log(c);

        var  c = 300

        let d = 888;

        d = 999

        console.log(d);

        var i=10;

        var arr = [22,33,44,55]

        for(let i=0;i< arr.length;i++){

        }

        if(i>5){

            console.log(i+10);

        }

        const obj = {

            name: "谢小二",

            age: 22

        }

        var obj2 = obj;

        obj2.age = 90

        console.log(obj.age);

    </script>

</head>

<body>

</body>

</html>
2、模板字符串

    通过反引号来使用，字符串当中可以使用变量

    可以当作普通字符串来处理

    可以使用多行字符串
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

        <ul id="list_1">

        </ul>

        <script>

        var name = `小三`;

        console.log(`她的名字叫${name}`);

        document.getElementById("list_1").innerHTML = `

        <li>11</li>

        <li>22</li>

        <li>33</li>

        <li>44</li>

        `

    </script>

</body>

</html>
3、解构变量

    解构变量的结构要一样，结构对象时被赋值的变量要和对象内的key一样
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

//        let arr = [89,90,99];

//        let a = arr[0];

//        let b = arr[1];

//        let c = arr[2];

        let [a,b,c,[d]] = [89,90,99,[100]];

        console.log(a);

        console.log(c);

        console.log(d);

        let obj = {

            "a1":"json",

            a2: 23

        };

        let {a1,a2} = obj;

        console.log(a1);

    </script>

</head>

<body>

</body>

</html>
4、对象的扩展

    对象当中的属性可以简写

    对象当中的方法也可以简写
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        let username = '谢小闲';

        let obj = {

            username,      //username='谢小闲'

            fun() {

                alert(999);

            }

        };

        console.log(obj.username);

        obj.fun();

//用法举例：

//        var useranme = $("#text1").val();

//        var password = $("#text2").val();

//        $.get(url,{useranme,password},function(){

//

//

//        })

    </script>

</head>

<body>

</body>

</html>
5、函数的扩展

    可以给函数默认参数

    剩余参数：function fun2(x=3,...y) {

                        console.log(x);

                        console.log(y);    //  [3.4.5]

                        }

             fun2(x=2,y=3,z=4,5)
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        function fun(x=100) {

            alert(x);

        }

        //fun();

        function fun2(x=3,...y) {

            console.log(x);

            console.log(y);    //  [3.4.5]

        }

        fun2(x=2,y=3,z=4,5)

    </script>

</head>

<body>

</body>

</html>
6、数组的扩展
1)判断数组当中是否存在某个数值
     console.log(arr.indexOf(1000))     //没有打印 -1 ，有则打印数值的索引
     console.log(arr.includes(201))     // false或true

2）对数组的遍历
    var arr = [78,89,90,21];

    arr.forEach(function (value,index) {
            console.log(value);
        })

    var arr2 = arr.map(function (value,index) {
            return value+1         //必须有返回值
        })
    console.log(arr2);             //[79, 90, 91, 22]

    let arr3 = [11,22,33]
    for(var i in arr3){            // in 方法   i表示索引
            console.log(arr3[i]);
        }
    for(var i of arr3){            // of 方法   i表示值
            console.log(i);
        }

3)对数组的过滤
    var arr4 = arr.filter(function (value,index) {
            return value > 50      //必须有返回值
        })
        console.log(arr4);         // [78, 89, 90]
7、类扩展

<script>

        var age2 = 99;

        Object.prototype.age2 = age2;

        function Person(name,age){

            this.name = name;

            this.age = age;

            this.run = function () {

                alert(`${this.name}能跑`);

            }

        }

        Person.prototype.sing = function () {      //prototype是对每一个类的扩展，如果类内有，那拓展就失效了

            alert(`${this.name}能唱歌`);

        };

        let man = new Person("小秋",19);

        console.log(man.name);       //首先在类中查找

        man.run();

        man.sing();                  //其次到类的prototype中查找

        console.log(man.age2);       //再到Object中查找

</script>

前端VUE框架-es6的更多相关文章

  1. 前端vue框架 脚手架

    1.安装node.js最新版本2.cmd下输入 1.node -v得到版本号检测是否安装成功 版本号要在6.9以上 2.npm -v 版本号要在3.10以上3.安装脚手架 1.npm install ...

  2. 前端--vue框架

    1.下载 查看已安装好的版本 -------渐进式的JS框架--------- vue是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架 ...

  3. 前端VUE框架

    一.什么是VUE?  它是一个构建用户界面的JAVASCRIPt框架  vue不关心你页面上的是什么标签,它操作的是变量或属性 为什么要使用VUE? 在前后端分离的时候,后端只返回json数据,再没有 ...

  4. ABP实践(4)-abp前端vue框架之简单商品增删改查(帮助刚入门的新手快速了解怎么才能加入自己的功能并运行起来)

    提示:如有不明白的地方请先查看前3篇ABP实践系列的文章 1,下载及启动abp项目前后端分离(netcore+vue) 2,修改abp数据库为mysql 3,商品系列api接口(本文主要依赖在这个商品 ...

  5. 前端vue框架 路由的安装及使用

    安装: 1.cmd下输入: npm install vue-router --save //安装路由 2.npm run dev //重新启动 使用: 1.在mian.js下引入路由 import V ...

  6. 前端Vue框架-vuex状态管理详解

    新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...

  7. 前端vue框架 父组件与子组件之间的相互调用

    子组件调用父组件东西: 1.在父组件与子组件契合的标签的的template模板中绑定 v-bind:自定义一个名字=“要调用的名字” 2.在子组件的script中props:["自定义的名字 ...

  8. Web前端-Vue.js必备框架（五）

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  9. vue框架入门和ES6介绍

    vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...

随机推荐

  1. (zhuan) How to Train Neural Networks With Backpropagation

    this blog from: http://blog.demofox.org/2017/03/09/how-to-train-neural-networks-with-backpropagation ...

  2. Math.random 随机数方法

    随机取数方法 Math.random() 表示0到1之间随机取一个数 <x< 小数 Math.random()* 表示0<x< parseInt(Math.random()*) ...

  3. arm中断体系结构

     ARM处理器中有7种类型的异常,按优先级从高到低的排列如下:                   复位异常(Reset).     数据异常(Data Abort).     快速中断异常(FIQ) ...

  4. (转载)C# GDI+ 画简单的图形：直线、矩形、扇形等

    GDI+是一种绘图装置接口, 当拖动窗体是,窗体发生移动,window默认为从窗体移动到另一个地方,先发生擦除后再重新画一个窗体: 而我们自己动手画的图(如下面的线),不会重新画:在属性中,Paint ...

  5. 常用Iview样式布局

    type 布局模式,可选值为flex流式布局或不选,在现代浏览器下有效 flex 布局下的垂直对齐方式,align可选值为top.middle.bottom flex 布局下的水平排列方式,justi ...

  6. ECharts配置项之title(标题)

    1.标题居中 //left的值为'left', 'center', 'right' title:{ left:'center' } 2.主副标题之间的间距 title:{ //默认为10 itemGa ...

  7. Python 爬取 猫眼 top100 电影例子

    一个Python 爬取猫眼top100的小栗子 import json import requests import re from multiprocessing import Pool #//进程 ...

  8. mysql利用navicat导出表结构和表中数据

    LZ在网上搜索了要如何导出mysql的表结构和表中数据,发现有的方法不好用 记录一下好用的方式: 用navicat打开DB链接后,点击数据库,右击选择转储SQL文件,然后选择结构和数据: 之后弹出新的 ...

  9. hibernate框架入门配置

    1.新建一个项目(可以是java项目,也可以是webapp) 2.导入jar包,包括日志,mysql驱动,必备request包,jpa配置规范包 3.创建实体类 1.创建数据库,使用hibernate ...

  10. [转][osg]关于PagedLOD 加载卸载机制

    你的PagedLOD 为什么没有卸载 转自:http://bbs.osgchina.org/forum.php?mod=viewthread&tid=7612&highlight=Pa ...