目录
琐碎知识点
typeof
typeof是一个操作符,使用方法:typeof 变量名
or typeof(变量名)
。
他不是一个方法、函数,而是操作符
数字类型转换
Number函数
- String -> Number
var s1 = '123', s2 = 'abc'
n1 = Number(s1)
n2 = Number(s2)
n1: 123
n2: NaN(not a number) 注意:此时typeof n2 为Number类型
- Boolean -> Number
var b1 = true, b2 = false
b1 -> 1, b2 -> 0
- undefined-> Number
var b1 = undefined
Number(b1) = NaN 此时typeof为Number类型
- null-> Number
var b1 = null
Number(b1) = 0
parseInt & parseFloat函数
- parseInt
parseInt('123') -> 123, number
parseInt('abc123') -> NaN, number
parseInt('123abc') -> 123, number
parseInt('123.45') -> 123, number
parseInt('111', 2) -> 7, number (二进制)
- 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 报错
对象
创建对象的三种方式
- 利用字面量创建对象
var obj = { name: qq, age: 18, sayHi: function() { // 匿名函数 console.log("Hi"); } }
- new Object方法创建对象
var obj = new Object();
obj.name = qq;
obj.sayHi = function() {
console.log("Hi");
}
console.log(obj.name, obj['name']);
- 构造函数(类似于
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
Math.max()
Math.max(-1, 1, 3, '5') -> 5
Math.max(-1, ,1, 3, 'qwe') -> NaN
Math.abs()
Math.abs(-1) -> 1
Math.abs('-5') -> 5
Math.abs('q') -> NaN
Math.floor()
取整,地板(向下取整)Math.ceil()
取整,天花板(向上取整)Math.round()
取整,四舍六入,.5往大取(-1.5 -> -1)Math.random()
随机生成小数x,0 ≤ x < 1
内置对象—日期Date
Date
必须使用构造函数的方法来创建对象实例
var date = new Date(); -> 返回的是当前日期时间的对象
date.getFullYear() -> 年份 2021
date.getMonth() -> (月份 - 1) 2月就返回 1
date.getDate() -> 日期 7
date.getDay() -> 0-星期日, 1~6 星期一~星期六
- 获得时间戳
// 一 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新特性
新特性概览:
- let const
- 箭头函数
- Promise
- 解构赋值
- 默认形参
- 函数扩展 function test(…arg) var arr = [1,2,3] test(…arr)
- 模板字符串
${name}
- 字符串的扩展 .startsWith .endsWith padStart padEnd includes async await
- ES6中的导入和导出 import 变量名 from ‘标识符’ export default {} export
- 定义对象的快捷方式
var a =10 { a, show(){} }
- class 关键字
- 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)
注意事项:
- 在模块中,使用 export default 向外暴露成员,只能有唯一的一个 export default
- 使用 export default 向外暴露的成员对象,可以使用任何合法的变量名来接收!
- export default 和 export 可以同时使用;
- 使用 import 变量名 from ‘标识符’ 这种形式导出得到的变量,默认只能拿到 export default 导出的成员,拿不到 export 导出的成员!
- 使用 export 导出的成员,只能使用 import { 成员名 } from ‘标识符’ 来进行接收!(这种 { } 导出成员的形式,叫做按需导出)
- export 导出成员,可以导出多次,没有次数限制!同时,export 导出的成员,必须按照导出的名称来接收,如果想要起别名,需要使用 as 关键字 import { c, d as dd } from ‘标识符’
- 按需导出的时候, 接收的顺序可以任意调整!
面向对象 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)
})