ES6基本语法概念_es6语法概念-CSDN博客

本文链接：https://blog.csdn.net/qq_49635826/article/details/125761506

ES6基本语法概念

ES6是javaScript下的一个标准，是浏览器脚本语言的一个标准

vscode生成html页面快捷键:Shift+!

let特性

//特性 一
<script>
      //var 声明的变量会越域
      //let 声明的变量有严格的局部作用
      {
        var a=1;
        let b=2;
      }  
      console.log(a);1
      console.log(b);// not defined
    </script>

//特性 二
    //var 可以多次声明
    // let 只能声明一次
    var m=1
    var m=2
    let n=3
   // let n=4
    console.log(m)//2
    console.log(n)//been declared

//特性 三
		//var 会变量提升
        //let 不存在变量提升
        console.log(x);//undefined
        var x=10;
        console.log(y);//y is not defined
        let y=20;

const特性

 //1.cosnt声明后不允许改变
        //2.一旦声明必须初始化，否则报错 
        const a=1;
        a=3;//constant variable

结构表达式

概念：获取数组方式变得简洁没有以前繁琐

//数组结构
	let arr=[1,2,3]
    //以前
        // let a =arr[0];
        // let b =arr[1];
        // let c =arr[2];
    //结构表达式以后
        let[a,b,c] =arr;

//对象解构
 const person={
            name: "jack",
            age:21,
            language:['java','js','css']
        }
    //以前
    const name =person.name;
    const age =person.age;
    const language =person.language;

    //现在
    const {name,age,language}=person;
 	//对象别名
    const {name:abc,age,language}=person;
    
    console.log(name,age,language);

字符串扩展

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t6oRRZQZ-1657688116866)(C:\Users\邪主\AppData\Roaming\Typora\typora-user-images\image-20220712210600168.png)]

函数优化

  <script>
//1、在ES6以前，我梦无法给一个函数参数设置默认值，只能采用变通写法
        function add(a,b){
            //判断b是否为空，为空就给默认值1
            b = b || 1;
            return a + b;
        }
        //传入一个参数
        console.log(add(10));//11

        //现在的写法，直接给参数写上默认值，没传自动返回默认值
        function add2(a,b=1){
            return a + b;
        }
        console.log(add2(20));//21

//2、不定参数
        function fun (...values){
            console.log(values.length)
        }
        fun(1,2);//2
        fun(1,2,3,4);//4
//3、箭头函数
    //以前声明一个方法
        // var print = function(obj){
        //     console.log(obj);
        // }
        //print("傻逼")
    //箭头
            var print = obj => console.log(obj);
            print("hello");
        
        //方式 一
            var sum =function(a,b){
                c=a+b;
                return a+c;
            }
            var sum2 =(a,b) => a+b;
            console.log(sum2(11,12));
        //方式 二
            var sum3 = (a,b)=>{
                c = a+b;
                return a + c;
            }
            console.log(sum3(10,20))
        //方式 三
            const person={
                name:"jack",
                age: 21,
                language:['java','js',"css"]
            }
            function hello(person){
                console.log("hello,"+person.name)
            }
          //箭头函数+解构
            var hello2 =({name}) => console.log("hello,"+name);
            hello2(person);
    </script>

对象优化

    <script>
//对象优化
    //1、传统    
        const person={
            name: "jack",
            age: 21,
            langguage:['java','js','css']
        }
        //输出键值
        console.log(Object.keys(person));
        //输出数组
        console.log(Object.values(person));
        //输出数组长度
        console.log(Object.entries(person));

        const target={a:1};
        const source1={b:2};
        const source2={c:3};
        //将值转换为对象：传统写法
        Object.assign(target,source1,source2);
        console.log(target);//{a: 1, b: 2, c: 3}
    //2.Es6声明对象简写
        const age = 23
        const name ="张三"
        const person1 = {age: age,name: name}

        const person2 = {age,name}
        console.log(person2);//{age: 23, name: '张三'}
    //3、对象的函数属性简写
        let person3 = {
            name : "jack",
            //以前
            eat:function(food){
                console.log(this.name + "在吃"+food)
            },
            //现在
                //箭头函数this不能使用，对象，属性
            eat2: food =>  console.log(person3.name + "在吃"+food),
            eat3(food){
                console.log(this.name + "在吃"+food);
            }
        }
        person3.eat("香蕉")//jack在吃香蕉
        person3.eat2("苹果")//htis:在吃苹果,使用对象：jack在吃苹果
        person3.eat3("橘子")//jack在吃橘子
    //对象拓展运算符
        //1、拷贝对象（深拷贝）
        let p1={name:"Amy",age:15}
        let someone={...p1}
        console.log(someone)//{name: 'Amy', age: 15}
        //2、合并对象
        let age1={age:15};
        let name1={name:"Amy"};
        let p2 ={name:"zhangsan"}
        p2={...age,...name1}//会把默认初始值覆盖
        console.log(p2)//{name: 'Amy', age: 15},{name: 'Amy'}
        
    </script>

