ES6的新特性

最新推荐文章于 2024-07-06 00:11:00 发布

lillian14

最新推荐文章于 2024-07-06 00:11:00 发布

阅读量150

点赞数

分类专栏：前端文章标签： 1024程序员节

本文链接：https://blog.csdn.net/lillian14/article/details/109254466

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

速写属性

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

lillian14

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6的新特性

速写属性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
复制链接

扫一扫