ES6的新特性

2024-10-24

前端要会ES6，那么什么是传说中的ES6。

视频教程推荐尚硅谷的教程。另推荐阮一峰的ECMAScript 入门，一本开源书。

以下是我的总结：

目录

ES是什么

为什么要学习 ES6

let变量特性

cosnt常量特性

ES6解构赋值

ES6模版字符串

ES6简化对象写法 

ES6箭头函数

ES6允许参数的初始值

ES6 rest参数，即省略号 - 参数转数组

ES6扩展运算符 - 数组转参数

ES是什么

ES是ECMAScript的简称，ECMAScript是脚本语言的规范。而我们所使用的JavaScript是ECMAScript的一种实现。

ECMAScript 是由 Ecma 国际通过ECMA-262 标准化的脚本程序设计语言。

为什么要学习 ES6？

ES6 的版本变动内容最多，具有里程碑意义。

如果发生了兼容问题，babel可以把ES6编译成ES5，解决部分落后浏览器不兼容的问题。

let变量特性

1. 变量不能重复声明

let star = ‘罗志祥’
let star = ‘小猪’
//不被允许

2. 块级作用域

//if else while for
// {
// let girl = ‘周扬青’
// }
console.log(girl) //undefined

3. 不允许变量申明前使用

console.log(song)
let song = ‘恋爱达人’
//不允许使用

cosnt常量特性

1. 必须有初始值

const A; //失败

2. 一般常量用大写

const A = 100;

3. 常量的值不能更改

4. 块级作用域

5. 对于数组和对象的元素修改，不算对常量的修改，不会报错。

const TEAM = [‘UZI’, ‘MXLG’, ‘MING’];
TEAM.push(‘MEIKO’)
//因为常量对应的引用地址（指针）没变，因此不会报错。

ES6解构赋值

//数组结构
const F4 = [‘小沈阳’, ‘刘能’, ‘赵四’, ‘宋小宝’];
let [xiao, liu, zhao, song] = F4;
console.log(xiao);
console.log(liu);
console.log(zhao);
console.log(song);

