JS：ES6（ES2015）新特性之常量、箭头函数、解构赋值

几个概念

1、JavaScript VS ECMAScript

ECMAScript 一种标准 JavaScript 一种标准的实现

2、ES6 == ES2015

ES6 版本号 ES2015 发布年份

3、新特性 常量 Const 箭头函数 Arrow Function 解构赋值 Desctructuring

4、准备工具 开发工具 VSCode 插件 Live Server 浏览器 Chrome

const常量

// ES3声明常量，可以被修改
var BASE_NAME = "Tom";
BASE_NAME = "jack";
console.log(BASE_NAME);
// jack

// ES5声明常量，不可以被修改
Object.defineProperty(window, "es", {
    value: "Tom",
    writable: false
});

es = "Jack";

console.log(es);
// Tom

// ES6声明常量，不可以被修改
const es = "Tom";
es = "Jack"; 
// Uncaught TypeError: Assignment to constant variable.

const声明常量的特性：

• 如果声明的时候没有赋值，会抛出异常
• 不允许重复声明
• 不属于顶层对象window
• 不存在变量提升
• 必须先定义再使用，暂时性死区
• 存在块级作用域

如果const声明的是引用类型，内部元素可以被改变， 需要使用冻结，防止内部元素被改变

浅层冻结

const obj = {
    name: "Tom"
};
// 浅层冻结
Object.freeze(obj);

const arr = ['Tom'];
// 浅层冻结
Object.freeze(arr);

obj.name = "Jack";
arr[0] = "Jack";

console.log(obj);
console.log(arr);

深层递归冻结

/**
* 深层递归冻结
*/
function deepFreeze(obj){
    Object.freeze(obj);

    Object.keys(obj).forEach(key=>{
        if(typeof obj[key] === 'object'){
            deepFreeze(obj[key]);
        }                
    })
}

const obj = {
    name: "Tom",
    pets: ["dog", "cat"]
};

// Object.freeze(obj);
deepFreeze(obj);
obj.pets[0] = "pig";

console.log(obj);

声明变量关键字： 优先使用const，如果需要被改变再使用let

箭头函数

定义函数

function sum1(x, y){
    return x + y;
}

const sum2 = function(x, y){
    return x + y;
}

// 使用箭头函数
const sum3 = (x, y) => {
    return x + y;
}

const sum4 = (x, y) => x + y;

const sum5 = x => {/*方法体*/};

以下情况不适用箭头函数

场景1: 事件回调函数

按钮


  const btn = document.querySelector("#btn");

  btn.addEventListener("click", function () {
    this.style.backgroundColor = "red";
  });

场景2：对象内方法

const person = {
  name: "Tom",
  showName: function(){
    console.log(this.name);
  }
}
person.showName();

场景3：函数内使用arguments

function sum(x, y){
  console.log(arguments);
  return x + y;
}

sum(1, 2);

场景4：构造函数、原型方法

function Person(name, age){
  this.name = name;
  this.age = age;
}

Person.prototype.showName = function(){
  console.log(this.name);
}

const person = new Person("Tom", 23);
person.showName();

console.log(person);

解构赋值

等号左右两边结构要完全一致

// 对象解构赋值
const obj = {
    name: "Tom",
    age: 23,
};

// const name = obj.name;
// const age = obj.age;

const { name, age } = obj;
console.log(name, age);


// 数组解构赋值
const arr = [0, 1, 2];

// const a = arr[0];
// const b = arr[1];
// const c = arr[2];
const [a, b, c] = arr;

console.log(a, b, c);

2、结构赋值取别名

const obj = {
    name: "Tom",
    age: 23,
    pet: {
      name: "bigo",
    },
  };
  // pet.name 别名 petName
  const {
    name,
    age,
    pet: { name: petName },
  } = obj;

  console.log(name, age, petName);

3、解构赋值应用

（1）作为数组参数

function sum(arr){
  let result = 0;
  for (let i = 0; i 


 axios.get("./data.json").then(({name, age})=>{
     console.log(name, age);
 })

data.json

{
    "name": "Tom",
    "age": 23
}

Babel浏览器兼容

ES6 -> Babel -> ES5

环境配置 1、环境 Node.js 2、初始化 npm init -y

3、安装依赖

npm install --save-dev babel-preset-env babel-cli

# 或者
npm i -D babel-preset-env babel-cli

3、创建配置文件

cat .babelrc

{
    "presets": ["env"]
}

4、文件转化

文件：babel src/index.js -o dist/index.js
文件夹：babel src -d dist
实时监控：babel src -w -d dist