JS笔记之JS类(一)
JS笔记之JS类(一)在日常的开发中,京城需要构建许多类型相同的对象,例如 Users, Goods ,我们可以使用构造器来完成这样的操作,但是在现代JS中可以是使用类这种方式来创建相同类型的对象。
1 类基本语法12345678910class MyClass { // class 方法 constructor() { ... } method1() { ... } method2() { ... } method3() { ... } ...} let user = new User()
new 会自动调用constructor方法,因此可以在constructor方法中初始化对象。
123456789101112131415class User { constructor(name) { this.name = name; } sayHi() { ...
JS笔记之JS函数进阶(六)
JS笔记之JS函数进阶(六)1 函数绑定将对象方法作为回调进行绑定,例如传递给setTimeout会存在丢失this的问题。比如:
12345678let user = { firstName: "John", sayHi() { console.log(`Hello, ${this.firstName}!`); }};setTimeout(user.sayHi, 1000); // Hello, undefined!
这是因为setTimeout 获取到的函数 user.sayHi 和对象 user 分离了,无法在获取user 对象的上下文。
这是一种比较典型的问题:我们想将一个对象的方法,传递到别的地方调用,如何确保对象中的方法的上下文呢?
2 解决方案一:包装器通过包装器从外部的此法环境,能够获取user,
12345678910111213let user = { firstName: "John", ...
CSS弹性盒模型Flex知识巩固
所谓弹性盒模型就是首先要有一个盒子,即弹性盒,在盒子中的所有的元素都是弹性元素,我们可以控制里面的元素的排列组合。
例如盒子中有两个元素水平排列时,他们自动等宽排列。我们同样可以使其(弹性元素)竖直排列。
当增加了一个盒子,会自动变为三个元素水平等宽排列。
1 声明弹性盒子例如当前我们有这样一个结构:
1234567<body> <article> <div>1</div> <div>2</div> <div>3</div> </article></body>
123456789101112131415161718* { margin: 0; padding: 0;}article { border: 2px solid rgb(15, 25, 171); width: 500px; margin: 50px auto;}article * ...
JS笔记之JS函数进阶(三)
JS笔记之JS函数进阶(三)在JS中 函数也是一种值,函数的类型就是Object,函数本身也包含自己的属性。
1 name 属性在创建一个函数时,我们可以根据函数名获取对应函数的name属性,直接创建一个具名函数或者使用命名表达式,来创建函数,函数名和命名表达式的变量名就是函数的name属性。
123456789function sayHi() { console.log("Hi");}console.log(sayHi.name); // sayHilet sayHi = function () { console.log("Hi");};console.log(sayHi.name); // sayHi(有名字!)
在对象中的函数同样也是具有该属性,当无法获取该属性时, name的值为空字符串。
1234// 函数是在数组中创建的let arr = [function() {}];console.log( arr[0].name ); // &l ...
JS笔记之JS函数进阶(五)
JS笔记之JS函数进阶(五)1 JS函数应用缓存之透明缓存当我们有一个函数运行非常慢且每次结果都一致的时候,可以用到包装器函数,用来保存他的运行结果。我们可以使用一个Map 对象,来保存函数第一次运行的结果。
12345678910111213141516171819202122232425262728function slow(x) { // 这里可能会有重负载的 CPU 密集型工作 console.log(`Called with ${x}`); return x;}function cachingDecorator(func) { let cache = new Map(); return function (x) { if (cache.has(x)) { // 如果缓存中有对应的结果 return cache.get(x); // 从缓存中读取结果 } let result = fu ...
JS笔记之JS函数进阶(四)
JS笔记之JS函数进阶(四)1 setTimeout 和 setInterval语法格式
12345// setTimeout 第一个参数:一个函数或者是字符串代码(这个不常用),第二个参数:时间间隔,代表多少秒后直行,剩下的参数:代表函数的参数。let timer = setTimeout(() => {}, timeout [, arg1, arg2]);// 和setTimeout 参数一致,只不过代表的含义为重复执行该函数,interval 是重复的间隔。let timer2 = setInterval(() => {}, interval [, arg1, arg2]);
停止计时器使用clearTimeout(timer) 和 clearInterval(timer2)。
使用 clearInterval 函数的调用间隔实际会代码设置的调用间隔要短,因为是在函数开始时就开始计算时间,这个间隔时间包括函数执行的时间,如果函数执行的比较慢,name就会等待函数执行完成,如果函数的执行时间小于执行间隔, ...
JS笔记之JS函数进阶(一)
JS笔记之JS函数进阶(一)1 函数rest参数在JS中很多内建的参数都支持传入无限个数的参数。
当我们自己定义一个函数时, 也可以转入无限个数的参数,但是只能根据形参的个数来获取真正的参数,如何实现接收无限个参数或者接收数组形式的参数?
可以在函数定义时声明一个数组来收集参数,语法格式为:...变量名, 这会声明一个数组,并指定一个名称为变量名,其中存有剩余的参数。三个点的含义就是将剩余的参数存储到指定的数组中。例如:
1234567function sumAll(...args) { // 数组名为 args let sum = 0; for (let arg of args) sum += arg; return sum;}
...args 称为Rest 参数,他可以和其他的正常的函数同时使用,因为...args 会收集所有剩余的参数,因此,这种语法格式只能放在函数的末尾。
在Python函数支持位置参数和关键字参数,同样可以使用*args 来接收不限个数的位置参数或者是使用**kwargs来接收不限制个数的关键字参数, ...
JS笔记之JS函数进阶(一)
JS笔记之JS函数进阶(一)1 let 和 var 的区别let 属于现代JS的声明变量的方式,而var则是老旧的方式。所以现在尽可能使用let。
一般情况下可以使用 let 代替var,或者使用var 代替 let,但是在某些方面存在着巨大的差异。
1.1 var没有块级作用域例如:在 if 或者 while 中使用 var 声明的变量,可以在其他的地方获取到。是因为早期的JS中,块没有词法环境。
123456789if (true) { var test = true; // 使用 "var" 而不是 "let"}console.log(test); // true,变量在 if 结束后仍存在if (true) { let test = true; // 使用 "let"}console.log(test); // ReferenceError: test is not defined
1.2 var 允许重新声明使用var可以多次声 ...
JS笔记之JS数据类型(七)
JS笔记之JS数据类型(七)1 日期和时间1.1 创建日期12// 语法let now = new Date()
1.2 Date() 接收参数类型
int类型:代表距离 1970 年 1 月 1 日 UTC+0 之后经过的毫秒数,可以为负数。
1234567891011// 0 表示 01.01.1970 UTC+0let Jan01_1970 = new Date(0);alert( Jan01_1970 );// 现在增加 24 小时,得到 02.01.1970 UTC+0let Jan02_1970 = new Date(24 * 3600 * 1000);alert( Jan02_1970 );// 31 Dec 1969let Dec31_1969 = new Date(-24 * 3600 * 1000);alert( Dec31_1969 );
str类型:将会自动解析为 时间字符串
12345678let date = new Date("2017-01-26");alert(date);// 未指定 ...
JS笔记之JS数据类型(八)
JS笔记之JS数据类型(八)1 JSON.stringify(obj)JSON编码的对象与JS对象的字面量有一些区别:
字符串使用双引号,没有单引号或者反引号。
对象的属性名称也是双引号的,是强制性的。
JSON支持以下的数据类型:
Objects {…}
Arrays […]
Strings ‘ ‘
numbers 1
boolean true false
null
JSON是语言无关的数据规范,所以一些属于JS的对象属性将会被忽略掉,例如:
函数
Symbol
undefined
123456789let user = { sayHi() { // 被忽略 console.log("Hello"); }, [Symbol("id")]: 123, // 被忽略 something: undefined // 被忽略};console.log( JSON.stringify(user) ); // ...