JS基础 | 青训营

31 阅读6分钟

JS执行过程

浏览器分为渲染引擎和JS引擎

渲染引擎:用来解析HTML和CSS,俗称内核。

JS引擎:也称为JS解释器,用来读取网页中的JS代码,对其处理后运行。

注意:浏览器本身不会执行JS代码,而是通过内置JS引擎来执行。执行时逐行解释源码,然后由计算机去执行。因此JS为脚本语言。

JS的组成

JS语法(ECMAScript)、页面文档对象模型(DOM)、浏览器对象模型(BOM)

JS书写位置

行内

JS代码写在html文件的元素部分

内嵌

JS代码写在html文件的script标签内

外部

JS代码写在js文件内,通过script标签的src属性引入。

JS输入输出

alert():浏览器弹出警示框

console.log():浏览器控制台打印输出

prompt():浏览器弹出输入框,用户可以输入

关键字var&&let&&const

在JavaScript种一共存在三种声明变量的方式,var,let,const.其中的let和const是js在2016年也就是es6的版本种提出的新规范。在此之前程序员一直都是使用的var关键字做声明。

三者的区别

  • var:为函数级作用域声明,声明时变量提升,定义的变量可以被更改,可以多次声明
  • let:为块级作用域声明,声明时产生暂时性死区,定义的变量可以被更改,只能声明一次
  • const:为块级作用域声明,声明时产生暂时性死区,定义的变量不可以被更改,只能声明一次

注意: 全局作用域中,let创建的变量不会加在window对象身上,而var会。

Array数组

Array是ECMAScript中常用的类型。ECMAScript数组跟其他编程语言的数组有很大的区别。跟别的编程语言中的数组一样,ECMAScript数组也是一组有序的数据,但跟其他语言的不同的是,数组中的每一个槽位可以存储任意类型的数据。这意味可以创建一个数组如下,且数组是动态的,可以随着数据添加而自动增长。

改变原数组的方法:

splice() 添加/删除数组元素

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目

sort() 数组排序

sort()方法对数组元素进行排序,并返回这个数组

pop() 删除一个数组中的最后的一个元素

pop() 方法删除一个数组中的最后的一个元素,并且返回这个元素。

shift() 删除数组的第一个元素

shift()方法删除数组的第一个元素,并返回这个元素。

push() 向数组的末尾添加元素

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

unshift()

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

reverse() 颠倒数组中元素的顺序

reverse() 方法用于颠倒数组中元素的顺序

不改变原数组的方法:

slice() 浅拷贝数组的元素

方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象,且原数组不会被修改。

join()  数组转字符串

join() 方法用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串,返回生成的字符串。

toLocaleString() 数组转字符串

返回一个表示数组元素的字符串。该字符串由数组中的每个元素的 toLocaleString() 返回值经调用 join() 方法连接(由逗号隔开)组成。

toString() 数组转字符串

toString() 方法可把数组转换为由逗号链接起来的字符串。

cancat

方法用于合并两个或多个数组,返回一个新数组。

indexOf() 查找数组是否存在某个元素,返回下标

返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

lastIndexOf() 查找指定元素在数组中的最后一个位置

方法返回指定元素,在数组中的最后一个的索引,如果不存在则返回 -1。(从数组后面往前查找)

遍历方法(4个):

forEach

按升序为数组中含有效值的每一项执行一次回调函数。

filter 过滤原始数组,返回新数组

返回一个新数组, 其包含通过所提供函数实现的测试的所有元素。

map 对数组中的每个元素进行处理,返回新的数组

创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

reduce 为数组提供累加器,合并为一个值

reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,最终合并为一个值。

函数Function

函数中的return 则会将函数提前终止,并且将return的值返回给当前函数名。

定义一个函数的四种方法

function sum(){ //代码 }

var a = function(){ //代码 }

let sum = new Function("num1","num2",return num1+num2)

let demo=()=>{ //代码 }

return

在js中return可以返回所有的基础数据类型,例如变量,Object,Function,String,Number等等。

作用域链

当我们访问一个函数中没有的变量时,js会再去上一个作用域去寻找变量,知道找到最上面的作用域也没有的话就会抛出错误,变量未定义.

var a = 1;
function demo1() {
  var b = 2;
  function demo2() {
    function demo3() {
      var c = 3;
      console.log(a);
    }
    demo3();
    console.log(c);//报错,c未定义
  }
  demo2();
}
demo1();

立即执行函数

通过(函数体)()的方式,可以在声明完函数后进行立即调用,同时其中的变量也会在函数结束以后立即销毁。

(function demo(){
	console.log("我声明后就可以立马调用")
})();

this

this 就是一个指针,指向调用函数的对象,根据被调用函数当前的环境来定。

默认绑定

默认绑定,在不能应用其它绑定规则时使用的默认规则,通常是独立函数调用。

隐式绑定

函数的调用是在某个对象上触发的,即调用位置上存在上下文对象。典型的形式为 XXX.fun().

显式绑定

显式绑定比较好理解,就是通过call,apply,bind的方式,显式的指定this所指向的对象。