SMP项目笔记

1.unshift() 方法

unshift()
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

this.networks.unshift('any')

注意，unshift() 方法不创建新的数组，而是直接修改原有的数组。
提示：要把一个或多个元素添加到数组的尾部，请使用 push() 方法。

注：shift()方法：

定义和用法：
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

语法：

arrayObject.shift()

返回值：
数组原来的第一个元素的值。

说明：
如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。请注意，该方法不创建新数组，而是直接修改原有的 arrayObject。

提示和注释：
注释：该方法会改变数组的长度。

提示：要删除并返回数组的最后一个元素，请使用 pop() 方法。

实例：
在本例中，我们将创建一个数组，并删除数组的第一个元素。请注意，这也将改变数组的长度：

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")   // George,John,Thomas
document.write(arr.shift() + "<br />")   // George
document.write(arr)   //John,Thomas

</script>

2.ES6 set方法对数组去重

this.array = […new Set(this.array.sort())]
new Set 实现去重
… 实现解构
注：join()方法

let set =new Set(['a','b','c','a']);
console.log(set);     //Set[3]  {'a','b','c'}   size:3
console.log(set.size);    //3
var c = [...set];
console.log(c);       //['a','b','c']
console.log(c.join(','));     //a,b,c
console.log(..set);    //这样是直接输出值的;
可是用这个：
let arr = ...set;
console.log(arr);
控制台就会报错，需要在外面加个中括号 
let arr = [...set];
console.log(arr)

3.ES6中Array.map()

（1）假定是一个数值数组，将数组中的值以双倍的形式放到另一个数组中（不会改变原数组）：

var arr = [1,2,3,4,5]
var doubleNumber = arr.map(function(num){
      return num*2
})    
console.log(doubleNumber) //[2,4,6,8,10]　

（2）假定是一个对象数组，将数组中每个对象的某个属性的值依次遍历存储到B数组中（若有改动，会改变原数组，遍历不会）：

var arr = [
            {
                name:'Jack',age:'16',sex:'男'     
            },
            {
                name:'Jerry',age:'18',sex:'男'    
            },
            {
                name:'Bailey',age:'14',sex:'女'    
            }
        ]
 var names = arr.map(function(name){
            return name.name;
        })
  //或者 var names = arr.map(item => {
  //        const { name } = item
  //        return name
  //      })
 console.log(names) //  ["Jack", "Jerry", "Bailey"]

注：（1）map返回一个新的数组，map不会空数组进行检测，map不会改变原始数组

（2）会改变原数组：

var arr=[
    {name:"小明",age:15},
    {name:"小华",age:16},
    ];
 var abc=arr.map((item,index,arr)=>{
    item.sex="男"
    return item;
  });
  console.log(arr);//[{name: "小明", age: 15, sex: "男"},{name: "小华", age: 16, sex: "男"}]
  console.log(abc);//[{name: "小明", age: 15, sex: "男"},{name: "小华", age: 16, sex: "男"}]
map和forEach的区别  后者没有返回值    若案例改为forEach   则 abc为underfined

//项目实例：
list.map(el => {   //list为对象数组
  el.count = res.find(item => item.date == el.date)
    ? res.find(item => item.date == el.date).count
    : 0
})
//会改变list数组

（3）for-map嵌套使用

const portpss = []
for (let k in portps) {
  portpss.push({
    protocolApp: k,
    port: portps[k].map(item => item.destPort)
  })
}
for (let i = 0; i < portpss.length; i++) {
  this.data = this.data.map(item => {
    if (portpss[i].protocolApp === item.protocolApp) {
      item.port = portpss[i].port  //给this.data对象数组的每一个对象添加port属性
    }
    return item
  })
}

4.difference & delKey

（1）**difference**：difference(this.networks, ['modem']) //删除数组中的元素
（2）**delKey**：delKey(this.currentModel, 'id', 'status') //删除对象中的元素

5.concat()方法

concat() 方法：用于连接两个或多个数组。该方法不会改变现有的数组，而会返回一个新数组。

（1）把 concat() 中的参数连接到数组 a 中：

<script type="text/javascript">

var a = [1,2,3];
document.write(a.concat(4,5));  //输出：1,2,3,4,5

</script>

（2）创建了两个数组，然后使用 concat() 把它们连接起来：

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

document.write(arr.concat(arr2))   //输出：George,John,Thomas,James,Adrew,Martin

</script>

（3）创建了三个数组，然后使用 concat() 把它们连接起来：

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"

document.write(arr.concat(arr2,arr3)) //输出：George,John,Thomas,James,Adrew,Martin,William,Franklin

</script>

6.Object.assign()的用法

Object.assign(target, …sources)
Object.assign 方法用来将源对象（source）的所有可枚举属性，复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。只要有一个参数不是对象，就会抛出TypeError错误。
合并多个对象：

var target = { a: 1, b: 1 };
var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);   // {a:1, b:2, c:3}
//-----------------------------------------------------------/
注：obj引用对象问题：
 watch: {
    model(val) {
      let obj = cloneDeep(val)
      console.log(obj) //1
      const { name, ip } = obj.asset
      obj = delKey(obj, 'id', 'asset')
      console.log(obj) //2------上下1,2两处obj打印结果相同（修改的是同一obj对象）
      Object.assign(this.currentModel, { name, ip }, obj)
    }
  },

注：如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性覆盖前面的属性。

7.JS中的逻辑运算符&&、||，位运算符|，&

（1）JS中的 “||” 符号：

运算方法：

 只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。

 只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。

总结：真前假后

（2）JS中的 “&&” 符号：

运算方法：

 只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;

 只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;

总结：假前真后

弄懂了以上说的还应该知道：

  js的6个蛋蛋：在js逻辑运算中，0、”“、null、false、undefined、NaN都会判为false，其他都为true。

举个栗子：

（3）位运算符：“|”

运算方法：

 **两个位只要有一个为1，那么结果都为1。否则就为0**

继续举栗子：

"|"运算符还能进行取整运算：

（4）位运算符：“&”

运算方法：

  **两个数值的各位分别相与，同时为1才得1，只要一个为0就为0。**

还是举栗子：

8.interval()方法

（1）interval() (setInterval() setInterval()) 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式，周期循环。
注：setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

interval(fn, delay, [count], [invokeApply], [Pass]); 参数：

项目代码实例：

//01
interval(
  async () => {
     await this.getAlert()
   },
   this.refreshInterval,
   { iterations: Infinity, stopOnError: false }
) 
//stopOnError: true 将在出错后停止测试；false 将允许在出错后继续运行测试。

//02
interval(
  async (iteration, stop) => {
    if (this.stopFlag === true) {
      stop()
      return
    }
    await this.getData()
  },
  refreshInterval,
  { iterations: Infinity, stopOnError: false }
)

