ES介绍
什么是ES
ES全称 EcmaScript 是一种脚本语言的规范 Javascript为ES的实现
Ecma 是一个组织 Ecma组织
为什么要学习ES6?
- ES6的版本变动内容最多,具有里程碑意义
ES6加入了许多新的语法特性
ES6是前端的发展趋势,就业必备技能
ES6兼容性查看
正式学习
let变量声明以及声明特性
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script>
//声明变量
let a;
let b,c,d;
let e=100;
let f=521,g='zhangsan',h=[];
</script>
</body>
</html>
- 变量不能重复声明
块级作用域 全局,函数,eval(if , else ,while,for)
不存在变量提升(不允许在未声明前使用)
不影响作用域链
{
let school = '尚硅谷;
function fn(){
console.log(school);
}
fn();
}
const定义常量
const SCHOOL='尚硅谷'
- 必须定义初始值
一般常量命名使用大写
常量值不能修改
块级作用域
对于数组和对象的元素修改,不算对常量的修改,不会报错(主要原因是因为地址的变化)
const TEAM=['UZI','MLXG','Ming','LetMe']; TEAM.push('Meiko');
解构赋值
ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值
// 1. 数组的结构
const F4 = ['小沈阳','刘能','赵四','宋小宝'];
let [xiao, liu, zhao, song] = F4;
console.log(xiao);
console.log(liu);
console.log(zhao);
console.log(song);
// 2. 对象的解构
const zhao = {
name: '赵本山',
age: '不详',
xiaopin: function(){
console.log("我可以演小品");
}
};
let {name, age, xiaopin} = zhao;
console.log(name);
console.log(age);
console.log(xiaopin);
xiaopin();
let {xiaopin} = zhao;
xiaopin();
模板字符串
- 使用反引号标识 `
内容中可以直接出现换行符
可以直接变量拼接
let lover = '小沈';
let out = `${lover}是最棒的程序员`;
简化对象写法
允许在大括号内直接写入变量和函数,作为对象的属性和方法
let name = '尚硅谷';
let change = function(){
console.log('我们可以改变你!!');
}
const school = {
name,
change,
improve(){
console.log("我们可以提高你的技能");
}
}
箭头函数
允许使用箭头(=>) 定义函数
#原来
let fn = function(){
}
#现在
let fn = (a,b)=>{
return a+b;
}
- this是静态的.this 始终指向函数声明时所在的作用域下的this的值
不能作为构造实例化对象
不能使用arguments变量
箭头函数简写
省略小括号,当形参有且只有一个的时候
let add = n => {
return n + n;
}
省略花括号,当代码体只有一条语句的时候
let pow = n => n * n;
rest参数
- 用于获取函数的实参,用来代替arguments(Java可变参数 ...)
能将数组转为逗号分隔的{参数序列} (入参使用)
Symbol
- 原始数据类型,第七种数据类型,类似字符串的数据类型
特点
Symbol的值时唯一的,用来解决命名冲突的问题
Symbol值不能与其他数据进行运算
Symbol定义的对象属性不能使用 for...in 循环,但是可以使用Reflect.ownKeys来获取对象的所有键名
迭代器
- 写法
for(let item of list)生成器
- 属于函数
作为异步编程使用
Promise
promise是ES6引入的异步编程的新解决方案(重要)
//实例化 Promise 对象
const p = new Promise(function(resolve, reject){
setTimeout(function(){
//
// let data = '数据库中的用户数据';
// resolve
// resolve(data);
let err = '数据读取失败';
reject(err);
}, 1000);
});
//调用 promise 对象的 then 方法
p.then(
//成功回调
function(value){
console.log(value);
},
//失败回调
function(reason){
console.error(reason);
}
)
then方法例子
//创建 promise 对象
const p = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve('用户数据');
// reject('出错啦');
}, 1000)
});
//调用 then 方法 then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定
//1. 如果回调函数中返回的结果是 非 promise 类型的属性, 状态为成功, 返回值为对象的成功的值
// const result = p.then(value => {
// console.log(value);
// //1. 非 promise 类型的属性
// // return 'iloveyou';
// //2. 是 promise 对象
// // return new Promise((resolve, reject)=>{
// // // resolve('ok');
// // reject('error');
// // });
// //3. 抛出错误
// // throw new Error('出错啦!');
// throw '出错啦!';
// }, reason=>{
// console.warn(reason);
// });
//链式调用
p.then(value=>{
}).then(value=>{
});
catch方法例子
const p = new Promise((resolve, reject)=>{
setTimeout(()=>{
//设置 p 对象的状态为失败, 并设置失败的值
reject("出错啦!");
}, 1000)
});
// p.then(function(value){}, function(reason){
// console.error(reason);
// });
p.catch(function(reason){
console.warn(reason);
});
Set
- es6可以使用类Java中的集合Set
//声明一个 set
let s = new Set();
let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);
//元素个数
console.log(s2.size);
//添加新的元素
s2.add('喜事儿');
//删除元素
s2.delete('坏事儿');
//检测
console.log(s2.has('糟心事'));
//清空
s2.clear();
console.log(s2);
for(let v of s2){
console.log(v);
}
Set集合实践
数组去重
let arr = [1,2,3,4,5,4,3,2,1];
let result = [...new Set(arr)];
console.log(result);
交集
let arr2 = [4,5,6,5,6];
let s2 = new Set(arr2);// 4 5 6
let result = [...new Set(arr)].filter(item => {
if(s2.has(item)){
return true;
}else{
return false;
}
});
let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
console.log(result);
并集
let arr = [1,2,3,4,5,4,3,2,1];
let arr2 = [4,5,6,5,6];
let union = [...new Set([...arr, ...arr2])];
差集
let arr = [1,2,3,4,5,4,3,2,1];
let arr2 = [4,5,6,5,6];
let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
console.log(diff);
Map
声明Map
let m = new Map();
添加元素
//基本类型
m.set('name','黑子桑');
//object类型
let key = {
school:'算力'
};
m.set(key,['北京','上海','深圳']);
//函数
m.set('show',()=>{
console.log('ES6真神奇');
})
获取长度
m.size
删除
m.delete('name');
获取
m.get('show');
清空
m.clear();
由于实现了Symbol.iterator方法 所以可以使用迭代
for(item of m){
console.log(m);
}
Class
- ES6 中引入了Class(类)概念,接近与传统语言写法
ES6的class 可以看作为语法糖
知识点
class 声明类
constructor 定义构造函数初始化
extends 继承父类
super 调用父级构造方法
static 定义静态方法和属性
父类方法可以重写
//手机
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);
//class
class Shouji{
//构造方法 名字不能修改
constructor(brand, price){
this.brand = brand;
this.price = price;
}
//方法必须使用该语法, 不能使用 ES5 的对象完整形式
call(){
console.log("我可以打电话!!");
}
}
let onePlus = new Shouji("1+", 1999);
console.log(onePlus);
静态成员
class Phone{
//静态属性
static name = '手机';
static change(){
console.log("我可以改变世界");
}
}
let nokia = new Phone();
console.log(nokia.name);
console.log(Phone.name);
继承
class Phone{
//构造方法
constructor(brand, price){
this.brand = brand;
this.price = price;
}
//父类的成员属性
call(){
console.log("我可以打电话!!");
}
}
class SmartPhone extends Phone {
//构造方法
constructor(brand, price, color, size){
super(brand, price);// Phone.call(this, brand, price)
this.color = color;
this.size = size;
}
photo(){
console.log("拍照");
}
playGame(){
console.log("玩游戏");
}
call(){
console.log('我可以进行视频通话');
}
}
const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
// console.log(xiaomi);
xiaomi.call();
xiaomi.photo();
xiaomi.playGame();
get/set
class Phone{
get price(){
console.log("价格属性被读取了");
return 'iloveyou';
}
set price(newVal){
console.log('价格属性被修改了');
}
}
//实例化对象
let s = new Phone();
// console.log(s.price);
s.price = 'free';
数值扩展
- Number.EPSILON 是 JavaScript 表示的最小精度 EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
二进制和八进制
//二进制
let b = 0b1010;
//八进制
let o = 0o777;
//十进制
let d = 100;
十六进制
let x = 0xff;
console.log(x);
- Number.isFinite 检测一个数值是否为有限数
Number.isNaN 检测一个数值是否为 NaN
Number.parseInt Number.parseFloat字符串转整数
Number.isInteger 判断一个数是否为整数
Math.trunc 将数字的小数部分抹掉
Math.sign 判断一个数到底为正数 负数 还是零
对象方法扩展
- Object.is 判断两个值是否完全相等
Object.assign 对象的合并
Object.setPrototypeOf 设置原型对象 Object.getPrototypeof
模块化
- 模块化优势
防止命名冲突
代码复用
高维护性
模块化语法
export 用于规定模块的对外接口
import 用于输入其他模块提供的功能
资料来源于尚硅谷...
