js 写法解析记录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        console.log("-----------------");
        // 模板字面量
        let num = 3;
        let price =10;
        str = `商品数量: ${num}  商品价格： ${price}`;
        console.log(str);
        // 标签函数
        function show(zimianliang,val,val1) {
            console.log(zimianliang);
            str =`${zimianliang}[0] ${val}[0] ${zimianliang}[1] ${val1}[1];`
            
        }
        console.log(str);
        console.log("-----------------");
        const user = {
            name : "admin",
            passowrd :"qweqwe",
        }
        let name ="admin";
        let passowrd ="qweqwe";
        ({name,password} =user) ;
        console.log(name ,passowrd);//对等属性
        ({name,passowrd,email} =user);
        console.log(name,passowrd,email); //不对等结构
        ({name,passowrd,email="admim@qq.com"} = user)
        console.log(name,email,passowrd);
        console.log("-----------------");
        let age = 10;
        // 单分支
        if(age>5){
            console.log("青年");
        }else{
            console.log("儿童");
        }
        // 多分枝判断
        if (age>=10) {
            console.log("青年");
        }else if (age<=10 && age>=8 ) {
            console.log("儿童");
        }else {
            console.log("妖怪");
        }
        switch (true){
            case age>=10:
            console.log("青年");
            break;
            case age<=10 && age<=8:
            console.log("儿童");
        }
        let agee =( age>=10) ? "青年" :"儿童"; //三元运算符
        console.log(agee);
        console.log("-----------------");
            // wihle循环 入口判断
        let arr = ["a","b","c","d","e"];
        console.log(arr);
        let i =0;
        while (i<arr.length) {
            console.log(arr[i]);
            i++;
        }
        // do wile循环 出口判断 
        i =0;
        do {
            
        } while (i>arr.length){
            console.log("do wihle",arr[i]);
            i++;
        }
        // for 循环
        for ( i=0;i<arr.length;i++){
            console.log(arr[i]);
        }
        // for in 遍历对象允许的属性
        // 创建对象
        const niuge= {
            ok:"200",
            no:"500",
        };
        for ( let key in niuge) {
            console.log(key,"=>",niuge[key]);
        }
        // foreach 遍历对象 
        arr.forEach(function (itme,key,arr) {
           console.log( key, "=>",key);
        });
        console.log("-----for- of  不支持遍历自定义对象----------------");  
        for (const v of arr) {
            console.log(v);
        };  
        // 函数知识
        // 声明
        function show() {
            console.log(name);
        }
        // 调用
        show(niuge);
        console.log("--------------");
        // 函数的参数
        function show1(name) {
            console.log(name);
           
        }
        show1("牛哥哥");//参数
        // 函数默认参数
        function show2(status = 1) {
            let message;
            message = status === 1? "正常" : "错误";
            console.log(message); 
        }
        show2(0);
        show2(2);
        console.log("--------------");
    //    ...rest:剩余参数打包一个数组
        function sum(...arr) {
           
            console.log(arr);
            // 累加器初始化
            let res = 0;
        for (let v of arr) {
          res += v;
        }
        console.log("rest = ", res);
        }
       
      sum(1, 2, 3, 4, 5, 6, 7);
    // ...spreed,展开参数
     function data() {
         console.log(arr);
        
        for (let i=0; i<arr.length; i++){

         console.log("spreed = ", arr[i]);
     }
    }
     arr = [1,2,3,4,5,6];
     data(...arr);
    // 函数的返回值 只能返回一个值。
    function show3() {
        return "hello php.cn";
    }
    console.log(show3());
    // 返回多个值  
    function show4(){
        return {
            status:1,
            message:"成功",
        };
    }
    console.log(show4().message);
    // 返回数组对象
    function show5(){
        return [
        { id: 1, name: "admin" },
        { id: 2, name: "peter" },
        ];
    }
    console.log(show5(),Array.isArray(show5() ? "数组":"对象"));
    console.log(show5()[1].name);
    // 函数表达式 当成匿名函数，用在回调方法
    let show6 =function () {};
        console.log(show6);
        // 箭头函数 es6才有，简化函数表达式
    let show7 =function (name) {
        console.log("Hello %c%s", "color:red", name);
    };
     show7 = (name)=> {
         console.log(name);
     };
     show7 = () => {
         let name = "niuge";
         console.log(name);
     };
     show7 = (name) => (console.log(name));
     show7("牛哥哥");

     
    </script>
</body>
</html>
js 写法 解析记录

相关文章