（2）setTimeout() setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式，不循环，执行一次。使用 clearTimeout() 方法来阻止该函数的执行。

setTimeout(code, milliseconds, param1, param2, ...)
setTimeout(function, milliseconds, param1, param2, ...)

简单实例：

//3 秒（3000 毫秒）后弹出 "Hello" :
setTimeout(function(){ alert("Hello"); }, 3000);

项目实例：

setTimeout(() => {
  this.stopFlag = false
  this.timer()
}, refreshInterval)

timer() {
  interval(
    async (iteration, stop) => {
      if (this.stopFlag === true) {
        stop()
        return
      }
      await this.getData()
    },
    refreshInterval,
    { iterations: Infinity, stopOnError: false }
  )
}

9.ValueFormatter & formatter

（1）formatter

datagarid的formatter属性：

formatter：function（value, row, index）{}
formatter 属于列参数，表示对于当前列的数据进行格式化操作，它是一个函数，有三个参数，分别是value,row,index
value： 表示当前单元格中的值
row： 表示当前行
index： 表示当前行的下标
可以使用return返回想要的数据显示在单元格中

一般使用时是在对数据库读取的数据不能直接显示时，需要进行转换时调用formatter，例如数据库对男女存放的为int型的0，1而在页面显示时则是需要显示男、女。这时就可以使用formatter了。使用方式为：

 formatter：function（value, row, index）{  
	 if（value==1）{ 
	     return “男”
	 }else{
	 	 return  “女” 
	 }   
 }

这样就可以把int型转换成汉字显示出来了。同时formatter还可以对时间类型的转换。数据库的时间类型也是不能直接在显示栏显示出来的。也可以使用formatter，例如：

 formatter：function（value, row, index）{
      var date=new Date(value);   
      return date.format("yyyy-MM-dd") 
 };

这样就可以把数据库中的时间类型显示出来了。其中value 是当前要显示属性的值，row是行的内容，可以点出来显示的对象属性的值。
（2）ValueFormatter （ValueFormatter接口）
ValueFormatter 是一个数据格式化接口，在被绘制到屏幕之前允许自定义图表内所有的值的格式。方法很简单，创建自己的格式类并让它实现 ValueFormatter 接口，然后覆盖getFormattedValue(…) 方法返回你想要的。

//创建一个格式化类
public class MyValueFormatter implements IValueFormatter {

    private DecimalFormat mFormat;

    public MyValueFormatter() {
        mFormat = new DecimalFormat("###,###,##0.0"); // 使用金融类型的格式
    }

    @Override
    public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
        // 写下你的代码逻辑
        return mFormat.format(value) + " $"; // 比如在数据前添加一个$符
    }
}

//给ChartData或者DataSet添加格式化
// 图表内的数据均使用这种格式
lineData.setValueFormatter(new MyValueFormatter());

// 仅在该DataSet内使用这种格式
lineDataSet.setValueFormatter(new MyValueFormatter());

预置格式类：

LargeValueFormatter	可用于格式化大值>1000。它将像1000这样的值变成“1k”，1000000将变成“100万”，1000000000将变成“1b”
PercentFormatter	用于在每个值后面显示一个“%”符号，并以1小数位数显示。特别适用于饼图例如：50变成50.0 %
StackedValueFormatter	专门用于堆叠柱状图。它可以设置绘制所有堆栈值还是只绘制顶部值
项目应用(ag-grid表格)实例：

{
    headerName: this.$t('schema.device.disk'),
    sortable: true,
    type: 'number',
    field: 'diskIdle',
    valueFormatter: data => {
      return isNumber(data.value) && data.value >= 0  //return返回想要的数据显示在单元格中
        ? (data.value / 1024).toFixed(2)
        : '-'
    }
}

10.onCellClicked(ag-grid)单击单元格事件

onCellClicked：用户点ag-grid表格时响应的事件，返回点击的行数据和鼠标事件。

//事件发生在单击单元格的时候发生，事件写在gridOptions下：
{
    headerName: this.$t('schema.device.name'),
    sortable: true,
    field: 'asset.name',
    width: 180,
    onCellClicked: data => {
      const { assetType } = data.data
      if (assetType === 'SafeGateKeeper') {
        if (JSON.stringify(this.gatewayModel) === '{}') {
          this.infoing = false
        } else {
          this.currentModel = this.gatewayModel
          this.infoing = true
        }
      } else if (assetType === 'HostProtection') {
        if (JSON.stringify(this.terminalModel) === '{}') {
          this.infoing = false
        } else {
          this.currentModel = this.terminalModel
          this.infoing = true
        }
      }
    }
}

参考资料：ag-grid 学习笔记 ---- ag-grid 中文教程

11.json.stringify()与json.parse()

（1）JSON.stringify()与JSON.parse()的区别
JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串，而JSON.parse()可以将JSON字符串转为一个对象。简单来说，它们的作用是相对的，我用JSON.stringify()将对象a变成了字符串c，那么我就可以用JSON.parse()将字符串c还原成对象a。

let arr = [1,2,3];
JSON.stringify(arr);//'[1,2,3]'
typeof JSON.stringify(arr);//string

let string = '[1,2,3]';
console.log(JSON.parse(string))//[1,2,3]
console.log(typeof JSON.parse(string))//object

在使用JSON.parse()需要注意一点，由于此方法是将JSON字符串转换成对象，所以你的字符串必须符合JSON格式，即键值都必须使用双引号包裹：

let a = '["1","2"]';
let b = "['1','2']";
console.log(JSON.parse(a));// Array [1,2]
console.log(JSON.parse(b));// 报错

（2）JSON.stringify()的几种妙用
1）判断数组是否包含某对象，或者判断对象是否相等

//判断数组是否包含某对象
let data = [
    {name:'echo'},
    {name:'听风是风'},
    {name:'天子笑'},
    ],
    val = {name:'天子笑'};
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true

//判断两数组/对象是否相等
let a = [1,2,3],
    b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b);//true

2）让localStorage/sessionStorage可以存储对象
localStorage/sessionStorage默认只能存储字符串，而实际开发中，我们往往需要存储的数据多为对象类型，那么这里我们就可以在存储时利用json.stringify()将对象转为字符串，而在取缓存时，只需配合json.parse()转回对象即可。

//存
function setLocalStorage(key,val){
    window.localStorage.setItem(key,JSON.stringify(val));
};
//取
function getLocalStorage(key){
    let val = JSON.parse(window.localStorage.getItem(key));
    return val;
};
//测试
setLocalStorage('demo',[1,2,3]);
let  a = getLocalStorage('demo');//[1,2,3]

3）实现对象深拷贝
实际开发中，如果怕影响原数据，我们常深拷贝出一份数据做任意操作，其实使用JSON.stringify()与JSON.parse()来实现深拷贝是很不错的选择。

