ES6简介

什么是ES6?

ES的全称是ECMAScript

为什么使用ES6

每一次标准的诞生都意味着语言的完善，功能的加强。javaScript语言本身也有一些令人不满意的地方。

• 变量提升特性增加了程序运行时的不可预测性
• 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码。

ES6新增语法

let

ES6中新增的用于声明变量的关键字

注意:let声明的变量只在所处于的块级有效。

用let声明的变量不存在变量提升。

注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。

• let还可以防止循环变量变成全局变量。
• 用let声明的变量还存在暂时性死区(也就是说在外面声明的变量在块级作用域下使用然后再在块级作用域里面用let声明相同的变量这时就会报错)。

const

1. 作用：声明常量，常量就是值(内存地址)不能变化的量。
2. const具有块级作用域。
3. 声明常量必须赋值不然就会报错。
4. 常量赋值后不能被修改。复杂类型的值内部可以被修改但是不能赋值，比如说数组可以通过下标赋值(const a[0]=123)。

if(true){
   const a=10
}
console.log(a)//报错

注意:const声明的常量只能在他的作用域起效。

let、const、var 的区别

1. 使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升。
2. 使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。
3. 使用const声明的是常量，在后面出现的代码中不能修改常量的值。

ES6的新增语法

解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构。

数组解构

示例:

let arr=[1,2,3];
let [a,b,c]=arr;
console.log(a,b,c);
//[a,b,c]是解构也就是说abc的值是对应123并且对应这赋相应的值。如果数组里面有多个变量但是没有对应的值其结果就是未定义的。

对象解构

示例:

//匹配相应的值如果对象里面有相关属性就赋值
let obj={ name:'李四', age:18, sex:'男'}
let {name,age,sex}=obj;
console.log(name);
console.log(age);
console.log(sex);

箭头函数

1. ES6中新增的定义函数的方式

示例:

() => {}

const fn= () => {}

2. 函数体中只有一句代码，且代码执行结果就是返回值，可以省略大括号。

示例:

//原始写法
function sum(num1,num2){
	return num1+num2
}

//ES6新语法
const sum = (num1,num2) =>num1+num2;

3. 如果形参只有一个，可以省略小括号

示例:

function fn(v){
	return v
}
//ES6新语法
const fn = v => v;

箭头函数不绑定this关键字，如果要在箭头函数中使用this，那么this关键字将指向箭头函数定义位置中的this。

注意：对象不能产生作用域，如果对象属性里面有箭头函数那么this的指向是window。

剩余参数

1. 剩余参数语法允许我们将一个不确定数量的参数表示为一个数组。

示例:

function sum (frist,...args){
	console.log(frist);//10
	console.log(args);//20 30
}
sum(10,20,30)

…代表接收所有实参

示例:

//求和
 let getsum=(...args)=>{
	 let sum=0;
	 args.forEach((value,i,ele)=>{
		 sum=sum+value;
	 });
	 return sum;
 }
 let result=getsum(20,100);
 console.log(result);

2. 剩余参数可以和解构配合使用

示例:

//剩余参数和解构配合使用
let arr=['张三','李四','王二'];
let [ar,...args]=arr;
console.log(ar);
console.log(args);

Array的扩展方法

扩展运算符(展开语法)

1. 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列(在console.log里面逗号将被解析成空格符)。

示例:

let arr=['a','b','c'];
console.log(...arr);

2. 扩展运算符还可以应用于合并数组

示例:

//扩展运算符合并数组(方法1)
let arr1=[1,2,3];
let arr2=[4,5,6];
let arr3=[...arr1,...arr2];
console.log(arr3);

//方法二
let arr1=[1,2,3];
let arr2=[4,5,6];
arr1.push(...arr2)
console.log(arr1);

3. 将伪数组转换为真正的数组这样做的好处就是能够使用数组里面的方法。

示例:

//利用扩展运算符将伪数组变成真正的数组
let div=document.querySelectorAll('div');
let ary=[...div];
ary.push('a','b');
console.log(ary);

