JavaScript基本语法

• JavaScript介绍
• JavaScript是什么
• JavaScript和HTML、CSS的区别

• 软件
• 硬件

• 使用变量
• 变量在内存中的存储
• 变量的命名规则和规范

• 简单数据类型
• Number类型
• String类型
• Boolean类型
• Undefined和Null

• 单行注释
• 多行注释

• 转换成字符串类型
• 转换成数值类型
• 转换成布尔类型

• 算术运算符
• 一元运算符
• 逻辑运算符(布尔运算符)
• 关系运算符(比较运算符)
• 赋值运算符
• 运算符的优先级

• 分支结构
• if语句
• 三元运算符
• switch语句
• 布尔类型的隐式转换

• while语句
• do…while语句
• for语句
• continue和break

• 数组的定义
• 获取数组
• 遍历数组
• 数组中新增元素
• 案例

• 函数的定义
• 函数的调用
• 函数的参数
• 函数的返回值
• arguments的使用

• 匿名函数
• 自调函数
• 函数是一种数据类型

• 全局变量和局部变量
• 块级作用域
• 作用域链

• 变量提升
• 案例

JavaScript介绍

JavaScript是什么

• JavaScript 运行在客户端(浏览器)的编程语言,一种运行在客户端 的脚本语言
• JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用 于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

JavaScript和HTML、CSS的区别

1. HTML：提供网页的结构，提供网页中的内容
2. CSS: 用来美化网页
3. JavaScript: 可以用来控制网页内容，给网页增加动态的效果

JavaScript的组成

• ECMAScript – JavaScript的核心
• BOM – 浏览器对象模型
• DOM – 文档对象模型

计算机组成

软件

• 应用软件：浏览器(Chrome/IE/Firefox)、QQ、Sublime、Word
• 系统软件：Windows、Linux、mac OSX

硬件

• 三大件：CPU、内存、硬盘 – 主板
• 输入设备：鼠标、键盘、手写板、摄像头等
• 输出设备：显示器、打印机、投影仪等

变量

使用变量

• var声明变量

var name;

• 变量的赋值

var name=\'dfjs\';

• 同时声明多个变量

var name,age;

• 同时声明多个变量并赋值

var name=\'ndnsj\',age=12;

变量在内存中的存储

变量的命名规则和规范

1. 规则 – 必须遵守的，不遵守会报错

• 由字母、数字、下划线、$符号组成，不能以数字开头

• 不能是关键字和保留字，例如：for、while。

• 区分大小写

1. 规范 – 建议遵守的，不遵守不会报错

• 变量名必须有意义
• 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword

数据类型

简单数据类型

Number类型

• 进制

十进制var num = 9;进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。十六进制var num = 0xA;数字序列范围：0~9以及A~F八进制var num1 = 07;   // 对应十进制的7var num2 = 019;  // 对应十进制的19var num3 = 08;   // 对应十进制的8数字序列范围：0~7如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析

• 浮点数

var n = 5e-324;   // 科学计数法  5乘以10的-324次方浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004console.log(0.07 * 100);不要判断两个浮点数是否相等

• 数值范围

最小值：Number.MIN_VALUE，这个值为： 5e-324最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308无穷大：Infinity无穷小：-Infinity

• 数值判断

1. 类型——NaN：not a number
   NaN 与任何值都不相等，包括他本身
2. 方法——isNaN: is not a number

String类型

• 转义符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pVdD1XWy-1596360058878)(media/1498289626813.png)]

• 字符串长度

  length属性用来获取字符串的长度

  var str = \'黑马程序猿 Hello World\';console.log(str.length);

• 字符串拼接

  字符串拼接使用 + 连接

  console.log(11 + 11);//22console.log(\'hello\' + \' world\');//hellowordconsole.log(\'100\' + \'100\');//100100console.log(\'11\' + 11);//1111console.log(\'male:\' + true);//male:true

1. 两边只要有一个是字符串，那么+就是字符串拼接功能
2. 两边如果都是数字，那么就是算术功能。

Boolean类型

• Boolean字面量： true和false，区分大小写
• 计算机内部存储：true为1，false为0

Undefined和Null

1. undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
2. null表示一个空，变量的值如果想为null，必须手动设置

复杂数据类型

Object

获取变量的类型

typeof
返回值是String类型

注释

单行注释

//单行

多行注释

/*duohafdsjd*/

数据类型转化

转换成字符串类型

• toString()
• String()
  undefined和null要用这种方法进行转化
• 拼接
  num + “”，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

转换成数值类型

• Number()
  Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN，注意布尔值会返回数值（true——1，false——0）
• parseInt()

