前端知识体系学习（声明变量，数据类型（数组常用的操作方法））

一、Javascript篇

声明变量

有6种方式，var，let，const，function，import，class

• 首先var
  • 如果现在调用再var声明变量并且赋值，会
    输出undefined。
  • 可以重新声明var
  • 变量提升，即提前声明
• let与const
  • 变量不会提升
  • 不可重复声明并赋值，无论是var先声明的变量还是let声明的，都不能使用let再次声明，SyntaxError错误
  • 不能再let声明变量前调用这个变量，否则会报错，ReferenceError错误
  • 如果语法错误SyntaxError，则整个程序不会运行;
    如果引用错误ReferenceError，只会导致错误后面的代码无法执行;

// var 声明变量
console.log(log); // var 声明的变量会变量提升，因此这里不会报错而是输出默认值 undefined
var log = '存在'
console.log(log); // 存在
var log = "已成功改变"; // 可重复声明 var，不会报错
console.log(log); // 已成功改变
var log; // 不赋值不改变值
console.log(log); // 已成功改变

// let 声明变量
console.log(log1); // 不能在用 let 声明变量前访问 Uncaught ReferenceError: Cannot access 'log1' before initialization，let 声明的变量不存在提升
let log1 = 'let 声明的变量'; 

let log = '修改 var 变量的值'; // 不可重复声明 var 或 let 声明过的变量 Uncaught SyntaxError: Identifier 'log' has already been declared， SyntaxError 会导致整个程序不运行

// 无论是 var 还是 let 声明过的变量，都不能重复声明
let log1 = '重新赋值'; // Uncaught SyntaxError: Identifier 'log1' has already been declared
let log = '重新赋值'; // Uncaught SyntaxError: Identifier 'log' has already been declared

数据类型

6种类型

String，number，Boolean，null，undefined，symbol类型前面这些是原始类型，Object是引用类型

基本包装类型

Boolean，number，String，读取这些类型的值的时候会创建一个包装对象，然后这个包装对象里面就会有一些方法对这些类型的数值进行操控。

检测数据类型

数据常用的操作方法

• 1、foreach（数据遍历方法）
• 参数有两个分别是一个遍历完后的回调函数，然后是改变this指向的参数
• 然后回调函数里面有三个参数，第一个参数代表数组数组遍历后的item，第二个参数是当前位置（序列号），第三个参数是遍历的数组

arr.forEach(function(v, i, r) {
　　console.log(v, i, r);
})
>
a 0 ['a', 'b', 'c']
b 1 ['a', 'b', 'c']
c 2 ['a', 'b', 'c']

• 然后现在来看回调函数的第二个参数

<script>
	var obj = {
		print: function(a,b){
			console.log(a,b)
	}
	}
	var arr = ['a','b','c'];
	arr.forEach(function(q,e,d){
		this.print(q,e)
		console.log(this)
	}，obj)
</script>

如果没有设置obj
结果，可以看到this指向了window

所以
传 数组的时候 时，回调函数中的 this 默认指向 window 对象，当传递obj时，回调函数中的 this 就指向了使用foreach后的结果。

• 2、foreach（数据过滤方法）
  • filter 是过滤的意思，所以这个方法的作用就是返回一个匹配过滤条件的新数组，其接收两个参数 回调函数和 this指向，c主要用于对元素进行条件匹配，回调函数和this指向和上面方法的一样，然后使用这个方法，返回的是匹配后的数组，即使返回一个值

<script>
			var arr = ['a','b','c'];
			var newarr=arr.filter(function(item){
				return item == "a"
			});
			console.log(newarr) //["a"]
		</script>

但是对于返回数组中一个值的可以使用find方法，返回数组中的一个值。用法一样

• 3、map（数组加工方法）
• 用法和上面一样，具体看代码，对数组进行加工，然后返回一个新数组

