【Vue】1 - 数据驱动之 数据类型，数组常用方法

vue特点：数据驱动（主要操作的是数据）；
之前js、jq频繁的操作dom(元素加样式，改大小，移动等) 会导致页面回流和重绘，高性能；

1、js 数据类型

js数据类型分基本 和引用两种：

• 基本数据类型：number、string、boolean、null、undefined；
• 引用数据类型：Object、function…
• symbol (es6)

null表示空（例如定义一个空对象），undefined是根本没有（例如声明一个变量未赋值，就是undefined）

常用的数据类型：对象{} 和 数组[]，前后端交互一般给的json字符串，要么对象要么数组，
操作数组的方法：(pop、push、unshift、shift、splice、reverse、sort)、slice、indexOf、lastIndexOf、concat
如上（）中的方法可以改变原数组，我们称为数组的变异

现在用的多的方法：forEach、filter、map、some、every、reduce、(includes、find )
()外的是ES5方法，（）里是ES6方法

forEach 循环，没有返回值，无论如何都会把数组遍历完
filter 过滤
map映射
node版本：打开cmd后，node -v看版本，建议版本>8.5
https://nodejs.org/en/

webstorm(vscode、sublime)
面试题：forEach、for in、for、for of的区别

forEach

遍历数组常用forEach (等价for循环,但不支持return)，声明式，不关心如何实现循环

let arr=[1,2,3,4,5];
arr.b = '100'  //设置数组的私有属性
for(let i = 0;i <arr.length;i++){
        //编程式，我们自己调用循环，怎么循环，怎么一个个取出来
    console.log(arr[i])  //打印1 2 3 4 5  没有私有属性的值，打印不出来
}

arr.forEach(function(item){
        //声明式，不关心如何实现循环，不支持return
	console.log(item)
})  

for in

但遍历数组不常用for in循环
可以遍历除数组以外的值，包括数组的私有属性也可以打印出来

let arr=[1,2,3,4,5];
arr.b = '100'  //设置数组的私有属性
for(let key in arr){
     
	console.log(typeof key)   //6个string, 使用for in循环，key 会变成字符串
	console.log(key) //打印 1 2 3 4 5 b ,可以打印出数组的私有属性
}

for of

forEach 不能return,for in 会变成私有属性，可以使用for of循环：
首先for循环肯定可以return,并且是值 of 数组 （不能遍历对象）

for(let val of arr){
     
	console.log(val)
}

for of 不能遍历对象：

let obj = {
     schoo:'zgkd',age:'18'};
for(let val of obj){
     
console.log(val)  //报错，obj is not iterable(迭代) obj对象是不能被迭代的
}

如果非要用for of遍历对象，可以使用Object.keys把对象的属性key组成新的数组 来强制的遍历对象

let obj = {
     schoo:'zgkd',age:'18'};
for(let val of Object.keys(obj)){
       //Object.keys(obj) 在这里是['school','age']
console.log(val)  //school  age
console.log(obj[val]) //zgkd  8
}

filter(过滤-删除数组里的某些项)

filter：不改变原数组，返回过滤后的新数组，回调函数callback返回true:表示将这一项放到新数组中，false为不放进新数组

let newArr =arr.filter(callback,thisArg)   
//不改变原数组，返回新数组用参数接收；
//callback是回调函数，会有两个参数item,index;
//thisArg是设置this指向,可不写
let newArr = [1,2,3,4,5].filter(function(item,index){
        
	return item>2 && item<5;   //返回true 或false,true为放进新数组，false为不放进新数组
})

用法

let newArr = [1,2,3,4,5].filter(function(item){
        //funciton是回调，循环判断每一项
	return item>2 && item<5; 
})
console.log(newarr);   //[3,4]

map(映射-修改/更新数组)

将原有的数组映射成一个新数组，eg:将[1,2,3]改成

1

2

3

, map也是循环数组进行操作