map和reduce

    <script>
    //数组中新增了map和reduce方法
    //map(): 接收函数，将原数组中的所有元素用这个函数处理后放入新数组返回
        let arr = ['1','20','5','3'];
        //写法一
        // arr = arr.map((item) => {
        //     return item*2
        // })
        //写法二
        arr = arr.map(item => item*2)// [2, 40, 10, 6]
        console.log(arr)

    //reduce() 为数组中每一个元素依次执行回调函数，不包括数组中被删除或者从未被赋值的元素
    //arr.reduce(callback,[initialValue])
        /*
        1、previousvalue(上一次调用回调返回的值，或者是提供的初始值(initialvalue))
        2、currentValue(书注重当前处理的元素)
        3、index (当前元素在数组中的索引)
        4、array (调用reduce的数组)
        */
       let result=arr.reduce((a,b) =>{
        console.log("上一次处理后："+a);
        console.log("当前正在处理:"+b);
        return a + b;
    },100);
    console.log(result)
    </script>

promise异步编排

  <script>
    /*
    1、查出当前用户的信息
    2、按照当前用户的id查出它的课程
    3、按照当前课程id查出分数
    */
   //以前
//    $.ajax({
//     url: "mock/user.json",
//     success(data){
//         console.log("查询用户：",data);
//         $.ajax({
//             url:`mock/user_corse_${data.id}.json`,
//             success(data){
//                 console.log("查询到课程：",data);
//                 $.ajax({
//                     url:`mock/corse_score_${data.id}.json`,
//                     success(data){}
//                 })
//             }
//         })
//     }
//    })
   //1.Promise可以封装异步操作
//    let p =new Prowise((resolve,reject) =>{
//     //1.异步操作
//     $.ajax({
//         url:"mock/user.json",
//         success:function(data){
//             console.log("查新用户成功：",data)
//             resolve(data);
//         },
//         error:function(err){
//             reject(err);
//         }
//     });
//    });
//    p.then((obj) => {
//     return new Promise((resolve,reject)={
//      $.ajax({
//         url:`mock/user_corse_${obj.id}.json`,
//         success:function(data){
//             console.log("查询用户课程成功：",data)
//         },
//         error:function(err){
//             reject(err)
//         }
//     }), 
//     })
//    }).then((data)=>{
//     console.log("上一步的结果",data)
//    })
    function get(url,data){
        return new Promise((resolve,reject)=>{
            $.ajax({
                url:url,
                data:data,
                success:function(data){
                    resolve(data);
                },
                error:function(err){
                    reject(err)
                }
            })
        });
    }
    get("mock/user.json")
        .then((data)=>{
            console.log("用户查询成功",data)
            return get(`mock/usercorse_${data.id}.json`);
        })
        .then((data)=>{
            console.log("课程查询成功",data)
            return get(`mock/corse_score_${data.id}.json`);
        })
        .then((data)=>{
            console.log("课程成绩查询成功：",data)
        })
        .catch((err)=>{
            console.log("出现异常",err)
        })
  </script>

模块化

作用：类似于Spring中pom.xml文件导入依赖jar包并使用
{
console.log(“课程查询成功”,data)
return get(mock/corse_score_${data.id}.json);
})
.then((data)=>{
console.log(“课程成绩查询成功：”,data)
})
.catch((err)=>{
console.log(“出现异常”,err)
})


## 模块化

作用：类似于Spring中pom.xml文件导入依赖jar包并使用