JavaScript 基础 琐碎知识点

琐碎知识点

typeof

typeof是一个操作符，使用方法：typeof 变量名 or typeof(变量名)。
他不是一个方法、函数，而是操作符

数字类型转换

Number函数

1. String -> Number

var s1 = '123', s2 = 'abc'
n1 = Number(s1)
n2 = Number(s2)
n1: 123
n2: NaN(not a number) 注意：此时typeof n2 为Number类型

2. Boolean -> Number

var b1 = true, b2 = false
b1 -> 1, b2 -> 0

3. undefined-> Number

var b1 = undefined
Number(b1) = NaN	此时typeof为Number类型

4. null-> Number

var b1 = null
Number(b1) = 0

parseInt & parseFloat函数

1. parseInt

parseInt('123') -> 123, number
parseInt('abc123') -> NaN, number
parseInt('123abc') -> 123, number
parseInt('123.45') -> 123, number
parseInt('111', 2) -> 7, number (二进制)

2. parseFloat

parseFloat('123') -> 123, number
parseFloat('123.45') -> 123.45, number
parseFloat('123.45.67') -> 123.45, number
parseFloat('abc123') -> NaN, number
parseFloat('123abc') -> 123, number
! 不可用'进制'：parseFloat('111', 2) -> 7, number (二进制)

字符串类型转换

obj.toString()

适用于Number、Boolean类型的数据
不可用于Undefined、Null类型的数据

var n = 123
var flag = true
n.toString() -> '123'
flag.toString() -> 'true'

String()

适用于这四种数据类型

var n = 123,
var flag = true
var a = undefined
var b = null

String(n) -> '123'
String(flag) -> 'true'
String(a) -> 'undefined'
String(b) -> 'null'

隐式转换

当其他的数据类型与字符串通过+运算符进行拼接时，会自动转换为字符串

e.g. 
undefined + ""
null + "123"
123 + "str"
false + "f"

布尔类型转换

使用Boolean()函数来将其他类型转换为布尔类型，以下五种值在转换时将会为false，其余为true。

• “” 空字符串
• 0, -0
• undefined
• null
• NaN

函数

两种函数表达方式：

// 一般方式
function(){
    
}
// or 箭头函数 （在实例内部，箭头函数内的this仍指向实例）
() => {
    
}

预解析

浏览器Js引擎执行Js代码的步骤分为两步：
（1）预解析：Js引擎会把js代码中所有的var,function提升到当前作用域的最前面
（2）代码执行：按照代码书写的顺序从上往下执行
其中，预解析分为 变量预解析（变量提升）和函数预解析（函数提升）
变量提升：将所有的变量声明提升到当前作用域的最前面，不提升变量赋值
函数提升：将所有的函数声明提升到当前作用域的最前面，不调用函数

案例一：

var num = 10;						var num;
fun();					  实际相当于function fun() {
function fun() {			==>			var num;
    console.log(num);					console.log(num);
    var num = 20;						num = 20;
}									}
									fun();

根据就近原则，num取函数内定义的num，但是因为变量提升没有赋值，所以是未定义
最终打印结果：undefined

***案例二：

f1();								function f1() {
console.log(c);							var a;
console.log(b);							a = b = c = 9;
console.log(a);			实际相当于		console.log(a);	
function f1() {				==>			console.log(b);	
	var a = b = c = 9;					console.log(c);	
	console.log(a);					}
	console.log(b);					f1();
	console.log(c);					console.log(c);	
									console.log(b);
									console.log(a);		
}
注意： var a = b = c = 9   相当于  var a = 9; b = 9; c = 9;
b 和 c 是直接在函数内部赋值的，相当于全局变量，a是var声明了，是局部变量
集体赋值语句为： var a = 9, b = 9, c = 9;

在最后一句打印的时候，因为a是局部变量，所以报错 a is not defined
最终结果： 9 9 9 9 9 报错

对象

创建对象的三种方式