//对象结构
const zhao = {
	name: ‘赵本山’，
	age: 18,
	xiaopin: function(){console.log(‘我可以演小品’};
}

let {name, age, xiaopin} = zhao
cosole.log(name);
cosole.log(age);
console.log(xiaopin);

xiaopin(); //如果不解构赋值，要zhao.xiaopin()触发

ES6模版字符串

ES6模版字符串``

用``框起来的，和''以及""是一样的，类型都是字符串。

特点：

1. 可以直接出现换行符

let str = `<ul>
<li>沈腾</li>
<li>玛丽</li>
</ul>`

2. 实现变量的拼接

let lovest = ‘魏翔’;
let out = `${lovest}是我心目中最搞笑的演员。`

ES6简化对象写法

允许大括号里面，直接写入变量和函数。不用写冒号。

let name = ‘尚硅谷’;
let change = function(){console.log(‘我们可以改变你!”)}

const school = {name, change, improve({console.log(“improve”)}}

//正确写法应该是name: name, change:change, improve:function(){}， 只要key和value相同，就可以简写。 冒号和function也可以省略。

ES6箭头函数

什么是箭头函数的形式？

let fn = () =>{}

箭头函数与传统函数function()的区别：

1. this是静态的，始终指向函数声明时所在作用域下的this的值。传统函数的this是动态的，谁调用我，我就指向谁。

function getName(){console.log(this.name)}

let getName2 =  () => {console.log(this.name)}

//设置window对象的name属性
window.name = “尚硅谷”;
const school = {name: “ATGUIGU”}

//直接调用
getName();
getName2();
//以上结果都一样，都是“尚硅谷”。

//call方法调用：call方法是可以改变this指向的值的
getName.call(school); //ATGUIGU
getName2.call(school); //尚硅谷

2. 不能作为构造函数去实例化对象

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

let me = new Person(‘xiao’, 30);
console.log(me); //报错，Person不是一个构造器constructor

3. 不能使用arguments变量

let fn = () => {console.log(arguments)};
fn(1,2,3); //报错

4. 箭头函数的简写

• 省略小括号，当形参有且只有一个。

let add = n => {return n+n};

• 省略花括号，当代码体只有一条语句的时候。此时’return’必须省略。而且语句的执行结果就是函数的返回值。

let pow = n => n*n;

扩展：JS的函数返回值

• 如果规定了return，则返回值是return的结果；
• 如果没有规定return，则默认返回值是undefined;
• 箭头函数的代码体只有一句语句时，语句的执行结果就是函数的返回值；

案例-返回数组的偶数项

const arr = [1,6,9,10,100,25]

//传统做法:
const result = arr.filter(function(item){
	if(item%2===0){
		return true;
	}else{
		return false	
}
})

//箭头函数做法
cosnt result = arr.filter(item => item % 2 === 0);
//只要是偶数的值，就返回。

箭头函数不适合与this有关的回调

比如（点击）事件回调，对象的方法

{name: ‘atguigu’,
getName: function(){
	this.name}}

//这个this是值当前对象的this，而不是外层函数的this。
//箭头函数的this指的是创建时的this，即外层函数的this。
//不适合，不是不能

ES6允许参数的初始值

1. 形参初始值

//具有默认值的参数，一般位置靠后。
function add(a,b,c=10){
	return a+b+c
}

result = add(1,2) //这里不用传入c
console.log(result);

2. 与解构赋值结合

function connect({host,username,password}){
	console.log(host);
	console.log(username);
	console.log(password);
	console.log(port)
}

connect({
	host: ‘localhost’,
	username: ‘root’,
	password: ‘root’,
	port: 3306
})

ES6 rest参数，即省略号 - 参数转数组

1. 可以快速获取arguments，而且是数组的形式

function date(…args){
	console.log(args); //因为结果是数组，可以用数组方法比如filter some every map
}

date(‘阿娇’,’柏芝’, ‘思慧’)

2. rest参数必须放到参数最后

function fn(a,b,…args){
console.log(a);
console.log(b);
console.log(args);
}

fn(1,2,3,4,5,6)

ES6扩展运算符 - 数组转参数

将[数组]转换为逗号分隔的[参数序列]。

//声明一个数组
const tfboys = [‘易烊千玺’, ‘王源’, ‘王俊凯’];

//声明一个函数
function chunwan(){
	console.log(arguments);
}

chunwan(…tfboys); //等同于chunwan(‘易烊千玺,’王源’,’王俊凯’)，1个数组元素变3个参数。

扩展运算符的运用

1. 数组的合并

const kuaizi = [‘王太利’,’肖央’]：
const fenghuang = [‘曾毅’,’玲花’];

//传统方法
//const zuixuanxiaopingguo = kuaizi.concat(fenghuang)

//扩展运算符方法
const zuixuanxiaopingguo = […kuaizi, …fenghuang]

console.log(zuixuanxiaopingguo)

2. 数组的克隆

const sanzhihua = [‘E’, ‘G’, ‘M’]
const sanyecao = […sanzhihua];

3. 将伪数组转化为真正的数组。

const divs = document.querySelectorAll(‘div’)
const divArr = […divs];

ES模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

模块化的好处

1. 防止命名冲突。把大文件分为若干小文件，小文件中的代码命名是互不干扰的。

2. 代码复用。封装功能代码，暴露一个接口即可。下一个项目就可以复用这个功能。

3. 高维护性。允许多人同时修改一个项目，升级时也只变动某些模块即可。

模块化规范产品

ES6之前的模块化规范，主要是社区推出的：

1. CommonJS => NodeJS, Browserify

2. AMD => requireJS

3. CMD => seaJS

ES6模块化语法

主要是两个命令：exprt import

ES6暴露语法规则

• 分别暴露

// 分别暴露
export let school = 'MIT';

export function teach() {
  console.log('teach');
}

• 统一暴露

// 统一暴露

let school = 'MIT';

function findJob() {
  console.log('we can help you find a job');
}

export {school, findJob};

• 默认暴露

// 默认暴露

export default {
    school: 'MIT',
    change() {
        console.log('we can change the world');
    }
}

ES6引入语法规则

• 三种引入方式：通用的导入方式、解构赋值的方式导入、简便导入方式（仅针对默认暴露）

<script type="module">
// 1. 通用的导入方式
/*         //引入m1.js模块内容
import * as m1 from './js/m1.js';

// 引入m2.js模块内容
import * as m2 from './js/m2.js';

// 引入m3.js模块内容
import * as m3 from './js/m3.js';

//调用m3.js模块中的方法
m3.default.change(); */

// 2. 解构赋值的方式导入
/*         import {school, teach} from './js/m1.js';
import {school as guigu, findJob} from './js/m2.js'; //school重名，起别名guigu
import {default as m3} from './js/m3.js'; //default为m3.js中的默认导出
*/

// 3. 简便导入方式 - 只针对默认暴露
import m3 from './js/m3.js';

// console.log(school);
// teach();

// console.log(guigu);
// findJob();

console.log(m3.school);
m3.change();

</script>

• 入口文件方式

html引入app.js:

<script src="./js/app.js" type="module">'

app.js再引入其他js文件：

// 入口文件

// 模块引入
import * as m1 from './m1.js';
import * as m2 from './m2.js';
import * as m3 from './m3.js';

console.log(m1);
console.log(m2);
console.log(m3);

• Babel方式

Babel是一个JavaScript编译器，可以把ES6语法转化为更具兼容性的ES5语法，使浏览器的显示正常。

babel方式教学视频。