javascript基础

javascript中的小操作

1.去掉数组中的重复值

let arr1 = ['apple', 'apple', 'banana', 'orange', 'grape', 'apple', 'grape']
const arr2 = [...new Set(arr1)]
console.log(arr1, arr2)

　　

 

 找出数组的最大值

Math.max(...arr)

arr.reduce((num1, num2) => {
    return num1 > num2 ? num1 : num2}
)

 

 2. 快速浮点型转成整型  | 0

let fl = 9.9 | 0   // 9 

3. 去除字符串内的所有空格

str.replace(/\s+/g,"")

驼峰字符串转连字符串

 getString (str) {
      const hyphenateRE = /\B([A-Z])/g
      return str.replace(hyphenateRE, '-$1').toLowerCase()
    }

连字符串转驼峰字符串

 getString (str) {
      const camelizeRE = /-(\w)/g
      return str.replace(camelizeRE, (_, c) => {
        return c ? c.toUpperCase() : ''
      })
    }

字符串首字母大写

getUpString (str) {
      return str.charAt(0).toUpperCase() + str.slice(1)
    }

4. 判断数据类型

基本数据类型：Undefined、Null、String、Number、Boolean。

引用数据类型：Object、Array、RegExp、Date、Function，特殊的基本包装类型(String、Number、Boolean)以及单体内置对象(Global、Math)。

typeof  // 返回值有 boolean，number，string，object, function

instanceof // 可以区分 Array 和 Object   xxx instanceof Object/Array  不适用于原型链上有多个属性

Object.prototype.toString.call().slice(8, -1)  // 都可以区分

 

 

 5. 使用Microsoft Office预览PDF、DOC、DOCX格式的文件

https://view.officeapps.live.com/op/view.aspx?src=(文件的网络地址)  

 记住：必须可以访问网络，https://view.officeapps.live.com/op/view.aspx

1. 文档访问地址不能直接使用 ip，需要通过域名访问，并且端口必须是 80 端口
2. 文档的格式（必须为以下格式之一）：
   Word：docx、docm、dotm、dotx
   Excel：xlsx、xlsb、xls、xlsm
   PowerPoint：pptx、ppsx、ppt、pps、pptm、potm、ppam、potx、ppsm
3. 文档的大小：Word 和 PowerPoint 文档必须小于 10 兆字节;Excel 必须小于五兆字节（通过office web app 部署的本地服务器可以设置文档大小）

6. 循环遍历对象:

 Object.getOwnPropertyNames(data).forEach(key => {
     console.log(key, data[key])
   })

7.数组的slice和splice的区别：
slice 接收两个参数，起止位置，不包括end，不会改变原数组，而是返回新数组

 

 

splice 接收3个参数（start, deleteCount, ..items）items替换的元素， 返回的是被删除的元素，会改变原数组

 

 

 8. foreach和map的区别：

foreach 没有返回值，不会改变原数组， 如果只是遍历可以用

 

 

 map 会返回新数组，不会改变原数组

9. js-cookie 浏览器的cookie存储时间默认为关闭浏览器为止

10. 数组扁平化（只针对简单类型，不包括对象数组）

 （1）toString()

const arr = [1,3,4,5,[6,8.9,9],[1,5,7,3]]

arr.toString().split(',')

 // 结果

(11) ["1", "3", "4", "5", "6", "8.9", "9", "1", "5", "7", "3"]

（2）join()

arr.join(',').split(',')
// 结果
(11) ["1", "3", "4", "5", "6", "8.9", "9", "1", "5", "7", "3"]

toString()和join(',')的作用相同，缺点是只能是简单类型，而且中间不能有空值

（3）扩展运算符

[].concat(...arr)
// 结果
(11) [1, 3, 4, 5, 6, 8.9, 9, 1, 5, 7, 3]

缺点是只能扁平化一层

（4）flat

arr.flat(Infinity)
// 结果
(11) [1, 3, 4, 5, 6, 8.9, 9, 1, 5, 7, 3]

会跳过空位，返回新数组，不会改变原数组

空位示例：

arr
(7) [null, 1, 3, null, 5, Array(3), Array(4)]
arr.flat(Infinity)
(12) [null, 1, 3, null, 5, 6, 8.9, 9, 1, 5, 7, 3]

11. css not运算符

div {
  border: 1px solid red;   
}

div:last-child {
  border: none;
}

等同于

div:not(last-child) {
    border: 1px solid red;
}

12. 文本溢出处理

//单行
.single {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
//多行 （仅谷歌浏览器）
.more {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  work-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; //指定行数
}

// 多行 （兼容所有浏览器）
  line-height: 20px;
  max-height: 40px; // 就是给容器个固定高度， 超过的隐藏
  overflow: hidden;

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;

13. 一维数组转树形数组

const list = [
      {
        pid: 111,
        id: 1111,
        name: 1111
      },
      {
        id: 1,
        name: 1,
        pid: 0
      },
      {
        id: 2,
        name: 2,
        pid: 0
      },
      {
        id: 3,
        name: 3,
        pid: 0
      },
      {
        id: 4,
        name: 4,
        pid: 0
      },
      {
        pid: 1,
        id: 11,
        name: 11
      },
      {
        pid: 1,
        id: 777,
        name: 777
      },
      {
        pid: 3,
        id: 33,
        name: 33
      },
      {
        pid: 4,
        id: 44,
        name: 44
      },
      {
        pid: 33,
        id: 333,
        name: 333
      },
      {
        pid: 11,
        id: 111,
        name: 111
      }
    ]


 const arrayToTree = (arr:any[], pid:number) => {
      return arr.reduce((res:any, current:any) => {
        if (current['pid'] === pid) {
          current.children = arrayToTree(arr, current['id']);
          return res.concat(current);
        }
        return res;
      }, []);
    };


console.log(arratToTree(list, 0))

// 树形数组转一维数组
let treeToArray = tree => {
    let arr = [];
    const transfer = item => {
        if (item && item.length > 0){
            item.forEach(e => {
                arr.push({ pid: e.pid, id: e.id })
                transfer(e.children)
            })
        }
    }
   transfer(tree)
   return arr
}