ES6新增方法(数组，字符串，关键字 var let const)

为什么要学习ES6

1.写在开头(前述）

• 为什么要学习ES6
• ES6的版本变动内容最多，具有里程碑意义
• ES6加入许多新的语法特性，编程实现更简单、高效
• ES6是前端发展趋热。就业必各技能
• 什么是ES6
  ES6, 是指 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准

2.写在中间（新增知识点）

1.let关键字⭐

• let声明的关键字和var声明基本一致
  var a = 10; let b = 20; console.log(a, b);
• let声明的关键字是局部作用域，只在一对{}中启用（if switch for 都可以形成局部作用域⭐），var 只能通过函数形成函数作用域。如下图代码所示，在{}外找不到let便会报错

<script>
if (true) {
	var c = 100
		}
	console.log(c);//100
	if (true) {
		let d = 200;
		}
	 console.log(d); //会报错
</script>

• let 不会变量提升（在javascript引擎执行代码前，先把所有变量和函数提升到最前面，变量统一赋值为undefined ）。如下图代码所示，由于let不会存在变量提升，所以先使用会报错

<script>
	alert(f);
	var f = 20;//undefined
	 alert(g);
	 let g = 40; //报错
</script>

• let在同一个作用域不能重复声明
  如下图代码所示，var可以重复声明，输出的是第二个f.而let已经声明了一个g,所以再一次会报错

<script>
	var f = 50;
	var f = "love js";//打印
	let g = 60;
	let g = "good";//报错
</script>

2.const关键字

• 和let基本一致（局部，不会变量提升，不能重复声明）
  如下图代码所示，会出现Uncaught SyntaxError 没有捕捉到语法错误

<script>
	const PI = 3.1415926;
	console.log(PI);
	 PI = 3.14;//报错 Uncaught TypeError
</script>

• 声明必须赋值
• 声明的数据不能修改（值类型），引用类型只要不是重新赋值，都是引用同一块内存地址

<script>
	const PERSON = {
				name: "mumu",
				age: 18
			}; //引用类型常量
			PERSON.age = 24;
			console.log(PERSON);
</script>

• 建议变量名大写

3.解构数组（就是把数组解析为单个的变量）

• 把数组解析为单个的变量
• 可以用逗号跳过某个元素(如下代码，本来b是3，但是前面有俩逗号，跳过1和3，即b是5）

<script>
	let arr = [1, 3, 5, 7, 9];
	let [a, , b, ...c] = arr;
	console.log(a); //1
	console.log(b); //5
	console.log(c); // [7, 9]
</script>

• 可以给默认值

<script>
	let arr2 = [1, 2, 3, 4];
	let [d, e, f, g = 88] = arr2;
	console.log(d, e, f, g) //1 2 3 4
</script>

• 可以通过…接受剩余内容（…叫做不定参）
  如上图所示，…c指的是除了1，3，5剩余的内容
• 可以快速交换变量

<script>
	var k = 100;
	var j = 50;
	[k, j] = [j, k];
	console.log(k, j); //50 100
</script>

4.对象解构（就是把对象解析为单独的变量）

• 不用按顺序解构

<script>
	let obj = {name:"mx",age:18,job:"teacher"}
	let{age,name} =obj;
	console.log(name);//mx
	console.log(age);//18
</script>

5.字符串方法

1. 查找
   （1） includes检测是否包含字符串，包含返回true，不包含返回false
   （2） startsWith以…开头
   （3） endsWith 以…结尾

<script>
	var str= "我爱我的祖国，我的祖国，是中国的国";
	alert(str.includes('他乡'))//false
	alert(str.startsWith("我恨"))//false
	alert(str.endsWith("国"))//true
</script>

2. 遍历 for of（可以遍历出来生僻字，特别生僻字是占两个字节）

// 特别生僻字是占两个字节
<script>
	var str = "田里的水太多了，你做𠮷口，把水放出来!";
	for(var i=0;i<str.length;i++){
			console.log(str[i]);
	} //打印不出来𠮷
	for(let s of str){
		console.log(s);
	}
</script>

3. 填充 补齐
   (1) padStart（len,symbol)填充在前面
   (2) padEnd（len,symbol)填充后面

