蓝旭工作室2021JavaScript基础

一、JavaScript简介

1、JavaScript到底是什么？

JavaScript（缩写：JS）是一门完备的 动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。

JavaScript作为Netscape Navigator浏览器的一部分首次出现在1996年。它最初的设计目标是改善网页的用户体验。由布兰登·艾克（ Brendan Eich，Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人）发明。初期被命名为LiveScript，后因和Sun公司合作，因市场宣传需要改名JavaScript。后来Sun公司被Oracle收购，JavaScript版权归Oracle所有。

JavaScript 的应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。

2、JS的组成部分

• 核心ECMAScript（脚本语言规范）

1996年11月，javascript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。
该标准从一开始就是针对JavaScript语言制定的，但是之所以不叫JavaScript，有两个原因。一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript本身也已经被Netscape公司注册为商标。二是想体现这门语言的制定者是ECMA，不是Netscape，这样有利于保证这门语言的开放性和中立性。
因此，ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript方言还有Jscript和ActionScript）。在日常场合，这两个词是可以互换的。

• 文档对象模型DOM（Document Object Model）
• 浏览器对象模型BOM（Browser Object Model）

3、引入方式

与css类似

1. 行内：

<开始标签 on+事件类型=“js代码”></结束标签>

<button onclick="alert('行内js')">

2. 内嵌：

写在 head 或 body 标签内

<script>
	alert('内嵌js')
</script>

3. 外部文件：

定义外部 .js文件。
将 script 标签放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。

<script src="文件路径.js"></script>

alert('外部js代码')

4、语法规范

• 注释
  单行注释：/ /
  多行注释：/* */
• 语句
  使用;表示结束，不过只有在单行内需要分割多条语句时，这个分号才是必须的。由表达式、关键字、运算符等组成。
• 大小写敏感

二、JS基本语法

1、变量

1. 变量声明

• 基本语法
  声明：var 变量名
  声明+赋值：var 变量名 = 值
  一次声明多个变量：var 变量名1, 变量名2,…, 变量名n
• 命名规则

1. 由字母、数字、下划线以及$组成，不能以数字开头
2. 不允许使用JS的关键字和保留关键字：break、case、catch、default、false、new、this、undefined……
3. 可以采用小驼峰法：第一个单词全小写，此后单词首字母大写
4. 尽量见名知意

2. 数据类型

值类型(基本类型)：数字(Number)、字符串(String)、布尔(Boolean)、未定义(Undefined)、空(Null)
引用数据类型：对象(Object)、数组(Array)、函数(Function)

var a = 5; // 数字
var name = "John"; //字符串，字符串的值必须用引号（单双均可，必须成对）扩起来。
var isActive = true;  // 布尔，true/false 是 JS 里的特殊关键字，无需引号。
var x; // x为undefined
var value = null;  // 空
var student = {  // 对象
    name: '杜媛',
    age: 19
}
var arr = [5, 'cat', undefined]  // 数组
var consoleStr = function () {  // 函数
    console.log('这是一个函数')
}

3. 数据类型转换

typeof()可以返回变量的6种数据类型：number、string、boolean、undefined、object、function

• 显式类型转换
  • Number()转换为数字类型
  • parseInt()转换为int类型
  • parseFloat()转换为浮点型
  • 变量.toString()将变量转换为字符串类型
  • String()转换为字符串类型
  • Boolean()转换为布尔类型
• 隐式类型转换 隐式类型转换内部隐式调用显示的方法
  • isNaN()判断括号内是否为NaN
  • 运算过程中的隐式类型转换

2、运算符

• 算数运算符 +、-、*、/、%、++、- -
• 比较运算符 和C语言相比，多了=== 和 !==
• 逻辑运算符 &&、||、!

3、条件循环语句

if( ){ }else if( ){ }else{ }、switch case
for、while、do while
break、continue

4、数组

1. 数组的创建

• var arr = []
• var arr = new Array()
  由于JS的弱检查性，你可以在一维数组中放不同类型的变量。
  获取数组元素个数arr.length()

