es if语法 script_ES学习与巩固

很多人经常用ES6，但对ES6没有一个整体全面的了解。这篇文章适合新手学习，更适合老手复习巩固，让我们一起学起来把…

目录：
一. 块级作用域、块级变量let、块级常量const
二. 箭头函数
三. 参数处理（默认参数/...）
四. 模板字面量(模板字符串)
五. 对象的扩展
六. 解构赋值
七. 模块（import/export）
八. 类（class/extends）
九. Promise
十. End 感谢阅读

一. 块级作用域、变量let、常量const

由一对{ }界定的语句叫做块语句，这在其他编程语言中叫做复合语句。

块：由{}包括住
   if(){}：是一个块
   for(){}：是一个块

   一个函数：函数作用域
   <script>标签：全局作用域

2. JS中用var声明的变量是没有块级作用域的，只有函数作用域和全局作用域。

var x = 1;
{
  var x = 2;
}
console.log(x);
//会输出2，因为块中的var语句与块前面的var语句作用域相同
//这代码证明了var没有块作用域

3. 相比之下，使用 let 和 const 声明的变量是有块级作用域的。

let x = 1;
{
  let x = 2;
}
console.log(x); 

// 输出 1，x被限制在块级作用域中
// 这里将let换成const结果也一样

4. 经典的例子（背住）：

var a = [];
for (var i = 0; i < 10; i++) {
      a[i] = function () {console.log(i);};
}
a[0]();                // 10
a[1]();                // 10
a[6]();                // 10

/********************/

var a = [];
for (let i = 0; i < 10; i++) {
      a[i] = function () {console.log(i);};
}
a[0]();                // 0
a[1]();                // 1
a[6]();                // 6

5. 注意let不能重复声明;不会变量提升

二. 箭头函数

基础语法：

//一般语法：
(参数1, 参数2, …, 参数N) => { 函数声明 }

//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
(参数1, 参数2, …, 参数N) => 表达式（单一）

// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}

// 没有参数的函数应该写成一对圆括号
() => {函数声明}

三. 参数处理

1. 给函数设置默认参数值

function multiply(a, b = 1) {
  return a * b;
}

multiply(5, 2); // 10
multiply(5);    // 5

2. 剩余参数（...）

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

function(a, b, ...theArgs) {
   ...
}
//必须是函数的最后一个参数以...为前缀
//它是由剩余实参组成的Array数组

3. 展开运算符（...）

在函数调用时使用展开语法：

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));

构造字面量数组或对象时使用展开语法：

var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes']; 

var obj1 = { foo: 'bar', x: 42 };
var mergedObj = { ...obj1,y: 50 };

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

由反引号 ` 来代替单引号 ' 或者双引号 " 。

//单行
`string text`

//多行
`string text line 1
 string text line 2`

//插入表达式
var a = 5;
var b = 10;
console.log(`a + b is ${a + b}`)

五. 对象的扩展

创建对象时键值对重名的可以简化

var name="pan";
var age=20;
var people = {
      name,
      age,
      getName(){
           console.log(this.name)
      }
};

计算属性名（属性名可以用表达式）

var i = 0;
var a = {
  ["foo" + ++i]: i,
  ["foo" + ++i]: i,
  ["foo" + ++i]: i
};
console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3

六. 解构赋值

解构数组语法：

var [x, y] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 2

解构对象语法：

var {p, q} = {p: 42, q: true};;
console.log(p); // 42
console.log(q); // true

七. 模块（import/export）

导出export

var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

//默认导出
export default function foo() {
  console.log('foo');
}

导入import

import {firstName, lastName, year} from './profile.js';

//默认导入
import foo from './default.js';

八. 类

ES6 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。

如何创建类：

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

如何使用类：

class Rectangle {
    // constructor
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    // Getter
    get area() {
        return this.calcArea()
    }
    // Method
    calcArea() {
        return this.height * this.width;
    }
}
const square = new Rectangle(10, 10);
console.log(square.area);
// 100

类的继承（extends）

class Animal { 
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
    constructor(name,age) {
        super(name);
        this.age = age;
    }
    speak() {
        super.speak();
        console.log(this.name + ' barks.');
    }
}
var d = new Dog('Mitzie',2);
d.speak(); // 'Mitzie makes a noise.'  'Mitzie barks'

九. Promise 对象

基本用法

var p = new Promise(function(resolve,reject) {
    setTimeout(function() {
        resolve("hello");
    },2000);
});
p.then(res => {
    console.log(res);  // 可以return一个参数，传给下一个then，也可以return一个对象
}).catch(err => {      // 有多个then的时候，catch可以捕捉前面所有then的错误
    console.log(err);
});

Promise.all()

p1,p2都成功p才会成功，有一个失败，p就会失败

var p = Promise.all([p1,p2]);
p.then(res => {
    console.log(res);  //p1,p2的返回值组成的数组
}).catch(err => {
    console.log(err);
})

Promise.race()

p1,p2哪个先出结果，就把它的结果返回给p，无论成功或失败

var p = Promise.race([p1,p2]);
p.then(res => {
    console.log(res);  
}).catch(err => {
    console.log(err);
})

finally()

不管成功或失败都会执行

p.then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
}).finally(() => {  //不接受任何参数
    console.log("very good");
});

asnyc await

function fn1() {
    return new Promise(function(resolve,reject) {
        setTimeout(function() {
            console.log(1);
            resolve();
        },1000);
    });
}
function fn2() {
    return new Promise(function(resolve,reject) {
        setTimeout(function() {
            console.log(2);
            resolve();
        },2000);
     });
}
function fn3() {
    setTimeout(function() {
        console.log(3);
    },1000);
}
async function fn() {
    await fn1();
    await fn2();
    fn3();
}
fn();

十. End 感谢阅读

感谢阅读，感兴趣的同学来波关注，关注不迷路，一起探索前端知识，共同学习成长！

参考文章 https:// zhuanlan.zhihu.com/p/59 683520

原文链接：https://blog.csdn.net/weixin_31031711/article/details/112438753