1. 如果第一个字符是数字会解析知道遇到非数字结束
2. 如果第一个字符不是数字或者符号就返回NaN
3. 无法把布尔类型转换成数值类型 返回的结果是NaN

• parseFloat()

1. 无法把布尔类型转换成数值类型 返回的结果是NaN
2. 会解析第一个.
3. 遇到第二个.或者非数字结束
4. 如果解析的内容里只有整数，解析成整数

• +，-0等运算

var num = -5;console.log(num);//-5//var str = \'123\';console.log(-str);//-123//var str = \'123abc\';console.log(+str);//NAN//var isOK = true;console.log(+isOK);//1var str = \'123abc\';// - 如果一边是数值类型 一边是字符串，会先把字符串转换成数值类型再进行数值的减法运算// 如果字符串转换成数值类型失败  此时返回NaNconsole.log(str - 0);//NAN// + 如果有一边是数值类型 一边是字符串，会先把数值类型转换成字符串 再进行字符串的拼接console.log(str + 0);//123abc0

转换成布尔类型

转换成false的情况：null undefined \’\’空字符串 0 NaN

操作符

算术运算符

+ - * / %

一元运算符

• 前置++
• 后置++

逻辑运算符(布尔运算符)

&& 与 两个操作数同时为true，结果为true，否则都是false|| 或 两个操作数有一个为true，结果为true，否则为false!  非  取反

关系运算符(比较运算符)

<  >  >=  <=  == != === !====与===的区别：==只进行值得比较，===类型和值同时相等，则相等

赋值运算符

=   +=   -=   *=   /=   %=

运算符的优先级

优先级从高到底1. ()  优先级最高2. 一元运算符  ++   --   !3. 算数运算符  先*  /  %   后 +   -4. 关系运算符  >   >=   <   <=5. 相等运算符   ==   !=    ===    !==6. 逻辑运算符 先&&   后||7. 赋值运算符

表达式和语句

分支结构

if语句

三元运算符

表达式1 ? 表达式2 : 表达式3

switch语句

break可以省略，如果省略，代码会继续执行下一个caseswitch 语句在比较值时使用的是全等操作符, 因此不会发生类型转换（例如，字符串\'10\' 不等于数值 10）

布尔类型的隐式转换

转换为true   非空字符串  非0数字  true 任何对象转换成false  空字符串  0  false  null  undefined

循环结构

while语句

// 当循环条件为true时，执行循环体，// 当循环条件为false时，结束循环。while (循环条件) {//循环体}

do…while语句

do…while循环和while循环非常像，二者经常可以相互替代，但是do…while的特点是不管条件成不成立，都会执行一次。