1. 利用字面量创建对象

   var obj = {
   	name: qq,
   	age: 18,
   	sayHi: function() {			// 匿名函数
   		console.log("Hi");
   	}
   }
   

2. new Object方法创建对象

var obj = new Object();
obj.name = qq;
obj.sayHi = function() {
	console.log("Hi");
}
console.log(obj.name, obj['name']);

3. 构造函数(类似于class)创建对象

function Person(name, age) {
	this.name = name;
	this.age = age;
	this.sayHi = function(words) {
		console.log(words);
	};
}
var qq = new Person('qq', 18);
console.log(qq.name, qq.age);
qq.sayHi("hi~");

使用构造函数创建一个对象的过程叫做对象实例化，因此对象也称为实例。
var qq = new Persion('qq', 18);这行代码的执行过程：
① 首先在内存中创建了一个空的对象（属于Person类）
② 此时函数内的this指向这个对象
③ 函数内的代码依次执行，给这个对象添加属性和方法
④ 函数执行完毕，返回这个对象给qq

遍历对象

使用 for in来遍历对象的key

var obj = {
	age: 18,
	name: 'qq',
	height: '180'
}
for (var k in obj) {
	console.log(k);
	console.log(obj[k]);
}

内置对象—数学Math

1. Math.max()

Math.max(-1, 1, 3, '5')  -> 5
Math.max(-1, ,1, 3, 'qwe') -> NaN

2. Math.abs()

Math.abs(-1) -> 1
Math.abs('-5') -> 5
Math.abs('q') -> NaN

3. Math.floor() 取整，地板（向下取整）
4. Math.ceil() 取整，天花板（向上取整）
5. Math.round() 取整，四舍六入，.5往大取（-1.5 -> -1）
6. Math.random() 随机生成小数x，0 ≤ x ＜ 1

内置对象—日期Date

1. Date必须使用构造函数的方法来创建对象实例

var date = new Date();  -> 返回的是当前日期时间的对象
date.getFullYear()	-> 年份 2021
date.getMonth()	-> （月份 - 1） 2月就返回 1
date.getDate()		-> 日期 7
date.getDay()		-> 0-星期日， 1~6 星期一~星期六

2. 获得时间戳

// 一	valueOf()、getTime()
var date = new Date();
console.log(date.valueOf(), date.getTime());

// 二	简单写法
var date1 = +new Date();
console.log(date1);

// 三	H5 新增写法
console.log(Date.now());

内置对象—Array数组

数组.filter(item => item...) 对数组的每个元素进行判断，如果回调函数的返回值为True则保留，为False则滤除该元素
数组.push(xxx) 为数组的末尾添加一个元素或多个元素，返回值为修改后数组的长度
数组.unshift(xxx,xxx,xxx)向数组的开头添加一个或多个元素，返回值为修改后数组的长度
数组.shift() 删除数字开头的第一个元素，返回值是被删除元素的内容
数组.pop() 将数组的最后一个元素丢弃，返回值是被删除元素的内容
数组.slice(i, j) 将数组索引第i个到第j-1个取出,并返回所取出的数组
数组.splice(i, j) 将数组第i个索引开始的j个元素全都删除，同时返回被删除部分的数组
数组.concat() 连接多个数组，不影响原来的数组，返回一个新数组
数组.reverse() 将数组翻转，直接对数组操作，返回值也为修改后的数组
数组.sort((a, b) => {return a - b}); 将数组按升序排序，直接对数组操作，返回值也为修改后的数组
数组.sort((a, b) => {return b - a}); 将数组按降序排序，直接对数组操作，返回值也为修改后的数组
数组.indexOf(xxx[, index]) 从前往后查找值为xxx的元素的索引号，返回值即索引号，有多个符合条件的元素也只返回第一个，如无则返回-1，若传入第二个参数，则根据index从指定索引位置开始查找
数组.lastIndexOf(xxx) 从后往前查找值为xxx的元素的索引号，返回值即索引号，有多个符合条件的元素也只返回第一个，如无则返回-1
数组.toString() 将数组转化为字符串，以逗号分割，返回值为新数组
数组.join('x') 将数组以传入的x符号进行分割，不传默认为逗号，返回值为新数组

