前端日常扫盲

一、js标签语句

直接上代码

for(let i = 0; i < 10; i++){
    console.log("顶层循环");
    for(let j = 0; j < 10; j++){
        console.log("内层循环",i,j);
        if(i * j > 30){
            console.log("退出顶层循环");
            break;
        }
    }
}

如上面的代码，双层循环，满足i * j > 30的时候，需要直接退出循环，但是这样添加break只能退出内层循环，一般的做法都是如下，添加一个flag标记

for (let i = 0; i < 10; i++) {
  console.log("顶层循环");
  let flag = false;
  for (let j = 0; j < 10; j++) {
    console.log("内层循环", i, j);
    if (i * j > 30) {
      console.log("退出顶层循环");
      flag = true;
      break;
    }
  }
  if (flag) {
    break;
  }
}

这种方式确实也能实现功能，但是不优雅，推荐使用下面这种写法

outer:for (let i = 0; i < 10; i++) {
  console.log("顶层循环");
  for (let j = 0; j < 10; j++) {
    console.log("内层循环", i, j);
    if (i * j > 30) {
      console.log("退出顶层循环");
      break outer;  //给顶层for循环打一个标记,随便命名，在break的时候使用就行了
    }
  }
}

标签语句通常与break或continue语句一起使用，以控制代码的执行流程

二、++运算符

let a = 1;
const b = a + ++a * a++;
console.log(a,b);

++a和a++都是表达式，只要是表达式，就有返回结果；a++是先返回a，再自增，++a是先自增再返回a
所以上面的代码就成了

const b = 1 + 2 * 2;

三、包含块

一个子元素的宽高、margin、padding、left、top属性都是根据它的包含块来决定的，并不是父元素
，一般来说常规元素和浮动元素，它的包含块就是父元素的content-box，绝对定位的包含块就是第一个设置定位属性的祖先元素的padding-box，固定定位的包含块默认是整个视口，但是如果它的祖先元素有一个设置了transform,那么它的包含块就是这个祖先元素的padding-box

四、对象属性的排序

const obj = {
  a: 0,
};
obj['1'] = 0;  //对象属性的顺序不是按照添加顺序来的，是会把数字从小到大排，其他类型按照添加顺序，所以这里变成了{"1":0,a:0}
obj[++obj.a] = obj.a++; //++obj.a，先自增再参加运算，所以这里等于obj[1] = 1,因为对象的属性只能是字符串和symbol，所以这里变成了{"1":1,a:2}
const values = Object.values(obj); // [1,2]
obj[values[1]] = obj.a; //obj[2] = 2, {"1":1,"2":2,a:2}
console.log(obj);