ES6教程笔记

shenjun980326 2023-03-28 原文

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 li code console JavaScript

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

使用canal同步MySQL数据到ES - 2
文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目，Java开发。基于数据库增量日志解析，提供增量数据订阅&消费。Git地址：https://github.co
postman接口测试工具-基础使用教程 - 2
1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，
LC滤波器设计学习笔记（一）滤波电路入门 - 2
目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称
在VMware16虚拟机安装Ubuntu详细教程 - 2
在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网，点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows，点击立即下载。3.下载完成，文件大小615MB，如下图：4.鼠标右击，以管理员身份运行。5.点击下一步6.勾选条款，点击下一步7.先勾选，再点击下一步8.去掉勾选，点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证，复制填入，然后点击输入即可，亲测有效。13.点击完成14.重启系统，点击是15.双击VMwareWorkstationPro图标，进入虚拟机主
hadoop安装之保姆级教程（二）之YARN的配置 - 2
1.1.1 YARN的介绍为克服Hadoop1.0中HDFS和MapReduce存在的各种问题⽽提出的，针对Hadoop1.0中的MapReduce在扩展性和多框架⽀持⽅⾯的不⾜，提出了全新的资源管理框架YARN. ApacheYARN（YetanotherResourceNegotiator的缩写）是Hadoop集群的资源管理系统，负责为计算程序提供服务器计算资源，相当于⼀个分布式的操作系统平台，⽽MapReduce等计算程序则相当于运⾏于操作系统之上的应⽤程序。 YARN被引⼊Hadoop2,最初是为了改善MapReduce的实现，但是因为具有⾜够的通⽤性，同样可以⽀持其他的分布式计算模
ES基础入门 - 2
ES一、简介1、ElasticStackES技术栈：ElasticSearch：存数据+搜索；QL；Kibana：Web可视化平台，分析。LogStash：日志收集，Log4j:产生日志；log.info(xxx)。。。。使用场景：metrics：指标监控…2、基本概念Index（索引）动词：保存（插入）名词：类似MySQL数据库，给数据Type（类型）已废弃，以前类似MySQL的表现在用索引对数据分类Document（文档）真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear
ruby - 在 RUBY 上的 PADRINO 框架上使用 RSPEC 进行测试的教程 - 2
我是Ruby新手，并被要求在我们的新项目中使用它。我们还被要求使用Padrino(Sinatra)作为后端/框架。我们被要求使用Rspec进行测试。我一直在寻找可以指导在Padrino上使用RspecforRuby的教程。我得到的主要是引用RoR。但是，我需要RubyonPadrino。请在任何入门/指南/引用/讨论等方面指导我。如有不妥之处请指正。可能是我没有针对我的问题搜索正确的词/短语组合。我正在使用Ruby1.9.3和Padrinov.0.10.6。注意:我还提到了SOquestion,但它没有帮助。最佳答案我没用过Pa
区块链入门教程(6)--WeBASE-Front节点前置服务安装 - 2
文章目录1.任务背景2.任务目标3.相关知识点4.任务实操4.1安装配置JDK4.2启动FISCOBCOS4.3下载解压WeBASE-Front4.4拷贝sdk证书文件4.5启动节点4.6访问节点4.7检查运行状态5.任务总结1.任务背景FISCOBCOS其实是有控制台管理工具，用来对区块链系统进行各种管理操作。但是对于初学者来说，还是可视化界面更友好，本节就来介绍WeBASE管理平台，这是一款微众银行开源的自研区块链中间件平台，可以降低区块链使用的门槛，大幅提高区块链应用的开发效率。微众银行是腾讯牵头设立的民营银行，在国内民营银行里还是比较出名的。微众银行参与FISCOBCOS生态建设，一定
Unity Shader 学习笔记（5）Shader变体、Shader属性定义技巧、自定义材质面板 - 2
写在之前Shader变体、Shader属性定义技巧、自定义材质面板，这三个知识点任何一个单拿出来都是一套知识体系，不能一概而论，本文章目的在于将学习和实际工作中遇见的问题进行总结，类似于网络笔记之用，方便后续回顾查看，如有以偏概全、不祥不尽之处，还望海涵。1、Shader变体先看一段代码......Properties{ [KeywordEnum(on,off)]USL_USE_COL("IsUseColorMixTex?",int)=0 [Toggle(IS_RED_ON)]_IsRed("IsRed?",int)=0}......//中间省略，后续会有完整代码 #pragmamulti_c
Tcl脚本入门笔记详解（一） - 2
TCL脚本语言简介•TCL（ToolCommandLanguage）是一种解释执行的脚本语言（ScriptingLanguage）,它提供了通用的编程能力：支持变量、过程和控制结构；同时TCL还拥有一个功能强大的固有的核心命令集。TCL经常被用于快速原型开发，脚本编程，GUI和测试等方面。•实际上包含了两个部分：一个语言和一个库。首先，Tcl是一种简单的脚本语言，主要使用于发布命令给一些互交程序如文本编辑器、调试器和shell。由于TCL的解释器是用C\C++语言的过程库实现的，因此在某种意义上我们又可以把TCL看作C库，这个库中有丰富的用于扩展TCL命令的C\C++过程和函数，所以，Tcl是