本文深入讲解JavaScript基础知识，包括数组操作、参数传递、作用域规则、预解析机制等内容，并介绍了Web API的基本概念。
万分感谢指正出文章错误的大佬(以下为ID):
@青衣一一
仅了解知识或许会让我们变得博识,但是为了精通可能就需要一点点背诵了
1. 数组可以通过索引来访问,设置,修改对应的数组元素
我们一般用 访问 来表示获取得到的意思
2. JS中获取数组长度, 使用length属性即可.
数组的长度是元素的个数,是动态变化的且被动态监测
3.
| 参数 | 说明 |
| 形参 | 形式上的参数 函数定义的时候 传递的参数 |
| 实参 | 实际上的参数 函数调用的时候传递的参数 |
注意: 如果实参的个数多于形参, 则多余部分的数值不会被获取
任何一个值 + undefined = NaN
函数的形参和实参个数不匹配问题:
| 参数个数 | 解释 |
| 实参个数等于形参个数 | 输出正常 |
| 实参个数多余形参个数 | 只取到形参的个数 |
| 实参个数小于形参个数 | 多的形参会被定义为undefined, 结果为 NaN |
4.arguments对象中存储了传递的所有实参
arguments展示形式是一个伪数组, 因此可以进行遍历.伪数组具有以下特点:
具有length属性
按照索引方式存储数据
不具有数组的push(向数组末尾添加元素),pop(删除数组最后一个元素)等方法
5.JavaScript作用域: 指的就是变量在某个范围内起作用和效果
目的是为了提高程序的可靠性, 更重要的是减少命名冲突
6. 作用域分为 局部作用域 , 全局作用域 和块级作用域(ES6新增)
用 {} 包括的就是块级作用域
7.变量的作用域: 根据作用域的不同 我们将变量分为 全局变量和局部变量
注意: 1.如果在函数内部 没有直接声明但是赋值的变量也属于全局变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function fun() { //这时的num就是全局变量哦
num = 10;
}
fun();
console.log(num);
</script>
</head>
<body>
</body>
</html>
2.全局变量和局部变量的区别:
从执行效率来看:
1) 全局变量只有浏览器关闭的时候才会销毁, 比较占用内存资源
2) 局部变量 当我们程序执行完毕就会销毁, 比较节约内存资源
进一步理解:
全局变量(在函数外定义的变量):
1.全局变量在代码的任何位置都可以使用
2. 在全局作用域下 var声明的变量 是全局变量
3. 特殊情况下, 在函数内不适用var声明的变量也是全局变量(但是不建议使用)
局部变量(在函数内部定义的变量):
1. 局部变量只能在该函数内部使用
2. 在函数内部var声明的变量是局部变量
3. 函数的形参实际上就是局部变量
8. 作用域链(就近原则):
根据在内部函数可以访问外部函数变量的这种机制, 用链式查找决定了 哪些数据能被内部函数访问, 就称作作用域链.
从我们的目标出发,然后判断输出结果, 比如这道题 就直接看 console.log(), 然后加以判断
9.每日一遍 远离被坑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 1.第一个问题
console.log(sum); // 报错
//第二个问题 坑1
console.log(num); //输出undefined
var num = 10;
//第三个问题 坑2
fn();//正常输出 888
function fn() {
console.log(888);
}
// 第四个问题 坑3
fun(); //报错
var fun = function() { //函数表达式
console.log(666)
}
</script>
</head>
<body>
</body>
</html>
10.
Js代码是由浏览器中的 JavaScript解析器来执行的. JavaScript解析器在运行JavaScript代码的时候分为两步: 预解析和代码执行
11. 我们把JS引擎运行 JS分为两步: 预解析 代码执行
1) 什么是预解析?
JS引擎会把JS里面的所有 var 还有 function 提升到当前作用域的最前面
2) 什么是代码执行?
按照代码书写的顺序从上往下执行
其中 预解析 分为 变量预解析(即变量提升) 和 函数预解析(即函数提升)
1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面 但是不提升赋值操作
2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数
预解析经典小例子 ⬇⬇⬇:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 1.第一个问题
console.log(sum); // 报错
//第二个问题 坑1
console.log(num); //输出undefined
var num = 10;
//第三个问题 坑2
fn();//正常输出 888
function fn() {
console.log(888);
}
// 第四个问题 坑3
fun(); //报错
var fun = function() { //函数表达式
console.log(666)
}
</script>
</head>
<body>
</body>
</html>
12.对数组的操作方法
| 方法名 | 解释 |
| concat(str,str2.....) | 可以用来拼接字符串. 但是我们一般直接 + 就是可以了 二者等效 |
| substr(star,length) | 从start位置开始(索引号), length取的个数 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str = 'asd';
var str1 = '123';
alert(str.substr(1, 2));
</script>
</head>
<body>
</body>
</html>
13.
14. 介绍API:
API(Application Programming Interface, 应用程序编程接口) 是一些预先定义的函数, 目的是提供应用程序与开发人员基于某个软件或硬件得以访问一组例程的能力, 而又无需访问源码, 或理解内部工作机制细节
简单理解: API是给程序员提供的一种工具, 以便更轻松的实现想要完成的功能
15. 什么叫做Web API?
Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
扫一扫
3719
到【灌水乐园】发言
