js开发过程遇到的基础问题

Js项目遇到问题基础总结

 

前端打包工具：webpack4.+ , def云构建

前端开发框架：biggish,dev 

 

 

Console.log可以直接打对象，不用字符串拼接

  console.log(prevProps, this.props, prevData, this.data)

          console.log('ttttt'+JSON.stringify(prevData));

 

 

 

处理字符串: (注意push 和 unshift不要用任何 变量接收 因为返回的是 数量)
1  截取  aaa.substr(startindex, enindex) 前闭后开

2  替换  aaa bbb.replace(/\s+/g,’new’);

处理集合列表：

1  截取

Lista.slice(startindex, enindex);

2  插入删除替换

Lista.splice(startIndex,deleteCount,newvalue);

3  删除和加入最前面 操作第一条

lista.unshift(new);---插入   ， 往数组添加第一个元素并返回新的数组长度。

lista.shift(new); —删除         删除数组第一个元素，并返回删除的元素值。

4  操作最后一条

lista.push(new) —加入      ，往数组最后加一个元素并返回数组新的长度。

Lista.pop(new)  —删除        把数组最后一个元素删除并返回 删除的元素值。

5  从后面加入多条

lista.contact(newList);

6  循环

1   可以中途跳出 every() return false跳出

2   map() 需要返回item和接收

3   foreach() 不需要接收和返回

4   some() 只要有一个满足条件return true就返回

5   reduce(curvalue,nextvalue) 数组元素前后相加

6   

 

 

对象合并

 let allData = { ...result, ...assistData };

 或

 Assign(a,b)

 

 

 

Vue和react修改字段会引起页面变化：

setData或者setState  ,注意集合[] 和 对象{} 的赋值  要用展开… 符号

This.setData({

对象a: {…要用大括号},

集合b: […数据]

});

 

 

 

