filter:filter方法创建一个新数组,其包含通过所提供函数实现的测试的所有元素。这个
方法不会改变原数组,而是返回一个新的数组。
map:map方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后的
返回值。这个方法同样不修改原数组,而是构建一个新的数组,每个元素都是原始元素经过
函数处理后的结果。
reduce 方法遍历数组、将数组元素累计
①reduce接收两个参数,一个回调函数,一个初始值
②回调函数传递了两个参数,一个是累加值,另一个是当前值
reduce的写法:
arrays.reduce((a,c,idx)=>{},[])
箭头函数 如果使用 {}
包裹函数体,则必须 显式地用 return
返回值。
- 箭头函数的块形式(使用
{}
)需要显式地写return
。 - 箭头函数的简洁形式(无
{}
)会自动返回表达式的值。
.join()
是数组的一个方法,用于将数组中的所有元素拼接成一个字符串。
参数是一个分隔符,用于指定每个元素之间的连接方式。
模板字符串:用反引号(``
)包裹字符串,并通过 ${ }
插入动态表达式。
.length属性
:获取筛选结果的长度,也就是当前商品名称在数组中出现的次数。
递归函数:
递归函数的核心思想是:
- 递归条件(Recursive Case):函数通过直接或间接调用自身来解决问题的子部分。
- 终止条件(Base Case):递归必须有一个终止条件,否则会导致无限循环。
函数遍历:
forEach遍历
函数循环:
多条件分支语句:
①if...else if... else
三元运算符:
它可以在一行代码中完成类似于 if...else
的操作
条件?条件为真的结果:条件为假的结果
let value = 15;
let result =value < 10 ? "小" :value < 20 ? "中" :"大";console.log(result); // 输出: 中
伪类选择器:
用于根据元素的状态、位置或结构来应用样式。通过合理使用伪类选择器,可以轻松实现动态效果和交互式设计。以下是一些常见伪类的分类总结:
类别 | 示例伪类 | 描述 |
---|---|---|
链接相关 | :link , :visited , :hover , :active | 定义链接的不同状态 |
动态状态 | :focus , :checked , :disabled , :enabled | 定义交互状态 |
结构相关 | :first-child , :last-child , :nth-child , :only-child | 基于元素的位置或结构选择 |
表单相关 | :required , :valid , :invalid | 定义表单元素的状态 |
其他 | :not() , :empty , :target | 提供额外的选择能力 |
链接伪类:
:hover
- 选择鼠标悬停在元素上的状态。
:active
- 选择正在被激活(如点击)的元素。
动态伪类:
:focus
- 选择获得焦点的元素(如输入框被选中时)
:checked
- 选择被选中的单选按钮(
<input type="radio">
)或复选框(<input type="checkbox">
)。
结构伪类:
:nth-child(n)
- 选择某个父元素的第
n
个子元素(支持公式)。