欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  移动技术

ES6的新特性

程序员文章站 2022-03-25 11:35:42
速写属性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>

ES6的新特性

用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

相关标签： 前端 1024程序员节

上一篇： 纳兰性德与曹雪芹是什么关系？曹雪芹笔下的贾宝玉是纳兰性德吗？

下一篇： 使用vue如何实现收藏夹

推荐阅读