判断对象

  if (typeof (source) == 'object') {

 

 

 

 

 

 

正则：

{至少,最多} ， [1,6] 1到6之间前闭后开 ，[?|&] 或者

 

 

//整个导出

export default {

  //引用属性

  data: {}

  method:{}  或者 不套

}

导入1:

Import all from ‘路径’；

…all.data  和  …all.method

或者

all. 调用

 

导入2:

Import {路径js中定义的方法或变量}  from ‘路径’；

下面直接使用{} 中的引入

 

导入3：

Const  all=require(‘路径’); 或者 

Const  {路径js中定义的方法或变量}=require(‘路径’); 

 

 

//或类的写法

class model {

  constructor(props) {

//构造函数方法bind当前this对象

    this.setCustom = this.setCustom.bind(this);

    this.setResearch = this.setResearch.bind(this);

}

 

   方法或者字段  ……

}

export default new model()

 

 

//或 只导出某个方法

export default test(){

……

}

export default test1(){

……

}

export default test2(){

……

}

 

 

 

 

 

布局。。。

.category-indicator {

 

  border-radius: 1rpx;

  height: 3rpx;

  /* 父布局没有设置宽度随着内容的宽度，字内容的宽度可设置100%就和父布局一样 */

  width: 100%;

}

 

 

样式继承 

.list-left {  //外层布局样式

  float: left;

  width: 230rpx;

  height: 130rpx;

  position: relative;

  overflow: hidden;

  border-radius: 10rpx;

}

 

.list-left image {//内层样式

  width: 230rpx;

  height: 130rpx;

  display: block;

  border-radius: 6rpx;

}

 

.list-left .list-icon {   //内层样式

 

 

 

 

{}对象和[]都是true

对象获取方式  a.b 或者 a[b]  或者 结构形式  let { datas = [] } = data;

遍历对象object.keys / values

export function createLink (page, params = {}) {

  const args = []

  Object.keys(params).forEach((key) => {

    args.push(`${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)

  })

或者

 if (paramsObj) {

      let params = ''

      for (var keyName in paramsObj) {

        params = params + this.hookIdByPageType(pageType, keyName) + '=' + paramsObj[keyName] + '&'

      }

 

      url = url + '?' + params

    

    }

 

 

 

拼接变量和字符串：`${变量}888uuuu`

(`${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`

 

 

 

 

总结：—————————————

 

forEach ———循环有问题，可能无法遍历完毕。  尤其集合里面都是大量的{}信息时

 , 最终还是和  循环里面的处理逻辑有关系。。。。通过注释排查。

 

 

 

4  博客园遍历对象

noneDataMap[type] = true;

 

    let isAllNone = true;

    for (let key in noneDataMap) {

      // 只要有一个为false,也就是有数据 就为false

      if (!noneDataMap[key]) isAllNone = false;

    }

 

const noneDataMap = {

  banner: false,

  links: false,

  learn: false,

  custom: false, //多个自定义模块是一个整体

  news: false, //多个最新模块是一个整体

  vip: false, // 'vip': false noneDataMap.vip或noneDataMap['vip']

  yearcard: false

}

 

 

//createAnimation

https://ding-doc.dingtalk.com/doc#/dev/ui-animation

 

 

//正则表达式

{1,4} 几个;  [,]范围 ; *  0或多;  ?  0或1 ; +  1或多  ; /g全局;  \w数字字母下划线;\W非数字字母下划线; \s空格(包括中/英文空格);\S 非空格 ; ^ 以什么开头 ; $ 以什么结尾 ;  / 表示转义 (如果表达式不变红 就要用/转义 , 表达式不用’’ 引号包裹)

1   字符串文本.match(正则)    ——丛文本里面找出正则表达式匹配的字符集合[]

2  正则.test(字符串)   ———判断是否有符合正则的字符串 true/false

3  去除前后空格（那就是以空格开头和结尾）

    ——  let res=/(^\s+)|(\s+$)/g     let rs=字符串文本.replace(res,’’);

4  去除字符串中的空格(中英文) 

   ——  let res= /\s+/g   或    let res= /\s{1,}/g       let  rs=字符串文本.replace(res,’’);

 

 

 

//好的判断方式， if ((typeof data === 'string' && data === 'true') || (typeof data === 'boolean' && data)) {}

 

// dd.createSelectorQuery()

              .select('.vki-container').boundingClientRect()

              .select('.knowledge-page-container').boundingClientRect().exec((ret) => {

https://ding-doc.dingtalk.com/doc#/dev/selector-query/dd.createSelectorQuery

获取元素对象的widht ,heght,top ,bottom  , 按750比例计算高度。。。！！！

 

 

//如果报错 方法不是一个function  , 一般都是箭头函数里面在引用this 对象。。。

   //注意箭头函数中调用没有this对象，this是父级的主页引用的该方法就是主页的this，主页中没有此方法会报错

        //1 当前model对象改为class类在构造函数中传入类本身的this 

        //2 onDataEmpty移动到主页中或 主页的分割的对象to.js中

        this.onDataEmpty(false, '', that);

 

ps: 只要没说函数找不到和无法识别。。。就没问题。。。

 

？？？

 

 

 

 

？？？///prototype ———js类似c#,java都有扩展方法

?????  /////splice 截图替换集合中的数据 ———[startValueItem, deleteCount, ...items],,,

deleteCount是0就是不删直接插入 其他后移 。 大于0  删除当前几个 在插入 。items不填就是只删不插。。。;start是索引.

????//bind 为了绑定绑定this对象 ，类似modelNew.js中的 类的构造函数。。。

    if (homeSort.ids.length > 0) {

      fnArr.push(this.setCustom.bind(that))

    }

 

 

 

 

 

Some 遍历集合只要返回false 就跳出循环

return datas.some(val => {

                if (k === val.id) {

                  //把item具体数据加入新的dataList集合里面

                  ite.dataList.push(val)

                }

 

                //记录直播预告类型的数据id用于倒计时

                if (val.bizType === 'LIVE' && val.liveStatus === 0) {

                  // this.data.liveIdList.push(val.id);

                  that.data.hasLives = true;

                }

 

                //终止

                return k === val.id

              })

 

 

 

 

Every return false就终止循环，true就继续

content.every(e => { range.includes(e.type) }))

 

 

 

 

常用判断方式

       //if (params instanceof String) 

      //(urls instanceof Array)

      // Object.keys( obj ).length === 0 是空对象

      // JSON.stringify(item.ext) !== '{}'

      if (typeof item.ext !== 'undefined' && Object.keys(item.ext).length) {

      const { learnStatus, examStatus, userResearchStatus, assign } = item.ext || {};