ES6新增语法
let关键字
特性
- 变量不能重复声明
- 块级作用域
- 不存在变量提升
- 不影响作用域链
结构赋值
//ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值,这被称为解构赋值
//1.数组的解构
const F4 = ['小沈阳', '刘能', '宋小宝', '赵四'];
let [xiao, liu, song, zhao] = f4;
//2.对象的解构
const zhao1 = {
name: '赵本山',
age: '68',
xiaopin: function() {
console.log('w ke yi 眼小品');
}
}
let { name, age, xiaopin } = zhao1
模板字符串
ES6引入新的声明字符串的方式 `` 、’ '、 " "
//ES6引入新的声明字符串方法 ` `
// 1.声明
let str = `我是一个字符串`;
//2.内容中可以直接出现换行符
let str1 = `ul
asdf
asdfasf
a
asdf`;
//3.变量拼接
let lovest = '陈润喆';
let out = `${lovest}是最帅的`;
console.log(out);
箭头函数
//箭头函数
//声明一个函数
let fn = function() { }
let fn1 = (a, b) => {
return a + b;
}
// console.log(fn1(1, 2));
//特性1：this是静态的，this始终指向函数声明时所在的作用域下的this的值
function getName() {
console.log(this.name);
}
let getName2 = () => {
console.log(this.name);
}
window.name = 'crz'
const school = {
name: 'asfldja'
}
// getName.call(school) //随着call指针的移动，输出asfldja
// getName2().call(school)//没有随着指针移动而变化，还是crz
//特性2：不能作为构造器实例化对象
let Person = (name, age) => {
this.name = name;
this.age = age;
}
let me = new Person('xiao', 30);
console.log(me); // Person is not a constructor
//特性3：不能使用arguments变量
let fn2 = () => {
console.log(arguments); //arguments is not defined
}
fn2(1, 2, 3)
//特性4：简写，只有一个形参的时候，将小括号省略
let add = n => {
return n + n;
}
//省略花括号，当代码体只有一条语句时，可以省略花括号，此时return也要省略，语句的执行结果就是函数的返回值
rest参数
// ES5获取参数的方式
function data() {
console.log(arguments);
}
data('crz', 'mgy', 'ljh') //类型是对象
//rest参数
function data(...args) {
console.log(args);
}
data('crz', 'mgy', 'ljh') //类型是数组
//rest参数必须放在参数最后
function fn(a, b, ...args) {
console.log(a);
console.log(b);
console.log(args);//接收剩下的参数 3，4，5，6
}
fn(1, 2, 3, 4, 5, 6);
扩展运算符
//[...]扩展运算符能将数组转换为逗号分隔的参数序列
//声明一个数组...
const student = ['张三', '李四', '王五'];
//声明一个函数
function chunwan() {
console.log(arguments);
}
chunwan(...student); //chunwan('张三', '李四', '王五')
Symbol新数据类型
ES6引入一种新的原始数据类型Symbol，表示独一无二的值，他是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型
特点
- Symbol的值是唯一的，用来解决命名冲突的问题
- Symbol值不能与其他数据进行运算
- Symbol定义的对象属性不能使用for…in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名
迭代器
迭代器（iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署iterator接口，就可以完成遍历操作。
ES6创造了一种新的遍历命令for…of循环，iterator接口主要供for…of消费
原生具备iterator接口的数据（可用for of遍历）
Array
Arguments
Set
Map
String
TypedArray
NodeList
工作原理：
创建一个指针对象，指向当前数据结构的起始位置
第一次调用对象的next方法，指针自动指向数据结构的第一个成员
接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
生成器
Promise
Promise是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果
- Promise构造函数：Promise（excutor）{}
- Promise.prototype.then方法
- Promise.prototype.catch方法
Set
ES6提供了新的数据结构Set集合。他类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用【】拓展运算符和【for…of…】进行遍历
集合的属性和方法：
- size 返回集合的元素个数
- add增加一个新元素，返回当前集合
- delete 删除元素，返回boolean值
- has 检测集合中是否包含某个元素，返回boolean值
Map
ES6提供了Map数据结构。它类似于对象，也是键值对的集合。但是‘键’的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map也实现了iterator接口，所以可以使用扩展运算符和for…or…进行遍历，Map的属性和方法：
- size 返回map的元素个数
- set 增加一个新元素，返回当前Map
- get 返回键名对象的键值
- has 检测Map中是否包含某个元素，返回boolean值
- clear 清空集合，返沪undefined
Class
ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板，通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已
知识点：
- class声明类
- constructor定义构造函数初始化
- extends继承父类
- super调用父级构造方法
- static定义静态方法和属性
- 父类方法可以重写
<script>
//ES5声明对象
function Phone(brand, price) {
this.brand = brand;
this.price = price;
}
//添加方法
Phone.prototype.call = function() {
console.log('我可以打电话');
}
//实例化对象
let HuaWei = new Phone('华为', 5999);
HuaWei.call();
console.log(HuaWei);
//ES6 class语法
class shouji {
constructor(brand, price) {
this.brand = brand;
this.price = price;
}
call() {
console.log('我也可以打电话!!');
}
}
let onePlus = new shouji('xiaomi', 2999)
onePlus.call()
console.log(onePlus);
</script>
类的静态成员
class中static修饰的对象属于类而不属于实例对象
<script>
function Phone() {
}
//这两个属于函数对象,不属于实例对象,属于静态成员
Phone.name = '手机';
Phone.change = function() {
console.log('阿斯蒂芬撒');
}
Phone.prototype.size = '5.5inch'
let nokia = new Phone();
// console.log(nokia.name);//undifined
// console.log(nokia.size);//5.5inch
class Phone1 {
//静态属性 static修饰的对象属于类而不属于实例对象
static name = '手机';
static change() {
console.log('我可以保护世界');
}
}
let nokia2 = new Phone1();
console.log(nokia2.name);
console.log(Phone1.name);
</script>
get和set
<script>
//get set对对象的属性进行方法上的绑定
class Phone {
//对对象的动态属性进行封装,动态计算数据结果
get price() {
console.log('价格属性被读取了');
return 'iloveyou';
}
//用于判断操作的值是否符合规范
set price(newCal) {
console.log('价格属性被修改了');
}
}
let s = new Phone();
s.price = 'free'
</script>
数值扩展
<script>
//0.Number.EPSILON 是 JavaScript 表示的最小精度
//EPSILON属性的值接近于2.2204460492503130808472633361816E-16
function equal(a, b) {
if(Math.abs(a - b) < Number.EPSILON) {
return true;
} else {
return false;
}
}
console.log(0.1 + 0.2 === 0.3);
console.log(equal(0.1 + 0.2, 0.3));
//1.二进制和八进制
let b = 0b1010 //10
let o = 0o777; //511
let d = 100;
let x = 0xff;//255
console.log(o);
//2.Number.isFinite 检测一个数值是否为有限数
console.log(Number.isFinite(100));
console.log(Number.isFinite(100 / 0));
console.log(Number.isFinite(Infinity));
//3.Number.isNaN 检测一个数值是否为NaN
console.log(Number.isNaN(123));
//4.Number.parseInt Number.parseFloat 字符串转整数
console.log(Number.parseInt('5211314love'));//5211314
console.log(Number.parseFloat('3.145211314神奇')); //3.145211314
//5.Number.isInteger 判断一个数是否为整数
console.log(Number.isInteger(5));
console.log(Number.isInteger(2.5));
//6.Math.trunc 将数字的小数部分抹掉
console.log(Math.trunc(3.5)); //3
// 7.Math.sign 判断一个数到底为正数、负数、还是零
console.log(Math.sign(100)); //1
console.log(Math.sign(0)); //0
console.log(Math.sign(-100)); //-1
</script>
模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
模块化的好处：
- 防止命名冲突
- 代码复用
- 高维护性
模块化规范产品
ES6之前的模块化规范有：
- CommonJs => NodeJs Browserify
- AMD => requireJS
- CMD => seaJS
ES6模块化语法
模块功能主要由两个命令构成：export和import
- export命令用于规定模块的对外接口
- import命令用于输入其他模块提供的功能
474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