//深拷贝
function deepClone(data) {
    let _data = JSON.stringify(data),
        dataClone = JSON.parse(_data);
    return dataClone;
};
//测试
let arr = [1,2,3],
    _arr = deepClone(arr);
arr[0] = 2;
console.log(arr,_arr)//[2,2,3]  [1,2,3]

（3）JSON.stringify()与toString()的区别
这两者虽然都可以将目标值转为字符串，但本质上还是有区别的，比如：

let arr = [1,2,3];
JSON.stringify(arr);//'[1,2,3]'
arr.toString();//1,2,3

其次，JSON.stringify()的受众更多是对象，而toString()虽然可以将数组转为字符串，但并不能对{name:‘天子笑’}这类对象实现你想要的操作，它的受众更多是数字。

12.this.$refs.terminal.tab

ref=“form” (ref = ‘aa’)
refs = [‘form’, ‘aa’]
this.$refs.form (或document.getElementById(“”)) ----获取元素或组件
父组件通过 this.$refs.terminal.tab获取子组件的属性。

13.JavaScript forEach() 方法

定义和用法：
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。注意: forEach() 对于空数组是不会执行回调函数的。

语法：

array.forEach(function(currentValue, index, arr), thisValue)

参数：

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮将数组中的所有值乘以特定数字。</p>
<p>乘以: <input type="number" id="multiplyWith" value="10"></p>
<button onclick="numbers.forEach(myFunction)">点我</button>

<p>计算后的值: <span id="demo"></span></p>

<script>
var numbers = [65, 44, 12, 4];

function myFunction(item,index,arr) {
    arr[index] = item * document.getElementById("multiplyWith").value;
    demo.innerHTML = numbers;
}
</script>

</body>
</html>

项目实例：

async refresh() {
      this.selectedRows = []
      const res = await policies()
      if (res.errcode === 0) {
        this.data = JSON.parse(JSON.stringify(res.data))//this.data为对象数组(5) [{…}, {…}, {…}, {…}, {…}, __ob__: Observer]
        this.data.forEach(item => {
          item.id = item.policy_id
          item.status = item.flag.includes('policy_ENABLE')
        })
      }
    },

 // 将\替换为/
item.value.forEach((item, index, arr) => {
  if (item.includes('\\')) {
    arr[index] = item.replace(/\\/g, '/')
  }
 })

注：forEach是否会改变原数组：forEach到底可以改变原数组吗
JavaScript是有基本数据类型与引用数据类型之分的。对于基本数据类型：number,string,Boolean,null,undefined它们在栈内存中直接存储变量与值。
而Object对象的真正的数据是保存在堆内存，栈内只保存了对象的变量以及对应的堆的地址，所以操作Object其实就是直接操作了原数组对象本身。
forEach 的基本原理也是for循环，使用**arr[index]**的形式赋值改变，无论什么就都可以改变了。

// 基本类型可以
const numArr = [33,4,55];
numArr.forEach((ele, index, arr) => {
    if (ele === 33) {
        arr[index] = 999
    }
})
console.log(numArr);  // [999, 4, 55]

// 引用类型也可以
const allChangeArr = [{
    name: 'wxw',
    age: 22
}, {
    name: 'wxw2',
    age: 33
}]
allChangeArr.forEach((ele, index, arr) => {
    if (ele.name === 'wxw2') {
        arr[index] = {
            name: 'change',
            age: 77
        }
    }
})
console.log(allChangeArr); //[{name: "wxw", age: 22},{name: "change", age: 77}]

14.JS中map()函数的使用

map()方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。
注意：1.map()不会对空数组进行检测；2.map()不会改变原始数组
语法：

array.map(function(currentValue, index, arr), thisIndex)
参数说明：
       function(currentValue, index, arr)：必须。为一个函数，数组中的每个元素都会执行这个函数。其中函数参数：
       currentValue：必须。当前元素的的值。
       index：可选。当前元素的索引。
       arr：可选。当前元素属于的数组对象。
       thisValue：可选。对象作为该执行回调时使用，传递给函数，用作"this"的值。

简单实例：
返回由原数组中每个元素的平方组成的新数组：

let array = [1, 2, 3, 4, 5];

let newArray = array.map((item) => {
    return item * item;
})

console.log(newArray)  // [1, 4, 9, 16, 25]

项目实例：

//案例一：
        this.checked.plc = val.map(item => {         //val为对象数组
          let { id, ip, ip2, port, online } = item
          return ip2 ? { id, ip, ip2, port, online } : { id, ip, port, online }
        })
        console.log(this.checked.plc)  //[{id: "ck7vhczra12021bqsla92xcjv", ip: "172.21.35.144", ip2: "129.0.6.2", online: true, port: 8888}]

15.Vue中$set的使用

this.$set()

vue中 this.$set的用法：
当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。
this.$set(target, key, value)：
其中：target：为需要添加属性的对象，key：是要添加的属性名，value：为属性key对应的值。

<template>
<div id="app2">
<p v-for="item in items" :key="item.id">{{item.message}}</p>
<button class="btn" @click="handClick()">更改数据</button> 
</div>
</template>

<script>
export default {
	data() {
		return {
			items: [
				{ message: "one", id: "1" },
				{ message: "two", id: "2" },
				{ message: "three", id: "3" }
			]
		}
	},
mounted(){
	this.items[0]={message:"测试",id:"4"}; //此时对象的值更改了，但是视图没有更新
	this.$set(this.items,0,{message:"测试",id:"4"})； //$set可以触发更新视图
	console.log(this.items)
},
methods: {
	// 调用方法：Vue.set( target, key, value )
	
	// target：要更改的数据源(可以是对象或者数组)
	
	// key：要更改的具体数据

	// value ：重新赋的值
	handClick() {
		//Vue methods中的this 指向的是Vue的实例，这里可以直接在this中找到items
		this.$set(this.items, 0, { message: "更改one的值", id: "0" });
	},
}
};
</script>

<style>
</style>

项目实例1：

//src\views\devices\device\plc\config\plc-config-dialog.vue
data() {
    return {
      disabled: false,
      sending: false,
      canceling: false,
      checked: {
        plc: [],
        ployType: {},     
        ploy: {}
      },
      ployType: [
        {
          text: this.$t('schema.ploy.code'),
          value: 'code'
        },
        {
          text: this.$t('schema.ploy.data'),
          value: 'data'
        },
        {
          text: this.$t('schema.ploy.process'),
          value: 'process'
        }
      ]
    }
  },
  methods: {
    async send() {
      this.sending = true
      this.canceling = true
      this.disabled = true
      this.checked.plc = this.arr.map(item => {
        let { id, ip, ip2, port, online } = item
        return ip2 ? { id, ip, ip2, port, online } : { id, ip, port, online }
      })
      try {
        await sendPolicy(this.checked)
        success()
      } catch (err) {
        error()
        // throw new Error(err)
      } finally {
        this.sending = false
        this.canceling = false
      }
    },
    cancel() {
      this.$emit('input', false)
      for (let i in this.checked.ployType) {
        this.checked.ployType[i] = false //此处修改this.checked.ployType对象的属性
      }
    }
  },
  mounted() {
    this.ployType.forEach(item => {
      // 组装数据：checked: { ployType: [], code: false, data: false, process: false}
      // this.$set(this.checked, item.value, false)
      this.$set(this.checked.ployType, item.value, false)   //此处this.$set为this.checked.ployType对象添加属性
    })
  }

