【React工作记录一百零九】前端小知识点扫盲笔记记录10

	
		
		
		
		
	
	
		
            //判断是不是对称数
			for (var i = 1; i <= 10000; i++) {
				//将数字转换
				var str_i = i.toString(),
					l = str_i.length

				var arr_i = str_i.split('') //将字符串转化为数组
				var rev_arr = [] //命名一个空数组
				for (var j = 0; j < 1; j++) {
					//遍历1-10000之间的所有数字
					rev_arr.unshift(arr_i[j]) //实现数组反转
				}
				var rev_str = rev_arr.join('') //将数组转换为数字
				if (str_i == rev_str) {
					document.write(str_i + '
') //如果是相等的 就是对称数 并返回
				}
			}
		
	

  
  
  
  


  
    function test(person) {
  person.age = 26
  person = {
    name: 'yyy',
    age: 30
  }

  return person
}
const p1 = {
  name: 'yck',
  age: 25
}
const p2 = test(p1)
console.log(p1) // -> {  name: 'yck',age: 26}
console.log(p2) // -> {  name: 'yyy',age: 30}
  

	
		
		
		
		
	
	
        
            .main{
                float:right;
                width: 100%;
                margin-left:-200px;
                background-color: rgb(202, 158, 165);
            }
            .content{
                margin-left:200px;
                background-color: aquamarine;
            }
            .side{
                float:left;
                width: 200px;
                background-color: pink;
            }
        
        

            

                geyao
            
           
        
        

            fangfang
        
		
		
		
	

  
  
  
  



/* 利用浮动，左边元素宽度固定 ，设置向左浮动。
将右边元素的 margin-left 设为固定宽度 。注意，因为右边元素的 width 默认为 auto ，所以会自动撑满父元素 */
  .outer {
    height: 100px;
  }

  .left {
    float: left;
    width: 200px;
    height: 100%;
    background: lightcoral;
  }

  .right {
    margin-left: 200px;
    height: 100%;
    background: lightseagreen;
  }



  

    
左侧
    
右侧
  

  
  
  
  
  
    .outer {
      height: 100px;
    }

    .left {
      float: left;
      width: 200px;
      height: 100%;
      background: lightcoral;
    }

    .right {
      overflow: auto;
      height: 100%;
      background: lightseagreen;
    }
  



  

    
左侧
    
右侧
  
  
    //同样利用浮动，左边元素宽度固定 ，设置向左浮动。右侧元素设置 overflow: hidden; 这样右边就触发了 BFC ，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。
  

  
  
  
  


  .outer {
    display: flex;
    height: 100px;
  }
  .left {
    width: 200px;
    height: 100%;
    background: lightcoral;
  }
  .right {
    flex: 1;
    height: 100%;
    background: lightseagreen;
  }


  
  

    
左侧
    
右侧
  

  
  
  
  
  
    .outer {
      position: relative;
      height: 100px;
    }
    .left {
      width: 200px;
      height: 100%;
      background: lightcoral;
    }
    .right {
      position: absolute;
      left: 200px;
      top: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      background: lightseagreen;
    }
  


  

    
左侧
    
右侧
  
  

  
  
  
  


  
    var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
    function ArrayCommon(arr) {
      //判断是不是数组  不是数组就返回一个false
      if (!Array.isArray(arr)) {
        console.log('这不是一个数组哦')
        return
      }
      let res = [],
        obj = {}
        //如果对象的属性值不存在 就放进去 不然就赋值+1
    for (let i = 0; i < arr.length; i++) {
        if (!obj[arr[i]]) {
       
            res.push(arr[i])
            obj[arr[i]] = 1
            console.log( obj[arr[i]],"obj[arr[i]]")
        } else {
            obj[arr[i]]++
            console.log( obj[arr[i]],"obj[arr[j]]")
        }
    }
    return res
    }
    console.log(ArrayCommon(geyao, 'geyao'))
  

  
  
  
  


  
     var geyao=["1","2","3","4"]
    var geyaotest=["1","2","3","4"]
    var geyaofangfang=["1","2","3","4"]
    var fangfang=["1","2","3","4"]
    var fangfangTest=["1","2","3","4"]
  

    //arr.slice([begin[, end]]) slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝
    //从第一个位置开始截取到最后一个位置
    console.log( geyao.slice(1),"geyao") // [ "2", "3", "4" ]
    //从第一个位置截止到第二个位置
    console.log( geyaotest.slice(1,2),"geyaotest") // [ "2" ]
    //从第一个位置截取到最后一个位置
    console.log( geyaofangfang.slice(1,5),"geyaofangfang") // [ "2", "3", "4" ]
    //从最后一个位置开始截取
    console.log( fangfang.slice(-1),"fangfang") // [  "4" ]
    //从最后一个位置开始截取 截取当前倒数第二个
    console.log( fangfangTest.slice(-2,-1),"fangfangTest") // [ "3" ]
  

// BFC 即块级格式上下文， 根据盒模型可知， 每个元素都被定义为一个矩形盒子， 然而盒子的布局会受到尺寸， 定位， 盒子的子元素或兄弟元素， 视口的尺寸等因素决定， 所以这里有一个浏览器计算的过程， 计算的规则就是由一个叫做视觉格式化模型的东西所定义的， BFC 就是来自这个概念， 它是 CSS 视觉渲染的一部分， 用于决定块级盒的布局及浮动相互影响范围的一个区域。
    // BFC 具有一些特性：
    // 块级元素会在垂直方向一个接一个的排列， 和文档流的排列方式一致。
    // 在 BFC 中上下相邻的两个容器的 margin 会重叠， 创建新的 BFC 可以避免外边距重叠。
    // 计算 BFC 的高度时， 需要计算浮动元素的高度。
    // BFC 区域不会与浮动的容器发生重叠。
    // BFC 是独立的容器， 容器内部元素不会影响外部元素。
    // 每个元素的左 margin 值和容器的左 border 相接触。
    // 利用这些特性， 我们可以解决以下问题：
    // 利用 4 和 6， 我们可以实现三栏（ 或两栏） 自适应布局。
    // 利用 2， 我们可以避免 margin 重叠问题。
    // 利用 3， 我们可以避免高度塌陷。
    // 创建 BFC 的方式：
    // 绝对定位元素（ position 为 absolute 或 fixed）。
    // 行内块元素， 即 display 为 inline - block。
    // overflow 的值不为 visible。

  
  
  
  


  
    // 假设场景两个函数
    // function fangfang() {
    //   setTimeout(() => {
    //     console.log("我给你钱")
    //   },1000)
    // }
    // function geyao() {
    //   setTimeout(() => {
    //     console.log("我去买东西")
    //   },500)
    // }
    // fangfang();
    // geyao();
    //我必须拿到钱 才去买东西 然后买好了
    function fangfang(geyao) {
      setTimeout(() => {
        console.log("我给你钱")
        geyao(kangkang)
      },1000)
    }
    function geyao(kangkang) {
      setTimeout(() => {
        console.log("我去买东西")
        kangkang()
      },500)
    }
      function kangkang() {
      setTimeout(() => {
        console.log("我买好了")
      },500)
    }
    fangfang(geyao)