前端杂记 4（传参-对象属性-查找，常用时间操作，双栏等高）

1.传入参数，对象的属性名是一个参数，按照参数查找

这次虽然简单，但是之前想着利用变量访问对象属性的时候，还是纠结了些许，干脆为自己的健忘做个记录

目标：获取json数组中的指定属性＋指定值的对象

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。

同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。

var arr=[{id:1,val:10},{id:2,val:20}]

获取对象属性值的方式有以下两种：

对象.属性名称
对象[属性名称]

如果属性名称是一个变量，获取属性值方式只有后者：对象[属性名称]

接下来就是寻找环节，如何从数组中寻找指定属性指定值的对象？
forEach虽然是能够解决问体，但是ES6中有更加简单的方式

数组对象的find函数

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

1. find() 方法为数组中的每个元素都调用一次函数执行：
2. 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再.调用执行函数。
3. 如果没有符合条件的元素返回 undefined
4. find() 对于空数组，函数是不会执行的。
5. find() 并没有改变数组的原始值。

var arr=[{id:1,val:10},{id:2,val:20}]

//根据属性和对应的值查找
function findObjByPro(arr,property,value){
   return arr.find(obj=>obj[property]===value)
}

console.log(findObjByPro(arr,'id',2))//{id:2,val:20}

2.常用时间操作

仅作记录，怕遗忘

var myDate = new Date();

myDate.getYear();        //获取当前年份(2位)

myDate.getFullYear();    //获取完整的年份(4位,1970-????)
myDate.getMonth();       //获取当前月份(0-11,0代表1月)
myDate.getDate();        //获取当前日(1-31)

myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)

myDate.getHours();       //获取当前小时数(0-23)
myDate.getMinutes();     //获取当前分钟数(0-59)
myDate.getSeconds();     //获取当前秒数(0-59)

myDate.getMilliseconds();    //获取当前毫秒数(0-999)

myDate.toLocaleDateString();     //获取当前日期
var mytime=myDate.toLocaleTimeString();     //获取当前时间
myDate.toLocaleString( );        //获取日期与时间

        !(function clock(){
            var now = new Date();
            var Y = now.getFullYear();
            var m = getRealTime(now.getMonth()+1);
            var d = getRealTime(now.getDate());
            var H = getRealTime(now.getHours());
            var i = getRealTime(now.getMinutes());
            var s = getRealTime(now.getSeconds());
            var now_time = Y +'-'+ m +'-'+ d +' '+ H +':'+ i +':'+ s;
            document.getElementById('clock').innerHTML = now_time;

            setTimeout(clock,1000);
        })();
        function getRealTime(str){
            if(str < 10){
                return '0'+str;
            }
            return str;
        }

3.双栏等高布局

给出以下的html+css，如何设置？

<div class="container">
    <div class="left">
      <p>左边—————————</p>
    </div>
    <div class="right">
      <p>右边—————————</p>
      <p>右边—————————</p>
      <p>右边—————————</p>
      <p>右边—————————</p>
      <p>右边—————————</p>
      <p>右边—————————</p>
      <p>右边—————————</p>
    </div>
</div>

    .container{
  
        
  
        overflow:auto;/*触发BFC*/
        border:5px solid ;
        background:green;
    }
 
    .left {
        

        width: 200px;
        background: yellow;
    }
 
    .right {

      
        background: lightcoral;
    }

（1）table布局

利用的是table中每个table-cell等高的特性
表格的宽度等于所有单元格宽度之和

父：

display：table

子：

display：table-cell

（2）flex布局

直接给父元素设置display:flex即可

可以看到右边的背景露出来了，因为左边定宽，这时候可以利用右边的flex:1,进行宽度自适应来解决这个问题