var arr = [
			{w : 10, h: 10},
			{w : 20, h: 10},
			{w : 30, h: 10}
		]
		var newarr=arr.map(function(item){
			item.area = item.w * item.h;
			return item;
		});
		console.log(newarr) 
		// 0: {w: 10, h: 10, area: 100}
		// 1: {w: 20, h: 10, area: 200}
		// 2: {w: 30, h: 10, area: 300}

• 4、reduce（数组归并方法）
• 其实就是从第一个开始加，然后每加一个数，得到结果就返回这个结果，并且把这个数继续与下一个数相加，然后继续返回结果，类推。
  代码

arr = [1, 2, 3, 4];
var newArr = arr.reduce(function (previousValue,  currentValue,  currentIndex, array) {
　　console.log(previousValue, currentValue, currentIndex);
　　return previousValue + currentValue;
});
结果：
1 2 1
3 3 2
6 4 3

参数说明：
previousValue - 存放的是上一次callback返回的结果，其初始值默认为数组的第一个元素。
currentValue - 是当前元素 。默认从数组的第二个元素开始。
currentIndex - 是当前元素位置 。
array - 是当前数组。
其实redule可以传两个参数，第一个是回调函数，第二是相加的基数，比如100，那么
100 2 102
102 3 105
105 4 109

• 4、reduceRight（数组归并方法）是从右到左的reduce
• 6、some方法
  • some 是某些、一些的意思，其作用是对数组中的每一项执行回调函数，如果该函数对任一项返回 true，则停止遍历，并返回 true 。
  • 代码

  var arr = [ 1, 2, 3, 4];
var result = arr.some(function(item, index, array ){
　　console.log(item, index, array);
　　return item > 2;
});
>
1 0 [1, 2, 3, 4]
2 1 [1, 2, 3, 4]
3 2 [1, 2, 3, 4]

• 7、every方法
  • every 是每一个的意思，其作用是对数组中的每一项执行回调函数，如果该函数对每一项都返回 true，则返回 true 。
  • 代码

  var arr = [ 1, 2, 3, 4];
var result = arr.every(function(item, index, array ){
　　console.log(item, index, array);
　　return item < 3;
});
1 0 [1, 2, 3, 4]
2 1 [1, 2, 3, 4]
3 2 [1, 2, 3, 4]
result > false

那 every 到底有什么作用呢？ 当一个 for 循环使用了 break 语句后，我们想知道 for 循环是否正常的执行完时， 我们一般会通过检测for中的索引 i==arr.length 来判断，因此every 的作用就体现在这里

• 8、index方法
• 于查询数组元素对应的索引位置，可以传递两个参数，第一个参数是要匹配的元素，必须是简单数据类型。第二个参数是指定查询的起始位置，无法检索对象数组的元素位置
• 如代码

/ 默认从索引0的位置开始
[1, 2, 3, 5, 2].indexOf(2); // 1
// 指定从索引3的位置开始
[1, 2, 3, 5, 2].indexOf(2, 3); // 4

如果只想知道数组中 是否存在 某个元素，而不关心元素的位置，也可以使用 ES6 提供的 includes() 方法来判断。

let a = [1, 2, 3];
a.includes(1); // true
a.includes(1, 1);// false  第二给参数是位置

findIndex() 也是用于查询数组元素的位置，和 indexOf() 不同的是，它可以检索对象数组的元素位置，但需要通过回调函数来指定匹配的元素。
代码

//简单数组
[1, 2, 3, 5].findIndex(item => item == 3); // 2
//对象数组
[{id: 1}, {id: 3}, {id: 5}].findIndex(item => item.id == 3); // 1

• 10、lastindex（）方法从右到左
• 11、sort（原地排序算法）
  • 内容是传一个回调函数进去，这个回调函数控制是升序排，还是降序排，那如何控制呢，就传两个相互比较的参数，a，b，比如两个参数是a到b这样排序的，再函数内
    return a-b； 如果为真，那就是说a大于b，那么就要交换，就是升序操作
    return b-a ； 如果为真，那就是b>a ，然后就要交换，也就是说降序
    代码：

  var numbers = [2, 4, 1, 10, 3];
