前端VUE框架-es6

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的更多相关文章

前端vue框架脚手架
1.安装node.js最新版本2.cmd下输入 1.node -v得到版本号检测是否安装成功版本号要在6.9以上 2.npm -v 版本号要在3.10以上3.安装脚手架 1.npm install ...
前端--vue框架
1.下载查看已安装好的版本 -------渐进式的JS框架--------- vue是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架 ...
前端VUE框架
一.什么是VUE? 它是一个构建用户界面的JAVASCRIPt框架 vue不关心你页面上的是什么标签,它操作的是变量或属性为什么要使用VUE? 在前后端分离的时候,后端只返回json数据,再没有 ...
ABP实践(4)-abp前端vue框架之简单商品增删改查(帮助刚入门的新手快速了解怎么才能加入自己的功能并运行起来)
提示:如有不明白的地方请先查看前3篇ABP实践系列的文章 1,下载及启动abp项目前后端分离(netcore+vue) 2,修改abp数据库为mysql 3,商品系列api接口(本文主要依赖在这个商品 ...
前端vue框架路由的安装及使用
安装: 1.cmd下输入: npm install vue-router --save //安装路由 2.npm run dev //重新启动使用: 1.在mian.js下引入路由 import V ...
前端Vue框架-vuex状态管理详解
新人报道!多多关照-多提宝贵意见谢谢- vuex理解采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解属性理解 state 驱动应用的数据源 ...
前端vue框架父组件与子组件之间的相互调用
子组件调用父组件东西: 1.在父组件与子组件契合的标签的的template模板中绑定 v-bind:自定义一个名字=“要调用的名字” 2.在子组件的script中props:["自定义的名字 ...
Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
vue框架入门和ES6介绍
vue框架入门和ES6介绍 vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等. https://cn.vuejs.org/ 源码:https://g ...

随机推荐

CF983B XOR-pyramid
设\(xorx[l][r]\)表示题目中\(f(l,r)\)的值,则可以得出 \[ xorx[i][j]=xorx[i][j-1] \oplus xorx[i+1][j] \] 设\(maxx[l][ ...
测试常用的sql语句总结
测试中常用的sql语句,排名部分先后 1. 查询 SELECT * FROM 表名称 SELECT COUNT(DISTINCT column_name) FROM table_name 指定列的不同 ...
Java基础 --Unix与Mac系统文件路径分隔符（一）
斜杠‘/’与反斜杠‘\’在不同系统的使用 1)Window平台使用反斜杠'\'作为文件层级分隔符:Windows使用反斜杠作为DOS命令提示符的参数标志,随着发展DOS命令符逐渐被淘汰,大部分情况下斜 ...
memset()函数用法及其作用
memset()函数原型是: extern void *memset(void *buffer, int c, int count) //buffer:为指针或是数组, //c:是赋给buffer的值 ...
Perl关联数组用法集锦
本文和大家重点讨论一下Perl关联数组的概念,创建Perl关联数组,从数组变量复制到Perl关联数组,元素的增删,用Perl关联数组循环等内容,相信通过本文的学习你对Perl关联数组的用法一定会有深刻 ...
Unity Shaderlab: Object Outlines 转
转 https://willweissman.wordpress.com/tutorials/shaders/unity-shaderlab-object-outlines/ Unity Shader ...
python 拷贝文件
使用绝对目录: import os import shutil shutil.copyfile("/opt/test/update.tar.gz","/opt/updat ...
Oracle(限定查询2)
3.2 对数据进行限定查询在标准SQL之中定义了许多的运算符. 3.2.1.关系运算符范例: 范例: 范例: 在使用关系运算符判断字符数据的时候注意大小写的编写问题.因为Oracle是区分大小写的 ...
Spark多种运行模式
1.测试或实验性质的本地运行模式(单机) 该模式被称为Local[N]模式,是用单机的多个线程来模拟Spark分布式计算,通常用来验证开发出来的应用程序逻辑上是否有问题. 其中N代表可以使用N个线程, ...
Asp.net core 学习笔记 (Excel 读写)
EPPlus 已经支持 .net core 了 https://www.nuget.org/packages/EPPlus https://github.com/JanKallman/EPPlus 写 ...

前端VUE框架-es6

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

随机推荐

热门专题