阿瑶的ES6新特性学习笔记
导语:
- 什么是 ECMA?
ECMA(European Computer Manufacturers Association)中文名称为欧洲计算机制造商协会,这个
组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为 Ecma 国际;
- 什么是ES6?
ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版
一、功能概述
1、let 关键字
声明局部变量;
2、const 关键字
声明常量;
3、变量和对象的解构赋值
简化变量声明:从;
4、模板字符串
声明自带格式的字符串;
5、简化对象和函数写法
简化对象和函数写法;
6、箭头函数
简化函数写法;
7、ES6中函数参数的默认值
给函数的参数设置默认值;
8、rest参数
拿到实参;
9、扩展运算符
将一个数组转为用逗号分隔的参数序列;
10、Symbol
表示独一无二的值;
11、迭代器
用来遍历集合、数组等;
12、生成器
是一种异步编程解决方案;
13、Promise
非常强大的异步编程的新解决方案;
14、Set集合
类似数组,但元素不重复的集合;
15、Map集合
键值对集合;
16、class类
像java实体类一样声明js类;
17、数值扩展
增加一些数值相关的方法等;
18、对象扩展
增加一些对象相关的方法等;
19、模块化
模块化、组件化;
20、Babel对ES6模块化代码转换
为了适配浏览器,将更新的ES规范转换成ES5规范;
21、ES6模块化引入NPM包
像导入模块一样导入npm包;
二、具体功能
1、let 关键字
特性:
let 关键字用来声明变量,使用 let 声明的变量有几个特点:
- 不允许重复声明;
- 块儿级作用域(局部变量);
- 不存在变量提升;
- 不影响作用域链;
应用场景:以后声明变量使用 let 就对了
// 1. 不会存在声明提前// 此处会报错(这里必须报错,原则上来说不能先上车后买票)console.log(name); let name = "大帅比";// 2. 不会有变量覆盖let demo = "小明";let demo = "小红";// 此处会报错(不能使用套牌车!)告诉你已经定义了此变量。避免了项目中存在变量覆盖的问题console.log(demo)// 3. 有块级作用域function fn2(){for(let i = 0; i < 5; i++){// do something}// 此处会报错,无法打印,防止红杏出墙!!!// i是定义在循环体之内的,循环体外当然无法打印 console.log(i);}fn2();
2、const 关键字
特性:
const 关键字用来声明常量,const 声明有以下特点:
- 声明必须赋初始值;
- 标识符一般为大写(习惯);
- 不允许重复声明;
- 值不允许修改;
- 块儿级作用域(局部变量);
注意: 对象属性修改和数组元素变化不会出发 const 错误
应用场景:声明对象类型使用 const,非对象类型声明选择 let
3.变量的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值。
//数组的解构赋值
const arr = ['张学友', '刘德华', '黎明', '郭富城'];
let [zhang, liu, li, guo] = arr;
//对象的解构赋值
const lin = {name: '林志颖',tags: ['车手', '歌手', '小旋风', '演员']
};
let {name, tags} = lin;
//复杂解构
let wangfei = {name: '王菲',age: 18,songs: ['红豆', '流年', '暧昧', '传奇'],history: [{name: '窦唯'},{name: '李亚鹏'},{name: '谢霆锋'}]
};
let {songs: [one, two, three], history: [first, second, third]} = wangfei;
注意:频繁使用对象方法、数组元素,就可以使用解构赋值形式
4.模板字符串
模板字符串(template string)是增强版的字符串,用反引号(`)标识,特点:
- 字符串中可以出现换行符
- 可以使用 ${xxx} 形式输出变量
// 定义字符串
let str = `<ul>
<li>沈腾</li><li>玛丽</li><li>魏翔</li><li>艾伦</li></ul>`;
// 变量拼接
let star = '王宁';
let result = `${star}在前几年离开了开心麻花`;
注意:当遇到字符串与变量拼接的情况使用模板字符串
5.简化对象写法
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
let name = '尚硅谷';
let slogon = '永远追求行业更高标准';
let improve = function () {console.log('可以提高你的技能');
}
//属性和方法简写
let atguigu = {name,slogon,improve,change() {console.log('可以改变你')}
};
注意:对象简写形式简化了代码,所以以后用简写就对了
6.箭头函数
ES6 允许使用「箭头」(=>)定义函数
/**
* 1. 通用写法
*/
let fn = (arg1, arg2, arg3) => {return arg1 + arg2 + arg3;
}
箭头函数的注意点:
- 如果形参只有一个,则小括号可以省略
- 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的执行结果
- 箭头函数 this 指向声明时所在作用域下 this 的值
- 箭头函数不能作为构造函数实例化
- 不能使用 arguments
/**
* 2. 省略小括号的情况
*/
let fn2 = num => {return num * 10;
};
/**
* 3. 省略花括号的情况
*/
let fn3 = score => score * 20;
/**
* 4. this 指向声明时所在作用域中 this 的值
*/
let fn4 = () => {console.log(this);
}
let school = {name: '尚硅谷',getName(){let fn5 = () => {console.log(this);}fn5();}
};
注意:箭头函数不会更改 this 指向,用来指定回调函数会非常合适
7. rest 参数
ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments
必须是最后一个形参
/**
* 作用与 arguments 类似
*/
function add(...args){console.log(args);
}
add(1,2,3,4,5);
/**
* rest 参数必须是最后一个形参
*/
function minus(a,b,...args){console.log(a,b,args);
}
minus(100,1,2,3,4,5,19);
注意:rest 参数非常适合不定个数参数函数的场景
8. spread 扩展运算符
扩展运算符(spread)也是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列,对数组进行解包。
/**
* 展开数组
*/
let tfboys = ['德玛西亚之力','德玛西亚之翼','德玛西亚皇子'];
function fn(){console.log(arguments);
}
fn(...tfboys)
/**
* 展开对象
*/
let skillOne = {q: '致命打击',
};
let skillTwo = {w: '勇气'
};
let skillThree = {e: '审判'
};
let skillFour = {r: '德玛西亚正义'
};
let gailun = {...skillOne, ...skillTwo,...skillThree,...skillFour};
9.Symbol
9.1.Symbol 基本使用
ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。它是JavaScript 语言的第七种数据类型,是一种类似于字符串的数据类型。
Symbol 特点
- Symbol 的值是唯一的,用来解决命名冲突的问题
- Symbol 值不能与其他数据进行运算
- Symbol 定义的对象属性不能使用 for…in 循环遍历 ,但是可以使 用Reflect.ownKeys 来获取对象的所有键名
//创建 Symbol
let s1 = Symbol();
console.log(s1, typeof s1);
//添加标识的 Symbol
let s2 = Symbol('尚硅谷');
let s2_2 = Symbol('尚硅谷');
console.log(s2 === s2_2);
//使用 Symbol for 定义
let s3 = Symbol.for('尚硅谷');
let s3_2 = Symbol.for('尚硅谷');
console.log(s3 === s3_2)
注: 遇到唯一性的场景时要想到 Symbol
9.2.Symbol 内置值
除了定义自己使用的 Symbol 值以外,ES6 还提供了 11 个内置的 Symbol 值,指向语言内部使用的方法。可以称这些方法为魔术方法,因为它们会在特定的场景下自动执行。
特别的: Symbol内置值的使用,都是作为某个对象类型的属性去使用;
10. 迭代器
遍历器(Iterator)就是一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作。
- ES6 创造了一种新的遍历命令 for…of 循环,Iterator 接口主要供 for…of 消费
- 原生具备 iterator 接口的数据(可用 for of 遍历)
a) Array
b) Arguments
c) Set
d) Map
e) String
f) TypedArray
g) NodeList - 工作原理
a) 创建一个指针对象,指向当前数据结构的起始位置
b) 第一次调用对象的 next 方法,指针自动指向数据结构的第一个成员
c) 接下来不断调用 next 方法,指针一直往后移动,直到指向最后一个成员
d) 每调用 next 方法返回一个包含 value 和 done 属性的对象
注: 需要自定义遍历数据的时候,要想到迭代器。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>迭代器</title>
</head>
<body><script>//声明一个数组const xiyou = ['唐僧','孙悟空','猪八戒','沙僧'];//使用 for...of 遍历数组// for(let v of xiyou){// console.log(v);// }let iterator = xiyou[Symbol.iterator]();//调用对象的next方法console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());</script>
</body>
</html>
11. 生成器
生成器函数 yield 是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同
function * gen(){yield '一只没有耳朵';yield '一只没有尾巴';return '真奇怪'; }
let iterator = gen();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
代码说明:
- *号的位置没有限制
- 生成器函数返回的结果是迭代器对象,调用迭代器对象的 next 方法可以得到yield 语句后的值
- yield 相当于函数的暂停标记,也可以认为是函数的分隔符,每调用一次 next方法,执行一段代码
- next 方法可以传递实参,作为 yield 语句的返回值
12. Promise
Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果。
- Promise 构造函数: Promise (excutor) {}
- Promise.prototype.then 方法
- Promise.prototype.catch 方法
13. Set
ES6 提供了新的数据结构 Set(集合)。它类似于数组,但成员的值都是唯一的,集合实现了 iterator 接口,所以可以使用『扩展运算符』和『for…of…』进行遍历,集合的属性和方法:
- size 返回集合的元素个数
- add 增加一个新元素,返回当前集合
- delete 删除元素,返回 boolean 值
- has 检测集合中是否包含某个元素,返回 boolean 值
- clear 清空集合,返回 undefined
//创建一个空集合
let s = new Set();
//创建一个非空集合
let s1 = new Set([1,2,3,1,2,3]);
//集合属性与方法
//返回集合的元素个数
console.log(s1.size);
//添加新元素
console.log(s1.add(4));
//删除元素
console.log(s1.delete(1));
//检测是否存在某个值
console.log(s1.has(2));
//清空集合
console.log(s1.clear())
- Map
ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map 也实现了iterator 接口,所以可以使用『扩展运算符』和『for…of…』进行遍历。Map 的属性和方法:
- size 返回 Map 的元素个数
- set 增加一个新元素,返回当前 Map
- get 返回键名对象的键值
- has 检测 Map 中是否包含某个元素,返回 boolean 值
- clear 清空集合,返回 undefined
//创建一个空 map
let m = new Map();
//创建一个非空 map
let m2 = new Map([['name','尚硅谷'],['slogon','不断提高行业标准']
]);
//属性和方法
//获取映射元素的个数
console.log(m2.size);
//添加映射值
console.log(m2.set('age', 6));
//获取映射值
console.log(m2.get('age'));
//检测是否有该映射
console.log(m2.has('age'));
//清除
console.log(m2.clear())
- class 类
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对
象的模板。通过 class 关键字,可以定义类。基本上,ES6 的 class 可以看作只是
一个语法糖,它的绝大部分功能,ES5 都可以做到,新的 class 写法只是让对象
原型的写法更加清晰、更像面向对象编程的语法而已。
知识点:
- class 声明类
- constructor 定义构造函数初始化
- extends 继承父类
- super 调用父级构造方法
- static 定义静态方法和属性
- 父类方法可以重写
//父类
class Phone {//构造方法constructor(brand, color, price) {this.brand = brand;this.color = color;this.price = price;}//对象方法call() {console.log('我可以打电话!!!')} }
//子类
class SmartPhone extends Phone {constructor(brand, color, price, screen, pixel) {super(brand, color, price);this.screen = screen;this.pixel = pixel;}//子类方法photo(){console.log('我可以拍照!!');}playGame(){console.log('我可以玩游戏!!');}//方法重写call(){console.log('我可以进行视频通话!!');}//静态方法static run(){console.log('我可以运行程序')}static connect(){console.log('我可以建立连接')} }//实例化对象
const Nokia = new Phone('诺基亚', '灰色', 230);
const iPhone6s = new SmartPhone('苹果', '白色', 6088,
'4.7inch','500w');
//调用子类方法
iPhone6s.playGame();
//调用重写方法
iPhone6s.call();
//调用静态方法
SmartPhone.run();
阿瑶的ES6新特性学习笔记相关推荐
- ES6新特性学习笔记
ES6, 全称 ECMAScript 6.0,弥补了ES5的不足,新增了大量的语法糖,可以使代码编写更简洁. 变量 var ES6之前声明变量用var,如下: var name = 'admin'; ...
- jdk7新特性学习笔记
jdk7新特性学习笔记 从网络down了视频看,记录下学过的东西. 1.二进制字面量 JDK7开始,可以用二进制来表示整数(byte,short,int和long),语法:在二进制数值前面加 0b或者 ...
- Java8新特性学习笔记
Java8新特性学习笔记 文章目录 Java8新特性学习笔记 一.接口和日期处理 1.接口增强 1.1.JDK8以前 VS JDK8 1)接口定义: 1.2.默认方法(default) 1)默认方法格 ...
- JDK8新特性-学习笔记
雀语笔记连接: https://www.yuque.com/g/u22538081/ghlpft/zcbyis/collaborator/join?token=pofOuJabmo9rgKvS# 邀请 ...
- java8新特性学习笔记(Lambda,stream(),filter(),collect(),map())
文章目录 1.lambda表达式(重点) 1.需求分析 2.Lambda表达式初体验 3.Lambda的语法规则 3.1 Lambda练习1 3.1 Lambda练习2 4.Lambda表达式的原理 ...
- C++17新特性学习笔记
c++17最新特性笔记 1.基本语言特性 这一部分介绍了 C++17中新的核心语言特性,但不包括那些专为泛型编程(即 template)设计的特性. 结构化绑定 结构化绑定允许你用一个对象的元素或 ...
- java8新特性学习笔记之唠唠“匿名内部类与lambda”
负一.知道啥是匿名内部类不? 要使用lambda,我觉得你至少得明白匿名内部类是个啥."o -> o.getName"是lambda表达式,"Book::getNa ...
- C++11新特性学习笔记
(注:此笔记参照C++ Primer Plus 6) 1.数组初始化 1.)初始化数组时,可以省略等号 //int array[3] = {0, 1, 2}; int array [3] {0, 1, ...
- java8新特性学习笔记链接
https://blog.csdn.net/yitian_66/article/details/81010434 转载于:https://www.cnblogs.com/wangxuekui/p/10 ...
最新文章
- 基于OpenCV的特定区域提取
- java swing中英文支持,java - Swing国际化 - 如何在运行时更新语言 - SO中文参考 - www.soinside.com...
- oracle易忘函数用法(3)
- 线段树什么的最讨厌了
- 【struts2】struts2配置文件—struts.xml
- vim函数跳转 php,求助!! vim-gvim中如何让其显示函数及其参数!!
- 122_Power PivotPower BI不连续日期的日环比
- Java集合框架源码解读(2)——HashMap
- 电脑花屏是屏幕坏了吗_电脑开机屏幕花的是不是主板坏了
- JMeter基础 —脚本录制工具Badboy介绍
- 3DES实现加密算法
- java授权失败_鉴权失败 =(-200)both online
- ps计算机内存不足请保存文件并关闭,保存技巧,如何解决PS内存不足无法存储的错误提示情况...
- python获取股票_python根据股票代码获取当前数据
- 游泳池 (Standard IO)
- 07 仿网易严选微信小程序商城
- 过去的互联网,modnet的出现
- 我的世界手机版java光影在哪下载_我的世界手机版CSPE光影包-minecraftpe光影包下载...
- sscom42串口助手注意点
- 计算机调剂到上科大,科软是如何用5年时间从招生靠调剂到406名400+大神的?