2020年02月_阿珊和她的猫

原创 TypeScript入门实践-基础篇

Deno（v8引擎）有可能代替 node前言TypeScript是 js的超集属于编程语言静态类型和面向对象适用于大型应用或多人协作ts vs js应用程序是JS超集 (less sass----css) (ts----js)跨平台 + 开源开始于JS,终止于JS重用JS,，甚至可以引入js流行的库 echatsTypeScript 有类接口模块...

2020-02-27 17:35:13 2084

原创【Es6入门实践】11 类的声明和使用，模块化操作

class:类的声明和使用声明一个类写类，首字母大写对象首字母是小写类里面都是方法和属性class Coder{ name(val){//函数的参数，而不是类的参数 val:内函数的参数 console.log(val) }}//实例化一个类let hls=new Coder;hls.name('JACK')浏览器显示结果函数的参数c...

2020-02-26 16:10:45 246

原创【Es6入门实践】10 proxy:代理，promise

01 proxy:代理在ES6中，proxy是一种增强，增强的是我们的对象和函数（方法）类似生命周期的钩子函数，只不过这种钩子函数是在你处理任何方法之前进行的在真正方法执行前处理下，叫预处理我们之前声明一个对象是这样的let obj={ add:function(val){ return val+100; }, name:'I am a number'}conso...

2020-02-26 12:03:11 624

原创【Es6入门实践】09Set和WeakSet，Map数据结构

01 Setlet setArr=new Set(["牛奶","可乐","绿茶","冰红茶"])console.log(setArr)打印出来的结果不是数组，而是set的数据类型接下来我们对这个数组进行增删改增：add注意：数组增加是使用push，但是我们这里是使用addlet setArr=new Set(["牛奶","可乐","绿茶","冰红茶"])setArr.ad...

2020-02-25 23:27:09 239

原创【Es6入门实践】08Es6的对象，Symbel在对象中的作用

01 赋值以前我们是这么赋值的let name='HLS'let skill='JS'let obj={name:name,skill:skill}console.log(obj)现在允许我们用变量的方式赋值let name='HLS'let skill='JS'let obj={name,skill}console.log(obj)控制台显示的结果都是一样的02 k...

2020-02-25 19:20:48 658

原创【Es6入门实践】07箭头函数和扩展，函数和数组补漏

01 以前我们写函数是这样的function add(a,b){ return a+b}console.log(add(1,2))function add(a,b=1){ return a+b}console.log(add(1))02 主动抛出异常function add(a,b=1){ if(a==0){ throw new Error('A is Er...

2020-02-25 18:07:20 223

原创【Es6入门实践】06数字的操作，数组及其相关方法的操作（重点）

01数字的操作//二进制的声明let binary=OB010101;console.log(binary)//八进制的声明let octal=Oo666console.log(octal)let octal2=Oo777console.log(octal2)用Number.isFinite来进行是字符串还是数字的判断let a=11;console.log(Numbe...

2020-02-25 16:38:34 262

原创【Es6入门实践】05使用live-server插件启动服务，使用字符串模板

前言：关于live-server的介绍live-server插件实现了：修改文件浏览器自动刷新；浏览器自动打开项目；本地开发搭建临时的服务。本地开发常常需要搭建临时的服务，第一时间我们会想到用http-server。但现在流行修改文件浏览器自动刷新hot socketing（热拔插），如live-reload。若想浏览器自动打开项目，用opener。现在live-server实现...

2020-02-25 14:34:15 565

原创【Es6入门实践】04为什么要用对象展开运算符和rest运算符

1.对象展开运算符假设我们知道一个对象里面有方法，但是不知道方法里面的参数情况function hls(...arg){ console.log(arg[0]) console.log(arg[1]) console.log(arg[2]) console.log(arg[3])}hls(1,2,3,4,5,6)所以我们可以利用对象展开运算符查看参数下面我们看一个例...

2020-02-25 12:30:22 438

原创【Es6入门实践】03变量的解构赋值

1.数组的解构赋值ES6 允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，这被称为解构以前，为变量赋值只能直接指定值。let a = 1; let b = 2; let c = 3; console.log(a)console.log(b)console.log(c)ES6 允许写成下面这样。let [a, b, c] = (1, 2 , 3); console....

2020-02-25 00:20:17 211

原创【Es6入门实践】02let和const 命令

let 命令ES6 新增了 let 命令，用于声明变量。其用法类似于 var ，但是所声明的变量只在 let命令所在的代码块内有效。回顾我们知道，var是全局声明var a="cola";//console.log(a)window.onload = function() { console.log(a)}在终端输入打包命令行npm run build在浏览器查看效果...

2020-02-24 21:47:33 238

原创【Es6入门踩坑记】01用Babel把ES6编译成ES5

写在前言：ECMAScript和 JavaScript 的关系前者是后者的规格，后者是前者的一种实现虽然现在的Chrome浏览器已经支持ES6了，但是有些低版本的浏览器还是不支持ES6语法这就需要我们把ES6的语法自动转为ES5的语法。下面我会使用Babel把ES6编译成ES5.Babel ( babeljs.io／）是一个广为使用的 ES6 转码器，可以将 ES6 代码转为...

2020-02-24 20:29:21 650

原创什么是构造函数？什么是实例？为什么说属性在构造函数中声明，方法在原型中声明？

什么是构造函数，什么是实例构造函数是对一个实例的一个描述构造函数，是一种特殊的方法。主要用来在创建对象时初始化对象，即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。特别的一个类可以有多个构造函数，可根据其参数个数的不同或参数类型的不同来区分它们即构造函数的重载。 function Person (name){ this.name = name; }...

2020-02-24 14:50:21 1649 1

原创【力扣】最长同值路径

他说：学习算法的捷径就是多刷题，提高灵敏度推荐一个手机APP官方「力扣 App」下载｜海量算法题解干货，助你算法学习、提升职业编程技能，拿下名企 Offer - 力扣（LeetCode） https://leetcode-cn.com/app/踏出我的第一步给定一个二叉树，找到最长的路径，这个路径中的每个节点具有相同值。这条路径可以经过也可以不经过根节点。注意：两个节点之间...

2020-02-23 11:51:38 215

原创【js高级 Day5】深入理解浅拷贝，深拷贝，遍历DOM树，正则表达式

01 课程介绍02 复习apply和call方法的使用和区别都可以改变this指向的使用方式:函数名.apply(对象,[参数1,参数2,参数3,…]);函数名.call(对象,参数1,参数2,参数3,…);我想要使用其他对象的某个方法,其他对象.方法名.apply(当前对象,参数,…);这个方法就会被当前的对象所使用,同时这个方法中的this就是当前的对象,在调...

2020-02-17 23:40:12 377

原创【js高级 Day4】深入理解apply和call方法，作用域，闭包，递归

01 课程介绍02 复习原型:每个实例对象中都有一个属性__proto__,是原型,浏览器使用的,不标准的属性每个构造函数中都有一个属性prototype,是原型,程序员使用的,面向对象和面向过程都是编程思想面向对象注重的是结果面向过程注重的是过程面向对象的特性:封装,继承,多态继承:1.通过原型实现继承,改变原型的指向,属性在初始化的时候就已经固定了,如果是多个对象...

2020-02-17 21:55:56 515

原创【js高级 Day3】深入理解原型的方式继承，借用构造函数继承，组合继承，拷贝继承

01 课程介绍02 复习面向过程和面向对象都是编程的思想,方式不一样面向过程:凡事都是亲力亲为,所有的代码都要自己写,每一步都要很清楚,注重的是过程面向对象:执行者成为指挥者,只要找对象,然后让对象做相关的事情,注重的是结果面向对象的特性:封装,继承,多态封装；就是代码的封装,把一些特征和行为封装在对象中.面向对象的编程思想:根据需求,抽象出相关的对象,总结对象的特征和行为,把...

2020-02-17 14:27:05 360 1

原创【js高级 Day2】深入理解原型添加方法,私有函数,面向对象的编程思想（案例小贪吃蛇）

01 课程介绍02 复习面向过程和面向对象都是编程的思想,方式不一样面向过程:凡事都是亲力亲为,所有的代码都要自己写,每一步都要很清楚,注重的是过程面向对象:执行者成为指挥者,只要找对象,然后让对象做相关的事情,注重的是结果面向对象的特性:封装,继承,多态封装；就是代码的封装,把一些特征和行为封装在对象中.面向对象的编程思想:根据需求,抽象出相关的对象,总结对象的特征和行为,把特征...

2020-02-17 00:07:48 331

原创【js高级 Day1】深入理解原型及作用,构造函数和实例对象和原型对象之间的关系

01 课程介绍02 复习JavaScript简称:JSJS分三个部分:1 ECMAScript标准—基础的语法2 DOM Document Object Model 文档对象模型3 BOM Browser Object Model 浏览器对象模型什么是JS?是一门脚本语言是一门解释性语言是一门弱类型语言是一门基于对象的语言是一门动态类型的语言动态页面:页面由html...

2020-02-16 23:23:21 471

原创【 js基础 Day6】内置对象和基本包装类型等知识

01 复习复习编程思想:面向过程:凡事亲力亲为,所有的事情的过程都要清楚,注重的是过程面向对象:提出需求,找到对象,对象解决这个问题,我们要结果,注重的是结果面向对象的特性:封装,继承,多态,(抽象性)JS是一门什么样的语言?是一门解释性的语言是一门脚本语言是一门弱类型的语言是一门基于对象的语言是一门动态类型的语言对象:有属性和方法,具体特指的某个事物对象:js中就是一...

2020-02-14 00:21:15 386

原创【 js基础 Day4】面向过程，面向对象，自定义对象，内置对象

01 复习函数:把一些重复的代码封装在一个地方,在需要的时候直接调用这个地方的代码就可以了函数作用:代码重用函数的参数:1.形参:函数定义的时候,函数名字后面的小括号里的变量2.实参:函数调用的时候,函数名字后面的小括号里的变量或者值返回值:函数中有return，函数有返回值函数中没有return,函数没有返回值没有明确返回值:函数中没有return或者return后面没有任何...

2020-02-13 23:43:20 446

原创【 js基础 Day5】函数(重点)，作用域，预解析，arguments，对象

js基础:1.js的介绍及基本语法变量,运算符2.js的流程控制:分支语句,循环.顺序结构3.数组4.函数5.内置对象6.内置对象及一些方法01 复习break:在循环中遇到这个关键字,直接跳出当前所在的循环continue:在循环中遇到这个关键字,直接进行下一次循环数组:存储一组有序的数据,数据类型可以不一样数组的作用:一次性存储多个数据数组元素:数组中存储的每个数据,...

2020-02-13 22:48:49 375

原创【 js基础 Day3】关键字的使用，数组（重点）和函数（重点）

js基础:1.js的介绍及基本语法变量,运算符2.js的流程控制:分支语句,循环.顺序结构3.数组4.函数5.内置对象6.内置对象及一些方法01 复习一元运算符: ++ –如果不参与运算, ++在前面还是在后面结果都是一样的 +1如果不参与运算, --在前面还是在后面结果都是一样的 -1var num=10;num++; 后+++num; 前+无论是前...

2020-02-13 21:17:47 632

原创【 js基础 Day2】js的流程控制:分支语句,循环.顺序结构

js基础:1.js的介绍及基本语法变量,运算符2.js的流程控制:分支语句,循环.顺序结构3.数组4.函数5.内置对象6.内置对象及一些方法/*** 复习:* JavaScript简称为JS* JavaScript是什么?* 是一门脚本语言:不需要编译,直接运行* 是一门解释性的语言:遇到一样代码就解释一行代码* C#语言是一门面向对象的语言,也是编译语言,是.net...

2020-02-13 14:50:05 654

原创【 js基础 Day1】js的介绍及基本语法变量,运算符

js基础:1.js的介绍及基本语法变量,运算符2.js的流程控制:分支语句,循环.顺序结构3.数组4.函数5.内置对象6.内置对象及一些方法01 JavaScript :简称:js* js分三个部分:* 1. ECMAScript 标准----js的基本的语法* 2. DOM------Document Object Model 文档对象模型* 3. BOM------B...

2020-02-13 13:59:16 841

实验目的1、理解JavaScript中BOM编程和window对象的概念。2、掌握JavaScript中window对象常见方法open()、close()、focus()、blur()、setInterval()、clearInterval()、setTimeout()、clearTimeout()和print()等的使用技巧以及常用属性status、defaultstatus、opener...

2020-02-13 00:22:36 314

原创 document对象

一、Document对象1、什么是Document对象？DOM(Document Object Model,文档对象模型)定义了访问和操作HTML文档的标准方法。它把HTML文档表现为带有元素、属性和文本的树结构（节点树），如下图所示：文档对象:代表浏览器窗口中的文档，每个载入浏览器的HTML文档都会成为Document对象。作用：访问HTML文档中包含的任何HTML标记并可动态地改变HT...

2020-02-13 00:10:18 5994

原创 JavaScript事件

一、事件的概念1 什么是事件？事件：用户与网页进行交互时产生的各种操作或浏览器自身的动作，如页面加载（load事件）事件驱动：你点什么按钮（即产生什么事件），电脑执行什么操作（即调用什么函数）。基本结构：事件收集器+事件发送器+事件处理器Ø事件收集器：负责收集所有事件。Ø事件发送器：负责将收集器收集到的事件分发到目标对象中。Ø事件处理器：做具体的事件响应工作。事件处理：对事件进...

2020-02-13 00:01:12 232

原创 JavaScript对象（2）

实验目的1、熟悉JavaScript中字符串对象String的创建和基本属性。2、掌握JavaScript中字符串对象String常见方法anchor()、charAt()、charCodeAt()、concat()、indexOf()、lastIndexOf()、match()、replace()、search()、split()、substr()、subString()、slice()等的...

2020-02-12 23:54:00 263

原创 JavaScript内置函数

1.1 数字类型内置函数(1)isFinite()：检查某个值是否为有穷大的数作用：用于判断number对象是否是(或可转换成）一个有穷大(有限)的数字。语法：isFinite(number);参数：number必需的，为Number类型。如果参数不是Number类型(如字符串、函数等)，返回false。返回值：布尔类型(boolean)。如果number是有限数字(或可转换为有限数字)...

2020-02-12 00:05:43 469

原创 JavaScript对象

1.1 什么是对象？对象：对象是具有类类型的变量。将一组数据(属性)和与这组数据有关操作(方法)组装在一起，形成一个实体，这个实体就是对象。对象是人们要进行研究的任何事，它不仅能表示具体的事物，还能表示抽象的规则、计划或事件。对象的状态：对象中的数据，描述对象的信息。对象的行为：对象中的各种操作，用来描述对象的功能，改变对象的状态。对象实现了数据和操作的结合，使数据和操作封装于对象的统一体...

2020-02-11 23:56:11 153

原创 JavaScript函数实验题（2）

实验目的1、熟悉JavaScript函数的定义。2、掌握JavaScript函数的几种调用方法。3、熟悉JavaScript函数库的定义和引用。4、掌握JavaScript中几种特殊函数的定义和调用。5、掌握JavaScript中模式消息对话框的3种内置函数。实验内容与步骤一、函数库在js文件中定义一些函数，之后在html文件中引用他们，就可以调用他们完成相应功能。例如：m...

2020-02-11 22:51:17 1173

原创 JavaScript函数实验题（1）

函数实质上就是可以作为一个逻辑单元对待的一组JavaScript代码。使用函数可以使代码更为简洁，提高重用性。在JavaScript中，大约95%的代码都是包含在函数中的。由此可见，函数在JavaScript中是非常重要的。1.1 函数的定义函数是由关键字function、函数名加一组参数以及置于大括号中需要执行的一段代码定义的。定义函数的基本语法如下：function function...

2020-02-11 21:48:23 1025

原创 JavaScript其他语句

1、break语句break语句用于退出包含在最内层的循环或者退出一个switch语句。break语句通常用在for、while、do…while或switch语句中。break语句的形式：有标号(带标签引用)的和无标号(不带标签引用)。单独使用(无标签)：berak;(多数情况下)有标号(有标签)：break label;//跳出该标号所指定的循环，并执行该循环之后的代码。有标号标...

2020-02-10 18:51:51 286

原创 JavaScript流程控制

1、if条件判断语句if条件判断语句是最基本、最常用的流程控制语句，可以根据条件表达式的值执行相应的处理。if语句的语法格式如下：if(expression){ statement 1}else{ statement 2}expression：必选项，用于指定条件表达式，可以使用逻辑运算符。statement 1：用于指定要执行的语句序列。当expression的值为true时...

2020-02-10 18:42:23 477

原创运算符与表达式

运算符是用来完成计算或者比较数据等一系列操作的符号1.1 赋值运算符JavaScript中的赋值运算可以分为简单赋值运算和复合赋值运算。简单赋值运算是将赋值运算符（=）右边表达式的值保存到左边的变量中；而复合赋值运算混合了其他操作（算术运算操作、位操作等）和赋值操作。例如：sum+=i; //等同于sum=sum+i;JavaScript中的赋值运算符1.2 算术运算符...

2020-02-10 18:28:55 297

原创 JavaScript深入浅出

学习资料：《JavaScript权威指南》MON：https://developer.mozilla.org/ZH-CN/learn/javascript多动手实践+参与讨论1.数据类型js在定义变量中，无需指定类型,背后有很多的隐式转换逻辑var num=32可以把字符串赋值给这个变量，也是合法的num=''this is a string"接下来我们来看看下面的三种情况...

2020-02-10 18:05:38 639

你若盛开，清风自来