ES6笔记总结
首先我们需要了解一下什么是 ECMA:
ECMA(European Computer Manufacturers Association)中文名称为欧洲计算机制造商协会,这
个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为 Ecma 国际
什么是 ECMAScript?:
ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言;
百度百科:https://baike.baidu.com/history/ECMAScript/1889420/144946978
ECMA-262 历史?:
ES6 从开始制定到最后发布,整整用了 15 年。
前面提到,ECMAScript 1.0 是 1997 年发布的,接下来的两年,连续发布了 ECMAScript 2.0
(1998 年 6 月)和 ECMAScript 3.0(1999 年 12 月)。3.0 版是一个巨大的成功,在业界得到
广泛支持,成为通行标准,奠定了 JavaScript 语言的基本语法,以后的版本完全继承。直到今
天,初学者一开始学习 JavaScript,其实就是在学 3.0 版的语法。
ECMA-262其实就是javascript
个人还是比较推荐使用ES6的,ES6 的版本变动内容最多,具有里程碑意义,其中也是加入许多新的语法特性,编程实现更简单、高效;
那下面我们就来看下ES6有哪些新特性吧:
1.let 关键字
let 关键字用来声明变量,使用 let 声明的变量有几个特点:
1. 不允许重复声明;
2. 块儿级作用域(局部变量);
3. 不存在变量提升;
4. 不影响作用域链;
2.const 关键字?
const 关键字用来声明常量,const 声明有以下特点:
1. 声明必须赋初始值;
2. 标识符一般为大写(习惯);
3. 不允许重复声明;
4. 值不允许修改;
5. 块儿级作用域(局部变量);
3.变量和对象的解构赋值
什么是解构赋值:
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值;
应用场景:
频繁使用对象方法、数组元素,就可以使用解构赋值形式;
?代码实现:
// ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
赋值;
// 1、数组的解构赋值
const F4 = ["大哥", "二哥", "三哥", "四哥"];
let [a, b, c, d] = F4;
// 这就相当于我们声明 4 个变量 a,b,c,d,其值分别对应"大哥","二哥","三哥","四哥 "
console.log(a + b + c + d); // 大哥二哥三哥四哥
// 2、对象的解构赋值
const F3 = {
name: "大哥",
age: 22,
sex: "男",
xiaopin: function() { // 常用
console.log("我会演小品!");
}
}
let {
name,
age,
sex,
xiaopin
} = F3; // 注意解构对象这里用的是{}
console.log(name + age + sex + xiaopin); // 大哥 22 男
xiaopin(); // 此方法可以正常调用
4.模板字符串
模板字符串(template string)是增强版的字符串,用反引号(`)标识
字符串中可以出现换行符;可以使用 ${xxx} 形式引用变量;
5.简化对象和函数写法
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁;
代码示例:
// ES6 允许在对象的大括号内直接写入变量和函数作为对象的属性和方法
// 变量和函数
let name = "訾博";
let change = function() {
console.log("活着就是为了改变世界!");
}
//创建对象
const school = {
// 完整写法
// name:name,
// change:change
// 简化写法
name,
change,
// 声明方法的简化
say() {
console.log("言行一致!");
}
}
school.change();
school.say();
?
6.箭头函数
ES6 允许使用箭头(=>)定义函数,箭头函数提供了一种更加简洁的函数书写方式,箭头函数多用于匿名函数的定义;
箭头函数的注意点:
1. 如果形参只有一个,则小括号可以省略;
2. 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的执行结果;
3. 箭头函数 this 指向声明时所在作用域下 this 的值;
4. 箭头函数不能作为构造函数实例化;
5. 不能使用 arguments;
箭头函数的特点:
1. 箭头函数的 this 是静态的,始终指向函数声明时所在作用域下的 this 的值;
2. 不能作为构造实例化对象;
3. 不能使用 arguments 变量;
7.?ES6 中函数参数的默认值
ES 允许给函数的参数赋初始值;
代码示例:
//1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
function add(a, b, c = 10) {
return a + b + c;
}
let result = add(1, 2);
console.log(result); // 13
//2. 与解构赋值结合
// 注意这里参数是一个对象
function connect({
host = "127.0.0.1",
username,
password,
port
}) {
console.log(host)
console.log(username)
console.log(password)
console.log(port)
}
connect({
host: 'baidu.com',
username: 'root',
password: 'root',
port: 3306
})
8.rest 参数
9.扩展运算符
10.Symbol
11.Promise
12.Set 集合
13.Map 集合键值对集合;
14.class 类
15.数值扩展
16.对象扩展
17.模块化
18.Babel 对 ES6 模块化代码转换
19.ES6 模块化引入 NPM 包
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!