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.


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
 

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);

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
 

深层递归冻结

/**
* 深层递归冻结
*/
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);


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
 

声明变量关键字：
优先使用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
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
 

以下情况不适用箭头函数

场景1: 事件回调函数

<button id="btn">按钮</button>

<script>
  const btn = document.querySelector("#btn"); btn.addEventListener("click", function () { this.style.backgroundColor = "red";
  });
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

场景2：对象内方法

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

场景3：函数内使用arguments

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

sum(1, 2);

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

场景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);

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

解构赋值

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

// 对象解构赋值
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);

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
 

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);

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
 

3、解构赋值应用

（1）作为数组参数

function sum(arr){
  let result = 0;
  for (let i = 0; i < arr.length; i++) { result += arr[i];
  }
  console.log(result);
}

const arr = [1, 2, 3];
sum(arr);

// 改写如下
function sum([a, b, c]) {
  console.log(a + b + c);
}

const arr = [1, 2, 3];
sum(arr);

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
 

（2）作为对象参数

// pet有默认参数
function foo({ name, age, pet = "pig" }) { console.log(name, age, pet);
}

const obj = { name: "Tom", age: 23,
};

foo(obj);

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

（3）作为函数返回值

function foo() { return { name: "Tom", age: 23, };
}

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

（4）交换变量的值

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b);

  

 

  
1
  
2
  
3
  
4
 

（5）解析json时使用

const res = '{"name": "Tom", "age": 23}';
const {name, age} = JSON.parse(res);
console.log(name, age);

  

 

  
1
  
2
  
3
 

（6）Ajax请求应用

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

data.json

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

  

 

  
1
  
2
  
3
  
4
 

Babel浏览器兼容

ES6 -> Babel -> ES5

  

 

  
1
 

环境配置
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

  

 

  
1
  
2
  
3
  
4
 

3、创建配置文件

cat .babelrc

{ "presets": ["env"]
}

  

 

  
1
  
2
  
3
  
4
  
5
 

4、文件转化

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

  

 

  
1
  
2
  
3
 

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/108699408