ES6 记录

最新推荐文章于 2022-07-18 22:06:11 发布

原创最新推荐文章于 2022-07-18 22:06:11 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ES6

ES6 专栏收录该内容

4 篇文章

订阅专栏

声明严格模式

'use strict';
//严格模式下必须遵守规范 否则会报错
//严格模式下函数只能声明在当前作用域的顶层
//ES6 的块级作用域必须有大括号{}，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。

一、ES6声明变量的六种方法

1.var：可在全局范围内都有效，存在变量提升即在未定义调用返回 undefined 可重复声明先执行的会被覆盖，声明的全局变量属于顶层对象属性

2.function ：定义方法，声明的全局变属于顶层对象属性

3.let：只在局部作用域有效不存在变量提升即在未定义前调用会报错相同作用域内不可重复声明，声明的全局变不属于顶层对象属性

4.const：声明一个只读的常量。一旦声明，常量的值就不能改变，声明后必须直接赋值作用域与 let 相同，声明的全局变不属于顶层对象属性；const 变量指向的那个内存地址所保存的数据不得改动，数据类型不可更改，但对于复合类型的数据（主要是对象和数组）更改方式

例子一
const Obj = {};
// 为 Obj 添加一个属性，可以成功
Obj.prop = 123;
Obj.prop // 123
// 将 Obj 指向另一个对象，就会报错
obj= {};

例子二
const arr = [];
arr.push('Hello'); // 可操作
arr.length = 0;    // 可操作
arr = ['Dave'];    // 报错

例子三 冻结对象
//冻结对象使用Object.freeze方法
const Obj = Object.freeze({});
// 常规模式，不起作用；
// 严格模式，报错
Obj.prop = 'abc';

例子四 彻底冻结
//将对象彻底冻结的函数
var constantine = (Obj) => {
  Object.freeze(Obj);
  Object.keys(Obj).forEach( (key, i) => {
    if ( typeof Obj[key] === 'object' ) {
      constantine( Obj[key] );
    }
  });
};

五、class（类）:声明类某些情境下可以代替function

//写法一
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

写法二
class Point {
  constructor(){
    // ...
  }
}

Object.assign(Point.prototype, {
  toString(){},
  toValue(){}
});
//调用
var point=new Point()

六、import：用于加载模块如果想要加载模块就需要先有模块供加载

1.export

// export命令 用于规定模块的对外接口
//export命令可以出现在模块的任何位置，只要处于模块顶层就可以,不可处于块级作用域内

// 这个是一个名称为 profile.js 的.js文件 里面定义了三个模块
export var name= 'marry';
export var age= '23';
export var year = 2019;

//下面是对外接口的另一种方式 推荐使用此方法 因为此方法定义在文件底部可以清晰直观的看到对外接口是什么
export {name, age, year};

//expor t命令除了输出变量，还可以输出函数或类（class）
//profile.js
export function multiply(x, y) {
  return x * y;
};

//使用as关键字重命名
//profile.js
function a() { ... }
function b() { ... }

export {
  a as fnA,
  b as fnB,
  b as fnC
};
//b可以用不同的名字输出两次

2.import：命令具有提升效果多次执行同一句import语句只会执行一次

//用export命令定义了模块的对外接口后，其他文件就可以通过import命令加载这个模块

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

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

//如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。
import { lastName as surname } from './profile.js';

//不允许在加载模块的脚本里面，改写接口
import {mmm} from './xxx.js'
mmm = {}; //这样是完全错误的

//import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径，.js后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。
import {myMethod} from 'util';
 
//命令具有提升效果 如
fn();//可以执行
import { fn } from 'profile.js';


import { fn1 } from 'my_module';
import { fn2 } from 'my_module';
// 等同于
import { fn1, fn2 } from 'my_module';


//整体模块加载
// circle.js
export function area(radius) {
  return Math.PI * radius * radius;
}
export function circumference(radius) {
  return 2 * Math.PI * radius;
}
//加载所有模块
import * as circle from './circle';
//调用
circle.area（10）