2. 数组的操作

改变原数组的操作：

• 在数组的最后一位添加数据，可以添加一个也可以添加多个arr.push()；剪切最后一位数据arr.pop()，括号中不能传参
• 在第一位加入数据arr.unshift()，去掉第一位数据arr.shift()
• 逆反数组arr.reverse()
• 修改数组arr.splice(开始位数, 截取长度, 添加的新数据)

不改变原数组的操作：

• 把括号里的数组拼到该数组后面arr.concat(arr1)
• 截取数组arr.slice(开始截取位，结束位)，结束位不包括在里面
• 将数组变成字符串，并用自定义的连接符分隔arr.join('连接符')

5、对象

JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成，属性由逗号分隔。

1. 对象的创建

• var obj = {}
• var obj = new Object()

2. 获取对象属性值

对象属性有两种寻址方式：

• 对象.属性名
• 对象[“属性名”]

3. 属性的增删

• 增加新属性 直接写新键值对obj.key = value
• 删除属性 delete obj.key

6、函数

也可以称之为方法(method)或过程，是一段预定义好的代码块。

1. 函数的定义和调用

function fun () {  // 函数名应符合小驼峰原则
	console.log('这是一个函数')
}
fun()

2. 函数表达式

• 命名函数表达式
  这种写法会导致函数名失效

var add = function fun() {
    console.log('命名函数')
}

• 匿名函数表达式

var add = function () {
    console.log('匿名函数')
}

3. 参数和返回值

• 函数的形参不用指定参数的类型。
• 不定参，形参可以比实参多，实参也可以比形参多。
  那么JS如何知道调用时到底传了多少参数，每个参数值又是什么？答案就是arguments，它是JS的一个内置对象，是实参列表。只能在函数体中使用，通常我们将它当做数组使用，但又不是数组。

function sum() {
	for(var i = 0; i < arguments.length; i++) {
		console.log(arguments[i])
	}
}

sum(2, 3, 11); // 依次输出：2 3 11

• return 有终止函数和把一个值返回到函数以外的功能

4. 构造函数

• 在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。
• 构造函数首字母一般大写。
• 构造函数返回的是一个对象。

为什么要使用构造函数？
在使用对象字面量创建一系列同一类型的对象时，这些对象可能具有一些相似的特征(属性)和行为(方法)，此时会产生很多重复的代码，而使用构造函数就可以实现代码复用。

var p1 = { name: 'zs', age: 6, gender: '男', hobby: 'basketball' };
var p2 = { name: 'ls', age: 6, gender: '女', hobby: 'dancing' };
var p3 = { name: 'ww', age: 6, gender: '女', hobby: 'singing' };
var p4 = { name: 'zl', age: 6, gender: '男', hobby: 'football' };

function Person(name, gender, hobby) {
    this.name = name;
    this.gender = gender;
    this.hobby = hobby;
    this.age = 6;
}
var p1 = new Person('zs', '男', 'basketball');
var p2 = new Person('ls', '女', 'dancing');
var p3 = new Person('ww', '女', 'singing');
var p4 = new Person('zl', '男', 'football');

三、JS深入概览

1、作用域

变量和函数生效（能被访问）的区域。

• 函数作用域 函数作用域中的变量只在当前函数内可以访问（局部变量），离开此范围就无法访问了。

function add () {
    var sum = 1 + 2;
    console.log(sum);  //正确
}
console.log(sum);  //错误

• 全局作用域 全局作用域中的变量在代码的任何位置都能访问。

var sum = 0;
function add () {
    sum = 1 + 2;
    console.log(sum);  //正确
}
console.log(sum)  //正确

function add () {
    sum = 1 + 2;  //不加var，全局变量
}
add();
console.log(sum)

2、预编译

• 函数声明整体提升 无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面。
• 变量声明提升 无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，所以值是undefined。

console.log(a)  //undefined
var a = 100;
console.log(a)  //100
// 上面这段代码相当于
var a;
console.log(a)
a = 100;
console.log(a)

3、闭包、立即执行函数、原型、原型链、this……