前端小知识10点(2019.5.18)

栏目: JavaScript · 发布时间: 6年前

内容简介:由此可见,

前端小知识10点(2019.5.18)

1、当给数组的index赋负数或小数时,数组的长度有无变化?

let arr=[]
  arr[10]=11
  console.log(arr.length); //11

  arr[-1]=-1
  console.log(arr.length) //11
  
  arr[3.14]=3.14
  console.log(arr.length) //11
  //===================================
  let arr1=[]
  
  arr1[2.1]=2.1
  console.log(arr1[2.1],'arr144') //2.1
  console.log(arr1.length,'arr145') //0
  
  arr1[1]=1
  console.log(arr1.length,'arr147') //2
  //========================
  let arr2=[]
  arr2[-1]=-1
  console.log(arr2.length,'arr253') //0
  //========================
  let arr3=[]
  arr3[5]=5
  console.log(arr3.length,'arr258') //6

由此可见, arraylength 属性只计算非负整数下标!不计算负数、小数

2、antd-pro 项目热更新慢并且是在95%(emitting)时卡住怎么办?

前端小知识10点(2019.5.18)

本人实际上是 less 文件里多写了个逗号。。。。:sweat_smile:

前端小知识10点(2019.5.18)

3、less 子类名使用 active

span {
      position: relative;
      .leftIcon{
        border-radius: 17px;
      }
      &.active {
        background:rgba(94,112,231,1);
        .leftIcon{
          background:rgba(255,255,255,1);
        }
      }
    }

4、antd 的 Spin 组件不认识 undefined(Spin 组件的 spinning 属性只对 true/false 生效),如果是 undefined 状态会是一直读取的状态

<Spin spinning={undefined}>
</Spin>

前端小知识10点(2019.5.18)

5、flex 超出换行 flex-wrap: wrap

.noIcon {
  display: flex;
  //超出换行
  flex-wrap: wrap;
}

6、sort() 双重排序

(1)总分排序

(2)如果总分相等,我们再按照语文成绩排序

var jsonStudents = [
    {name:"Dawson", totalScore:"197", Chinese:"100",math:"97"},
    {name:"HanMeiMei", totalScore:"196",Chinese:"99", math:"97"},
    {name:"LiLei", totalScore:"185", Chinese:"88", math:"97"},
    {name:"XiaoMing", totalScore:"196", Chinese:"96",math:"100"},
    {name:"Jim", totalScore:"196", Chinese:"98",math:"98"},
    {name:"Joy", totalScore:"198", Chinese:"99",math:"99"}];
jsonStudents.sort(function(a,b){
    var value1 = a.totalScore,
        value2 = b.totalScore;
    if(value1 === value2){
        return b.Chinese - a.Chinese;
    }
    return value2 - value1;
});

7、正则表达式:js 去掉下划线,后首个字母变大写

let str='str_abc'
str=str.replace(/_(\w)/g, (all, letter) => letter.toUpperCase());
console.log(str) //'strAbc'

8、按下 control+enter 键,触发事件

<TextArea onKeyDown={(e)=>{
   if(e.ctrlKey&&event.keyCode===13)
      this.handleOk()
}}/>

onKeyDown 事件的 ctrlKey 是 control 键,keyCode=13 是 enter 回车键。

9、使用 <br/> 代替回车符 ,并且使用 dangerouslySetInnerHTML 使 react 的 DOM 元素可以读取字符串中的标签

dangerouslySetInnerHTML 相当于 innerHtml

前端小知识10点(2019.5.18)

let str=comment.split(/\r\n|\r|\n/g).join('<br/>')
<div dangerouslySetInnerHTML={{__html:str}} />

10、正则表达式:正整数

const reg = /^[0-9]*[1-9][0-9]*$/;

前端小知识10点(2019.5.18)

(完)


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

构建高性能Web站点

构建高性能Web站点

郭欣 / 电子工业出版社 / 2012-6 / 75.00元

《构建高性能Web站点(修订版)》是畅销修订版,围绕如何构建高性能Web站点,从多个方面、多个角度进行了全面的阐述,几乎涵盖了Web站点性能优化的所有内容,包括数据的网络传输、服务器并发处理能力、动态网页缓存、动态网页静态化、应用层数据缓存、分布式缓存、Web服务器缓存、反向代理缓存、脚本解释速度、页面组件分离、浏览器本地缓存、浏览器并发请求、文件的分发、数据库I/O优化、数据库访问、数据库分布式......一起来看看 《构建高性能Web站点》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

在线进制转换器
在线进制转换器

各进制数互转换器

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具