ECMAScript 学习笔记03
2024-04-25 07:53:12
01_let关键字.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>01_let关键字</title>
</head>
<body><button>测试1</button>
<br>
<button>测试2</button>
<br>
<button>测试3</button>
<br>
<!--
***let
1. 作用:* 与var类似, 用于声明一个变量
2. 特点:* 在块作用域内有效* 不能重复声明* 不会预处理, 不存在提升
3. 应用:* 循环遍历加监听* 使用let取代var是趋势
-->
<script type="text/javascript">//console.log(age);// age is not definedlet age = 12;//let age = 13;不能重复声明console.log(age);let btns = document.getElementsByTagName('button');for(let i = 0;i<btns.length;i++){btns[i].onclick = function () {alert(i);}}</script>
</body></html>
02_const关键字.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>02_const关键字</title>
</head>
<body>
<!--
1. 作用:* 定义一个常量
2. 特点:* 不能修改* 其它特点同let
3. 应用:* 保存不用改变的数据
-->
<script type="text/javascript">const sex = '男';console.log(sex);//sex = '女';//不能修改console.log(sex);
</script>
</body>
</html>
03_变量的解构赋值.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>03_变量的解构赋值</title>
</head>
<body>
<!--
1. 理解:* 从对象或数组中提取数据, 并赋值给变量(多个)
2. 对象的解构赋值let {n, a} = {n:'tom', a:12}
3. 数组的解构赋值let [a,b] = [1, 'atguigu'];
4. 用途* 给多个形参赋值
-->
<script type="text/javascript">let obj = {name : 'kobe', age : 39};
// let name = obj.name;
// let age = obj.age;
// console.log(name, age);//对象的解构赋值let {age} = obj;console.log(age);
// let {name, age} = {name : 'kobe', age : 39};
// console.log(name, age);//3. 数组的解构赋值 不经常用let arr = ['abc', 23, true];let [a, b, c, d] = arr;console.log(a, b, c, d);//console.log(e);function person(p) {//不用解构赋值console.log(p.name, p.age);}person(obj);function person1({name, age}) {console.log(name, age);}person1(obj);</script>
</body>
</html>
04_模板字符串.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>04_模板字符串</title>
</head>
<body>
<!--
1. 模板字符串 : 简化字符串的拼接* 模板字符串必须用 `` 包含* 变化的部分使用${xxx}定义
-->
<script type="text/javascript">let obj = {name : 'anverson',age : 41};console.log('我叫:' + obj.name + ', 我的年龄是：' + obj.age);console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`);
</script>
</body>
</html>
05_简化的对象写法.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>05_简化的对象写法</title>
</head>
<body>
<!--
简化的对象写法
* 省略同名的属性值
* 省略方法的function
* 例如:let x = 1;let y = 2;let point = {x,y,setX (x) {this.x = x}};
-->
<script type="text/javascript">let x = 3;let y = 5;//普通额写法
// let obj = {// x : x,
// y : y,
// getPoint : function () {// return this.x + this.y
// }
// };//简化的写法let obj = {x,y,getPoint(){return this.x}};console.log(obj, obj.getPoint());
</script>
</body>
</html>
06_箭头函数.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>06_箭头函数</title></head>
<body><button id="btn">测试箭头函数this_1</button><button id="btn2">测试箭头函数this_2</button><!--
* 作用: 定义匿名函数
* 基本语法:* 没有参数: () => console.log('xxxx')* 一个参数: i => i+2* 大于一个参数: (i,j) => i+j* 函数体不用大括号: 默认返回结果* 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回
* 使用场景: 多用来定义回调函数* 箭头函数的特点：1、简洁2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this3、扩展理解： 箭头函数的this看外层的是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window。
-->
<script type="text/javascript">let fun = function () {console.log('fun()');};fun();//没有形参，并且函数体只有一条语句let fun1 = () => console.log('fun1()');fun1();console.log(fun1());//一个形参，并且函数体只有一条语句let fun2 = x => x;console.log(fun2(5));//形参是一个以上let fun3 = (x, y) => x + y;console.log(fun3(25, 39));//64//函数体有多条语句let fun4 = (x, y) => {console.log(x, y);return x + y;};console.log(fun4(34, 48));//82setTimeout(() => {console.log(this);},1000)let btn = document.getElementById('btn');//没有箭头函数btn.onclick = function () {console.log(this);//btn};//箭头函数let btn2 = document.getElementById('btn2');let obj = {name : 'kobe',age : 39,getName : () => {btn2.onclick = () => {console.log(this);//obj};}};obj.getName();function Person() {this.obj = {showThis : () => {console.log(this);}}}let fun5 = new Person();fun5.obj.showThis();</script></body>
</html>
07_点点点运算符.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>07_3点运算符</title>
</head>
<body>
<!--
* 用途
1. rest(可变)参数* 用来取代arguments 但比arguments灵活,只能是最后部分形参参数function add(...values) {let sum = 0;for(value of values) {sum += value;}return sum;}
2. 扩展运算符let arr1 = [1,3,5];let arr2 = [2,...arr1,6];arr2.push(...arr1);
-->
<script type="text/javascript">function fun(...values) {console.log(arguments);
// arguments.forEach(function (item, index) {// console.log(item, index);
// });console.log(values);values.forEach(function (item, index) {console.log(item, index);})}fun(1,2,3);let arr = [2,3,4,5,6];let arr1 = ['abc',...arr, 'fg'];console.log(arr1);</script></body>
</html>
08_形参默认值.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>08_形参默认值</title>
</head>
<body>
<!--* 形参的默认值----当不传入参数的时候默认使用形参里的默认值function Point(x = 1,y = 2) {this.x = x;this.y = y;}
-->
<script type="text/javascript">//定义一个点的坐标function Point(x=12, y=12) {this.x = x;this.y = y;}let point = new Point(25, 36);console.log(point);let p = new Point();console.log(p);let point1 = new Point(12, 35);console.log(point1);</script></body>
</html>
09_Promise对象.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>11_Promise对象</title>
</head>
<body>
<!--
1. 理解:* Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)* 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')* ES6的Promise是一个构造函数, 用来生成promise实例
2. 使用promise基本步骤(2步):* 创建promise对象let promise = new Promise((resolve, reject) => {//初始化promise状态为 pending//执行异步操作if(异步操作成功) {resolve(value);//修改promise的状态为fullfilled} else {reject(errMsg);//修改promise的状态为rejected}})* 调用promise的then()promise.then(function(result => console.log(result),errorMsg => alert(errorMsg)))
3. promise对象的3个状态* pending: 初始化状态* fullfilled: 成功状态* rejected: 失败状态
4. 应用:* 使用promise实现超时处理* 使用promise封装处理ajax请求let request = new XMLHttpRequest();request.onreadystatechange = function () {}request.responseType = 'json';request.open("GET", url);request.send();
--><script type="text/javascript">//创建一个promise实例对象let promise = new Promise((resolve, reject) => {//初始化promise的状态为pending---->初始化状态console.log('1111');//同步执行//启动异步任务setTimeout(function () {console.log('3333');//resolve('atguigu.com');//修改promise的状态pending---->fullfilled（成功状态）reject('xxxx');//修改promise的状态pending----->rejected(失败状态)},1000)});promise.then((data) => {console.log('成功了。。。' + data);}, (error) => {console.log('失败了' + error);});console.log('2222');//定义一个请求news的方法function getNews(url) {//创建一个promise对象let promise = new Promise((resolve, reject) => {//初始化promise状态为pending//启动异步任务let request = new XMLHttpRequest();request.onreadystatechange = function () {if(request.readyState === 4){if(request.status === 200){let news = request.response;resolve(news);}else{reject('请求失败了。。。');}}};request.responseType = 'json';//设置返回的数据类型request.open("GET", url);//规定请求的方法，创建链接request.send();//发送})return promise;}getNews('http://localhost:3000/news?id=2').then((news) => {console.log(news);document.write(JSON.stringify(news));console.log('http://localhost:3000' + news.commentsUrl);return getNews('http://localhost:3000' + news.commentsUrl);}, (error) => {alert(error);}).then((comments) => {console.log(comments);document.write('<br><br><br><br><br>' + JSON.stringify(comments));}, (error) => {alert(error);})
</script></body></html>
10_Symbol.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Symbol</title>
</head>
<body><!--前言：ES5中对象的属性名都是字符串，容易造成重名，污染环境Symbol：概念：ES6中的添加了一种原始数据类型symbol(已有的原始数据类型：String, Number, boolean, null, undefined, 对象)特点：1、Symbol属性对应的值是唯一的，解决命名冲突问题2、Symbol值不能与其他数据进行计算，包括同字符串拼串3、for in, for of遍历时不会遍历symbol属性。使用：1、调用Symbol函数得到symbol值let symbol = Symbol();let obj = {};obj[symbol] = 'hello';2、传参标识let symbol = Symbol('one');let symbol2 = Symbol('two');console.log(symbol);// Symbol('one')console.log(symbol2);// Symbol('two')3、内置Symbol值* 除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法。- Symbol.iterator* 对象的Symbol.iterator属性，指向该对象的默认遍历器方法(后边讲)--><script type="text/javascript">window.onload = function () {let symbol = Symbol();console.log(typeof symbol);console.log(symbol);// 用作对象的属性(唯一)let obj = {username: 'kobe', age: 39};obj[symbol] = 'hello';obj[symbol] = 'symbol';console.log(obj);for(let i in obj){console.log(i);}}
</script></body>
</html>
11_Iterator遍历器.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Iterator遍历器</title>
</head>
<body><!--概念： iterator是一种接口机制，为各种不同的数据结构提供统一的访问机制作用：1、为各种数据结构，提供一个统一的、简便的访问接口；2、使得数据结构的成员能够按某种次序排列3、ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。工作原理：- 创建一个指针对象，指向数据结构的起始位置。- 第一次调用next方法，指针自动指向数据结构的第一个成员- 接下来不断调用next方法，指针会一直往后移动，直到指向最后一个成员- 每调用next方法返回的是一个包含value和done的对象，{value: 当前成员的值,done: 布尔值}* value表示当前成员的值，done对应的布尔值表示当前的数据的结构是否遍历结束。* 当遍历结束的时候返回的value值是undefined，done值为false原生具备iterator接口的数据(可用for of遍历)1、Array2、arguments3、set容器4、map容器5、String。。。--><script type="text/javascript">window.onload = function () {// 自定义iterator生成指针对象function mockIterator(arr) {let nextIndex = 0;return {next: function () {return nextIndex<arr.length?{value: arr[nextIndex++], done: false}:{value: undefined, done: true}}}}let arr = [1,2,3,4,5];let iteratorObj = mockIterator(arr);console.log(iteratorObj.next());console.log(iteratorObj.next());console.log(iteratorObj.next());// 使用解构赋值以及...三点运算符时会调用iterator接口let arr1 = [1,2,3,4,5];let [value1, ...arr2] = arr1;// yield*语句function* generatorObj() {yield '1'; // 可遍历数据，会自动调用iterator函数yield '3';}let Go = generatorObj();console.log(Go.next());console.log(Go.next());console.log(Go.next());// 原生测试 数组let arr3 = [1, 2, 'kobe', true];for(let i of arr3){console.log(i);}// 字符串 stringlet str = 'abcdefg';for(let item of str){console.log(item);}}</script>
</body>
</html>
12_Generator函数.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Generator函数</title>
</head>
<body><!--Generator函数概念：1、ES6提供的解决异步编程的方案之一2、Generator函数是一个状态机，内部封装了不同状态的数据，3、用来生成遍历器对象4、可暂停函数(惰性求值), yield可暂停，next方法可启动。每次返回的是yield后的表达式结果特点：1、function 与函数名之间有一个星号2、内部用yield表达式来定义不同的状态例如：function* generatorExample(){let result = yield 'hello'; // 状态值为helloyield 'generator'; // 状态值为generator}3、generator函数返回的是指针对象(接11章节里iterator)，而不会执行函数内部逻辑4、调用next方法函数内部逻辑开始执行，遇到yield表达式停止，返回{value: yield后的表达式结果/undefined, done: false/true}5、再次调用next方法会从上一次停止时的yield处开始，直到最后6、yield语句返回结果通常为undefined， 当调用next方法时传参内容会作为启动时yield语句的返回值。-->
<script type="text/javascript" src="./js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">// 小试牛刀function* generatorTest() {console.log('函数开始执行');yield 'hello';console.log('函数暂停后再次启动');yield 'generator';}// 生成遍历器对象let Gt = generatorTest();// 执行函数，遇到yield后即暂停console.log(Gt); // 遍历器对象let result = Gt.next(); // 函数执行,遇到yield暂停console.log(result); // {value: "hello", done: false}result = Gt.next(); // 函数再次启动console.log(result); // {value: 'generator', done: false}result = Gt.next();console.log(result); // {value: undefined, done: true}表示函数内部状态已经遍历完毕// 对象的Symbol.iterator属性;let myIterable = {};myIterable[Symbol.iterator] = function* () {yield 1;yield 2;yield 4;};for(let i of myIterable){console.log(i);}let obj = [...myIterable];console.log(obj);console.log('-------------------------------');// 案例练习/** 需求：* 1、发送ajax请求获取新闻内容* 2、新闻内容获取成功后再次发送请求，获取对应的新闻评论内容* 3、新闻内容获取失败则不需要再次发送请求。* * */ function* sendXml() {// url为next传参进来的数据let url = yield getNews('http://localhost:3000/news?newsId=2');yield getNews(url);}function getNews(url) {$.get(url, function (data) {console.log(data);let commentsUrl = data.commentsUrl;let url = 'http://localhost:3000' + commentsUrl;// 当获取新闻内容成功，发送请求获取对应的评论内容// 调用next传参会作为上次暂停是yield的返回值sx.next(url);})}let sx = sendXml();// 发送请求获取新闻内容sx.next();</script></body>
</html>
13_async函数.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>async函数</title>
</head>
<body><!--async函数(源自ES2017)概念： 真正意义上去解决异步回调的问题，同步流程表达异步操作本质： Generator的语法糖语法：async function foo(){await 异步操作;await 异步操作；}特点：1、不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行2、返回的总是Promise对象，可以用then方法进行下一步操作3、async取代Generator函数的星号*，await取代Generator的yield4、语意上更为明确，使用简单，经临床验证，暂时没有任何副作用-->
<script type="text/javascript" src="./js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">async function timeout(ms) {return new Promise(resolve => {setTimeout(resolve, ms);})}async function asyncPrint(value, ms) {console.log('函数执行', new Date().toTimeString());await timeout(ms);console.log('延时时间', new Date().toTimeString());console.log(value);}console.log(asyncPrint('hello async', 2000));// await async function awaitTest() {let result = await Promise.resolve('执行成功');console.log(result);let result2 = await Promise.reject('执行失败');console.log(result2);let result3 = await Promise.resolve('还想执行一次');// 执行不了console.log(result3);}awaitTest();// 案例演示async function sendXml(url) {return new Promise((resolve, reject) => {$.ajax({url,type: 'GET',success: data => resolve(data),error: error => reject(error)})})}async function getNews(url) {let result = await sendXml(url);let result2 = await sendXml(url);console.log(result, result2);}getNews('http://localhost:3000/news?id=2')</script></body>
</html>
14_class.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>12_class</title>
</head>
<body>
</body>
<!--
1. 通过class定义类/实现类的继承
2. 在类中通过constructor定义构造方法
3. 通过new来创建类的实例
4. 通过extends来实现类的继承
5. 通过super调用父类的构造方法
6. 重写从父类中继承的一般方法
-->
<script type="text/javascript">class Person {//调用类的构造方法constructor(name, age){this.name = name;this.age = age;}//定义一般的方法showName(){console.log(this.name, this.age);}}let person = new Person('kobe', 39);console.log(person, person.showName());//定义一个子类class StrPerson extends Person{constructor(name, age, salary){super(name, age);//调用父类的构造方法this.salary = salary;}showName(){//在子类自身定义方法console.log(this.name, this.age, this.salary);}}let str = new StrPerson('weide', 38, 1000000000);console.log(str);str.showName();
</script>
</html>
15_Module.html
ES6模块化语法
ES7.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--
1. 指数运算符(幂): **
2. Array.prototype.includes(value) : 判断数组中是否包含指定value-->
<script type="text/javascript">console.log(3 ** 3);//27let arr = [1,2,3,4, 'abc'];console.log(arr.includes(2));//trueconsole.log(arr.includes(5));//false
</script>
</body>
</html>
ECMAScript 学习笔记03相关推荐
- Git 的安装与初次使用 —— Git 学习笔记 03
Git 的安装与初次使用 -- Git 学习笔记 03 Git 的安装与初次使用 -- Git 学习笔记 03 安装 Git 在 Linux 上安装 在 Windows 上安装 初次运行 Git 前的 ...
- JavaWeb黑马旅游网-学习笔记03【登陆和退出功能】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- JDBC学习笔记03【JDBC事务管理、数据库连接池、JDBCTemplate】
黑马程序员-JDBC文档(腾讯微云)JDBC笔记.pdf:https://share.weiyun.com/Kxy7LmRm JDBC学习笔记01[JDBC快速入门.JDBC各个类详解.JDBC之CR ...
- MySQL学习笔记03【数据库表的CRUD操作、数据库表中记录的基本操作、客户端图形化界面工具SQLyog】
MySQL 文档-黑马程序员(腾讯微云):https://share.weiyun.com/RaCdIwas 1-MySQL基础.pdf.2-MySQL约束与设计.pdf.3-MySQL多表查询与事务 ...
- Scala学习笔记03：操作符
Scala学习笔记03:操作符 一.scala中操作符与方法的等价性 scala中操作符即方法.方法即操作符.scala中操作符其实是普通方法调用的另一种表现形式,运算符的使用其实就是隐含地调用对应的 ...
- ES6学习笔记03：变量的解构赋值
ES6学习笔记03:变量的解构赋值 如果想从复杂数据结构(数组.对象)中获取某一个数据,可能需要大量的遍历操作才能完成.通过解构赋值,这一过程可以得到简化. 1.字符串的解构赋值 其实,Python也 ...
- PHP学习笔记03：简单网上调查站点
PHP学习笔记03:简单网上调查站点 网上调查站点由两个页面构成.第一个页面(vote.html文件)是一份问卷,问卷上只有一个问题"开发MySQL应用程序你最喜欢哪种编程语言?" ...
- openCVPracticalExercise学习笔记03
原创:openCVPracticalExercise学习笔记03 20使用OpenCV实现基于增强相关系数最大化的图像对齐(略) 21使用OpenCV的Eigenface 如何计算如何计算EigenF ...
- django学习笔记03
原创博客地址:django学习笔记03 第一章,模型层 查询集API 一.QuerySet何时被提交 迭代 QuerySet是可迭代的,在首次迭代查询集时执行实际的数据库查询 切片:如果使用切片的&q ...
最新文章
- iOS - UIPageViewController
- CentOS 5.4 下配置FTP服务器 [转帖]
- 4 CO配置-企业结构-分配-把控制范围分配给经营范围
- 软考高级论文如何“吹”
- 【华为云技术分享】《跟唐老师学习云网络》 - Veth网线
- Ext 中使用Ajax
- 1. DFT 入门篇-scan chain
- jmeter性能工具 之 cookie 管理器
- 设置mysql的schema_MySQL Performance-Schema(一) 配置篇
- Golang之并发资源竞争(互斥锁)
- iso中应用外部资源
- typescript 爬坑速记
- 电机学重难点归纳（长期更新）
- Android 完美高仿的微信源码
- unity技美31——Curvy Splines寻路插件绘制赛道，并且生成OBJ教程
- Python 代理验证程序（For 无忧代理） 多线程版
- Ubuntu 16.04静态IP设置
- 创建MySQL数据库·数据库笔记(三)
- LQBv23-Python：三升序列
- 李永乐数学基础过关660题高等数学选择题