维基百科JavaScript的定义:
-
JavaScript是一种高级的,解释型的编程语言;
-
JavaScript是一门基于原型,头等函数的语言,是一门多范式的语言,支持面向对象程序设计,指令式编程,以及函数式编程.
JavaScript的组成:
- ECMAscript(定义语言规范)
- DOM(用于操作文档的API)
- BOM(用于操作浏览器的API)
浏览器内核:
常说的浏览器内核指的是浏览器的排版引擎(或者页面渲染引擎)
- Gecko:早期被网景和火狐浏览器使用
- Trident:微软开发,被IE4~IE11浏览器使用,但是Edge已经转向Blink
- Webkit:苹果基于KHTML开发,用于Safari,谷歌早期也在使用
- Blink:是Webkit的分支,谷歌开发,目前用于谷歌,Edge,Opera等
JavaScript引擎:
用于解析,执行JavaScript代码
- SpiderMonkey:第一款JavaScript引擎,JavaScript作者开发
- Chakra:微软开发
- JavaScriptCore:Webkit中的JavaScript引擎,苹果公司开发
- V8:谷歌开发
JavaScript的编写方式:
- HTML标签元素内部
- script标签中
- 外部script文件
浏览器不支持JavaScript时,优雅降级处理
<noscript>您的浏览器不支持或者关闭运行JavaScript</noscript>
变量使用注意:
- 变量未声明直接声明会报错
- 变量有声明没有赋值,默认值undefined
- 没有使用var声明变量不会报错,但是变量会被添加在window对象上
JavaScript中的8种基本数据类型:
- 原始数据类型:
- Number
- String
- Boolean
- Undefined
- Null
- BigInt
- Symbol
- 复杂数据类型:
- Object
typeof()的用法:
typeof是一个操作符,并不是一个函数,()只是将内容当做一个整体.
Number类型:
除了正常的数值赋值,还有:
-
Infinity:无穷大
-
NAN:not is a Number (如var num = 3 * "123")
String类型：
``(tab键上面):定义时使用此符号包裹字符串,那么字符串中可使用插值表达式如:
var num1 = 1;
var num2 = 2;
var str = `两数相加为:$(num1+num2)`;
类型转换:
其他类型转换为Number类型:
- undefined->NaN
- Null->0
- true->1
- false->0
- ""(空字符串即不包含空格)->0
- 去掉首尾的纯数字字符串->所包含的数字
- 类型转换失败时->NaN
其他转换为boolean类型:
- 0,Null,undefined,NAN,""(空字符串即不包含空格)->false
- 其他值->true
==和===的区别:
- ==在比较不同类型时,会进行类型转换(大多数转换为数值型),再进行比较
- ===如果比较不同类型会立即返回false
逻辑或的本质:
||:逻辑或(短路或)->从左到右依次计算操作数,结果为true,返回这个操作数的初始值,如果所有操作数都被计算过,则返回最后一个操作数
逻辑与的本质:
&&:逻辑与(短路与)->从左至右依次计算操作数,结果为false,返回这个操作数的初始值,如果所有操作数都被计算过,则返回最后一个操作数
函数的使用:
声明函数
function 函数名(形参) {
函数封装的代码
.....
}
函数表达式
var foo = function(){
函数封装的代码
.....
}
调用函数
函数名();
函数没有返回值时,返回值默认为undefined
函数的arguments参数:
- arguments对象是所有(非箭头)函数都可以使用的局部变量;
- arguments为object类型,并非为数组
- 用法和数组相似,但具体使用可转换为数组
作用域和函数作用域:
- 作用域(scope):表示一些标识符的作用有效范围
- 函数作用域:表示在函数内部定义的变量,只有在函数内部可以被访问
立即执行函数:
在被定义完就立即执行的函数就是立即执行函数
(function(){
函数封装的代码块
...
})();
会创建一个独立的执行上下文环境,可以避免外界访问或者修改内部的变量,也避免对内部变量的修改.
对象类型:
使用{...}创建对象类型,包含键值对{key:value},key是字符串,ES6之后也可以是symbol类型,value可以是任意类型.
对象的创建
//1.对象字面量
var obj1 = {
name:"李四"
}
//2.new Object()
var obj2 = new Object()
obj2.name = "王五"
//3.new 其他类
function Person() {}
var obj3 = new Person()
对象的遍历
var info = {
name:"李四",
age:18,
height:1.99
}
var infoKeys = Object.keys(info)
for(let i = 0; i < infoKeys.length; i++){
var key = infoKeys[i]
var value = info[key]
}
栈内存和堆内存
-
原始数据类型占据的空间是在栈内存中分配的
-
对象数据类型占据的空间是在堆内存中分配的
函数中的this指向两种情况
//函数中默认的属性除了arguments还有this
//情况一:如果普通函数被默认调用,那么this指向window
function(){
console.log(this)
}
//情况二:如果函数是被某一个对象引用并且调用它,那么this会指向这个对象
var obj = {
playing:function(){
console.log(this)
}
}
obj.playing()
构造函数
普通函数被使用new操作符来调用,那这个函数就称之为构造函数,new操作符调用函数之后,执行操作如下:
- 在内存中创建一个新对象(空)
- 这个对象内部的[[prototype]]属性会被赋值为该构造函数的prototype属性
- 构造函数内部的this,会指向创建出来的新对象
- 执行函数的内部代码
- 如果构造函数没有返回非空对象,则返回创建的新对象
ES5之前,通过function声明一个构造函数(类),之后使用new关键字进行调用(局限性)
ES6之后,通过class声明一个类
包装类型
1、Number
- toString(base):将数字转换成字符串,并且按照base进制进行转换
- toFixed(digits):格式化一个数字,保留digits位小数
2、内置Math
- Math.floor:向下取整
- Math.ceil:向上取整
- Math.round:四舍五入取整
- Math.random:生成0~1的随机数 (不包含1)
- Math.pow(x,y):返回x的y次幂
3、Array数组
- 尾端添加或者删除
- push：末端添加
- pop：末端取出
- 首端添加或者删除
- shift：首端取出，向前移动
- unshift：首端添加，向后移动
- slice(start,end):裁剪数组,不会修改原数组
- concat:数组拼接
- join:以某种方式将数组拼接位字符串
数组的高阶函数
1、filter()
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
});
console.log(arr2); //[1, 4, 7, 8, 9, 10]
2、find()
let arr = [1, 2, 3, 'arr', 5, 1, 9];
console.log(arr.find((value, keys, arr) => {
return value > 2;
})); // 3 返回匹配的值