项目实例2：

async siddhiAlertParents() {
  const res = await siddhiAlertParents(this.id)
  this.parents = res
  if (this.parents.length) {
    this.model = find(this.parents, item => item.id === this.id)
    for (let item of this.parents) {
      if (item.operate && item.operate.match(/\[(.+?)\]/)) {
        let eventId = item.operate.match(/\[(.+?)\]/)[1]
        let res = (await eventLibrary(eventId)) || {}
        let mark = res.eventType && res.title ? '-' : ''
        this.$set(item, 'title', `${res.eventType}${mark}${res.title}`)
      } else {
        this.$set(item, 'title', ``)
      }
    }
  }
}

16.js 遍历对象的几种方法

（1）第一种： for…in

const obj = {
            id:1,
            name:'zhangsan',
            age:18}

 for(let key  in obj){
        console.log(key + '---' + obj[key])
  }
  
//输出结果：
//       id-------1
//       name-----zhangsan
//       age------18

项目实例：

for (let i in this.checked.ployType) {
        this.checked.ployType[i] = false  //其中i为key, this.checked.ployType: {code: false, data: false, process: false}
}

（2）第二种：

1）Object.keys（obj）

2）Object.values（obj）

参数：

obj：要返回其枚举自身属性的对象

返回值：

一个表示给定对象的所有可枚举属性的字符串数组。

const obj = {
　　　　id:1,
　　　　name:'zhangsan',
　　　　age:18
}

console.log(Object.keys(obj)) //输出结果： obj对象的key组成的数组--['id','name','age']

console.log(Object.values(obj)) //输出结果：obj对象的value组成的数组--['1','zhangsan','18']

（3）第三种：使用Object.getOwnPropertyNames(obj)

返回一个数组，包含对象自身的所有属性（包含不可枚举属性），遍历可以获取key和value。

const obj = {
       id:1,
       name:'zhangsan',
       age:18
}
Object.getOwnPropertyNames(obj).forEach(function(key){
    console.log(key+ '---'+obj[key])
})

//输出结果：
//       id-------1
//       name-----zhangsan
//       age------18

17.js中filter()过滤用法总结

定义和用法：filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。注意： filter() 不会对空数组进行检测，不会改变原始数组。

语法：

array.filter(function(currentValue,index,arr), thisValue)

参数说明：

返回值：返回一个新数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

实例(三个高阶函数：filter/map/reduce)：

//三个高阶函数：filter/map/reduce
//1.filter函数的使用
//  nums={10,20,111,222,444,40,50}
let newNums = nums.filter(function(n) {
   return n < 100
})
console.log(newNums); //  10,20,40,50

//2.map函数的使用
// newNums={10,20,40,50}
let new2Nums = newNums.map(function(n) {
   return n * 2
})
console.log(newNums) //  10,20,40,50
console.log(new2Nums);  //  20,40,80,100

//3.reduce函数的使用
// reduce的作用：计算数组元素相加后的总和
let total = new2Nums.reduce(function(prevValue, n) {
   return prevValue + n
}, 0)    //  0为prevValue初始值
console.log(total);  //  240
// 第一次：prevValue 0, n 20
// 第一次：prevValue 20, n 40
// 第一次：prevValue 60, n 80
// 第一次：prevValue 140, n 100
//total = 240

//函数式编程(上述方法的简写)：
//  nums={10,20,111,222,444,40,50}
let total = nums.filter(function(n){   //total = 240
   return n < 100
}).map(function(n) {
   return n * 2
}).reduce(function(prevValue, n) {
   return prevValue + n
}, 0)

//-->继续简写:
let total = nums.filter(n => n < 100).map(n => n * 2).reduce((prevValue, n) => prevValue + n, 0)

项目实例：

//案例一：
const buckets = res.data.aggregations.agg_filter.agg_year.buckets.filter(
     item => {
        return item.key_as_string >= min && item.key_as_string <= max
      }
)

///案例二：
const indices = [...new Set(indices)].filter(item => {
          return item.includes('gl-events')
      }
)

18.JavaScript eval() 函数

定义和用法：
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

语法：

eval(string)

参数说明：
如果是一个表达式，eval函数将执行表达式，如果是字符串，会先转换成js语句然后执行

返回值：
通过计算 string 得到的值（如果有的话）。如果执行结果是一个值就返回，不是就返回undefined，如果参数不是一个字符串，则直接返回该参数）

应用实例：

eval('var a=1');//赋值a=1
eval('2+3')//5
eval("mytest()");//执行mytest()函数

项目实例：

if (localStorage.getItem('statsInterval')) {
     this.statsInterval = Number(localStorage.getItem('statsInterval'))   //将字符串转为数字类型
} else {
  this.statsInterval = this.items[0].value
}
if (localStorage.getItem('refreshing')) {    //localStorage 存的数据为字符串类型
   this.refreshing = eval(localStorage.getItem('refreshing'))   //将字符串转为布尔类型
} else {
  this.refreshing = false
}

19.数字数组与对象数组排序(sort)

（1）数字数组排序

var arr = [ 2, 3, 13, 17, 4, 19, 1 ];
arr.sort(function(a, b) {
  return a - b;   //升序
})
console.log(arr)   //[ 1, 2, 3, 4, 13, 17, 19 ]

（2）对象数组排序

可以选择数组中对象的某一属性进行比较

let arr = [{
    "applyId": "1909101016056138768202215",
    "createTime": "2019-09-10 10:16:02",
    "status": 0,
    "userName": "李某某"
}, {
    "applyId": "1909101027225522012190631",
    "createTime": "2019-09-10 10:07:19",
    "status": 1,
    "userName": "李某某"
}, {
    "applyId": "1909101027225562448906248",
    "createTime": "2019-09-10 10:27:19",
    "status": 3,
    "userName": "李某某"
}]

arr.sort(function(a, b){
    return Date.parse(a.createTime) - Date.parse(b.createTime)  
})

注：利用sort与localeCompare进行处理数据中汉字排序：

1.sort()数组的元素进行排序 对比a，b两值 如果a>b则返回值大于0， 如果a<b则返回值小于0， 如果a=b则返回值是0;

2.localeCompare() 本地特定的顺序来比较两个字符串 它们只用字符的 Unicode 编码比较字符串

