Day 27 27.3 JS进阶之ES6新语法

JS进阶之ES6新语法

1. var、let以及const

• ES6 中引入了关键字 let 和 const 作为 var 的替代。
  • 它们非常有用，如今几乎每个 JavaScript 开发人员都在使用它们。
• 与关键字 var 不同，这两个关键字具有块作用域。
  • 这意味着当你在块中声明它们时，它们只能在该块 {} 内访问。

// for (var i=0;i<10;i++){
//     console.log(i)
// }
// console.log(i)


for (let i=0;i<10;i++){
    console.log(i)
}
console.log(i)

• 变量提升
  • 看以下代码, 或多或少会有些问题的.

function fn(){
    console.log(name);
    var name = 'dream';
}
fn()

• 发现问题了么.
  • 这么写代码, 在其他语言里. 绝对是不允许的.
  • 但是在js里. 不但允许, 还能执行. 为什么呢?
    • 因为在js执行的时候. 它会首先检测你的代码. 发现在代码中会有name使用. OK. 运行时就会变成这样的逻辑:

function fn(){
    var name;
    console.log(name);
    name = 'dream';
}
fn()
console.log(a);

• 看到了么.
  • 实际运行的时候和我们写代码的顺序可能会不一样....
  • 这种把变量提前到代码块第一部分运行的逻辑被称为变量提升.
  • 这在其他语言里是绝对没有的. 并且也不是什么好事情. 正常的逻辑不应该是这样的.
  • 那么怎么办?
    • 在新的ES6中. 就明确了, 这样使用变量是不完善的.
    • es6提出. 用let来声明变量. 就不会出现该问题了.

function fn(){
    console.log(name);  // 直接报错, let变量不可以变量提升.
    let name = 'dream'; 
}
fn()

• 结论一
  • 用let声明变量是新版本javascript提倡的一种声明变量的方案
• let还有哪些作用呢?

function fn(){
  
    var name = "rain";
    var name = "dream";
    console.log(name);
}
fn()

• 显然一个变量被声明了两次.
  • 这样也是不合理的.
  • var本意是声明变量.
  • 同一个东西. 被声明两次.
  • 所以ES6规定. let声明的变量.
    • 在同一个作用域内. 只能声明一次.

function fn(){

    let name = "dream";
    let name = "rain";
    console.log(name);
}
fn()

• 注意, 报错是发生在代码检查阶段.
  • 所以. 上述代码根本就执行不了.
• 结论二
  • 在同一个作用域内.
  • let声明的变量只能声明一次.
    • 其他使用上和var没有差别。
• 除了 let，ES6 同时还增加了 const 关键字。
  • 使用 const 声明的变量必须同时初始化为某个值。
  • 一经声明，在其生命周期的任何时候都不能再重新赋予新值。

 
<script>
        // const声明常量必须赋初始值
        const a=6;//合法有效
        const b;//报错 SyntaxError，必须赋初始值才可以
  
       // const声明的常量不能更改
        const a=6;//合法有效
        a=7;//报错，不能更改
  
       /*
       对于const声明的原始数据类型，一旦声明变不能更改，但是对于引用数据类型，虽然不能重新赋值给某个新的引用类型变量。但是操作操作引用数据类型变量中的元素或者属性却是合法的。因为这些操作不会改变引用数据类型的地址。
       */
  
       const obj={};
       obj.name="南山行者";//合法有效
       console.log(obj);

       const arr=[1,2,3];
       arr.push(3);//合法有效
       arr.shift();//合法有效
       console.log(arr);
   
</script>

2. ES6中的箭头函数

• 在ES6中简化了函数的声明语法.

// es6允许使用“箭头”(=>)定义函数。
var f = v => v
// 等同于
var f = function(v) {
 return v
}

// 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
var f = () => 5
// 等同于
var f = function() {
   return 5
}
 
var sum = (num1, num2) => num1 + num2
// 等同于
var sum = function(num1, num2) {
   return num1 + num2
}

// 如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
var sum = (num1, num2) => {return num1 + num2}

//由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 报错
let getUser = id => {id: id, name: "dream"}
// 不报错
let getUser = id => ({id: id, name: "dream"})


// 箭头函数的一个用处是简化回调函数。
// 正常函数写法
[1, 2, 3].map(function(x) {
 return x * x
})
// 箭头函数写法
[1, 2, 3].map(x => x * x)

3. ES6对象简写

var name = "dream"
var age = 22

function run() {
    console.log(this.name + " running")
}

p1 = {
    name,
    age,
    eat: function () {
        console.log(this.name + " is eating")
    },
    run: run,
}

p1.eat()
p1.run()

4. ES6格式化

• ES6中允许使用反引号 ` 来创建字符串，

• 此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量 ${vraible}。

var num = Math.random()
console.log(`生成一个随机数：${num}`)