// 回调参数 a,b 是数组要比较的两个元素，a 排在 b 的前面。
numbers.sort(function(a, b){
　　// 当 a > b 时触发交换操作，把较小的排在前面，即升序。
　　return a - b;
});
> [1,2,3,4,10]
 
numbers.sort(function(a,b){
　　// 当 a < b 时触发交换操作，把较大的排在前面，即降序。
　　return b - a;
});
> [10,4,3,2,1]

• 11、join方法
  • 连接数组，使用方法

var data = ['Wind', 'Rain', 'Fire'];
data.join(); // Wind,Rain,Fire
data.join(', '); // Wind, Rain, Fire
data.join(' + '); // Wind + Rain + Fire
data.join(''); // WindRainFire

• 12、concat
  • 创建一个新数组，那数组里面的参数接到原本数组的后面，参数可以是数组或者非数组
  • 代码

 var arr = ['a','b','c'];
			a = arr.concat(1,2,[3])
			console.log(a)  

• 13、push和pop，不会改变原来数组
  • push是添加一个或者多个元素放到数组的末尾，并且返回数组长度
  • pop是删除末尾最后一个元素，并且返回这个元素
• 14、unshift 添加和 shift 删除
  • unshift 添加一个或多个元素到数组的开头，并且返回数组新的长度
  • shift 删除数组的第一个元素，并且返回这个元素。
• 15、 splice方法，从一个数组中移除一个或多个元素。还可以再所移除的位置上插入新元素，然后返回所移除的元素。
  • 参数：第一个是开始删除的位置，第二个参数是删除几个，第三个参数之后是再删除的位置上添加参数。
• 15、 slice（begin , end）
  • 从begin位置开始到end位置之间的数组，但不包括end的位置，会返回一个新的数组

         var arr = ['a','b','c'];
		a = arr.slice(1,3)  //从0开始算
		console.log(a) //b c

如果参数有负数

        var arr = ['a','b','c','d','e'];
		a = arr.slice(-2, -1) 
		b = arr.slice(3, 4)
		console.log(a) //d
		console.log(b) //d

现在使用slice来了解以下浅拷贝和深拷贝
首先浅拷贝，slice方法会返回一个新的数组，由于数组是引用类型， 通常会通过 arr.slice(0) 来实现数组的浅拷贝，但这只对 数组元素是基本类型 的情况有效。如代码

// 简单数组拷贝
var arr = [1, 2, 3, 4];
var cyarr = arr.slice(0); // 浅拷贝
arr.splice(3, 1); // 对原数组操作
console.log(arr, cyarr); //[1,2,3] , [1,2,3,4]

如果是对象数组，数组元素作为指针指向对象内存，slice(0) 仅仅是拷贝了一份指针作为副本，而副本中的指针，指向的还是原来的对象，因此，对一个数组中的对象做操作，另一个数组中的对象也会同步变化。

//对象数组拷贝
var list = [{name: 'zhangsan'}];
var cylist = list.slice(0); // 浅拷贝
list[0].name = 'lisi'; // 对原数组操作
console.log(list, cylist); // [{name:'lisi'}] , [{name:'lisi'}] -> 拷贝失败　

那如何实现改变了拷贝后的对象，然后原来对象没有改变，就是深拷贝
要实现数组的深拷贝，需要通过 JSON 的序列化和反序列化来实现，即： JSON.parse( JSON.stringify(arr) )
代码

	//对象数组拷贝
var list = [{name: 'zhangsan'}];
var cylist = JSON.parse(JSON.stringify(list)); // 深拷贝
list[0].name = 'lisi'; // 对原数组操作
console.log(list, cylist); // [{name: 'lisi'}] , [{name: 'zhangsan'}] > 拷贝成功