es6新特性_ES6新特性(一)

  • 块级作用域

    通过var声明的变量或者非严格模式下创建的函数声明没有块级作用域。

     一个{}表示一个块级作用域

    通过let声明的是块级作用域

  •   var  let    const

  var

       1:var声明的是函数作用域(局部),但在if  for等定义的变量是全局的

       2:var 具有变量提升,预解析

       3:在同一个作用域下,var可以声明多次

       4:var 声明的变量会挂载到window上

   let

       1:let不存在变量提升,在变量使用之前,必须要先声明

       2:let在同一作用域下,不能重名--可以避免全局变量被污染

      3:在for循环时,不会泄露到全局作用域(函数之外,for循环块作用域)

       4:let声明的全局变量,不会挂载到window上

       5:let有暂时性死区,所以必须先定义后使用

  const

      1:用于声明常量,后期在整个程序运行期间不可修改(除了对象数组)

      2:需要立即初始化,不能到后面赋值

      3:也是在块级作用域中才有效

      4:不存在常量提升 

  • 箭头函数()=>{.......}

    简写例子:

      sum=(a,b)=>a+b

      nums.forEach(item=>{console.log(item)})

   箭头函数的新特性:

  •  不能作为构造函数--不可以使用new命令--会抛出一个错误

  •  不可以使用arguments对象,采用的是剩余参数符(rest参数符)

       var arr=(...num)=>{console.log(num)//1,2,3,4,5 }

          arr(1,2,3,4,5)

  • 只能先定义后使用  可以简写只有一个形参,只有一个功能块并作为返回值返回时时可以简写

  • 箭头函数的this指向:指向外层函数作用域this的值

       箭头函数不能使用的场景:

     1:对象中的方法不能使用箭头函数

     2:给DOM绑定的事件不能使用箭头函数

  参数的处理

      1:参数默认值---直接写在参数定义的后面

      function(a,b=12){

    console.log(a+b)

     }

      2:剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

function sum(...theArgs) {

    return theArgs.reduce((previous, current) => {

      return previous + current;

    });

  }

  console.log(sum(1, 2, 3));

  // expected output: 6

  console.log(sum(1, 2, 3, 4));

  // expected output: 10

扩展:剩余参数和arguments的区别:

  • 剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参。

  • arguments对象不是一个真正的数组,而剩余参数是真正的 Array实例,也就是说你能够在它上面直接使用所有的数组方法,比如 sortmapforEachpop

  • arguments对象还有一些附加的属性 (如callee属性)。

  3:展开运算符...

扩展运算符功能:数据展开功能(类似于apply()) 、收集数据(类似于arguments)

运用场景:

 //在数组解构赋值中应用

        let arr = [1, 2, 3, 4];

        let [, x, ...y] = arr;

        console.log(x, y);

        let str = "testing";

        let arr2 = [...str];

        console.log(arr2);

扩展:连接多个数组

Array.concat 函数常用于将一个数组连接到另一个数组的后面。如果不使用展开语法, 代码可能是下面这样的:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// 将 arr2 中所有元素附加到 arr1 后面并返回
var arr3 = arr1.concat(arr2);

使用展开语法:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];
  • 字符串模板-----·`${}`

    特点:

     1:可以简化字符串拼接

    2:可以进行运算,可以写变量函数调用

    3:获取对象的属性

    4:任意javascript表达式

    5:可以换行

  • 属性名表达式

对象的key, 都是字符串, 字符串就是JS里的表达式 如果用变量作为key名字, 必须使用属性名表达式// 在设置属性名表达式时, 要使用[]语法糖// 前者叫属性名表达式, 后者叫标识符  obj['address'] = "我是地址"; // 相当于obj.address = "我是地址";   console.log(obj);
  • 对象简写 形式的两种方式:

属性名简写  方法名简写当属性名和属性值同名时 可以简写  当 key  和  value变量名   同名   只写key  (属性简写)let obj = {    'age':age,    'user':user}简写形式:和上面的效果一样let obj = {    age,    user}方法简写---只要是将:function可以省略 当 key  对应 value 是一个函数 , 可以省略 :function (方法简写)let obj = {    age,    user,    fn:function(){        console.log('加油')    }}方法简写形式:和上面的效果一样let obj = {    age,    user,    fn(){        console.log('加油')    }}
  • symbol 

  • ES6中的新的数据类型  表示独一无二的值

  • 凡是属性名属于Symbol类型 就是独一无二的 可以保证不会和其他的属性名产生冲突

  • 注意:for...in ,for...of 遍历时是不会遍历Symbol属性

    Symbol()函数会返回symbol类型的值,该类型具有静态属性和静态方法

    作用:

    每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符

直接使用Symbol()创建新的symbol类型,并用一个可选的字符串作为其描述。

var sym1 = Symbol();
var sym2 = Symbol('foo');
var sym3 = Symbol('foo');

上面的代码创建了三个新的symbol类型。注意,Symbol("foo") 不会强制将字符串 “foo” 转换成symbol类型。它每次都会创建一个新的 symbol类型:

Symbol("foo") === Symbol("foo"); // false

下面带有 new 运算符的语法将抛出 TypeError 错误:

var sym = new Symbol(); // TypeError
  • 改变this指向的三种方法:call  apply  bind

fn.call(this指向的对象,参数1,参数2...)fn.apply(this指向的对象,[参数1,参数2...])call(),apply()都是马上触发函数执行一次,对传入的对象绑定属性bind方法function fun(age){    this.name='卡卡';    this.age=age;}var obj={};fun.bind(obj,18);bind不会马上触发函数执行,会 拷贝一个功能一样的函数(内部this已经改变),但是这个函数没有执行,需要手动调用一次

9233370a7c5ac44e78263356ee211389.png❤Life is like macarone, colorful and sweet❤

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值