es6基本语法

傷城~ 2022-03-06 02:44 344阅读 0赞

> 为了更好地学习语法和之后的vue，es6是必不可少的一步！

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>es6</title>
    </head>
    
    <body>
        <script>
            /*
            
            
            
            */
            // var a = 10;
            // console.log(a);
            // a=20;
            // console.log(a);
            // const PI=3.14;
            // console.log(PI);
            // PI=5;
            // console.log(PI);
    
    
    
            // // es6引入语法 代码块
            // let a=1;
            // {
            //     let a=2;
            //     console.log(a);
            // }
            // es5
            // {
            //     var a = [];
            //     for (var i = 0; i < 10; i++) {
            //         a[i] = function () {
            //             console.log(i);
            //         }
            //     }
            //     a[6]();
            // }
    
    
            // {
            //     // es6
            //     let a = [];
            //     for (let i = 0; i < 10; i++) {
            //         a[i] = function () {
            //             console.log(i);
            //         }
    
            //     }
            //     a[6]();
            // }
    
    
            // es6解构赋值
            // var a=1;
            // var a=1,b=2,c=3;
    
            // let [a,b,c]=[1,,3];
            // console.log(a);
            // console.log(b);
            // console.log(c);
    
            // let[a,[b,c],[[d,f],[e,g]]]=[1,[2,3],[[5,6],[7,8]]];
            // console.log(g);
    
            // ...a  数组  ...执行时不写
            // let [...b]=[1,2,3,4,5,6];
            // console.log(b);
    
    
            /*
             es5  给字符串 绑定值  直接是拼接  ++
             es6  使用模板字符串来动态绑值
             es6 ： ``    table  key  up
            */
            // {
            //     let a=10;
            //     let h=10;
            //     let str=`我的年龄是:${a}岁，身高是:${h}M`;
            //     console.log(str);
            // }
    
            // es6里面函数值的问题
            // {
            //     stu(undefined, 2);
            //     function stu(x,y){
            //         x=x||'0';
            //         console.log(x,y);
            //     }
            // }
            // 也可以直接 写入默认值
            // {
            //     stu(undefined,3);
            //     function stu(x,y){
            //         console.log(x,y);
            //     }
            // }
    
            // es6箭头函数 =>
            // {
                // let fun=function(){   
                // }
                // let fun=()=>{console.log(1)};
                // fun();
    
                // let fun=function(x){
                //     console.log(1)
                // }
                // fun();
                // let fun=x=>console.log(x);
                // fun(1);
    
                // let fun=(x,y)=>x+y;
                // console.log(fun(1,2));
    
                // let fun=function(x,y){
                //     return x+y;
                // }
                // let fun=(x,y)=>x+y;
    
                // 自执行函数
                // (function(x){
                //     console.log(x)
                // })(2);
                // ((x)=>console.log(x))(1);
    
                // 箭头函数后面返回key 添加（）包起来执行
                // let foo=()=>({a:1});
                // console.log(foo());
    
                // let a=[1,2,3,4,5,6,7,8];
                // console.log(a.sort((n1,n2)=>n1-n2));
    
                // Array.prototype.mysort=()=>{
                //     // 箭头函数保持上下文对象一致
                //     console.log(this);
                // }
    
                // var n=new Array(1,2,3,4,5);
                // n.mysort();
            // }
    
            // 枚举对象里面的this
            // {
            //     let student={
            //         init(){
            //             document.addEventListener('click',()=>{
            //                 console.log(this);
            //             });
            //         }
            //     }
            //     student.init();
            // }
            // setInterval(function(){
            //     console.log(this);
            // },1000)
    
            // se6  for ---of---遍历
            // {
                // let a=["red","orange","blue"];
                //     for(let item in a){
                //         console.log(a[item]);
                //     }
                // for(let item of a){
                //     // 直接取得值 
                //     console.log(item);
                // }
                // let a=[{name:'zhangliang',sex:'12'},{name:'zhangxiaoliang',sex:'21'}];
                // for(let item of a){
                //     // of后面必须是可迭代的集合
                //     console.log(item);
                //     console.log(item.name)；
                // }
            // }
            // es5 里面的构造函数
            // {
                //     function list(){
                //         this.x;
                //         this.y;
                //         this.init=function(){
    
                //         }
                //     }
                //     var i=new list;
                //     console.log(i);
                    // es6里面声明class
                //     class student{
                //         constructor(w=0,h=0,r=0){
                //             // 给函数初值
                //             // es6中属性在constructor中
                //             this.weight=w;
                //             this.height=h;
                //             this.radius=r;
                //             console.log(this);
                //         }
                //     sleep(){
                //         console.log("睡觉");
                //     }
                //     toString(){
                //         console.log(1);
                //     }
                //     // 获取值
                //     get getsex(){
                //         return this.weight;
                //     }
                //     // 设置值
                //     set setsex(value){
                //         this.weight=value;
                //     }
                // }
                // let stu=new student;
                // stu.sleep();
                // stu.toString();
                // console.log(stu);
                // stu.getsex;
                // console.log(stu.getsex);
                // stu.weight=1000;
                // console.log(stu);
                // }
                // es6里面 导入  import     导出export
                // import Vue from 'vue';
            // import React,{Components} from 'react';
            //  class stu extends Components{
            //     constructor(props){
            //             super(props);
            //             this.state={
    
            //             }
            //     }
            // }
            // export default stu;
        </script>
    </body>
    
    </html>