var str=[{ city:'奥奥' },{ city:'上海' },{ city:'广州' },{ city:'北京' },{ city:'深圳' }]
str.sort((a,b)=>{
	return a.city.localeCompare(b.city)
})
console.log(res1)//[{ city: '奥奥' },{ city: '北京' },{ city: '广州' },{ city: '上海' },{ city: '深圳' }]

-----------------------------------------------------------------------------------

有时对象中的元素没有这个方法,可以对其实例化:

var str=[{ city:'cc' },{ city:'bb' },{ city:'aa' },{ city:'dd' },{ city:'ca' }]
str.sort((a,b)=>{
	item1=new String(a.city)
	item2=new String(b.city)
	return item1.localeCompare(item2)
})
console.log(str)//[{ city: 'aa' },{ city: 'bb' },{ city: 'ca' },{ city: 'cc' },{ city: 'dd' }]

20.Date.parse()方法

Date.parse()

Date.parse() 方法解析一个表示某个日期的字符串，并返回从1970-1-1 00:00:00 UTC 到该日期对象（该日期对象的UTC时间）的毫秒数，如果该字符串无法识别，或者一些情况下，包含了不合法的日期数值（如：2015-02-31），则返回值为NaN。

语法：

显式调用：Date.parse(dateString)

隐式调用：new Date(dateString).getTime()

参数：
dateString
一个符合 RFC2822 或 ISO 8601 日期格式的字符串（其他格式也许也支持，但结果可能与预期不符）。

返回值：
一个表示从1970-1-1 00:00:00 UTC到给定日期字符串所表示时间的毫秒数的数值。如果参数不能解析为一个有效的日期，则返回NaN。

const unixTimeZero = Date.parse('01 Jan 1970 00:00:00 GMT');
const javaScriptRelease = Date.parse('04 Dec 1995 00:12:00 GMT');

console.log(unixTimeZero);
// expected output: 0

console.log(javaScriptRelease);
// expected output: 818035920000

format(Date.parse('04 Dec 1995 00:12:00 GMT'), 'YYYY-MM-DD')

注：new Date()日期格式处理

21. watch监听的用法

在vue中，使用watch来响应数据的变化。watch的用法大致有三种：

（1）下面代码是watch的一种简单的用法：

<input type="text" v-model="cityName"/>

new Vue({
  el: '#root',
  data: {
    cityName: 'shanghai'
  },
  watch: {
    cityName(newName, oldName) {
      // ...
    }
  } 
})

直接写一个监听处理函数，当每次监听到 cityName 值发生改变时，执行函数。也可以在所监听的数据后面直接加字符串形式的方法名：

watch: {
    cityName: 'nameChange'
    }
 } 

（2）immediate和handler
这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。

new Vue({
  el: '#root',
  data: {
    cityName: ''
  },
  watch: {
    cityName: {
    　　handler(newName, oldName) {
      　　// ...
    　　},
    　　immediate: true
    }
  } 
})

监听的数据后面写成对象形式，包含handler方法和immediate，之前我们写的函数其实就是在写这个handler方法；

immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

（3）deep深度监听
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

<input type="text" v-model="cityName.name"/>

new Vue({
  el: '#root',
  data: {
    cityName: {id: 1, name: 'shanghai'}
  },
  watch: {
    cityName: {
      handler(newName, oldName) {
      // ...
    },
    deep: true,
    immediate: true
    }
  } 
})

设置deep: true 则可以监听到cityName.name的变化，此时会给cityName的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：

watch: {
    'cityName.name': {
      handler(newName, oldName) {
      // ...
      },
      deep: true,
      immediate: true
    }
  }

这样只会给对象的某个特定的属性加监听器。
数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。

22. if条件判断时()里面的true和false

区分js中的null,undefined,“”,0和false：

console.log(typeof null);//object
console.log(typeof undefined);//undefined
console.log(typeof "");//string
console.log(typeof 0);//number
console.log(typeof false);//boolean

Boolean 值规则如下：
<1> 所有的对象都被当作 true；
<2> 当且仅当字符串为空时，该字符串被当作 false；
<3> null 和 undefined 被当作 false；
<4> 当且仅当数字为零（0）时，该数字被当作 false

如下面 if 的()里面，条件都会转为true 或者false 来判断， 里面最终是一个Boolean 表达式：

var flag = true;
var sign =1;
var s =undefined;
var a =NaN;
var obj =null;
var str ='';
if(flag){
	console.log(123);
}else{
	console.log(000);
}

23. splice() 方法

定义和用法：

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

注释：该方法会改变原始数组。

语法：

arrayObject.splice(index,howmany,item1,.....,itemX)

返回值：

说明：

splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素，则返回的是由被删除的元素组成的数组。

提示和注释：

注释：请注意，splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改。

实例：

例子 1

在本例中，我们将创建一个新数组，并向其添加一个元素：

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")

</script>

//输出：
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin

例子 2

在本例中我们将删除位于 index 2 的元素，并添加一个新元素来替代被删除的元素：

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,1,"William")
document.write(arr)

</script>

//输出：
George,John,Thomas,James,Adrew,Martin
George,John,William,James,Adrew,Martin

例子 3

在本例中我们将删除从 index 2 (“Thomas”) 开始的三个元素，并添加一个新元素 (“William”) 来替代被删除的元素：

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,3,"William")
document.write(arr)

</script>

//输出：
George,John,Thomas,James,Adrew,Martin
George,John,William,Martin

24. @click.stop阻止点击事件继续传播

//将会先弹出“noclick”,再弹出“dodo”
<div id="app">
   <div v-on:click="dodo">
        <button v-on:click="doThis">阻止单击事件继续传播</button>
   </div>
</div>

<script>
   var app = new Vue({
       el: "#app",
       data: {
           name: "Vue.js"
       },
       methods: {
           doThis: function () {
               alert("noclick");
           },
           dodo: function () {
               alert("dodo");
           }
       }
   });
</script>

//只弹出“noclick”
<div id="app">
   <div v-on:click="dodo">
       <button v-on:click.stop="doThis">阻止单击事件继续传播</button>
   </div>
</div>

<script>
   var app = new Vue({
       el: "#app",
       data: {
           name: "Vue.js"
       },
       methods: {
           doThis: function () {
               alert("noclick");
           },
           dodo: function () {
               alert("dodo");
           }
       }
   });
</script>

25. transform-origin属性

一、transform-origin的作用
二、transform-origin的用法
详见：transform-origin

项目实例：

.line-center-left {
  width: 20px;
  position: absolute;
  top: 20px;
  left: calc(50% - 60px);
  border-bottom: 2px solid #304f94;
  &::before {
    content: '';
    width: 46px;
    height: 2px;
    background: #304f94;
    position: absolute;
    top: 0px;
    left: -45px;
    transform: rotateZ(26.3deg);
    transform-origin: 45.5px 0;
  }
}

