ES6的新特性
程序员文章站
2022-06-22 11:21:09
速写属性var _name="abc";var _age=12;var obj={_name,_age,}速写方法//以前var obj={ name:"zhangsan", sayHello:function(){ console.log(this.name); }}//现在var obj={ name:"zhangsan", sayHello(){ console.log(this.name); }}箭头函数//原来var ob...
速写属性
var _name="abc";
var _age=12;
var obj={
_name,
_age,
}
速写方法
//以前
var obj={
name:"zhangsan",
sayHello:function(){
console.log(this.name);
}
}
//现在
var obj={
name:"zhangsan",
sayHello(){
console.log(this.name);
}
}
箭头函数
//原来
var obj={
name:"zhangsan",
sayHello:function(){
setInterval(function () {
console.log(this.name); //this 指向有问题
},3000);
},
};
//箭头函数
var obj={
name:"zhangsan",
sayHello(){
setInterval( ()=> { //箭头函数改变this指向
console.log(this.name);
},3000);
},
};
举例求和函数
var num=function (a,b){
return a+b;
}
var num1 = (a,b) => a+b;
console.log(num1(3,4));
7
模板字符串和普通函数的区别
外形不一样
普通函数：
function fun1(){
}
箭头函数
var fun1=()=>{
}
1.箭头函数是匿名函数，简化函数定义的形式，
2.箭头函数不可以做构造函数创建对象，不能用new
3.箭头函数没有原型属性
4.由于箭头函数不绑定this， 它会捕获其所在（即定义的位置）上下文的this值， 作为自己的this值，
所以 call() / apply() / bind() 方法对于箭头函数来说只是传入参数，对它的 this 毫无影响。
考虑到 this 是词法层面上的，严格模式中与 this 相关的规则都将被忽略
//this的指向是obj
var obj={
name:"lillian",
sayHello(){
setInterval(()=>{
console.log(this.name); //lillian
},1000)
}
}
//打印的不是obj的name
this的指向有问题,这里指向window
var obj={
name:"lillian",
sayHello(){
setInterval( function(){
console.log(this.name); //打印的不是obj的name
},1000)
}
}
undefined
模板字符串
var str=`asdffgg`;
//特点： 随意换行 显示也换行
var name="成哥";
var age=14;
console.log(`姓名：${name},年龄：${age}"`);
VM65:4 姓名：成哥,年龄：14" //相当于在拼接
对象声明新加了，可用class
原来用构造函数
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.sayHello=function(){
return ("my name is "+this.name+",my age is "+this.age);
}
var person=new Person("LILLIAN",20);
console.log(person.sayHello());
用class
class Person{
constructor(name,age){
this.name=name;
this.age=age;
}
sayHello(){
return ("my name is "+this.name+",my age is "+this.age);
}
}
var person=new Person("LILLIAN",20);
console.log(person.sayHello());
let 和 const
是ES6新增的，为了弥补var的缺点
1.变量作用域：变量再什么范围內是可用的。
{
var name="ailian";
console.log(name);} //var 没有块级作用域 所以{}有无没有不同
//ailian
console.log(name);
//ailian
2. 没有块级作用域引起的问题.(var 没有块级作用域)
比如 ：if 和 for循环
if(true){
var name="ailian";
}
console.log(name); //ailian
for循环块级
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</body>
<script>
var btns=document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++){
btns[i].addEventListener("click",function(){
console.log("第"+i+"个按钮被点击");
})
}
</script>
用let来改善
var btns=document.getElementsByTagName("button");
for(let i=0;i<btns.length;i++){
btns[i].addEventListener("click",function(){ //用let定义 有块级作用域 i 独立
console.log("第"+i+"个按钮被点击");
})
}
方法2
一次执行函数(闭包）
为什么闭包可以解决for循环的块级？
因为function是一个作用域
var btns=document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++){
(function(i){
btns[i].addEventListener("click",function(){
console.log("第"+i+"个按钮被点击");
})
}(i))
} //为什么闭包可以解决for循环的块级？因为function是一个作用域
const
注意点1：用const修饰的标识符，一旦被赋值，就不能被改变。
注意点2：在使用const定义标识符，必须要赋值（与var let不同）
注意点3：常量的含义是指向的对象不能被修改，但是属性可以被修改
const obj={
name:"123",
age:17
}
const obj={}
Uncaught SyntaxError: Identifier 'obj' has already been declared
obj.age=10
10
本文地址：https://blog.csdn.net/lillian14/article/details/109254466