ES6新特性精讲-CSDN博客

本文链接：https://blog.csdn.net/qq_42672798/article/details/105707519

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
   </body>
   <script type="text/javascript">
   //一:const与let变量
       //使用let声明的变量可以重新赋值,但是不能在同一作用域内重新声明
   //使用const声明的变量必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值.
   //{}即为作用域
   //二：模板自变量
       //es5中,将字符串连接到一起的方法是+或者concat()方法
       const student = {
           name: 'Richard Kalehoff',
           guardian: 'Mr. Kalehoff'
       };
           const teacher = {
           name: 'Mrs. Wilson',
           room: 'N231'
           }
           let messag = student.name + ' please see ' + teacher.name + ' in ' + teacher.room + ' to pick up your report card.';
       //在es6中，增加了模板自变量来进行字符串连接，模板字面量本质上是包含嵌入式表达式的字符串字面量.
//模板字面量用倒引号 ( `` )（而不是单引号 ( '' ) 或双引号( "" )）表示，可以包含用 ${expression} 表示的占位符
let message = `${student.name} please see ${teacher.name} in ${teacher.room} to pick up your report card.`;
   //三:解构
       //可以使用解构从数组和对象提取值并赋值给独特的变量，[]表示被解构的数组, x,y,z表示要将数组中的值存储在其中的变量, 在解构数组是, 还可以忽略值, 例如const[x,,z]=point,忽略y坐标.
       const point = [10, 25, -34];
       const [x, y, z] = point;
       console.log(x, y, z);
   //四：对象字面量简写
       //使用和所分配的变量名称相同的名称初始化对象时如果属性名称和所分配的变量名称一样，那么就可以从对象属性中删掉这些重复的变量名称。
//       let type = 'quartz';
//       let color = 'rose';
//       let carat = 21.29;
//       const gemstone = {
//       type: type,
//       color: color,
//       carat: carat
//       };
//       console.log(gemstone);
       //可以简写为
       let type = 'quartz';
       let color = 'rose';
       let carat = 21.29;
       const gemstone = {type,color,carat};
       console.log(gemstone);
   //五：for...of循环
       //for...of 循环用于循环访问任何可迭代的数据类型。for...of 循环还具有其他优势，解决了 for 和 for...in 循环的不足之处。你可以随时停止或退出 for...of 循环。不用担心向对象中添加新的属性。for...of 循环将只循环访问对象中的值。
       Array.prototype.decimalfy = function() {
       for (i = 0; i < this.length; i++) {
       this[i] = this[i].toFixed(2);
       }
       };
       const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
           for (const digit of digits) {
           console.log(digit);
           }
   //六：展开运算符
   //（用三个连续的点 (...) 表示）是 ES6 中的新概念，使你能够将字面量对象展开为多个元素,展开运算符的一个用途是结合数组。
//如果你需要结合多个数组，在有展开运算符之前，必须使用 Array的 concat() 方法
const fruits = ["apples", "bananas", "pears"];
       const vegetables = ["corn", "potatoes", "carrots"];
       const produce = [...fruits,...vegetables];
       console.log(produce);
   //七：剩余参数(可变参数)
   //剩余参数也用三个连续的点 ( ... ) 表示，使你能够将不定数量的元素表示为数组.
   //用途1: 将变量赋数组值时:
   const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"];
       const [total, subtotal, tax, ...items] = order;
       console.log(total, subtotal, tax, items);
   //用途2: 可变参数函数(注：在es5中使用的是arguments)
   function sum(...nums) {
       let total = 0;
       for(const num of nums) {
       total += num;
       }
       return total;
       }
   </script>
</html>