提示:学习使用,仅供参考!
目录
一、介绍
JavaScript 是一种具有函数优先
特性的轻量级
、解释型
或者说即时编译型
的编程语言
1.1 函数优先
JavaScript 语言中的函数可以和其他任何变量一样对待
- 函数可以作为参数传递给另一个函数
function sayHello() { return "Hello, "; } function greeting(helloMessage, name) { console.log(helloMessage() + name); } // 传递 `sayHello` 作为 `greeting` 函数的参数 greeting(sayHello, "JavaScript!"); // Hello, JavaScript!
- 可以作为返回值被另一个函数返回
function sayHello() { return function() { console.log("Hello!"); } }
- 可以作为一个值分配给一个变量
var fn = function () { console.log("HelloWorld"); } var fn = function getName() { console.log("HelloWorld"); } // 调用 fn()
由于JavaScript编译器的作用,函数声明
和变量声明
都会被提升,但函数会先被提升(前提:使用 var
修饰。let
修饰不会被提升)
- 变量提升
console.log(a) var a = `Hello` // 等价于 var a console.log(a) // 输出 undefined a = `Hello`
- 函数提升
sayHello() function sayHello(){ console.log(a) var a= 'Hello' } // 等价于 function sayHello() { var a console.log(a) // 输出 undefined a = 'Hello' }
注意
:函数声明会被提升,但函数表达式不会sayHello() var sayHello = function sH() { console.log('Hello') } // 等价于 var sayHello sayHello() // 报错:Uncaught TypeError: foo is not a function sayHello = function aH(){ console.log('Hello') }
1.2 解释型
直接以源代码的形式出现,运行时实时解析为机器码并执行
。
所有的脚本语言(当然也包括JavaScript)都是解释型语言。这类语言有个最大特点就是它们都不能独立存在,必须寄生在其他程序内,比如浏览器。
编译型:运行前,将源代码编译成机器码;运行时,电脑直接把机器码交给CPU执行
1.3 组成
1) ECMAScript:规定了js基础语法核心知识。
- 比如:变量、分支语句、循环语句、对象等等
2)Web APIs
- DOM 操作文档,比如对页面元素进行移动、大小、添加删除等操作 (
DOM属于BOM
) - BOM 操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等
1.4 作用
1)网页特效 :监听用户的一些行为让网页作出对应的反馈
2)表单验证 :针对表单数据的合法性进行判断
3)数据交互 :获取后台的数据, 渲染到前端
4)服务端编程 :基于 node.js 技术进行服务端编程
二、引用
1. 内嵌
JavaScript 代码直接写在 .html 文件中的 body 标签里,使用script 标签包住
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<!-- type="text/javascript" 可不写, 默认就是 type="text/javascript"-->
<script type="text/javascript">
// js 代码
</script>
</body>
</html>
建议:
- 将
<script></script>
放在<body></body>
底部附近原因:
- 浏览器会按照代码在文件中的顺序加载HTML,如果先加载的 JavaScript 期望修改其下方的 HTML,那么它可能由于 HTML 尚未被加载而失效
2. 外部引入
代码写在 .js 文件中,使用 script 标签的 src 属性引入
此时若
<script></script>
标签中还有 JavaScript 代码, 会被忽略
<script src="url" type="text/javascript">
// 被忽略
</script>
3. 内联:
直接写在 html 标签内部
<button onclick="alert('点秋香')">唐伯虎</button>
三、变量
3.1 本质
一个存储数据的容器
(程序在内存中申请的一块用来存放数据的小空间),非数据本身
3.2 作用域
ES6之前
:全局作用域、局部作用域(也称函数作用域)
ES6及其之后
:为全局作用域、局部作用域、块级作用域
全局作用域
作用于整个 script 标签内部或者一个独立的 js 文件。
局部作用域(函数作用域)
作用于函数内的代码环境。 因为跟函数有关系,所以也称为函数作用域。
块级作用域
块级作用域由
{ }
包括。如在 if 语句、循环语句中创建的变量,仅仅只能在本 if 语句、本循环语句中使用## 3.3 声明
注意
若局部变量和全局变量同名
则在函数作用域中,起作用的是局部变量;
在函数体外,起作用的是全局变量,此时引用局部变量将出现语法错误。
3.3 声明
① 若只声明不进行初始化,则结果为:undefined
var a console.log(a) // undefined
② 若不适用 var、let、const 关键字声明,则变量名为全局变量(不推荐这种操作)
function sayHello() { a = 'hello'; // 全局 } sayHello(); console.log(a); // hello console.log(window.a); // hello console.log(window.a === a); // true
1)var
var 可以重复声明,变量的数据相当于被覆盖,存储的数据是最后一次覆盖的数据
注意
:js 中若存在同名的函数,不管参数个数是否相同,也会进行覆盖,函数执行的是最后一个
var a = 1
var a = `hello`
console.log(a) // hello
变量提升
- var变量的全局作用域是对整个页面的脚本代码有效
- var声明的局部变量是在整个函数有效
2)let
let 不可以重复声明(推荐使用 let 声明变量)
// 报错
let a = 1
let a = 2
// 报错
let a = 1
var a = 2
3)const
定义常量,值不可变,且必须在定义时就初始化
const a = 1
a = 2
console.log(a) // Error:Uncaught TypeError: Assignment to constant variable.
3.4 暂时性死区
在块开始到块级变量声明语句之间区域。 在这个区域,块级变量没有效。
var 不存在暂时性死区(变量提升),let、const 存在
四、数据类型
JavaScript 是弱数据类型,变量只有在赋值之后才能完全确认类型
JavaScript 数据类型整体分为两类:
基本数据类型
和引用数据类型
4.1 基本数据类型
4.1.1 Number
JavaScript 中的
数字类型
包括:正负数、小数
let score = 100; //正整数
let price = 12.3; //小数
let num = -50; //负数
4.1.2 String
JavaScript 中的
字符串类型
可以使用双引号""
包裹,也可以使用单引号包裹''
,也能使用反引号``
let user_name='张三'; //使用单引号
let str1='123'; //字符串类型的数字
let str2='';
注意:
① 可以使用转义符 \,单独输出引号
② 涉及字符串拼接,可以使用反引号``
,使用${}
包裹变量
let str1 = "唐伯虎";
let str2 = "点秋香";
console.log(`这部电影名字叫做${str1}${str2}`); // 这部电影名字叫做唐伯虎点秋香
4.1.3 boolean
布尔类型数据:true、false
let isT = true
let isT = false
4.1.4 undefined
未定义类型:即指声明变量,但未赋值
let name
console.log(name)
场景
:
① 访问对象不存在的属性
let obj = {}
console.log(obj.name)
② 数组越界访问
let arr = [1, 2, 3];
arr[5]; //=> undefined
4.1.5 null
空类型:代表值为空
let obj = null
与 undefined 的区别
:null表示对声明的变量赋值了,只是值未空,而undefined表示只是声明了变量,并未对变量进行初始化
undefined == null; //true
undefined === null; //false
4.2 引用数据类型
4.3 数据类型检测
通过
typeof
关键字检测数据类型
let age=20;
let uname="张三";
let flag=true;
let buy;
console.log(typeof age); //number型
console.log(typeof uname); //string型
console.log(typeof flag); //boolean型
console.log(typeof buy); //undefind型
附言
初入宗门,若有错误,还望雅正