ES6--常用基础知识

一、什么是ES6

ES6是ECMAScript 6的简称，它是 JavaScript 语言的下一代标准，他的目的在于使 JavaScript语言可以用于编写复杂的大型应用程序，成为企业级开发语言

1、let 和 const 命令

在es6之前我们定义变量只有一个关键字var，但是var存在着一个问题，就是定义的变量会莫名其妙的变成全局变量，这样就使变量的作用范围变大了，让我们在使用的过程中变得不是和方便，特别是在做一个很复杂的页面的时候；

let声明的变量只在let所在的代码块内有效，这就完美的解决了var的问题；
const声明的是常量，不能被修改；

2、字符串扩展
在ES6中，为字符串扩展了几个新的API：

• includes() ：返回布尔值，表示是否找到了参数字符串。
• startsWith() ：返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith() ：返回布尔值，表示参数字符串是否在原字符串的尾部。

ES6中还提供了 ` 来作为字符串模板标记

<script>
    let str = `	鸿星尔克牛逼
				蜜雪冰城加油
				台风烟花快走`;
 	alert(str);
</script>

在两个`之间的部分都会被作为字符串的值，可以任意换行。

3、解构表达式
ES6中允许按照一定模式从数组和对象中提取值，然后对变量进行赋值

<script>
	// 数组
    let arr = [1,2,3];
    const [x,y,z] = arr;
    console.log(x,y,z);
	// 对象
	const person = { 
		name:"jack_xiong", 
		age:26, 
		language: ['java','js','css'] 
	};
    const {name,age,language} = person;
    console.log(name,age,language); 
</script>

4、函数参数默认值
在es6之前，我们无法给函数的参数设置默认值

function add(a , b) { 
	// 判断b是否为空，为空就给默认值1
	b = b || 1; 
 	return a + b;
  }
  // 传一个参数 
  console.log(add(10));

// es6
function add(a , b = 1) { 
	return a + b; 
}
// 传一个参数
 console.log(add(10));

5、箭头函数

/*
 没有参数---没有参数需要使用（）进行占位
 */
let sayHello = () => console.log("hello!"); 
// 多行，没有返回值 
let sayHello = () => { 
	console.log("hello!"); 
	console.log("world!"); 
}
/*
 单个参数
 */
var print = function (obj) { 
	console.log(obj); 
}
// 简写为： 
var print2 = obj => console.log(obj);

/*
多个参数
*/
var sum = function (a , b) { 
	return a + b; 
}
// 简写为： 
var sum2 = (a,b) => a+b;

6、箭头函数结合解构表达式

const person = { 
	name:"jack_xiong", 
	age:26, 
	language: ['java','js','css'] 
};
function hello(person) { 
	console.log("hello," + person.name) 
}
// 箭头函数结合解构表达式
var hi = ({name}) => console.log("hello," + name); 
hi(person)

7、map和reduce

map() ：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

	// 举例：有一个字符串数组，我们希望转为int数组
	let arr = ['5','20','13','14'];
    console.log(arr);
    let newArr = arr.map(s => parseInt(s));
    console.log(newArr);

reduce() ：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：
第一个参数是上一次reduce处理的结果
第二个参数是数组中要处理的下一个元素
reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数
（比较复杂，感觉在工作中用的不多，有需要的朋友可以自行实验）

8、扩展运算符（…）
扩展运算符(spread)是三个点(…)， 将一个数组转为用逗号分隔的参数序列。

// 数组合并 
let arr = [...[1,2,3],...[4,5,6]]; 
console.log(arr); //[1, 2, 3, 4, 5, 6] 
// 与解构表达式结合 
const [first, ...rest] = [1, 2, 3, 4, 5]; 
console.log(first, rest) //1 [2, 3, 4, 5] 
//将字符串转成数组 
console.log([...'hello']) //["h", "e", "l", "l", "o"]

9、set和map

Set，本质与数组类似。不同在于Set中只能保存不同元素，如果元素相同会被忽略。和java中的Set集合非常相似。

    let set = new Set([2,3,4,2,3,4,5,5]);
    console.log(set);

    let set1 = new Set(["鸿星尔克","蜜雪冰城","蜜雪冰城","台风烟花","鸿星尔克"]);
    console.log(set1);

> set.add(1);				// 添加 
> set.clear();				// 清空 
> set.delete(index);			// 删除指定元素 
> set.has(index);				// 判断是否存在 
> set.forEach(function(){})	//遍历元素 
> set.size; 					// 元素个数。是属性，不是方法

map，本质是与Object类似的结构。不同在于，Object强制规定key只能是字符串。而Map结构的key可以是任意对
象。即：

object是 <string,object>集合
map是<object,object>集合

// map接收一个数组，数组中的元素是键值对数组 
const map = new Map([ 
	['key1','value1'], 
	['key2','value2'], 
]);
// 或者接收一个set 
const set = new Set([ 
	['key1','value1'], 
	['key2','value2'], 
]);
const map2 = new Map(set);
// 或者其它map 
const map3 = new Map(map);

map.set(key, value);// 添加 
map.clear();// 清空 
map.delete(key);// 删除指定元素 
map.has(key); // 判断是否存在 
map.forEach(function(key,value){})//遍历元素 
map.size; // 元素个数。是属性，不是方法 
map.values() //获取value的迭代器 
map.keys() //获取key的迭代器 
map.entries() //获取entry的迭代器 用法： 
for (let key of map.keys()) { 
	console.log(key); 
}
或：
console.log(...map.values()); //通过扩展运算符进行展开

10、class（类）的基本语法
JavaScript 语言的传统方法是通过构造函数定义井生成新对象。ES6中引入了class的概念，通过class关键字自定义类。