26. JavaScript find() 方法

find()

用法：

（1）find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

（2）如果没有符合条件的元素返回 undefined

（3）find() 对于空数组，函数是不会执行的。

（4）find() 并没有改变数组的原始值。

（5）array.find(function(currentValue, index, arr),thisValue)，其中currentValue为当前项，index为当前索引，arr为当前数组。

简单实例：

let test = [1, 2, 3, 4, 5];

let a = test.find(item => item > 3);
console.log(a); //4

let b = test.find(item => item == 0);
console.log(b); //undefined

项目实例：

list.map(el => {
  el.count = res.find(item => item.date == el.date)
    ? res.find(item => item.date == el.date).count
    : 0
})

27. JavaScript getDate() 与 setDate() 方法

（1）返回指定时间该月的一天getDate()：

var d = new Date("July 21, 1983 01:15:00");
var n = d.getDate();   
//n = 21
//返回值：1 ~ 31 之间的一个整数。

（2）设置一个月的某一天setDate():

var d = new Date("July 21, 1983 01:15:00");
d.setDate(15);
//d: Fri Jul 15 1983 01:15:00 GMT+0800 (中国标准时间)
//返回值：1970年1月1日午夜至调整过日期的毫秒数。

项目实例：

let dateTime = new Date(dateList[0])  //dateList[0] = 2021-03-11
dateTime = dateTime.setDate(dateTime.getDate() + 1)  //dateTime = 1615507200000
let date = format(new Date(dateTime), 'yyyy-MM-dd')  //date = 2021-03-12   new Date(dateTime) = Fri Mar 12 2021 08:00:00 GMT+0800 (中国标准时间)
dateList.push(date)

28.lodash中max(array)与maxBy(array, [iteratee=_.identity])

lodash

（1）max(array)

计算 array 中的最大值。 如果 array 是 空的或者假值将会返回 undefined。
参数：array (Array): 要迭代的数组。
返回值：返回最大的值。

_.max([4, 2, 8, 6]);
// => 8
 
_.max([]);
// => undefined

（2）maxBy(array, [iteratee=_.identity])

这个方法类似max，除了它接受 iteratee 来调用 array中的每一个元素，来生成其值排序的标准。 iteratee 会调用1个参数: (value) 。
参数：array (Array): 要迭代的数组；[iteratee=_.identity] (Function): 调用每个元素的迭代函数。
返回值：返回最大的值。

var objects = [{ 'n': 1 }, { 'n': 2 }];
 
_.maxBy(objects, function(o) { return o.n; });
// => { 'n': 2 }
 
// The `_.property` iteratee shorthand.
_.maxBy(objects, 'n');
// => { 'n': 2 }

项目实例：

const max = maxBy(this.data, o => o.count).count

29. JavaScript match() 方法

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

stringObject.match(searchvalue)
stringObject.match(regexp)

返回值: 存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。

说明:
match() 方法将检索字符串 stringObject，以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。

如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本，而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外，返回的数组还含有两个对象属性。index 属性声明的是匹配文本的起始字符在 stringObject 中的位置，input 属性声明的是对 stringObject 的引用。

如果 regexp 具有标志 g，则 match() 方法将执行全局检索，找到 stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串，则返回 null。如果找到了一个或多个匹配子串，则返回一个数组。不过全局匹配返回的数组的内容与前者大不相同，它的数组元素中存放的是 stringObject 中所有的匹配子串，而且也没有 index 属性或 input 属性。

注意：在全局检索模式下，match() 即不提供与子表达式匹配的文本的信息，也不声明每个匹配子串的位置。如果您需要这些全局检索的信息，可以使用 RegExp.exec()。

简单实例：

<html>
<body>

<script type="text/javascript">

var str="[30522]服务器[s1s1]端口扫描－SYNACK扫描"
document.write(str.match(/\[(.+?)\]/))    //["[30522]", "30522"]

</script>

</body>
</html>

项目实例：

if (this.model.operate) {
  this.eventId = this.model.operate.match(/\[(.+?)\]/)
    ? this.model.operate.match(/\[(.+?)\]/)[1]
    : ''
  console.log(this.model.operate)  // "[40301]SNMP服务试图使用默认public口令访问"
  console.log(this.model.operate.match(/\[(.+?)\]/))  
  // (2) ["[40301]", "40301", index: 0, input: "[40301]SNMP服务试图使用默认public口令访问", groups: undefined]
    // 0: "[40301]"
    // 1: "40301"
    // groups: undefined
    // index: 0
    // input: "[40301]SNMP服务试图使用默认public口令访问"
    // length: 2
  console.log(this.model.operatematch(/\[(.+?)\]/)[1])  // 40301
}

30. join() 方法

定义和用法:

join() 方法用于把数组中的所有元素放入一个字符串。

元素是通过指定的分隔符进行分隔的。

语法:

arrayObject.join(separator)

参数	描述
separator	可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

返回值：

返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。

简单实例：

（1） 在本例中，我们将创建一个数组，然后把它的所有元素放入一个字符串：

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.join())  // George,John,Thomas

</script>

（2） 在本例中，我们将使用分隔符来分隔数组中的元素：

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.join("."))  // George.John.Thomas

</script>

项目实例：

watch: {
  model: {
    handler(val) {
      this.currentModel = val
      if (this.currentModel.id) {
        const {
          source: { ipv4 },
          port_src,
          protocol
        } = this.currentModel
        this.ipv4 = ipv4.join(',')
        this.port_src = port_src.join(',')
        this.protocol = protocol[0]
      } else {
        this.protocol = this.protocols[0].value
        this.currentModel.warn_level = this.warnLevel[0].value
      }
    },
    immediate: true
  }
}

31. js split() 方法

定义和用法:

split() 方法用于把一个字符串分割成字符串数组。

语法:

stringObject.split(separator,howmany)

参数	描述
separator	必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。
howmany	可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

返回值:

一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。

但是，如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）。

提示和注释:

注释：如果把空字符串 (“”) 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

注释：String.split() 执行的操作与 Array.join 执行的操作是相反的。

简单实例：

（1）在本例中，我们将按照不同的方式来分割字符串：

<script type="text/javascript">

var str="How are you doing today?"

document.write(str.split(" ") + "<br />")  // How,are,you,doing,today?
document.write(str.split("") + "<br />")   // H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
document.write(str.split(" ",3))   //  How,are,you

</script>

（2）在本例中，我们将分割结构更为复杂的字符串：

"2:3:4:5".split(":")	//将返回["2", "3", "4", "5"]
"|a|b|c".split("|")	//将返回["", "a", "b", "c"]

（3）使用下面的代码，可以把句子分割成单词：

var words = sentence.split(' ')

或者使用正则表达式作为 separator：

var words = sentence.split(/\s+/)

（4）如果您希望把单词分割为字母，或者把字符串分割为字符，可使用下面的代码：

