一、为什么要学习ES6？
ES6是JavaScript的下一代标准，解决了es5中存在的问题。
二、语法
1、let const
let 1、只在所处的块级有效，而var 不具有块级作用域，防止循环变量变成全局变量，
2、不存在变量提升，只能先声明再使用
3、具有暂时性死区，不会在上一级中查找
const 作用：用于声明变量，就是内存（地址）不变的量
具有块级作用域
使用时必须赋初值
2、解构赋值
- 数组解构 es6允许从数组中提取值，按照对应位置，对变量赋值
<script>
// ES6中允许从数组中提取值，按照对应位置，对变量赋值
let ary = [1,2,3];
let [a,b,c] = ary //a b c 与ary中的值一一对应
</script>-
对象解构 使用变量的名字匹配对象的属性 匹配成功将对象属性的值赋值给变量
<script>
//
let person = {
name:'lisi',
age:20,
sex:'nan'
}
// 如果我们要把里面的值取出来
// person.name per.age person.sex 需要重复声明三个变量
let {name , age , sex} = person
console.log(name);
let {name:myname} = person; //name 只是用来匹配属性的，真正的值是myname
console.log(myname);
</script>3、箭头函数
箭头函数是用来简化函数定义语法的
用法： （参数1，参数2，参数3...）=>{函数体}
注意：
1、如果只有一个参数，可以省略小括号
2、函数体中只有一句代码，且代码执行的解构就是返回值，就省略大括号
const sum = (num1,num2) => num1+num2
3、箭头函数不绑定this关键字，箭头函数的this指向要根据上下文来确定；
如果箭头函数被定义在普通函数 fn这个区域中，那么this指向就是fn 这个区域中的this;
如果函数被定义在定时器函数中，由于定时器this指向windows，那么这里的箭头函数this也是指向windows
4、剩余参数
此语法允许在传递参数时 将一个不定数量的参数表示为一个数组 用...args来表示
<script>
const sum = (...args)=>{
let total = 0;
// forEach是遍历数组的，item是数组中的每一项
args.forEach(item =>total += item)
return total;
}
console.log(sum(10,20,30));
console.log( sum(1,2,3,4,5,6));
// 配合数组解构使用
let ary1 = ['pink','blue','pure'];
let [s1,...s2] = ary1;
console.log(s1);
console.log(s2); //['blue','pure']
</script>三、ES6中数组扩展方法以及新增API
1、扩展运算符
- 可以将数组或者对象转为用逗号隔开的参数序列
- 用于合并数组
<script>
// 方法1 将两个数组都使用扩展运算符转换为逗号隔开的序列，再整合一个数组
let ary1 = [1,2,3];
let ary2 = [4,5,6];
//...ary1 // 1,2,3
// ...ary2 // 4,5,6
ary3 = [...ary1,...ary2]
console.log(ary3);
// 方法2 利用push方法，Push方法实际上可以接收多个参数
ary1.push(...ary2)
console.log(ary1);
</script>- 将伪数组或可遍历对象转换为真正的数组 用于什么？ 只有真正的数组才可以使用push.pop.filter.forEach等所有操作数组的方法
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
<script>
//利用扩展运算符将伪数组转换为真正的数组
var oDivs = document.getElementsByTagName('div')
console.log(oDivs);
var ary4 = [...oDivs]; // 这是一个真正的数组，可以使用数组的push pop 等方法
// console.log(ary4);
ary4.push('a');
console.log(ary4);
</script>2、Array.from方法
将伪数组转换为真正的数组
用法：Array.from(参数1，参数2) 参数1-待转换的伪数组 参数2-对转换后的数组进行操作，通常是一个函数
<script>
var arrayLike = {
'0':'jerry',
'1':'tom',
'2':'lisa',
'length':3
}
// 此方法接收一个伪数组作为参数，返回一个真正的数组
var ary = Array.from(arrayLike);
console.log(ary);
// 此方法还可以接收第二个参数，作为类似于数组的map方法，用来对转换后的数组成员进行处理，将处理后的值放入返回的数组
var arrayLike2 = {
'0':'1',
'1':'2',
length:2
}
var ary2 = Array.from(arrayLike2,item =>item * 2)
console.log(ary2); // [2,4]
</script>3、新增API
-
.find() 用于找出第一个符合条件的数组成员，如果没有找到就返回undefined
<script> var ary = [{ id:1, name:'jerry' },{ id:2, name:'lisa' }]; let target= ary.find(item =>item.id ==2) console.log(target); </script>返回的是符合条件的数组成员
- .findIndex() 用于找出第一个符合条件的数组成员的位置，如果没有找到就返回-1
<script> let ary = [5,9,10,16]; let index = ary.findIndex(value=>value >9) console.log(index); // 2 10是第一个满足要求的成员 </script>返回的是这个成员位置的索引号
- .includes() 表示某个数组是否包含给定的值
<script> let ary = ['a','b','c']; console.log(ary.includes('a')); //true console.log(ary.includes('e')); //false </script>返回的是布尔值
四、字符串
1、模板字符串
ES6中的模板字符串是用反问号定义的
特点 可以解析变量 用于拼接i字符串
可以实现换行
可以调用函数
2、扩展方法
startsWith 表示参数字符串是否在原字符串的头部，返回布尔值
endsWith 表示参数字符串是否在原字符串的尾部，返回布尔值