do {// 循环体;} while (循环条件);

for语句

// for循环的表达式之间用的是;号分隔的，千万不要写成,for (初始化表达式1; 判断表达式2; 自增表达式3) {// 循环体4}

continue和break

• break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）
• continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）

数组

数组的定义

// 创建一个空数组var arr1 = [];// 创建一个包含3个数值的数组，多个数组项以逗号隔开var arr2 = [1, 3, 4];// 创建一个包含2个字符串的数组var arr3 = [\'a\', \'c\'];// 可以通过数组的length属性获取数组的长度console.log(arr3.length);// 可以设置length属性改变数组中元素的个数arr3.length = 0;

获取数组

• 格式：数组名[下标] 下标又称索引
• 功能：获取数组对应下标的那个值，如果下标不存在，则返回undefined。

遍历数组

for(var i = 0; i < arr.length; i++) {// 数组遍历的固定结构}

数组中新增元素

• 格式：数组名[下标/索引] = 值;
• 如果下标有对应的值，会把原来的值覆盖，如果下标不存在，会给数组新增一个元素。

案例

将字符串数组用|或其他符号分割
方法：往第二个元素之前加分隔符

var names = [\'郭德纲\', \'郭麒麟\', \'于谦\', \'岳云鹏\', \'烧饼\'];// 让我们把数组中的每一项 用|或其他符号分割//形成一个字符串  \'郭德纲|郭麒麟|于谦|岳云鹏|烧饼\'var seperator = \'|\';var str = names[0];for (var i = 1; i < names.length; i++) {str += seperator + names[i];}console.log(str);

要求将数组中的0项去掉，将不为0的值存入一个新的数组，生成新的数组
方法：把找到的非0元素存储到一个新的数组中，索引是数组的长度

var numbers = [5, 6, 89, 0, 11, 0, 12, 3, 0];var newArray = []; // 空数组for (var i = 0; i < numbers.length; i++) {if (numbers[i] !== 0) {numbers[i];//找到的非0元素，存储到新的数组中newArray[newArray.length] = numbers[i];}}console.log(newArray);

翻转数组
方法：将旧数组从length-1开始放入新数组中，并以数组的长度作为索引

var numbers = [4, 5, 7, 9];   // 生成一个新的数组  数组中存储 9 7 5 4var newArray = [];for (var i = numbers.length - 1; i >= 0; i--) {newArray[newArray.length] = numbers[i];}console.log(newArray);

冒泡排序，从小到大
方法：优化根据判断最后一次数据是否发生变化判断是否需要再次排序

var numbers = [1, 2, 3, 4, 5];var count = 0; // 记录循环的次数// 外层循环：控制趟数，每一趟找到一个最大值for (var i = 0; i < **numbers.length - 1**; i++) {// 假设数据排好顺序了var isSort = true;count++;// 内层循环：控制比较的次数，并且判断两个数的大小，把大的数往后移动，小的数往前移动for (var j = 0; j < **numbers.length - 1 - i**; j++) {count++;// 两两比较     从小到大排序if (numbers[j] > numbers[j + 1]) {// 没有排好isSort = false;// 交换位置var tmp = numbers[j];numbers[j] = numbers[j + 1];numbers[j + 1] = tmp;}}// 某一趟结束，判断一下排序是否结束// 如何判断排序是否排好，根据是否发生了数据交换，如果发生了数据交换说明没有排好if (isSort) {// 如果排好顺序break;}}console.log(numbers);console.log(count);

函数

函数的定义

• 函数声明

function 函数名() {// 函数体}

• 函数表达式

var fn = function () {// 函数体}

函数的调用

函数名();

函数的参数

1. 形式参数：在声明一个函数的时候，为了函数的功能更加灵活，有些值是固定不了的，对于这些固定不了的值。我们可以给函数设置参数。这个参数没有具体的值，仅仅起到一个占位置的作用，我们通常称之为形式参数，也叫形参。
2. 实际参数：如果函数在声明时，设置了形参，那么在函数调用的时候就需要传入对应的参数，我们把传入的参数叫做实际参数，也叫实参。

函数的返回值

//声明一个带返回值的函数function 函数名(形参1, 形参2, 形参3...) {//函数体return 返回值;}//可以通过变量来接收这个返回值var 变量 = 函数名(实参1, 实参2, 实参3...);

arguments的使用

JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参。arguments是一个伪数组，因此及可以进行遍历

• 求任意个数的最大值

function test(a, b, c) {//我们可以通过arguments 获取函数调用的时候的实参//arguments非常想数组，但不是数组console.log(arguments);console.log(1);}test(4, 5, 6);

• 求任意个数的和

function getMax() {var max = arguments[0];for (var i = 1; i < arguments.length; i++) {if (max < arguments[i]) {max = arguments[i];}}return max;}var max = getMax(5, 10, 1, 5, 100);console.log(max);

函数其他

匿名函数

var fn = function () {}

自调函数

(function () {console.log(\'我是自调用函数\');})()

函数是一种数据类型

(function () {alert(123);})();

作用域

全局变量和局部变量

不使用var声明的变量是全局变量，不推荐使用。
变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁

• 全局变量
  在任何地方都可以访问到的变量就是全局变量，对应全局作用域
• 局部变量
  只在固定的代码片段内可访问到的变量，最常见的例如函数内部。对应局部作用域(函数作用域)

块级作用域

作用域链

• 任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代 码块外都是不可见的，我们称之为块级作用域。

• 在es5之前没有块级作用域的的概念,只有函数作用域，现阶段可以认为 JavaScript没有块级作用域

• 只有函数可以制造作用域结构， 那么只要是代码，就至少有一个作用域, 即全局作用域。凡是代码中有函数，那么这个函数就构成另一个作用域。如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。

将这样的所有的作用域列出来，可以有一个结构: 函数内指向函数外的链式结构。就称作作用域链。

function f1() {var num = 123;function f2() {console.log(num);}f2();}var num = 456;f1();

预解析

JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候，分为两个过程：预解析过程和代码执行过程

预解析过程：

1. 把变量的声明提升到当前作用域的最前面，**只会提升声明，**不会提升赋值。
2. 把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。
3. 先提升var，在提升function。

变量提升

• 变量提升

  定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升。

• 函数提升

  JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面

案例

f1();console.log(c);console.log(b);console.log(a);function f1() {var a = b = c = 9;console.log(a);console.log(b);console.log(c);}

注意a前面有var声明所以是布局变量，bc是全局变量

//预解析function f1() {var a;a = b = c = 9;console.log(a);console.log(b);console.log(c);}f1();console.log(c);console.log(b);console.log(a);var a = b = c = 9;var a = 9;//全局变量b = 9c = 9;