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 用于输入其他模块提供的功能

资料来源于尚硅谷...

ES6教程笔记的更多相关文章

ES6入门笔记
ES6入门笔记 02 Let&Const.md 增加了块级作用域. 常量避免了变量提升 03 变量的解构赋值.md var [a, b, c] = [1, 2, 3]; var [[a,d] ...
es6学习笔记1 --let以及const
let语句的基本用法: 1.let声明的变量为块级作用域,只在最近的{}里面有效,如果在外部引用就会报错. { let a = 10; var b = "hello" } ale ...
jQuery官方基础教程笔记(转载)
本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...
es6学习笔记-class之一概念
前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...
ES6教程-字符串，函数的参数，了解函数的arguments对象，js面向对象，设计模式-单例模式，解构赋值
前言主要讲解了ES6对字符串的拓展,包括includes,startsWith和endsWith,另外增加了字符串模板. Start includes()是否包含 startsWith()以什么开头 ...
简单脱壳教程笔记(2)---手脱UPX壳（1）
本笔记是针对ximo早期发的脱壳基础视频教程,整理的笔记. ximo早期发的脱壳基础视频教程下载地址如下: http://down.52pojie.cn/%E5%90%BE%E7%88%B1%E7% ...
ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值在实际开发有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
ES6学习笔记<三> 生成器函数与yield
为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...
ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

随机推荐

api接口文档生成，无需其他配置一键生成基于文本注释
<dependency> <groupId>io.github.yedaxia</groupId> <artifactId>japidocs</a ...
IEEE会议论文投稿系统问题之一：WinEdt编译生成DVI文件的方法
问题描述:如何将tex文件正确编译为dvi文件,以正常使用IEEE投稿系统? 方法: 1.打开WinEdt中的命令行: 2.使用latex TexFileName编译tex生成aux文件和dvi文件: ...
油猴CSDN净化脚本
CSDN版面越来越乱,最近还总是弹出红包雨和顶部巨大横幅,左侧也会随机出现学生认证弹窗.而且版面混乱难看,看起来非常费劲. 另外底下的推荐列表经常夹杂着CSDN文件下载的链接,下载文件又要付费,从来不 ...
VSCode-关于自动格式化问题
Code ->首选项 ->设置 ,在搜索框上输入"格式化" 设置格式化后挂号会自动补齐,关键字会自动添加空格,
阿里云centos7 磁盘挂载
适用于多磁盘的情况 1. 查看本地所有磁盘 fdisk -l 2.格式化磁盘系统 mkfs.ext3 /dev/vdb (/dev/vdb 为未挂载的磁盘路径) 2.创建挂载点 mkdir /ho ...
用反证法说明List<Object>和List<String>不存在子父类关系可行吗？
看宋红康老师的Java基础视频讲解,视频中用反证法证明List
Java集合框架个人总结
Java集合框架个人总结集合主要分为两大类:①单列集合Collection ②双列集合Map 集合存储的都是引用类型,不可是基础类型,如果保存基础类型需要用包装类. 1.Collection接口 ...
mac安装mysql5.6默认密码修改
前言: 每次安装mysql都被烦的要死,痛并思痛记下此篇文章: 参考: https://blog.csdn.net/u010377383/article/details/82688250 https: ...
Konga-Kong网关的权限控制指定消费者
刚开始陷入了误区了,网上很多参考例子都是如何实现身份证验证,而且看到konga上面配置身份插件的地方基本都有consumer一个配置项,一直纠结在这个如何通过key-auth实现指定的route或者s ...
记一个线上问题，selectById查询id出现两条数据问题
查询selectById(),查询1529665444035670017(Long)结果出现两条数据: id:1529665444035670017,和id:1529665444035670018 调 ...

ES6教程笔记

ES介绍

什么是ES

为什么要学习ES6?

ES6兼容性查看

正式学习

let变量声明以及声明特性

const定义常量

解构赋值

模板字符串

简化对象写法

箭头函数

rest参数

Symbol

迭代器

生成器

Promise

Set

Map

Class

数值扩展

对象方法扩展

模块化

ES6教程笔记的更多相关文章

随机推荐

热门专题