前端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 ...

随机推荐

Balloons
题目链接:http://acm.sdibt.edu.cn/JudgeOnline/problem.php?id=2401 类似求连通块的问题,可以参考紫书(P162 油田),对这两个人分别执行dfs. ...
SQLite EF Core Database Provider
原文链接 This database provider allows Entity Framework Core to be used with SQLite. The provider is mai ...
Linux 解决 firefox 中文页面乱码问题
1.由于 firefox 默认是允许网页自己选择字体,在 Linux 上便会出现部分网站的乱码情况.因此可以取消允许页面自己选择字体这个选项便能解决部分乱码情况.
在 2016 年学 JavaScript 是一种什么样的体验？（React从入门到放弃）
jquery 年代 vs 前端模块化 http://blog.csdn.net/offbye/article/details/52793921 ++ 嘿,我最近接到一个 Web 项目,不过老实说,我这 ...
Python 爬取猫眼 top100 电影例子
一个Python 爬取猫眼top100的小栗子 import json import requests import re from multiprocessing import Pool #//进程 ...
1. eclipse异常问题解决办法
1. 内存溢出问题问题描述:报错信息 java.lang.OutOfMemoryError: PermGen space 解决办法: 在Tomcat/bin/catalina.bat 文件下加入: ...
Spring Bean的生命周期例子
以下例子源于:W3Cschool,在此作记录 HelloWorld.java package com.how2java.w3cschool.beanlife; public class HelloWo ...
feed
a1=tf.placeholder(tf.float32) # 占位符 a2=tf.placeholder(tf.float32)r=tf.multiply(a1,a2) with tf.Ses ...
h5内容超出可以滑动展示的处理，iscroll的使用
第一步: 引入js 第二步:页面结构第三步:使用 dome效果:http://cubiq.org/dropbox/iscroll4/examples/simple/ 文档地址:http://iscr ...
win10 java环境变量
https://jingyan.baidu.com/article/fd8044fa2c22f15031137a2a.html

前端VUE框架-es6

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

随机推荐

热门专题