JavaScript
一只tobey
中国,广州,从城中到乡下,再从乡下进城里,保持努力!
展开
-
javascript之匿名函数与自执行
自执行的匿名函数它是指形如这样的函数: (function {// code})();为什么(function {// code})();可以被执行, 而function {// code}();却会报错? (1). 首先, 要清楚两者的区别:(function {// code})是表达式, function {// code}是函数声明.(2). 其次, js"预编译"的特点:js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.(3). 当...原创 2021-01-27 09:48:31 · 473 阅读 · 0 评论 -
方法中的局部变量的生命周期和for循环等循环结构的变量的生命周期
import java.util.ArrayList;public class LifeTime { public static void main(String[] args) { method(); } public static void method(){ ArrayList list = new ArrayList(); int count = 5; for (int i = 0; i < coun.原创 2020-12-04 15:21:09 · 888 阅读 · 0 评论 -
JS中模块的加载
JS中可以采用es6的形式import...from...也可使用Common JS中的规范:require原创 2020-11-02 11:26:55 · 217 阅读 · 0 评论 -
ES6 Module语法的特点,export和import的用法,import加载整个模块,export default用法,export .... from ...的复合写法,新增的动态加载函数
历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby 的require、Python 的import,甚至就连 CSS 都有@import。在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务原创 2020-10-13 11:53:22 · 1899 阅读 · 0 评论 -
ES6,Class的进阶(继承) extends、super关键字,Object.getPrototypeOf(),类的prototype 属性和__proto__属性,.实例的__proto__属性
1.class的继承:extends关键字Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。class Point {}// ColorPoint 继承自 Point class ColorPoint extends Point {}(1)子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行原创 2020-09-22 23:30:07 · 745 阅读 · 0 评论 -
ES6,代替对象原型的class基本语法(特点、constructor、添加、存取、5大注意),添加static的静态方法和静态属性,实例属性的写法,加#号的私有方法和属性,new.target方法
JavaScript 语言中,生成实例对象的传统方法是通过构造函数。function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = new Point(1, 2);Object.keys(Point.prototype)// ["toString"] 方法原创 2020-09-22 10:54:30 · 525 阅读 · 0 评论 -
ES6,新写法的Promise对象。两个特点,then、catch、finally实例方法,all、race、allSettled、any、resolve、reject、try对象方法,以及应用
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。...原创 2020-09-16 15:15:32 · 1883 阅读 · 0 评论 -
ES6,对象的新增方法:Object.is(),Object.assign(),Object.keys、values、entries()、fromEntries()、获取属性、原型对象操作方法
1. Object.is()ES5比较两个运算符是否相等,有两种运算符:相等运算符和严格相等运算符。缺点:前者会自动转数据类型,后者的NaN不等于自身,以及+0等于-0。所以缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。ES6 提出“Same-value equality”(同值相等)算法,用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。不同之处只有两个:一是+0不等于-0,二是NaN等于自身。原创 2020-09-11 14:47:46 · 725 阅读 · 0 评论 -
ES6,对象的扩展:对象属性名的两种表示方法、属性的枚举和遍历及规则,super关键字,对象的扩展运算符、链判断运算符、Null判断运算符
1.属性名的两种表示方法(1)简洁表示法ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。简洁表示法的特点是在对象定义中直接使用变量名。对于属性:变量foo直接写在大括号里面。这时,属性名就是变量名, 属性值就是变量值。对于方法:可以省略function关键字,方法名即函数名。注意,简写的方式不能用作构造函数,会报错。属性的简写const foo = 'bar';const baz = {foo};// 等同于const baz = {foo: foo};原创 2020-09-09 17:30:47 · 1181 阅读 · 0 评论 -
ES6,数组的新增方法,其中7个数组的实例方法,数组的扩展运算符和将其他类数组对象转为数组,数组空位的处理对比。
1.扩展运算符(三个点)好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。该运算符主要用于函数调用。如果扩展运算符后面是一个空数组,则不产生任何效果。注意,只有函数调用时,扩展运算符才可以放在圆括号中,否则会报错。console.log(...[1, 2, 3]) // 1 2 3console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5(...[1, 2]) // Uncaught SyntaxError: Unexpected numb原创 2020-09-07 18:02:15 · 244 阅读 · 0 评论 -
ES6 函数参数(默认值的设置,默认值位置,参数作用域),函数的2个属性(name和length),箭头函数的4大注意事项
1.函数参数的默认值ES5,默认值的写法:function log(x, y) { y = y || 'World'; // 改进为if (typeof y === 'undefined') { y = 'World';} console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello WorldES6 允许为函数的参数设原创 2020-09-03 21:30:16 · 1052 阅读 · 0 评论 -
ES6,Number类型和新增的BigInt数据类型,以及数值精度丢失的问题
目录一、Number数据对象的ES6新方法二、数值的精度四、Math对象的拓展五、BigInt 数据类型一、Number数据对象的ES6新方法1.Number.isFinite()用来检查一个数值是否为有限的(finite),即不是Infinity。注意,如果参数类型不是数值,Number.isFinite一律返回false。Number.isFinite(15); // trueNumber.isFinite(0.8); // trueNumber.isFin..原创 2020-09-03 21:00:24 · 4804 阅读 · 0 评论 -
ES6,字符串一些新增方法:检查是否存在; repeat(); 首尾填充; 首尾去不可见的空白符号
ES5的一些字符串方法1.includes(), startsWith(), endsWith()传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。includes():返回布尔值,表示是否找到了参数字符串。支持第二个参数,表示开始搜索的位置。 startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。支持第二个参数,表示开始搜索的位置。 endsWith():返回布尔值,表示参数字符串是否在原字原创 2020-09-03 11:32:59 · 313 阅读 · 0 评论 -
ES6,解构赋值的6大种类,解构赋值中圆括号的注意事项以及解构赋值的常见7大应用
数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值 圆括号问题 用途原创 2020-09-02 16:01:33 · 1146 阅读 · 0 评论 -
ES6,块级作用域(let和const的详解),全局对象逐渐脱钩顶层对象属性,使用globalThis对象指向顶层对象,
ES6声明变量有6种方法:var、function、let、const、class、importES5声明变量有2种方法:var、function目录let命令:块级作用域:const命令:顶层对象属性和全局变量的关系:globalThis对象:let命令:声明变量,只在let命令所在的代码块内有效。在let命令所在的代码块内有效。特别的对于for循环,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域 不存在变量提升,它所声明的变量一定要原创 2020-09-02 15:57:37 · 503 阅读 · 0 评论 -
underscore单独对Object对象的函数,函数的链式调用
underscore单独对Object对象的函数的官方文档underscore的链式调用chain_.chain(obj)Returns a wrapped object. Calling methods on this object will continue to return wrapped objects until value is called.value_.chain(obj).value()Extracts the value of a wrapped object.因为原创 2020-09-02 10:04:30 · 140 阅读 · 0 评论 -
underscore单独提供的许多高阶函数Functions
functions的官方文档1.bind当用一个变量fn指向一个对象的方法时,直接调用fn()是不行的,因为丢失了this对象的引用。用bind可以修复这个问题。'use strict';var s = ' Hello ';s.trim(); // 输出'Hello'var fn = s.trim;fn(); // Uncaught TypeError: String.prototype.trim called on null or undefined// 正确的是调用cal原创 2020-09-02 09:43:56 · 194 阅读 · 0 评论 -
underscore库单独对Array的方法(详见参考文档)
underscore为Array提供了许多工具类方法,可以更方便快捷地操作Array。原创 2020-09-02 09:25:47 · 152 阅读 · 0 评论 -
underscore第三方库对collections(集合类对象)进行高阶函数的使用:map,filter,every,some,max,min,groupBy,shuffle,sample
Array有map()和filter()方法,而Object没有这些方法;同时,低版本的浏览器例如IE6~8也没有这些方法。方法一,自己把这些方法添加到Array.prototype中,然后给Object.prototype也加上map()等类似的方法,具体使用函数共用。方法二,直接找一个成熟可靠的第三方开源库,使用统一的函数来实现map()、filter()这些操作。方法二,选择的第三方库就是underscore。不仅可以作用Array,还可以Object。在node.js的命令行中或者V原创 2020-09-01 21:39:02 · 310 阅读 · 0 评论 -
异步处理出现的错误原因和解决方法
JavaScript引擎是一个事件驱动的执行引擎,代码总是以单线程执行,而回调函数的执行需要等到下一个满足条件的事件出现后,才会被执行。function printTime() { console.log('It is time!');}setTimeout(printTime, 1000); // setTimeout()函数可以传入回调函数,并在指定若干毫秒后执行console.log('done');// 运行结果 done It is time! 中间隔了1s时间原创 2020-09-01 20:05:20 · 3760 阅读 · 0 评论 -
进程,单线程,多线程之间的比较和举例
什么是进程?当一个程序开始运行时,它就是一个进程,进程包括运行中的程序和程序所使用到的内存和系统资源。而一个进程又是由多个线程所组成的。什么是线程?线程是程序中的一个执行流,每个线程都有自己的专有寄存器(栈指针、程序计数器等),但代码区是共享的,即不同的线程可以执行同样的函数。什么是多线程?多线程是指程序中包含多个执行流,即在一个程序中可以同时运行多个不同的线程来执行不同的任务,也就是说允许单个程序创建多个并行执行的线程来完成各自的任务。多线程的好处:可以提高CPU的利用率。在多线程..转载 2020-09-01 17:10:20 · 900 阅读 · 0 评论 -
Error对象的处理,派生的6大类型,自定义error信息,以及Error的传递路径
在执行JavaScript代码的时候,有些情况下会发生错误。第一类是语法错误,此类错误会导致整个js文件无法执行。另一类错误统称为异常,例如,网络连接中断,读取不存在的文件,没有操作权限等;此类错误不影响错误前的代码执行。对于第一种错误,要修复程序。对于第二种错误,我们需要处理它,并可能需要给用户反馈。目录try ... catch ... finally错误对象(标准内置对象之一)常见6大错误类型throw语句抛出错误Error的传播路径使用错误处理逻辑:try ...原创 2020-09-01 16:25:57 · 1522 阅读 · 0 评论 -
浏览器的6大常用对象:window、navigator、screen、location、document、history
浏览器对象模型(Browser Object Model (BOM)):允许 JavaScript 与浏览器对话。不同的浏览器对JavaScript支持的差异主要是,有些API的接口不一样,比如AJAX,File接口。对于ES6标准,不同的浏览器对各个特性支持也不一样。在编写JavaScript的时候,就要充分考虑到浏览器的差异,尽量让同一份JavaScript代码能运行在不同的浏览器中。浏览器提供6大对象提供JavaScript获取:window、navigator、screen、location原创 2020-08-31 17:37:23 · 6389 阅读 · 0 评论 -
this关键字全面剖析
this绑定对象的四条规则及优先级,箭头函数this不可主动修改,一般函数和变量的this,对象方法函数的this,原型链上的this,构造函数上的this原创 2020-08-31 15:31:20 · 233 阅读 · 0 评论 -
对象原型的继承(使用构造函数,中间空函数,可选的数据封装表达)
上一篇说的是类和实例之间的关系类的继承:当定义一个class的时候,可以从某个现有的class继承,新的class称为子类(Subclass),而被继承的class称为基类、父类或超类(Base class、Super class)。继承有什么好处?最大的好处是子类获得了父类的全部功能。继承的第二个好处需要我们对代码做一点改进。类和类之间的关系。JavaScript由于采用原型继承,我们无法直接扩展一个Class,因为根本不存在Class这种类型。原型继承的方式:1.定义新的构造函数,并在.原创 2020-08-31 09:16:59 · 177 阅读 · 0 评论 -
面向对象的类和实例对应原型链,普通函数和构造函数,函数方法的共用,原型的设置初始化值
JavaScript不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程。JavaScript的原型链和Java的Class区别就在,它没有“Class”的概念,所有对象都是实例,所谓继承关系不过是把一个对象的原型指向另一个对象而已。前面所讲,JavaScript对象包括了数组Array,函数function,{}对象。JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象。,在原型对象中定义的方法,对于每个对象是通用的。例如,创建一个Array对象:va原创 2020-08-27 19:43:44 · 251 阅读 · 0 评论 -
JSON:一种速度快的,标准的,序列化的数据交换格式(字符串)
JSON(JavaScript Object Notation)是一种数据交换格式。在JSON出现之前,大家一直用XML来传递数据。因为XML是一种纯文本格式,所以它适合在网络上交换数据。XML本身不算复杂,但是,加上DTD、XSD、XPath、XSLT等一大堆复杂的规范以后,任何正常的软件开发人员碰到XML都会感觉头大了,最后大家发现,即使你努力钻研几个月,也未必搞得清楚XML的规范。JSON 类似 XML,因为:JSON 和 XML 都是“自描述的”(人类可读的) JSON 和 XML 都原创 2020-08-27 15:30:56 · 479 阅读 · 0 评论 -
字符串高效的、能复用的、简练的操作:RegExp(正则表达式)
字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在。比如判断一个字符串是否是合法的Email地址,虽然可以编程提取@前后的子串,再分别判断是否是单词和域名,但这样做不但麻烦,而且代码难以复用。正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则,凡是符合规则的字符串,我们就认为它“匹配”了,否则,该字符串就是不合法的。正则表达式也是用字符串表示的,所以,要首先了解如何用字符来描述字符。创建正则表达式对象的语法如下:va原创 2020-08-27 11:36:37 · 558 阅读 · 0 评论 -
Date对象的创建方式和具有的方法,时间戳的概念,时间戳转换成Date对象
在JavaScript中,Date对象用来表示日期和时间。var snow = Date(); // 得到的是string类型,当前时间snow; // "Wed Aug 26 2020 17:09:08 GMT+0800 (中国标准时间)"var now = new Date(); // 前面加new关键字表示创建对象,得到的是object类型now; // Date Wed Aug 26 2020 17:09:48 GMT+0800 (中国标准时间)now.getFullYear(原创 2020-08-26 17:47:13 · 1052 阅读 · 0 评论 -
箭头函数和匿名函数的异同
ES6标准新增了一种新的函数:Arrow Function(箭头函数)。属于函数,所以不需要分号结尾。函数调用的时候才需要分号结尾。箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种只包含一个表达式,连{ ... }和return都省略掉了。还有一种可以包含多条语句,这时候就不能省略{ ... }和return;对于对象的返回,一定要加上小括号。// 一个参数,只包含一个表达式x => x * xfunction(x){return x*x;} // 匿名函数//原创 2020-08-26 16:48:48 · 3751 阅读 · 4 评论 -
Array的高阶函数:map、reduce、filter、sort,every,find,findIndex,forEach
map函数:小写,和之前的Map数据类型不一样,这个是函数。map()方法定义在JavaScript的Array中,我们调用Array的map()方法,传入我们自己的函数,就得到了一个新的Array作为结果:'use strict';function pow(x) { return x * x;}var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];var results = arr.map(pow); // 返回平方[1, 4, 9, 16, 25, 36原创 2020-08-26 16:13:35 · 753 阅读 · 0 评论 -
对象的方法(函数),初识this关键字
如果一个函数不是 JavaScript 对象的方法,那么它就是全局对象的函数。var xiaoming = { name: '小明', birth: 1990, age: function () { var y = new Date().getFullYear(); return y - this.birth; }};age的value是一个对象的方法,它在内部使用了一个this关键字xiaoming.age; // functi.原创 2020-08-26 09:20:29 · 301 阅读 · 0 评论 -
javascript的介绍,变量let和var声明,变量作用域,解构赋值
JavaScript除了语法上有点像Java,其他部分基本上没啥关系。ECMAScript是一种语言标准,而JavaScript是网景公司对ECMAScript标准的一种实现。由于JavaScript的标准——ECMAScript在不断发展,最新版ECMAScript 6标准(简称ES6)已经在2015年6月正式发布了。ECMAScript第一版标准发布于:1997年JavaScript代码的处理方式:1.直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到<head>原创 2020-08-25 16:57:26 · 311 阅读 · 0 评论 -
Iterable类型的遍历
为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型。具有iterable类型的集合可以通过新的for ... of循环来遍历。用法如下:var a = ['A', 'B', 'C'];var s = new Set(['A', 'B', 'C']);var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);for (var x of a) { // 遍历Array console.lo原创 2020-08-25 15:55:03 · 2652 阅读 · 0 评论 -
对象的拓展:ES6的新数据类型Map和Set,解决键值JS中对象键只能为字符串的不合理性
JavaScript的对象有个小问题,就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。为了解决这个问题,最新的ES6规范引入了新的数据类型Map。Map初始化Map需要一个二维数组,或者直接初始化一个空Map。var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);var m = new Map(); // 空MapMap具有以下方法:m.set('Adam', 67); //原创 2020-08-25 15:33:52 · 617 阅读 · 0 评论 -
循环,4种方式
JavaScript 支持不同类型的循环:for - 多次遍历代码块 for/in - 遍历对象属性 while - 当指定条件为 true 时循环一段代码块 do/while - 当指定条件为 true 时循环一段代码块, 需要分号结尾for 循环的语法如下:for (语句 1; 语句 2; 语句 3) { 要执行的代码块}语句 1 在循环(代码块)开始之前执行。语句 2 定义运行循环(代码块)的条件。语句 3 会在循环(代码块)每次被执行后执行。for循环的3.原创 2020-08-25 14:39:08 · 1678 阅读 · 0 评论 -
条件判断:if else switch
JavaScript把null、undefined、0、NaN和空字符串''视为false,其他值一概视为true。判断语句的结尾不使用分号;if 语句:if (条件) { 如果条件为 true 时执行的代码} else 语句: else 语句来规定假如条件为 false 时的代码块。if (条件) { 条件为 true 时执行的代码块} else { 条件为 false 时执行的代码块}else if 语句:使用 else if 来规定当首个条.原创 2020-08-25 11:21:50 · 153 阅读 · 0 评论 -
对象,对象属性和方法
JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成。对象也是变量。语法 var object_name = {key:value, key:value,...};JavaScript用一个{...}表示一个对象,键值对以xxx: xxx形式申明,用,(逗号)隔开。注意,最后一个键值对不需要在末尾加,(逗号),如果加了,有的浏览器(如低版本的IE)将报错。var person = {firstName:"Bill", lastName:"Gates", age:62, eye原创 2020-08-25 10:59:24 · 8497 阅读 · 0 评论 -
字符串的转义、多行以及连接方法(+,$);数组的属性和方法
转义字符:\可以转义很多字符,比如\n表示换行,\t表示制表符,字符\本身也要转义,所以\\表示的字符就是\。注意转义的字符长度是1,汉字长度也是1。多行表示:由于多行字符串用\n写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用反引号 ` ... ` 表示`这是一个多行字符串`;连接字符串:有两种方法,第一种方法使用+连接符连接;第二种方法使用ES6的模板字符串,格式中必须采用反引号,变量使用${}。var name = '小明';var age = 20;原创 2020-08-25 10:19:56 · 1297 阅读 · 0 评论 -
JS的变量,使用strict模式
变量在JavaScript中就是用一个变量名表示,变量名是大小写英文、数字、$和_的组合,且不能用数字开头。变量名也不能是JavaScript的关键字,如if、while等。申明一个变量用var语句,只能用var申明一次。如果再次声明某个 JavaScript 变量,也不会丢它的值,但最好避免多次声明。var x = 3 + 5 + "8"; // x的初始值为‘88’var x = "8" + 3 + 5; // x的值为‘835’var x = 3 + 5 + 8; // x的值为1原创 2020-08-24 16:26:29 · 269 阅读 · 0 评论