前端小知识10点(2019.5.18)

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

内容简介:由此可见,

前端小知识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)

(完)


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

查看所有标签

猜你喜欢:

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

Transcending CSS

Transcending CSS

Andy Clarke、Molly E. Holzschlag / New Riders / November 15, 2006 / $49.99

As the Web evolves to incorporate new standards and the latest browsers offer new possibilities for creative design, the art of creating Web sites is also changing. Few Web designers are experienced p......一起来看看 《Transcending CSS》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具