前端笔记-箭头函数&多余文字显示&Emment语法

146 阅读1分钟

这是我参与2022首次更文挑战的第13天,活动详情查看:2022首次更文挑战

一、ES6新增特性--箭头函数

ES6中新增了创建函数的方式:“箭头函数”,在真实项目中是箭头函数和function这种普通函数混合使用。

优点

  1. 箭头函数简化了创建函数的代码
  2. 箭头函数的创建都是函数表达式方式(变量=函数)

语法

  1. 如果形参只有一个,小括号可以不加,语法模板如下图: 在这里插入图片描述

具体使用方法如下:

image.png

  1. 如果函数体中只有一句话,并且是return xxx的,可以省略大括号和return等,具体使用方法如下:

image.png

注意事项

1.ARFGUMENTS

箭头函数中没有ARFGUMENTS,但是可以基于剩余运算符获取实参集合,而ES6中是支持给形参设置默认值的

2.this

箭头函数中没有自己的this,他里面用到的this,都是自己所处上下文的this(在真实项目中,一旦涉及this问题,箭头函数慎用)

二、CSS让多余文字以...形式显示

   <p class="txt2">发掘数据的价值,便利人们的生活,让人们点点点点点点</p>

实现步骤

  1. 首先让文字一行显示,即不换行
  2. 然后设置元素宽度值,并设置让溢出元素的文字隐藏
  3. 最后让元素末尾以...显示

实现代码

image.png

具体实现效果如下图:

image.png

三、Emment语法

具体语法

  • 设置类名
  • 设置id名
  • 设置任意属性
  • 文本节点
  • 设置重复数量
  • 子元素
  • 同级元素 image.png

举个例子

  1. div.container#main[title=123]

image.png 2. div.main>div.header+(div.container>ul>li{第$个}*10)+div.footer

image.png