ES6新语法

Posted 2022-05-08 shineguang

1.常量

        ES5没有定义声明常量的方式，ES6标准中引入了新的关键字const来定义常量。

        常量必须给初始值； 常量不能在同一作用域内重新定义或赋值； 

<script>
    const PI = 3.14;
    console.log(PI);
</script>

2.块级作用域

         JS中作用域有：全局作用域、函数作用域

         ES6中新增了块级作用域。

         块作用域由 包括，if语句和for语句里面的 就属于块作用域。(不包括函数)

//注意 块级作用域中，使用var声明的变量是全局变量

    var a = 1;
    console.log(a);//1

console.log(a);//1

if(true)
    var b = 2;
    console.log(b);//2

console.log(b);//2

2.2、let关键字声明块级变量

           ES6中增加了let关键字声明变量，声明的变量只在当前代码块中生效（块级作用域）。

         使用let声明的变量可以重新赋值,但是不能在同一作用域内重新声明

<script>
      // let声明的变量可以重新赋值
    
        let a = 1;
          console.log(a);
          a = 2;
         console.log(a);;
    
</script>

<script>
  // let声明的变量不能在同一作用域重新声明，直接报错 预解析错误
  
      let a = 1;
      console.log(a);
      let a = 2;
      console.log(a);

</script>

2.3、let变量没有变量提升

     console.log(i);//报错
    let i = 8;

2.4、应用：let块级变量解决i丢失的问题

var arr = [3,4,5,6,7];

for(let i=0; i<arr.length; i++)
    // (function(i)
        setTimeout(function()
            console.log(i);
            //console.log(arr[i]);
        , 1000);
    // )(i);

3.字符串模板(模板字面量)

            js中单双引号字符串，均不解析变量，需要使用+号将变量拼接在字符串中。 

         ES6中提供了字符串模板语法，允许使用反引号（倒引号） `` 来创建字符串，里面可以包含$变量名形式的变量占位符。 其中的变量会被解析。

//生成一个随机数
var num=Math.random();

//将这个数字输出到console
console.log(‘your num is ‘ + num);
console.log(`your num is $num`);

var str = `hello
欢迎来到黑马大讲堂`;
console.log(str);

 4.函数     

4.1 参数默认值

//ES5中，只能变相实现参数默认值（函数内部加判断处理）
function f1(username)
    //传统的指定默认参数的方式
    var username = username || ‘zhangsan‘;
    console.log(‘Hello ‘ + username);

f1();//Hello zhangsan
f1(‘lisi‘);//Hello lisi


//ES6中，直接给形参设置默认值
function f2(username=‘zhangsan‘)
    console.log(`Hello $username`);
    //console.log(‘Hello ‘ + username);


f2();//Hello zhangsan
f2(‘lisi‘);//Hello lisi

4.2 展开运算符（拆包）

          ES6新增了展开运算符（用三个连续的点 (...) 表示），能够将数组和字符串字面量展开为多个元素

//展开数组
var arr = [1, 2, 3];
console.log(arr); // [1, 2, 3]
console.log(...arr); // 1 2 3
//展开字符串
var str = "hello";
console.log(str);
console.log(...str);

          应用：拓展参数   

        它允许传递数组或者类数组直接做为函数的参数。

//函数本来接收三个单独的参数
function f3(x,y,z)
    console.log(x,y,z);


//ES6中，我们可以将一个数组以拓展参数的形式传递，它能很好地映射到每个单独的参数
var arr=[3,4,5];
f3(...arr);//输出：3 4 5 

//ES5中，如果需要传递数组当参数，我们需要使用函数的apply方法
f3.apply(null,arr);//输出：3 4 5 

4.3 不定参数(可变参数/剩余参数)

           不定参数是指，在函数中使用 命名参数 同时接收 不定数量 的 未命名参数，需要使用三个连续的点 (...) 。

         这是一种语法糖(在原语法上的简化用法)，ES5通过函数内部的arguments对象来达到类似效果。

         不定参数的格式：

//不定参数 将多个实参放在一个数组变量中
//  ...x  三个点是固定格式，x是形参变量名
function f1(...x)
    console.log(x);

f1(3,4,5); //[3,4,5]

function f2(m, n, ...x)
      console.log(m, n, x);

f2(2,3,4,5,6); // m=2  n=3  x=[4,5,6]