前端小技巧总结（二）

1.数组的插入与删除

1. 向数组插入一个确定值：

    let arr = [];
    arr.push('张小双');
   

2. 从数组删除一个值：

   • 删除最后一个值：

       let arr = ['张','小','双'];
       arr.pop();
     
       =>arr:['张','小']
     

   • 删除一个确定值：

       let arr = ['张','小','双'];
       let i = arr.indexOf('小');
       arr.splice(i, 1);
     
       =>arr:['张','双']
     

2.tootips提示框

通过span的name属性可以实现：

<span title='tooltips提示'>鼠标悬浮显示提示</span>

3.css控制字数长度超过指定宽度时用……显示

        50px;
   white-space:nowrap; 
   text-overflow:ellipsis; 
   overflow: hidden;

4. ajax异步

• 处理 ajax 中的异步，可以通过在 ajax 中调用成功后再通过回调函数调用获得的数据。

    function func = (callback) => {
    	$.ajax({
                url: '',
                type: 'GET',
                dataType: 'json',
                success: (result) => {
    					//...
                        callback(result);
                    }
                },
                error: (e) => {
                    //...
                },
            });
        };
    };
    
    function callback(args){
    	//...
    }
  

• 为了防止在ajax数据被请求完成前就再次被请求，可以通过设置全局变量flag，当成功时，在函数中设置flag为true，当调用ajax时设置为false。再者，可以通过setTimeout函数模拟。

5.this作用域问题

• ES5解决方法：

    function () {
      var that = this;
      return function () {
        console.log(that);
      };
    }
  

• 第二种好的方法

    function () {
      return function () {
        console.log(this);
      }.bind(this);
    }
  

• ES6解决方法：箭头函数。

    funcName: (args) => {
    					//...
                        //this...
                    }
                };
  

6.布局float

+　float和relative的组合，可以在一个div中实现两个div一个在左，一个在右，并且不会留下relative下的div曾经存在位置的空位。比如百度地图查询结果的设计样式。

7.处理object数据

1. 定义对象：

    let data = {'key':1,'baidu':2,'google':3};
   

2. 对于object取属性名的操作

    let arr = Object.keys(data);//array
   

3. 遍历获得属性名及属性内容：

    let newDate = [];
    for (let i = 0; i < arr.length;i++) {
    	let t = {};
    	t[arr[i]] = data[arr[i]];
    	newDate.push(t);
    }
   

8.Webstorm中使用 换行LF ，可以避免windows、ios、Linux系统出现不兼容情况

• Webstorm中使用 换行LF ，可以避免windows、ios、Linux系统出现不兼容情况
• （Windows下用webstorm调整设置使得换行符变为Unix下的）
• File->Settings（或者快捷键Ctrl+Alt+S）
• 找到 Editor->Code Style
• 在 Line separator(for new lines) 处，选择 Unix and OS X( )
• 这样，在每次新建文件时，就会使用LF，而不是CRLF（可在右下角状态栏查看当前的 Line separator 状态）

9.分页

• 展示数据时，有分页、不分页的选择。当数据量较小时，采用不分页，当要显示数据量足够大的时候，我们往往采用分页显示的处理办法。分页有真分页和假分页。

  1. 不分页

  2. 真分页：确定要显示的数量和内容，然后每次都去数据库取出该少量数据，优点是数据量小，缺点是访问数据库频繁。在大型网站中往往采用真分页，比如百度的图片获取。

  3. 假分页：从数据库中取出所有的数据，然后分页在界面上显示。访问一次数据库，但由于选择的数据量比较大，所以第一次花费时间比较长，但之后每一页的显示都是直接、快速的，避免对数据库的多次访问。

10.开发小工具

1. 谷歌

   • 设置编码工具：charset
   • http请求数据工具：postman
   • json转换工具：jsonview
   • React调试工具：React Developer Tools

2. 火狐

   • MeasurrIt

3. json转换工具：jsonviewer

11.模糊匹配字符串

• let content = 'this is a content.';

• let small = 'content';

• content.includes(small.trim())

• content.indexOf(small) >= 0

12.setTimeout函数

• 语法：

    setTimeout(callback,time);
    setTimeout(string,time);
  

• 举例字符串

    setTimeout("alert('这是一个函数')",1000);
  

• 举例函数

  1. 无参数

      // 第一种方法
      setTimeout(funtion(){
      	//...
      },1000)	;
     
      //第二种方法
      setTimeout(func,1000);
      function func() {
      	//...
      }
     

  2. 有参数

      func = (value) => {
      	//...
      }
     
      setTimeout(() =>{
      	func(value)
      } ,1000);
     

13.判断一个变量是否存在

• 假设该变量 obj 不存在，判断该变量是否存在

    typeof obj === 'undefined'