构造函数方法：Array.form()

该方法可以接受两个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组,可以把伪数组转化成真正的数组。

实例方法：find()

find()方法用于找出第一个符合条件的数组成员,如果没有找到返回undefined。

示例:

//find方法
let arr = [{
		id:1,
		name:'张三',
		age:18
	},
	{
		id:2,
		name:'李四',
		age:20
	}
];
let target=arr.find((vlaue,index)=>{
	return vlaue.id==2;
});
console.log(target);

案例方法:findIndex()

用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1。

示例:

//findIndex()方法
let ary=[20,14,34,56,64,28];
let res=ary.findIndex((item,index)=>{
	return item< 20;
});
console.log(res);	

案例方法:includes()

表示某个数组是否包含给定的值，返回布尔值。

示例:

// 数组去重let arr2 = ['A', 'C', 'C', 'B','D','B','A'];
var xarr=[];
arr2.forEach((value)=>{
	if(xarr.includes(value)==false){
		xarr.push(value);
	}
});
console.log(xarr);

//indexof()方法案例
let arr1 = ['pink', 'green', 'blue', 'red','blue','pink','red'];
let newarr=[];
arr1.forEach((value,index)=>{
  if(newarr.indexOf(value)===-1){
     newarr.push(value)
  }
});
console.log(newarr);	

string的扩展方法

模板字符串

1. ES6新增的创建字符串的方式使用反引号定义。

​ let name =张三

2. 模板字符串可以解析变量

let name =`张三`;
let sayhello=`hello,my name is ${name}`;

3. 模板字符串可以换行
4. 在模板字符串中可以调用函数。

示例:

//模板字符串
let result={
	name:'张三',
	age:18,
	sex:'男'
}
let html=`
	<div>
		<span>${result.name}</span>
		<span>${result.age}</span>
		<span>${result.sex}</span>
	</div>
`
console.log(html);

实例方法:startswith()和endswith()

1. startswith():表示参数字符串是否在原字符串的头部，返回布尔值。
2. endswith():表示参数字符串是否在原字符串的尾部，返回布尔值。

示例:

//startswith()方法和endswith()方法
let str='我不是张三 哈哈哈!';
let res1=str.startsWith('我不是张三');
let res2=str.endsWith('哈哈哈!');
console.log(res1);
console.log(res2);

实例方法:repeat()

repeat()方法表示将原字符串重复n次，返回一个新字符串。

示例:

// repeat()方法
let str='张三\t'.repeat(5);
console.log(str);

set数据结构

1. ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
2. Set本身是一个构造函数，用来生成Set的数据结构。
   let s = new Set();
3. Set函数可以接受一个数组作参数，用来初始化。
   let set1 = new Set([1,2,3,4,5,6]);

示例:

//Set数据结构
let s = new Set([1,4,5,6,7]);
console.log(s.size);

示例:

//利用Set数据结构对数组进行去重
let item = new Set(['blue','red','green','pink','red','blue','green']);
let res=[...item];
console.log(res);

set的实例方法

1. add(value):添加某一个值，返回set结构本身。
2. delete(value):删除某一个值，返回一个布尔值，表示删除是否成功。
3. has(value):返回一个布尔值，表示该值是否为set的成员。
4. clear():清除所有成员，没有返回值。

示例:

//Set实例方法add();
let b = new Set();
let res1=b.add('a').add(2).add(true);
console.log(b.size);
console.log(res1);

//Set实例方法delte();
let res2=b.delete(2);
console.log(b.size);
console.log(res2);

//Set实例方法has();
let res3=b.has(2);
console.log(b.size);
console.log(res3);//已经删除了2这里has表示不存在这个元素。

//Set实例方法clear()
let res4=b.clear();
console.log(b.size);

遍历

Set结构的实例与数组一样，也拥有forEach方法，用于对每一个成员执行某种操作，没有返回值。

示例:

//Set可以用forEach()方法进行遍历;
let f = new Set(['张三','李四','王二']);
f.forEach((value)=>{
	console.log(value);
});