es6基本语法

最新推荐文章于 2024-04-13 10:48:14 发布
ICY___
最新推荐文章于 2024-04-13 10:48:14 发布
阅读量225
点赞数
分类专栏： es6 文章标签： es6
本文链接：https://blog.csdn.net/ICY___/article/details/88626488
版权
js 同时被 2 个专栏收录
35 篇文章 2 订阅
订阅专栏
es6
6 篇文章 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>
        /*
        <!-- es6基本语法 -->
        <!-- 变量的声明   var -->
        <!-- es6  let(限制作用域)   const(常量) -->
        */
        // 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>