简单、复杂数据类型

简单数据类型也可称为基本数据类型或值类型，复杂类型又叫做引用类型。

• 简单数据类型：在存储时变量中所存的是其值本身，因此叫做值类型
  string, number, boolean, undefined, null (typeof null --> object)
• 复杂数据类型：在存储时变量中所存的仅仅是地址（引用），因此叫做引用类型
  通过new关键字创建的对象（系统对象，自定义对象），如Object，Array，Date等

栈：由操作系统自动分配和释放空间，存放函数的参数值、局部变量的值等等，简单数据类型存放在此
堆：复杂数据类型存放在此，一般由程序员分配释放空间，或由垃圾回收机制来释放

复杂数据类型在堆栈空间的存放方式：

简单及复杂数据类型在堆栈中的存放方式

简单数据类型的传参方式

复杂数据类型的传参方式

基本包装类型

为了方便操作基本数据类型，JavaScript提供了三个特殊的引用类型（复杂数据类型）：String、Number、Boolean。
基本包装类型就是把简单数据类型包装成复杂数据类型，从而可使基本数据类型拥有方法和属性。

var str = 'andy';
console.log(str.length);	-> 4
-----上述代码的str是字符串基本数据类型，应该没有属性和方法，但是却可以使用str.length,
这是因为JavaScript把str从基本数据类型包装成了复杂数据类型，具体过程如下：

1. 生成一个是复杂数据类型的临时变量
var temp = new String('andy');
2. 将其赋值给我们声明的字符变量
var str = temp;
3. 将临时变量销毁
temp = null;

内置对象—String字符串

字符串是不可变的

var str = 'an';
str = 'be';

在上述代码中，字符串进行了变化，其实质是首先str指向了一块内存区域（存放的内容是an），之后则是再开辟了一块内存区域（存放内容是be），并将str的指向变成指向be这块内存，而an内存块仍存在，因此要少做字符串的修改和拼接操作，会占据内存。

根据字符返回位置\搜索字符

str.indexOf('xxx'[, index])		若传入第二个参数，则根据index从指定索引位置开始查找，返回索引号
`大字符串.search('子串')` 	返回值：如果子串包含在大字符串中，则为索引值，如果不存在则为-1
`大字符串.includes('子串')` 如果子串包含在大字符串中，则返回true，不包含则返回false
`字符串.replace(a, b)` 用于替换字符串中的元素，第一个形参a为需被替换的字符串：正则表达式或字符串`a可以是/xxx/g,/xxx/i,'xxx'`g为全局替换，i为忽略大小写；第二个形参b为替换后的字符串或处理函数的返回值

根据位置返回字符

1. charAt(index)	返回指定位置的字符	str.charAt(0)
2. charCodeAt(index)	返回指定位置的字符的ASCII码	str.charCodeAt(0)
3. str[index]	H5新增方法，返回指定位置的字符	str[0]

str.replace('x', 'y') 将字符串中的x替换为y，注意只能替换字符串中的第一个x

str.split('分隔符') 将字符串以传入的符号为分隔符，分割成数组，返回值是分割后的数组

大小写转换：str.toUpperCase()、str.toLowerCase()

Moment

安装moment: npm i moment
调用Moment：<script src="./node_modules/moment/min/moment.min.js"></script>

格式化时间：time = moment(时间).format('YYYY-MM-DD HH:mm:ss')

ES 6新特性

新特性概览:

1. let const
2. 箭头函数
3. Promise
4. 解构赋值
5. 默认形参
6. 函数扩展 function test(…arg) var arr = [1,2,3] test(…arr)
7. 模板字符串 ${name}
8. 字符串的扩展 .startsWith .endsWith padStart padEnd includes async await
9. ES6中的导入和导出 import 变量名 from ‘标识符’ export default {} export
10. 定义对象的快捷方式

    var a =10
    {
      a,
      show(){}
    }
    