let newArr = [1,2,3].map(function(item){
        //funciton是回调，循环判断每一项
	// return 2;    //newArr就是[2,2,2]
	//return item*=3;   //就是return item = item *3;  newArr就是[3,6,9]
	return `
${
       item}
`  //用的es6的模板字符串，`变量放在 ${变量} 里面`
	//newArr就是['
1
','
2
','
3
']
}) 
arr.join('');  //数组拼接为字符串‘，’默认用,拼接，什么都不用写''
console.log(newarr);   //[3,4]

includes(包含-查看数组里是否包含某一项)

缺点：我们项目中常会找数组项里是否包含某些字段，不会和数组项完全吻合，所以不实用

let arr = [1,2,3,4,55]
arr.includes(5);  //返回true就是包括，返回false就是不包括

console.log(arr.includes(5));   //false ,说明是查的数组项，而不是项里包含，所以可以用find

find(查找-用于找到数组里满足条件的具体的那一项)

缺点：虽然可以找到数组项里是否含某些字段，但找到会返回的是对应的数组项，而不是boolean; 大多时候我们想要，包含某字段返回true，不包含返回false
1、不会改变原数组；2、find方法返回找到的那一项（如果没找到返回undefined）；3、回调函数返回true表示找到了，false表示没找到； 4、找到后就停止循环，不再往下找了

let arr = [1,2,3,4,55,555]
let result = arr.find(function(item){
        //也是循环迭代进行判断
	return item.toString().indexOf(5) > -1  //将每一项转成字符串后，判断是否包含某个内容，如果包含return true循环停止，返回此项
})

console.log(result );   //55，找到55后就停止了，不会再找555了
//如果没找到，返回的是undefined

数组方法总结：

想找到数组里的某一项 用find() :返回找到的那一项,没找到返回undefined
some() 找true,找到true停止，返回true;找不到返回false
every() 找false 找到false停止，返回false ,没有返回true

reduce() 收敛 -返回叠加后 的结果

数组求和

[1,2,3,4,5].reduce(function(prev,cur,index,self){
     
	return prev + cur;
})
//本地的返回值return 会作为下一次的prev

求乘和

[{
     price:20,num:2},{
     price:20,num:3},{
     price:20,num:3}].reduce(function(prev,cur,index,self){
     
 return prev + cur.price * cur.num;
},0)

二维数组 转 一维数组
解构赋值可以；

let flat = [ [1,2,3] , [4,5,6] , [7,8,9] ].reduce(function(prev,cur,index,self){
     
	return prev.concat(cur);
})
console.log(flat);   //   [1,2,3,4,5,6,7,8,9]

箭头函数

箭头函数特点：不具备 this 和arguments；
自己没有this，就找上一级的this,从而解决了this指向问题；

问题：如何更改this指向？ 1、call \ apply\bind 2、var that = this; 3、箭头函数

问题：如何确定this时谁？ 和在哪定义有关吗？无关！ 谁调用this,this指向谁（.前面时谁，this就是谁）

箭头函数格式：

function a(b){
     
	return b+1;
}
//改成箭头函数
let a = b =>b + 1;

1、去掉function 关键字；
2、参数有一个可以省略小括号；
3、小括号 和大括号之间有一个箭头
4、如果没有大括号 则直接写返回值
5、有大括号必须写return

箭头函数中没有function 关键字，所有的function 要定义一下 let a 变量，函数赋值给a变量

function a(b){
     
	return function(c){
     
		return b + c;
	}
}
//改成箭头函数
let a = b => c => b+c;

这种两个箭头的函数 叫高阶函数（ >=两个箭头 ）
vue中很多时候不能用箭头函数；

上面的函数 执行完 ：a(1)；函数a 和c都会被销毁，因为后面不会用的函数c;
闭包：函数执行的一瞬间叫闭包，执行完就销毁了，销毁完就没有了；
彻底闭包：特点是导致内存泄漏，产生了一块不销毁的作用域；1、执行后返回的结果必须是引用数据类型；2、被外界变量接收，此时这个函数不会销毁（模块化、私有变量）

 let a = function(b){
        //这个{}里的部分是暂存死区 //这里的声明的变量都是私有的
	return function(c){
     
		return b + c;
	}
}()
//  这个 a()函数a执行完后，会把函数c赋给a变量，函数c后面会被用到，所以函数a 执行完永远不会被销毁；