小菜学前端笔记-06-03

选取ul里的第2个li：

        ul li:nth-child(2){
 
            background-color: red;
 
        }

清除浮动的方法

• 父亲中的最后一个元素后添加div，样式：clear：both
• 元素样式：overflow：hiddden（不太建议使用，overflow:hidden会将超出的部分隐藏起来）
• 单伪元素

• 双伪元素

定位

• 绝对定位：看父元素，也就是看最近一级父元素是否设定了定位，如果没有就往上找，如果一直都没有，那么就会以浏览器的可视窗口作为参照进行偏移
• 相对定位：是以自己为参照物，偏移量是看自己原来的位置作为偏移参照的

em和rem

em：基于父元素字体大小为单位

rem：基于根元素的字体大小为单位

instanceof

判断A是否属于B对象实例

        function person(name, age) {
 
            this.name = name;
 
            this.age = age
 
        }
 
        var person1 = new person('11', '22');
 
        var person2 = 1111;
 
        console.log(person2 instanceof person);  //false
 
        console.log(person1 instanceof person);  //true
 

 arr.reduce(函数，初始值)

数组求和：（没有init）

        var arr = [1,2,3]
        console.log(arr.reduce((x,y)=>x+y));

function findAllOccurrences(arr, target) {
    return arr.reduce((arr3,value,index)=>{
        if (value === target){
            arr3.push(index);
        }
        return arr3
    },[]);
}

arr.reduce()函数_arr.reduce() 初始值-CSDN博客  这个讲的比较简洁

 具体介绍：js【详解】arr.reduce() 数组缩减-CSDN博客

基础用法：数组求和；数组求乘积

高级用法：计算元素出现的次数；数组去重；二位数组转一维数组；多维数组转一维数组；对象的属性求和..

 js箭头函数

1. 没有arguments对象
2. 不能用作构造函数
3. 箭头函数没有this，箭头函数的this是继承父执行上下文里面的this，call，apply不能改变箭头函数中this的指向
4. 箭头函数返回值只有一条语句时可以省略return和{}，例如：

let sum = (a, b) => {
	return a + b;
};
 
let sum1 = (a, b) => a + b;

js 箭头函数详解_js箭头函数-CSDN博客

//移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组         
function remove(arr, item) {
 
            var arr2 = arr.filter(function (value) {    //普通函数
            var arr2 = arr.filter(value=> {       //箭头函数
 
                return value != item
 
            })
 
            return arr2
         }

filter过滤器

上述问题用到，只用到了function

array.filter(function(currentValue,index,arr), thisValue)

 示例：

        function remove1(arr, item) {
            var arr2 = arr.filter(function (value) {
                return value != item  //判断结果，返回true就保留
            })
            return arr2
        }
        console.log(remove1([1, 2, 2, 3], 2)); //输出结果：[1,3]

filter()方法有两个参数，第一个是function()，第二个是thisValue。

• function()：必须。数组中的每个元素都会执行这个函数。return后面判断结果，取布尔值，返回值是true则该元素被保留，是false则丢弃该元素。入参如下：

  • currentValue：必须。当前元素的值；
  • index：可选。当前元素的索引值；
  • arr：可选。当前元素属于的数组对象；

• thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"；

 indexOf() 

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置，如果没有找到返回-1

• indexOf() 只返回字符串在规定的查找顺序中，首次出现的位置
• 工作中应用 => 如果要检索的字符串值没有出现，则该方法返回 -1
• indexOf() 方法对大小写敏感！

 js扩展运算符（...）

const arrValue = ['My', 'name', 'is', 'Jack'];
 
console.log(arrValue);   // ["My", "name", "is", "Jack"]
console.log(...arrValue); // My name is Jack

//使用扩展运算符复制数组
const arr1 = ['one', 'two'];
const arr2 = [...arr1, 'three', 'four', 'five'];
 
console.log(arr2); 
//  Output:
//  ["one", "two", "three", "four", "five"]

 详解见文章:JavaScript 扩展运算符_js扩展运算符为啥不改变原有变量-CSDN博客

数组map

可以返回数组中元素的平方啥的

const arr = [88,90,100,20,50]
const res = arr.map(item => item * item)

短路评估

value == target && arr2.push(index)

这种写法通常被称为短路评估

如果左边为true，则执行右边，相当于

if(el == target){

    newArr.push(index);

}

arr.forEach（）

function findAllOccurrences(arr, target) {
    var arr2 = [];
    arr.forEach((value,index)=>{
        value==target && arr2.push(index)
    })
    return arr2
}

伪元素：before，after

1、对于伪元素before/after来说，必须加content属性，不然不会出现效果；

2、伪元素为行内元素，所以必须设置display:block才可以对其设置宽高。

       div::after{
        content:"";
        height:20px;
        width:20px;
        background-color:rgb(255,0,0);
        display:block
        
       }