11. class 关键字
12. Fetch API（作用就是来发起Ajax请求的， 目的是为了替代传统的XHR对象）

导入与导出

如何从a.js文件里读取b.js文件里的数据：

b.js:

export default{
    a: 10,
    b: 'qq'
}

export var c = 'xxx'

a.js

import m1, { c } from './js/b'
console.log(m1)
console.log(c)

注意事项：

1. 在模块中，使用 export default 向外暴露成员，只能有唯一的一个 export default
2. 使用 export default 向外暴露的成员对象，可以使用任何合法的变量名来接收！
3. export default 和 export 可以同时使用；
4. 使用 import 变量名 from ‘标识符’ 这种形式导出得到的变量，默认只能拿到 export default 导出的成员，拿不到 export 导出的成员！
5. 使用 export 导出的成员，只能使用 import { 成员名 } from ‘标识符’ 来进行接收！（这种 { } 导出成员的形式，叫做按需导出）
6. export 导出成员，可以导出多次，没有次数限制！同时，export 导出的成员，必须按照导出的名称来接收，如果想要起别名，需要使用 as 关键字 import { c, d as dd } from ‘标识符’
7. 按需导出的时候， 接收的顺序可以任意调整！

面向对象 class

如何定义一个类:

es2015前的写法:

function Person(name, age) {
	// name和age是**实例属性**,即只能通过 实例对象.name获取
	this.name = name
	this.age = age
}
// 实例方法(原型方法)
Person.prototype.showName = function () {
	console.log(' i am :' + this.name)
}

// 静态属性,即通过 Person.info获得的属性
Person.info = '这是Person的静态属性'

// 静态方法
Person.show = function() {
	console.log("这是静态方法")
}
// 调用静态方法
Person.show()

// 用构造函数创建一个实例
var p1 = new Person('zhangsan', 23)
console.log(p1.age)
p1.showName()

es6中使用class的写法:

//使用class定义的类
class Per {
	// constructor 是构造函数,每次new一个新的实例时,都会先调用类的构造函数
	// 这块就相当于旧版的构造函数function(){},此时的name和age是实例属性
	constructor(name, age) {
		this.name = name
		this.age = age
	}

	// static是es6里的关键字,用于创建静态属性和静态方法,静态方法中的this
	static info = '这是静态属性'

	static show() {
		console.log('这是静态方法')
	}

	// 实例方法
	showName() {
		console.log('我是' + this.name)
	}
}

// 创建实例
var p2 = new Per('lisi', 24)
// 调用静态方法\属性
console.log(Per.info)
console.log(Per.show())
// 调用实例方法\属性
console.log(p2.name + p2.age)
console.log(p2.showName())

父类子类继承的写法:

// 在上面的代码块中,我们定义了一个Per父类
// 创建一个广东人的子类
class GDRen extends Per {
	constructor(name, age, hobby) {
		// super()引申为父类的构造函数
		// 如果子类通过 extends关键字实现了继承,需要在子类的构造函数中调用super这个父类的构造函数才能使用 this
		super(name, age)
		this.hobby = hobby
	}
}

//  创建子类的实例
var gdr1 = new GDRen('xx', 19, '爱好')
// 子类可以调用父类里定义的实例方法
gdr1.showName()

使用 Fetch Api发起请求

用法:

// 样式
fetch(请求的url地址字符串)
  .then(function(response){ 
    return response.json()
  }).then(result=>{
    console.log(result)
  })
 
// 实例
fetch('http://39.106.32.91:3000/api/getlunbo')
  .then(response => { // 通过 fetch 请求的结果，如果成功了，则第一个 .then中拿不到最终的数据
    // console.log(response)
    // 调用 response.json() 得到一个新的 Promise 对象
    return response.json()
  })
  .then(data => { // 第二个.then中得到的才是真实的 数据
    console.log(data)
  })