微信公众号php网站开发,企业网站服务门户,用闲置的安卓手机做网站服务器,中国建设银行网上银行一、let和const声明变量
1.let没有变量提升#xff0c;把let放下面打印不出来#xff0c;放上面可以
scriptconsole.log(a);let a1;/script
2.let是一个块级作用域,花括号里面声明的变量外面找不到
scriptconsole.log(b);if(true){let b1;}//und…一、let和const声明变量
1.let没有变量提升把let放下面打印不出来放上面可以
scriptconsole.log(a);let a1;/script
2.let是一个块级作用域,花括号里面声明的变量外面找不到
scriptconsole.log(b);if(true){let b1;}//undefinedif(true){let b1;}console.log(b);//undefinedconsole.log(b);if(true){var b1;}//undefinedif(true){var b1;}console.log(b);// 1/script
3.不能重复声明
scriptlet a1;let a2;console.log(a);/script
var会覆盖但是let会报错可以避免写代码的时候重复命名问题
4.const
const赋值之后变量值就不能再修改了
scriptconst a1;a2;console.log(a);//报错/script
const people{name:ttt}people.namehhh;console.log(people.name);// hhhconst people{name:ttt}people{age18}console.log(people.age);// 报错
const也能声明对象这种常量不可以修改对象可以修改对象里的一些属性
5.let和const相同点和不同点
相同都不能重复声明、是块级作用域、没有变量提升
不同const赋值之后不能修改
6.优点
1for循环用let比var好
scriptvar a[];for(var i0;i10;i){a[i]function(){return i;}}console.log(a[5]());/script
最后输出来是个10我悟了学js的时候遇到过这个问题当时没搞懂i是全局变量的意思是如果i变了其他地方的i都变整个页面都是这一个i上面这段输出的不管a[几]都是10。下面第一段i没走完就去赋值结果正常第二段没有变量提升所以也正常。
var a[];for(var i0;i10;i){a[i]i;}console.log(a[1]);
const a[];for(let i0;i10;i){a[i]function(){return i;}}console.log(a[1]());
for里面肯定不用const后面会被改
2不会污染全局变量
let RegExp10;console.log(RegExp);//10console.log(window.RegExp);//f RegExp[]
window的对象不会被改
总结默认情况下用const除非你要修改再用let
二、模版字符串
scriptvar pdocument.querySelector(p);var idhh;const textlilili;div.innerHTMLullip ididtext/p/li/ul;/script
以前写是这样的要拼接字符串升级版
var divdocument.querySelector(div);const idhh;const textlilili;div.innerHTMLullip id${id}${text}/p/li/ul;
id和text用${}包起来这种方法类似在body写
三、函数默认值、剩余参数、扩展运算符
1.函数默认值
以前写一个加和函数的话a b 如果没有输入得有一个默认值。
scriptfunction add(a,b){aa||10;bb||20;return ab;}console.log(add());/script
ES6中 scriptfunction add(a10,b20){return ab;}console.log(add(20,30));/script
可以直接在中写
function add(a,b20){return ab;}console.log(add(20));//40?function add(a20,b){return ab;}console.log(add(20));//报错
老师讲的是只给一个值像第一种a可以给到b有值能出结果第二种肯定不行但是我浏览器上第一种也不行都是NaN
function zhi(c){return c5;}function add(azhi(4),b20){return ab;}console.log(add());//29
默认值也可以用函数来写。
2.剩余参数
以前我们传参数的时候不确定有几个参数值不是就用arguments伪数组来代替吗如下
scriptlet obj{title:算法,name:ttt,age:18}function pick(obj){//对象肯定得给我传进来后面你选择了啥不一定let resultObject.create(null);//创建一个对象最后这个函数得把函数返回出去for(var i1;iarguments.length;i)//从1开始0是对象{//arguments[i]是name 和age;result[arguments[i]]obj[arguments[i]];//arguments[i]才是里面的值}return result;}let hhpick(obj,name,age);//把obj对象中的name、age用pick方法选出来存到hh对象中去console.log(hh);/script es6中用...具名参数指定剩余参数
function pick(obj,...keys){//keys可以随便取//对象肯定得给我传进来后面你选择了啥不一定let resultObject.create(null);for(let i0;ikeys.length;i)//从0开始{//keys[i]是name 和age;result[keys[i]]obj[keys[i]];//keys[i]才是里面的值}return result;}let hhpick(obj,title,age);//把obj对象中的name、age用pick方法选出来存到hh对象中去console.log(hh);
区别就是...是真数组arguments是伪数组obj对应let hhpick(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));//5
es6:不再用apply了
let b[1,3,5,2];console.log(Math.max(...a));//5
let b[1,3,5,2];let a{c:1,...b}console.log(a); a那里再...就不行了
四、箭头函数
1.箭头函数的语法
用代替之前的function。
// let arrfunction(a,b){// return ab;// }let arr(a,b)ab//两个形参必须加console.log(arr(10,20));
没有参数的情况
let arr()hhconsole.log(arr(10,20));
输出是个数组的话得用包起来
// let arrid{// return{// id:id,// name:hh// }// }let arrid({ id:id,name:hh});let objarr(1);console.log(obj);
2.对象中的函数和箭头函数 let people{name:hh,eat:function(food){console.log(this.name吃了food);},eat2:foodconsole.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(); //18let Person {name: zzy,age: 18,getAge: () {console.log(this.age);}
}
Person.getAge(); //undefined用function的时候this指向的就是这个函数的调用者但是用箭头函数this就得翻两层第二个指向外面的外面就是windowwindow没有age属性。
例2:
let Dj {id: 007,drop: function () {document.addEventListener(click, function () {console.log(this); //documentthis.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); //Djthis.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); //windowthis.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 newfnfn.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 是一个对象但是箭头函数其实不是一个对象是一个语法糖。