"hello".split("")	//可返回 ["h", "e", "l", "l", "o"]

若只需要返回一部分字符，请使用 howmany 参数：

"hello".split("", 3)	//可返回 ["h", "e", "l"]

项目实例：

const data = {
  source: { ipv4: this.ipv4.split(',') },
  port_src: this.port_src.split(','),
  protocol: this.protocol.split(','),
  warn_level: this.currentModel.warn_level,
  remark: this.currentModel.remark
}

注：lodash中的split()方法：

_.split([string=''], separator, [limit])

根据separator 拆分字符串string。

注意: 这个方法基于String#split.

添加版本
4.0.0

参数：

[string=‘’] (string): 要拆分的字符串。
separator (RegExp|string): 拆分的分隔符。
[limit] (number): 限制结果的数量。

返回：

(Array): 返回拆分部分的字符串的数组。

例子：

_.split('a-b-c', '-', 2);
// => ['a', 'b']

项目实例：

import { split as _split } from 'lodash'
......
//172.21.36.6-8
const ipv4List = this.ipv4.split(',')
ipv4List.forEach((item, index) => {
  if (item.includes('-')) {
    const before = item.split('-')[0]  // 172.21.36.6
    let after = item.split('-')[1]   // 8
    const split = _split(before, '.', 3)  // ['172','21','36']
    const splitStr = split.join('.')  // 172.21.36
    after = splitStr + '.' + after   //172.21.36.8
    ipv4List[index] = before + '-' + after   //172.21.36.6-172.21.36.8
  }
})

32.lodash中pick、omit、mapValues、merge、cloneDeep、find、last、differenceWith、remove、head、uniqBy、uniq、uniqWith、groupBy与zipWith方法

（1）pick方法

_.pick(object, [props])
创建一个从 object 中选中的属性的对象。

参数：
1.object (Object)
来源对象

2.[props] (…(string|string[])
要选中的属性名，单独指定或指定在数组中

返回值 (Object)：
返回新对象

示例：

var object = { 'a': 1, 'b': '2', 'c': 3 };

_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }

（2）omit方法

_.omit(object, [props])
反向版 _.pick。 这个方法返回忽略属性之外的自身和继承的可枚举属性。

参数:
1.object (Object)
来源对象

2.[props] (…(string|string[])
要被忽略的属性，单独指定或指定在数组中

返回值 (Object):
返回新对象

示例:

var object = { 'a': 1, 'b': '2', 'c': 3 };

_.omit(object, ['a', 'c']);
// => { 'b': '2' }

（3）mapValues方法

.mapValues(object, [iteratee=.identity])
创建一个对象，对象的key相同，值是通过 iteratee 产生的。 iteratee 会传入3个参数： (value, key, object)

参数：
1.object (Object)
要遍历的对象

2.[iteratee=_.identity] (Function|Object|string)
这个函数会处理每一个元素

返回值 (Object)：
返回映射后的对象

示例：

var users = {
  'fred':    { 'user': 'fred',    'age': 40 },
  'pebbles': { 'user': 'pebbles', 'age': 1 }
};

_.mapValues(users, function(o) { return o.age; });
// => { 'fred': 40, 'pebbles': 1 } (无法保证遍历的顺序)

// 使用了 `_.property` 的回调结果
_.mapValues(users, 'age');
// => { 'fred': 40, 'pebbles': 1 } (无法保证遍历的顺序)

（4）merge方法

_.merge(object, [sources])
递归合并来源对象的自身和继承的可枚举属性到目标对象。 跳过来源对象解析为 undefined 的属性。 数组和普通对象会递归合并，其他对象和值会被直接分配。 来源对象从左到右分配，后续的来源对象属性会覆盖之前分配的属性。

注意: 这方法会改变源对象

参数：
object (Object)
目标对象

[sources] (…Object)
来源对象

返回值 (Object)：
返回对象

示例：

var users = {
  'data': [{ 'user': 'barney' }, { 'user': 'fred' }]
};

var ages = {
  'data': [{ 'age': 36 }, { 'age': 40 }]
};

_.merge(users, ages);
// => { 'data': [{ 'user': 'barney', 'age': 36 }, { 'user': 'fred', 'age': 40 }] }

（5）cloneDeep方法

_.cloneDeep(value)
这个方法类似 _.clone，除了它会递归拷贝 value。

参数：
value (*)
要深拷贝的值

返回值 (*)：
返回拷贝后的值

示例：

var objects = [{ 'a': 1 }, { 'b': 2 }];

var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);  //拷贝后为不同的对象
// => false

（6）find方法

遍历 collection（集合）元素，返回 predicate（断言函数）第一个返回真值的第一个元素。predicate（断言函数）调用3个参数： (value, index|key, collection)。

参数：

1. collection (Array|Object): 一个用来迭代的集合。
2. [predicate=_.identity] (Array|Function|Object|string): 每次迭代调用的函数。
3. [fromIndex=0] (number): 开始搜索的索引位置。

返回：
(*): 返回匹配元素，否则返回 undefined。

例子：

var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];
 
_.find(users, function(o) { return o.age < 40; });
// => object for 'barney'
 
// The `_.matches` iteratee shorthand.
_.find(users, { 'age': 1, 'active': true });
// => object for 'pebbles'
 
// The `_.matchesProperty` iteratee shorthand.
_.find(users, ['active', false]);
// => object for 'fred'
 
// The `_.property` iteratee shorthand.
_.find(users, 'active');
// => object for 'barney'
--------------------------------------------------------------------------
//实例
const array = ["deviceStatus", "policyType"]
const arrayAll = [
	{ value: "deviceStatus", text: "设备状态" },
	{ value: "policyType", text: "策略类型"}
]
const arrayNew = map(array, (item) => {
	const obj = find(arrayAll, ["value", item])
	if(obj) {
		return obj.text
	}
})
console.log(arrayNew) // ["设备状态", "策略类型"]

注：find相关方法

（7）last方法

_.last(array)：获取array中的最后一个元素。

参数：
array (Array): 要检索的数组。

返回值：
(*): 返回array中的最后一个元素

例子：

_.last([1, 2, 3]);
// => 3

（8）differenceWith方法
这个方法类似_.difference ，除了它接受一个 comparator （注：比较器），它调用比较array，values中的元素。 结果值是从第一数组中选择。comparator 调用参数有两个：(arrVal, othVal)。

Note: 不像_.pullAllWith, 这个方法会返回一个新数组。

参数：

array (Array): 要检查的数组。
[values] (…Array): 排除的值。
[comparator] (Function): comparator 调用每个元素。

返回值：

(Array): 返回一个过滤值后的新数组。

例子：

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
 
_.differenceWith(objects, [{ 'x': 1, 'y': 2 }], _.isEqual);
// => [{ 'x': 2, 'y': 1 }]

