es6 提取数组对象一部分_前端开发学什么？ES6是什么前端技术？

web前端开发学什么？另外，前端开发中ES6是什么前端技术？今天为给大家整理进行解答。

前端ES6基础梳理

变量声明命令的比较

暂时性死区：如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

解构赋值

可以使用结构赋值的结构：具有 Iterator 接口的数据结构。

默认值

• ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效；
• 如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值；

注意

• 当一个已经声明的变量用于解构赋值时，不要将{}写在行首，否则会解析成代码块从而报错，可以用()包裹起来；
• 可以对数组进行对象属性的解构，如下：

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

用途

• 交换变量
• 从函数返回多个值
• 函数参数的定义
• 提取JSON数据
• 函数参数的默认值
• 遍历Map结构
• 引入模块的指定方法

扩展运算符

rest参数的逆运算

用途

• 复制数组
• 合并数组
• 与解构赋值结合
• 字符串转数组

函数扩展

​

箭头函数

• this指向定义时所在对象
• 不可以当作构造函数
• 没有arguments函数，使用rest参数

不适用箭头函数的情况

• 对象当中的方法使用到this，应使用普通函数==否则this指向全局==
• 动态的this，应使用普通函数==动态指向调用函数的元素==
• 复杂并且有大量读写操作的函数，应使用普通函数==提高可读性==

rest参数

• rest参数之后不能有其他参数
• 函数的length属性，不包括rest参数

数组扩展

对象扩展

属性的简洁表示法

• 属性名和变量名相同可以省略
• fn: function(){}=>fn(){}

属性名表达式

表达式可以作为属性名、方法名，但是和简洁表示法不能混用会报错

ES6 中Class（类）的概念

作者名：一朵鱼

类的数据类型为==函数==，类指向构造函数，类的所有方法都在类的prototype属性上面。

在类的实例上调用方法，就是在调用原型上的方法。

class B {}
let b = new B();

b.constructor === B.prototype.constructor; //true

类的内部定义的方法都是不可枚举的，与ES5不同。

constructor方法

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。没有显式定义时，会默认添加一个空的constructor方法。

类必须用new调用，否则会报错，普通构造函数不用new也可以执行。

类的实例

与 ES5 一样，类的所有实例共享一个原型对象。

注意

• 类和模块内部，默认就是==严格模式==
• 类==不存在==变量提升
• 类内部含有的this默认指向实例，如果单独使用类当中的方法会报错
• 方案一：在constructor中绑定this
• 方案二：使用箭头函数
• 方案三：使用Rroxy（具体待追加）

静态方法

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。

如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用。

注意，如果静态方法包含this关键字，这个this指的是类，而不是实例。

父类的静态方法，可以被子类继承。

静态方法也是可以从super对象上调用的。

class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
  static classMethod() {
    return super.classMethod() + ', too';
  }
}

Bar.classMethod() // "hello, too"

实例属性的新写法

class A {
  constructor() {
    this._count = 1;
  } 
}
                 ||
         ||
class A {
  _count = 1;
}

ES6模块化语法-export&import

作者名：一朵鱼

export

• 浏览器默认模块化 script 里加入 "type=module"；
• 导出 关键字 export
• 导出 方式一 ：js export { a ,b , c}
• 导出方式二 关键字 "as"js export { a as aa ,b , c}
• 导出方式三js export let c = ()=>{console.log("I am c function...")}
• 导出方式四js export default a;
  • 等同

js export {a as default};

• export 可以导出多个，export default 只能导出一个；

import

• 导入方式：关键字 import
• export导出的,命名要保持一致js import {aa , b , c} from './moduleb.js';
• export导出的，命名可以自定义；js import myfn from './moduleb.js';
• 通配符 "*"方式导入js import * as obj from './moduleb.js';
• 按需导入（延迟导入）

​ import 方法；

document.onclick =async function(){
    // import {fn1} from  './fn.js';
    let res = await import("./fn.js");
    console.log(res);
}