Community Learn Tools Library Leisure
search
English
Home > List of blog posts > ES6语法练习
Blogger Information
Blog 16
fans 0
comment 0
visits 9619
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
ES6语法练习
坨坨
Original
754 people have browsed it
  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>
Correcting teacher：autoloadautoload

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post