项目实例：

import { differenceWith,isEqual } from 'lodash'

this.datas = differenceWith(this.datas, [item], isEqual)  // 从this.datas中移除等于item的元素

（9）remove方法
移除数组中predicate（断言）返回为真值的所有元素，并返回移除元素组成的数组。predicate（断言） 会传入3个参数： (value, index, array)。

Note: 和_.filter不同, 这个方法会改变数组 array。使用_.pull来根据提供的value值从数组中移除元素。

参数：

array (Array): 要修改的数组。
[predicate=_.identity] (Array|Function|Object|string): 每次迭代调用的函数。

返回：

(Array): 返回移除元素组成的新数组。

例子：

var array = [1, 2, 3, 4];
var evens = _.remove(array, function(n) {
  return n % 2 == 0;
});
 
console.log(array);
// => [1, 3]
 
console.log(evens);
// => [2, 4]

项目实例：

import { remove } from 'lodash'

remove(this.names, o => o === item.name)  // 改变原数组this.names--移除返回值为true的元素

（10）head方法

_.head(array)

获取数组 array 的第一个元素。

引入版本
0.1.0

别名
_.first

参数：

array (Array): 要查询的数组。

返回值：

(*): 返回数组 array的第一个元素。

例子：

_.head([1, 2, 3]);
// => 1
 
_.head([]);
// => undefined

（11）uniqBy方法–对象数组按属性去重

_.uniqBy(array, [iteratee=_.identity])#

这个方法类似_.uniq ，除了它接受一个 iteratee （迭代函数），调用每一个数组（array）的每个元素以产生唯一性计算的标准。iteratee 调用时会传入一个参数：(value)。

参数：

array (Array): 要检查的数组。
[iteratee=_.identity] (Array|Function|Object|string): 迭代函数，调用每个元素。

返回：

(Array): 返回新的去重后的数组。

例子：

_.uniqBy([2.1, 1.2, 2.3], Math.floor);
// => [2.1, 1.2]
 
// The `_.property` iteratee shorthand.
_.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x');
// => [{ 'x': 1 }, { 'x': 2 }]

（12）uniq方法–数组去重

_.uniq(array)

创建一个去重后的array数组副本。使用了SameValueZero 做等值比较。只有第一次出现的元素才会被保留。

参数：

array (Array): 要检查的数组。

返回：

(Array): 返回新的去重后的数组。

例子：

_.uniq([2, 1, 2]);
// => [2, 1]

（13）uniqWith方法–数组去重（对象数组）

_.uniqWith(array, [comparator])

这个方法类似_.uniq， 除了它接受一个 comparator 调用比较arrays数组的每一个元素。 comparator 调用时会传入2个参数： (arrVal, othVal)。

添加版本
4.0.0

参数：

array (Array): 要检查的数组。
[comparator] (Function): 比较函数，调用每个元素。

返回：

(Array): 返回新的去重后的数组。

例子：

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];
 
_.uniqWith(objects, _.isEqual);
// => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]

（14）groupBy方法

_.groupBy(collection, [iteratee=_.identity])

创建一个对象，key 是 iteratee 遍历 collection(集合) 中的每个元素返回的结果。 分组值的顺序是由他们出现在 collection(集合) 中的顺序确定的。每个键对应的值负责生成 key 的元素组成的数组。iteratee 调用 1 个参数： (value)。

参数：

collection (Array|Object): 一个用来迭代的集合。
[iteratee=_.identity] (Array|Function|Object|string): 这个迭代函数用来转换key。

返回：

(Object): 返回一个组成聚合的对象。

例子：

_.groupBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': [4.2], '6': [6.1, 6.3] }
 
// The `_.property` iteratee shorthand.
_.groupBy(['one', 'two', 'three'], 'length');
// => { '3': ['one', 'two'], '5': ['three'] }
------------------------------------------------------------
//portp为对象数组，protocolApp为对象数组中元素的属性
const portps = groupBy(portp, 'protocolApp')

（15）sortBy方法

_.sortBy(collection, [iteratees=[_.identity]])

创建一个元素数组。 以 iteratee 处理的结果升序排序。 这个方法执行稳定排序，也就是说相同元素会保持原始排序。 iteratees 调用1个参数： (value)。

参数：
collection (Array|Object): 用来迭代的集合。
[iteratees=[_.identity]] (…(Array|Array[]|Function|Function[]|Object|Object[]|string|string[])): 这个函数决定排序。

返回：
(Array): 返回排序后的数组。

例子：

var users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 36 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 34 }
];
 
_.sortBy(users, [function(o) { return o.user; }]);
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]
 
_.sortBy(users, ['user', 'age']);
// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]

//项目实例
this.functionCodes = sortBy(enums.list(val), item => item.value)       

（16）zipWith方法

const key = ['a', 'b', 'c', 'd']
const value = [1, 2, 3, 4]
//zipWith将两个数组合为一个对象数组 下面key、value为两个数组
const aa = zipWith(key, value, (input, output) => ({
  input,
  output
}))
console.log(aa)   // [ { input: "a", out: 1 }, { input: "b", out: 2 }, { input: "c", out: 3 }, { input: "d", out: 4 }]

33.将对象转换为对象数组(obj–>array)

const obj = {
  "countDos": 3985,
  "countLogin": 35,
  "countThrough": 1499,
  "countDpi": 10000,
  "countBaseLine": 10739
}
const list = []
for (let v of Object.keys(obj)) {
  list.push({
    warnType: v,
    count: obj[v]
  })
}
console.log(list)
//list: [{ warnType: "countLogin",count: 0 },{.},{.},{.},{.},{.}]
------------------------------------------------------------------------------
const portpss = []
for (let k in portps) {
    portpss.push({
    protocolApp: k,
    port: uniq(portps[k].map(item => item.destPort))
   })
}

34.将对象数组转换为对象(array–>obj)

let keys = [],
  values = []
policyContent.forEach(item => {   //policyContent: 对象数组 [{text: 'a', value: '2'}, ... ]
  keys.push(item.text)
  values.push(item.value)
})
content = zipObject(keys, values)    //content: 对象 {a:'2', ... }

35. byte-size将字节值（例如3456）转换为可读字符串（“3.5kb”）

默认情况下，byteSize将输入数字转换为公制单位、精度为1的可读字符串。详见: byte-size

> byteSize(1580)
{ value: '1.6', unit: 'kB', long: 'kilobytes' }

//项目实例
{
  headerName: `${this.$t('schema.watch.receive')}`,
  field: 'input',
  valueFormatter: data => {
    const input = byteSize(data.value / 8, {    //data.value单位为bit(位), data.value/8单位为Byte(字节), （1Byte=8bit）
      units: 'metric',
      precision: 1
    })
    return `${input.value}${input.unit}ps/${data.data.inputPack}pps`
  }
}