<script>
	var str ="1";
	// 补齐3位数，不够用0来填充
	console.log(str.padStart(3,"0"))//001
	console.log(str.padEnd(4,"_"))//1___
</script>

4. 去空白
   (1) trim 两端
   (2) trimLeft 左侧
   (3) trimRight 右侧

<script>
	var mystr = "  你好，东三街怎么走  ";
	console.log(mystr);
	console.log(mystr.trim())
</script>

5. 字符串模板 `` ${} 可以写简单js表达式
   01 拼接字符串时候特别好用
   02 可以任意换行
   03 标点符号，特殊符号，直接写

<script>
		var name = "刘x";
		var s = "好学生";
		var str =`<p class="myp">
		我的“${s}”是
		<strong>'${name}'</strong>
		</p>`;
		console.log(str);
</script>

6.数组新增方法

1. sort 排序
2. ES6新增
   find查找符合条件元素
   findIndex查找符合条件元素的下标

<script>
	var arr = [2, 4, 6, 7, 8];
	var el = arr.find(function(item) {
		if (item > 5) {
			return true;
					}
			})
	var el = arr.find(item => item > 5);
	console.log(el); //6
	var index = arr.findIndex(function(item) {
		return item > 5;
	})
	alert(index); //2
</script>

3. forEach 遍历
   forEach(function(item,index,self))
   item当前遍历的元素
   index当前的下标
   self被遍历的数组
   var arr1 = ["小红", "小绿", "小蓝", "小紫", "小黑"]; arr1.forEach(function(item, index, self) { console.log(item, index, self); })

4. filter 过滤

<script>
// filter 过滤不符合条件的元素（返回true保留，返回false过滤掉）
		var arr2 = arr.filter(function(item){
			return item%2===0;
		})
		// console.log("arr2",arr2)
		// filter通常可以实现数组的去重
		var arr3 = [1,1,2,2];
		// 1 item  0  0 true 保留
		// 1 item  0  1 false 过滤
		// 2 item  2  2 true 保留
		// 2 item  2  3 false 过滤
		
		var arr4 = arr3.filter(function(item,index){
			// 获取元素查找出来的下标
			var ind = arr3.indexOf(item);
			if(ind===index){
				// 如果查找出的下标与遍历下标一致，元素保留
				return true
			}else{
				return false;
			}
		})
		console.log("arr4",arr4)
		</script>

5. map 映射

// map 映射，一一对应的方式产生一个新的数组
<script>
		var arr=[2,4,6,7,8];
		var arr5 = arr.map(function(item){
			return {num:item*2}
		})
		console.log("arr5",arr5)
</script>

6. reduce累计 上次的结果是当次的条件
   reduce(function(a,b)) a 上一次返回的结果 b当前遍历的元素

<script>
		// 数组的求和
		var total = arr.reduce(function(a,b){
			return a+b;
		})
		// a:2  b:4  return 6
		// a:6  b:6  return 12
		// a:12 b:7	 return 19
		// a:19 b:8	 return 27
		console.log(total);
		var big = arr.reduce(function(a,b){
			return a*10+b;
		})
		console.log("big",big);
</script>

7. some有一个 some 有一返回真，着整体为真

<script>
		var arr6 = [5,1,2,12,3,7];
		// 判断arr6里面是否有一个大于10的数
		var isbig = arr6.some(function(item){
			return item>10;
		})
		console.log("isbig",isbig);
</script>

8. every每一个 every所有的回调函数返回为真，才返回真

<script>
		// 查找所有的数是否都大于5
		var bigF = arr6.every(function(item){
			return item>5;
		})
		console.log("bigF",bigF)
		
		//
		</script>