1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>ES6语法练习</title>
  6. </head>
  7. <style>
  8.     #box{
  9.         height: 200px;
  10.         width: 200px;
  11.         background-color: #90D7EC;
  12.     }
  13. </style>
  14. <body>
  15. <div id="box"></div>
  16. <script>
  17.     //常规函数
  18.     function test() {
  19.         return '1111'
  20.     }
  21.     // function 换成 => 放在参数和函数体中间
  22.     // 1. 如果没有参数， 或有多个参数就需要使用 ()来定义参数列表
  23.     // 2. 如果有一个参数，可以不用()
  24.     // 3. 如果函数体中只有一条语句， 可以不用{}， 就不用使用return 会自动加上
  26.     let test1 = () => '1111'
  27.     console.log(test1())
  29.     // 箭头函数在返回对象时， 必须在对象外面加上()
  30.     const fun = id =>({id:id, name:'zhangsn'});
  31.     console.log(fun(10).name);
  33.     // 箭头函数没有自己的this，它的this是继承而来，默认指向在定义它时所处的对象(宿主对象)。
  34.     const box = document.getElementById('box');
  35.     box.onclick = function() {
  36.         setTimeout(()=>{
  37.             console.log(this);  //this指向#box这个div,不使用箭头函数就指向windows
  38.             this.style.backgroundColor = 'red'
  39.         }, 3000);
  40.     }
  42.     //filter       过滤器
  43.     //map       映射
  44.     //reduce   汇总
  46.     //筛选并计算大于等于10的数并打5折，然后求和
  47.     let goods = [30, 80, 50, 5, 3, 1, 60, 9];
  49.     let sum = goods.filter(n => n >= 10).map(n => n*0.5).reduce((s, n)=>s+n);
  51.     console.log(sum);
  53.     //startsWith    判断以什么字符串开头
  54.     //endsWith      判断以什么字符串结尾
  55.     let url = "https://www.lmonkey.com";
  57.     if(url.startsWith("https")) {
  58.         console.log(url);
  59.     }else{
  60.         console.log("不是以https开头的");
  61.     }
  62.     if(url.endsWith('cn')) {
  63.         console.log(url);
  64.     }else{
  65.         console.log("不是以.cn结尾的URL");
  66.     }
  68.     // 模板字符串（template string）是增强版的字符串，用反引号（`）标识。
  69.     // 它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
  70.     let name = '好好学习'
  71.     let names = `<h1 style="color:yellow">${name}</h1>`
  72.     box.innerHTML = names;
  74.     //解构赋值
  75.         // 左右两边结构必须一样
  76.         // 右边必须有值
  77.         // 声明和赋值不能分开
  78.     let [x, y] = [1, 2, 3];  //数组
  79.     console.log(x);
  80.     console.log(y);
  81.     let {age,myName} = {myName:'zhangsan', age:10, sex:'男'};  //对象
  82.     console.log(myName);
  83.     console.log(age);
  84.     //扩展运算符
  85.         //    ...三点运算符
  86.         //    展开数组
  87.         //    默认参数
  88.     let arr1 = [1,2,3];
  89.     let arr2 = [4,5,6]
  90.     let arr = [...arr1,7,8,9, ...arr2];
  91.     console.log(arr);
  93. </script>
  95. </body>
  96. </html>