ES6（一）：let和const、模板字符串、函数默认值、剩余参数、扩展运算符、箭头函数
一、let和const声明变量
1.let没有变量提升，把let放下面打印不出来，放上面可以
<script>
console.log(a);
let a=1;
</script>2.let是一个块级作用域,花括号里面声明的变量外面找不到
<script>
console.log(b);
if(true)
{
let b=1;
}
//undefined
if(true)
{
let b=1;
}
console.log(b);
//undefined
console.log(b);
if(true)
{
var b=1;
}
//undefined
if(true)
{
var b=1;
}
console.log(b);
// 1
</script>3.不能重复声明
<script>
let a=1;
let a=2;
console.log(a);
</script>var会覆盖，但是let会报错，可以避免写代码的时候重复命名问题
4.const
const赋值之后，变量值就不能再修改了
<script>
const a=1;
a=2;
console.log(a);
//报错
</script>const people={
name:'ttt'
}
people.name='hhh';
console.log(people.name);// hhh
const people={
name:'ttt'
}
people={
age=18
}
console.log(people.age);// 报错const也能声明对象这种常量，不可以修改对象，可以修改对象里的一些属性
5.let和const相同点和不同点
相同：都不能重复声明、是块级作用域、没有变量提升
不同：const赋值之后不能修改
6.优点
（1）for循环用let比var好
<script>
var a=[];
for(var i=0;i<10;i++)
{
a[i]=function(){
return i;
}
}
console.log(a[5]());
</script>最后输出来是个10，我悟了，学js的时候遇到过这个问题当时没搞懂，i是全局变量的意思是，如果i变了，其他地方的i都变（整个页面都是这一个i），上面这段输出的不管a[几]都是10。下面第一段i没走完就去赋值，结果正常，第二段没有变量提升所以也正常。
var a=[];
for(var i=0;i<10;i++)
{
a[i]=i;
}
console.log(a[1]);const a=[];
for(let i=0;i<10;i++)
{
a[i]=function(){
return i;
}
}
console.log(a[1]());for里面肯定不用const，后面++会被改
（2）不会污染全局变量
let RegExp=10;
console.log(RegExp);//10
console.log(window.RegExp);//f RegExp[]window的对象不会被改
总结：默认情况下用const，除非你要修改再用let
二、模版字符串
<script>
var p=document.querySelector('p');
var id='hh';
const text='lilili';
div.innerHTML="<ul><li><p id="+id+">"+text+"</p></li></ul>";
</script>以前写是这样的，要拼接字符串，升级版：
var div=document.querySelector('div');
const id='hh';
const text='lilili';
div.innerHTML=`<ul>
<li>
<p id=${id}>${text}</p>
</li>
</ul>`;id和text用${}包起来，这种方法类似在body写
三、函数默认值、剩余参数、扩展运算符
1.函数默认值
以前写一个加和函数的话：a b 如果没有输入得有一个默认值。
<script>
function add(a,b){
a=a||10;
b=b||20;
return a+b;
}
console.log(add());
</script>ES6中：
<script>
function add(a=10,b=20){
return a+b;
}
console.log(add(20,30));
</script>可以直接在（）中写
function add(a,b=20){
return a+b;
}
console.log(add(20));//40?
function add(a=20,b){
return a+b;
}
console.log(add(20));//报错老师讲的是只给一个值，像第一种a可以给到，b有值，能出结果，第二种肯定不行，但是我浏览器上第一种也不行，都是NaN
function zhi(c){
return c+5;
}
function add(a=zhi(4),b=20){
return a+b;
}
console.log(add());//29默认值也可以用函数来写。
2.剩余参数
以前我们传参数的时候，不确定有几个参数值不是就用arguments伪数组来代替吗，如下：
<script>
let obj={
title:'算法',
name:'ttt',
age:18
}
function pick(obj){
//对象肯定得给我传进来，后面你选择了啥不一定
let result=Object.create(null);
//创建一个对象，最后这个函数得把函数返回出去
for(var i=1;i<arguments.length;i++)
//从1开始，0是对象
{
//arguments[i]是name 和age;
result[arguments[i]]=obj[arguments[i]];
//arguments[i]才是里面的值
}
return result;
}
let hh=pick(obj,'name','age');
//把obj对象中的name、age用pick方法选出来，存到hh对象中去
console.log(hh);
</script>
es6中：用...具名参数指定剩余参数
function pick(obj,...keys){
//keys可以随便取
//对象肯定得给我传进来，后面你选择了啥不一定
let result=Object.create(null);
for(let i=0;i<keys.length;i++)
//从0开始
{
//keys[i]是name 和age;
result[keys[i]]=obj[keys[i]];
//keys[i]才是里面的值
}
return result;
}
let hh=pick(obj,'title','age');
//把obj对象中的name、age用pick方法选出来，存到hh对象中去
console.log(hh);区别就是...是真数组，arguments是伪数组；obj对应let hh=pick(obj,'title','age');中的obj，所以i就从1开始了。
3.扩展运算符
剩余参数是把多个独立的合并到一个数组中去，扩展运算符就是把一个数组分割，并将各个项作为分离的参数给函数。
（1）以前我们想要获取两个数组中最大值的时候用apply
let a=[1,2,3,4];
let b=[1,3,5,2];
console.log(Math.max.apply(a,b));//5es6:不再用apply了
let b=[1,3,5,2];
console.log(Math.max(...a));//5let b=[1,3,5,2];
let a={
c:1,
...b
}
console.log(a);
a那里再...就不行了
四、箭头函数
1.箭头函数的语法
用=>代替之前的function。
// let arr=function(a,b){
// return a+b;
// }
let arr=(a,b)=>a+b
//两个形参必须加（）
console.log(arr(10,20));没有参数的情况：
let arr=()=>'hh'
console.log(arr(10,20));输出是个数组的话得用（）包起来
// let arr=id=>{
// return{
// id:'id',
// name:'hh'
// }
// }
let arr=id=>({ id:'id',name:'hh'});
let obj=arr(1);
console.log(obj);2.对象中的函数和箭头函数
let people={
name:'hh',
eat:function(food){
console.log(this.name+'吃了'+food);
},
eat2:food=>console.log(people.name+'吃了'+food),
eat3:(food){
console.log(people.name+'吃了'+food);
}
}
people.eat3('chincken');3.箭头函数的this指向
function的this就是看外面是谁，箭头函数的this就得往外翻两层
箭头函数没有this指向，箭头函数内部this只能通过查找作用域链来确定。
例1:
let Person = {
name: 'zzy',
age: 18,
getAge: function () {
console.log(this.age);
}
}
Person.getAge(); //18
let Person = {
name: 'zzy',
age: 18,
getAge: () => {
console.log(this.age);
}
}
Person.getAge(); //undefined
用function的时候，this指向的就是这个函数的调用者，但是用箭头函数，this就得翻两层，第二个指向外面的外面就是window，window没有age属性。
例2:
let Dj = {
id: 007,
drop: function () {
document.addEventListener('click', function () {
console.log(this); //document
this.dance();
})
},
dance: function () {
console.log('drop the beat');
}
}
Dj.drop(); //报错
这是一个dj对象，调用dj.drop，点击document之后发生事件，调用者是document，所以this指向document，而document没有dance方法
let Dj = {
id: 007,
drop: function () {
document.addEventListener('click', () => {
console.log(this); //Dj
this.dance();
})
},
dance: function () {
console.log('drop the beat');
}
}
Dj.drop(); //drop the beat
点击之后因为有箭头函数，this就得往外翻两个大括号到dj里面，有dance这个方法
let Dj = {
id: 007,
drop: () => {
document.addEventListener('click', () => {
console.log(this); //window
this.dance();
})
},
dance: function () {
console.log('drop the beat');
}
}
Dj.drop(); //报错
现在是往外翻四次，到了window 里面，没有dance方法
例3：
（es5的）中bind是让newfn复制一份fn过来，这个新函数的this被bind的第一个参数指定，其余的参数将作为新函数的参数供调用时使用。所以再次调用fn还是指向window
let people={
name:'hh',
color:'pink'
}
function fn(){
console.log(this);
return ()=>{
console.log(this);
}
}
fn();
let newfn=fn.bind(people);
newfn();
//Window {window: Window, self: Window, document: document, name: '', location: Location, …}
{name: 'hh', color: 'pink'}4.箭头函数的注意事项
1.箭头函数内部没有arguments了（arguments 是一个伪数组对象。代表传给一个function的参数列表。）this都指向window 了，arguments是外两层了不能用，没有外一层了。
2.箭头函数不能使用new关键字来事例化对象，function 是一个对象，但是箭头函数其实不是一个对象，是一个语法糖。
原文地址：https://blog.csdn.net/Hdhhdhbsjxbdhvyg/article/details/136624010
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！