zoukankan      html  css  js  c++  java
  • for master

    冒泡排序
    Bubble sort

    function bubleSort(){
        var array=[1,8,9,3,2,5,4];
        console.log('冒泡排序前',array);
        for(var i=1;i<array.length-1;i++){
            for(var j=1;j<array.length-1;j++){
                if(array[j]>array[j+1]){
                    //针对整型,效率高
                    // array[j]^=array[j+1];
                    // array[j+1]=array[j];
                    // array[j]=array[j+1];
                    var temp=array[j];
                    array[j]=array[j+1];
                    array[j+1]=temp;
                }
            }
        }
        console.log('冒泡排序后',array);
    }
    bubleSort();
    

    去重
    unique

    function unique(array){
        var temp=[];
        for(var i=0;i<array.length;i++){
            if(temp.indexOf(array[i])==-1){
                temp.push(array[i]);
            }
        }
        console.log('去重后的数组',temp);
    }
    var array=[1,2,1,2,1,2];
    unique(array);
    
    var array=[1,2,1,2,1,2];
    array=Array.from(new Set(array));
    console.log(array);
    
    //斐波那契数列
    function Fibonacci(n){
      if(n<=1){return 1;}
      return Fibonacci(n-1)+Fibonacci(n-2);
    }
    
    //水平竖直居中
     <title>父元素给定宽高的居中</title>
        <style>
        .box-all{
            display: flex;
             200px;
            height: 200px;
            justify-content:center;
            align-items: center;
            border:1px solid red;
        }
        .box{
            50px;
            height: 50px;
            border:1px solid blue;
        }
        </style>
    </head>
    <body>
        <div class="box-all">
            <div class="box"></div>
        </div>
    </body>
    //父元素未给定宽高的居中
     <title>父元素未给定宽高的居中</title>
        <style>
        .box{
             200px;
            height: 200px;
            border: 1px solid red;
            background-color: red;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            position:absolute;
        }
        </style>
    </head>
    <body>
       
            <div class="box"></div>
    </body>
    
        position:absolute;//相对定位,相对于body或父标签定位
        position:fixed;//固定定位,和absolute类似,相对于浏览器窗口定位
        position:relative;//相对定位。定义网页布局标签按照left,right,bottom,top四种方式定位,但不发声重叠,即忽略z-index的影响。
        position:static;//默认值,按照原来方式定位
        float:none;//默认值,网页布局以流动方式显示,不浮动
        float:left;//定义网页布局标签以左浮动的方式脱离流动布局,使其后面的的标签环绕在其右侧
        float:right;//定义网页布局标签以右侧浮动的方式脱离流动布局,使其后面的标签环绕在其左侧
        
        React:组件的生命周期
        在组件的整个生命周期中,随着组件的props或者state发生改变,其DOM表现也会相应的变化,一个组件就是一个状态机
        一个组件的生命周期分为三个部分,实例化,存在期和销毁期
        1.实例化:组件在客户端被实例化,第一次被调用,1.getDefaultProps 2.getInitialState3.componentWillMount4.render5.componentDidMount[不会在服务端渲染过程中调用]
        2.存在期:当组件已经渲染好用户可以与它进行交互 依次会被调用:1.componentWillReceiveProps,2. shouldComponentUpdate 3.componentWillUpdate4.render5. componentDidUpdate
        3.销毁期:componentWillUnmount
        相关详细内容链接:https://segmentfault.com/a/1190000004168886?utm_source=tag-newest
        axios和fetch的区别
        ```js
        axios({
        method:"post",
        url:"/user/1234",
        data:{
            firstName:'aa',
            lastName:'bb'
        }
    })
    .then(function(response){
        console.log(response);
    })
    .catch(function(error){
        console.log(error);
    })
    

    axios是对XMLHttpRequest的封装,从Node.js中发出http请求
    支持promiseAPI,拦截请求和响应,转换请求和响应数据,取消请求
    自动转换JSON数据,客户端防止CSRF/XSRF

    fetch
    try{
        let response=await fetch(url);
        let data=response.json();
        console.log(data)
    }catch(e){
        console.log('oppos,error')
    }
    

    符合关注分离,没有将输入输出和事件用来跟踪的状态混杂在一个对象里
    更加底层,提供的API丰富
    脱离了XHR,是ES规范里新的实现方式
    1)fetch只对网络请求报错,对400,500,都当作成功的请求,需要封装去处理
    2)fetch默认不会带cookie,需要添加配置项
    3)fetch不支持abort不支持超时控制,使用settimeout及promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了浪费
    4)fetch没有办法原生检测请求的进度,而XHR可以

    React之context
    官方所提到Context可以用来进行跨组件的数据通信。事实上,很多优秀的React组件都通过Context来完成自己的功能,比如react-redux的
    就是通过Context提供一个全局态的store,拖拽组件react-dnd,通过Context在组件中分发DOM的Drag和Drop事件,路由组件react-router通过Context
    管理路由状态等等

    未完,待续,不定时添加...
  • 相关阅读:
    构建乘积数组
    数组中重复的数字
    把字符串转换成整数
    不用加减乘除做加法
    求1+2+3+...+n
    孩子们的游戏(圆圈中最后剩下的数)
    翻转单词顺序列
    扑克牌顺子
    左旋转字符串
    ES6必知必会 —— Module
  • 原文地址:https://www.cnblogs.com/smart-girl/p/10362931.html
Copyright © 2011-2022 走看看