ES6语法
发布日期:2022-03-03 01:57:19 浏览次数:1 分类:技术文章

本文共 2310 字,大约阅读时间需要 7 分钟。

目录


1.变量

var let const

var类型语法要求不严格;

1)对象、数字、字符、数组……都可以赋给var

例如:

 

2)var中允许出现同名变量 ,后面的会覆盖前面的

let类型要求严格

 

 const常量(定义的值不能被改变)

 解构赋值

 1)对象的解构赋值

语法:let {属性名1,属性名2,...} = {属性名1:属性值1,属性名2:属性值2...}

要求:

    要求解构后的属性名和对象中的属性名保持一致

    如果找不到对应的属性返回undefined

例如:let {name,age,height} = {name:"张三",age:20,height:180,weight:120,address:"西安"};

 

2)数组的解构赋值

 语法:   let [变量名1,变量名2...] = [值1,值2...]

 说明: 默认情况下会从头到尾依次赋值即变量1对应值1,变量2对应值2……

 let [a,b,c] = [23,5,7]; a=23 , b=5 , c=7;

 如果想给指定变量赋值,用逗号占位

  let [a,,b] = [23,5,7]; a=23 ,  b=7; 此时5没有对应的;

解构赋值可以做参数

例如:function show({name,color}){

            alert("name=" + name);

            alert("color=" + color);

}

let dog = {name:"旺财",age:5,color:"黑色"};

show(dog);    

2.模板语法   

模板语法简化输出使用反单引号,不用拼接字符串

``:作为空分隔符,里面放字符串 ${}:用来渲染变量

<script>

var person = {name:"张三",age:20,gender:"男"};

  // alert("姓名是:" + person.name + ",年龄是:" + person.age + ",性别是:" + person.gender);非模板语法

 alert(`姓名是:${person.name},年龄是${person.age},性别是${person.gender}`);//模板语法

                  </script>

3.箭头函数 

<script>

//正常函数:    

var add = function(a, b){

   alert(a + b);

  }

     //箭头函数:                    

 // var add = (a, b) => {alert(a + b);};

// add(2, 5);

1)当只有一条js代码时大括号可以省略

// var sub = (a, b) => alert(a - b);

// sub(2, 5);

2)当只有一个参数时,小括号可以省略, 如果没有参数时小括号不能省略

 // var p = a => alert(a * a);

 // p(9);

3) 如果没有大括号,会自动返回运算的结果,如果添加return会报错

      // let mul = (a, b) => a * b;此时  let mul等价于 =(a,b)=>{return (a*b)};

     // let result = mul(7, 8);

    // alert(`result=${result}`);                    

 4)箭头函数不能做构造函数,因为箭头函数中的this默认指向window对象

                          //window对象也称为上下文对象(Person所在的环境)

let Person = (name, age) => {this.name = name;this.age = age;}

  var person = new Person("张三",20);  alert(person.name); alert(person.age);

                  </script>

4.对象:

<script>

                          let name = "张三";

                          let age = 20;

                          let gender = "女"

                          //当属性名和属性值对应的变量名相同时可以省略变量名

                          let person = {name,age,gender,eat(){alert("吃")}};//简写形式

                     let person = {name:"name",age:"age",gender:"gender",eat(){alert("吃")}};//正常写法   

                          console.log(person);

                          person.eat();

                  </script>

         </head>

         <body>

                  <!-- html中,属性名和属性值一样时,属性值可以省略 -->

                  <input type="checkbox" name="hobby" value="篮球" checked />篮球

                  <input type="checkbox" name="hobby" value="足球" disabled />足球

                  <input type="checkbox" name="hobby" value="羽毛球" />羽毛球

         </body>

    

可变参数

<script>

 可变参数语法:...变量名

 可变参数实质:   数组

 可变参数传递实参时可以离散的传值

函数中如果有多个参数时,可变参数必须放到所有参数的后面

一个函数中只能有一个可变参数

                          var add = (name,...array) => {

                                   let sum = 0;

                                   for(let i of array) {

                                            sum = sum + i;

                                   }

                                   alert(sum);

                                   alert(name);

                          };

                          add("张三",1,2,3);

                  </script>

 

 

转载地址:https://blog.csdn.net/qq_52807480/article/details/119717042 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:java中的常用注解
下一篇:MyBatis -plus

发表评论

最新留言

感谢大佬
[***.8.128.20]2024年04月14日 23时44分32秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章