标签：cli   验证   uniq   内部函数   包含   finally   奇数   动态   刘德华   

JavaScript基础

1- 初识JavaScript

1.1 JavaScript 是什么

• JavaScript是一种运行在客户端的脚本语言，现基于Node.js技术进行服务端编程；

  所谓脚本（Script）语言：是运行时不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行。读到一行，执行一行；

• 目的是实现逻辑业务与页面控制，相当于动作；

  所谓逻辑性：就是 实现这个要求的思路 先怎么做后怎么做；

1.2 JavaScript的作用

• 表单动态校验（密码强度检测） （ JS 产生最初的目的 ）

• 网页特效

• 服务端开发(Node.js)

• 桌面程序(Electron)

• App(Cordova)

• 控制硬件-物联网(Ruff)

• 游戏开发(cocos2d-js)

1.3 HTML/CSS/JS 的关系

HTML 和 CSS 属于描述类语言；JS 属于 编程类语言；

1.4 浏览器执行 JS 简介

浏览器分成两部分：渲染引擎和 JS 引擎

• 渲染引擎：用来解析HTML和CSS，俗称内核，比如 chrome浏览器的 blink，老版webkit等；

• JS 引擎：也称 JS 解释器。用来读取网页中的 JavaScript代码，处理后运行，如chrome的V8；

  浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

1.5 JS 的组成

1. ECMAScript

   ECMAScript：规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

   更多参看MDN: MDN手册

2. DOM——文档对象模型

   文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）——元素对象；

3. BOM——浏览器对象模型

   浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等——浏览器窗口；

1.6 JS 书写位置

JS 有3种书写位置，分别为行内、内嵌和外部。

1.行内式

• 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick

• 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号

• 可读性差， 在html中编写JS大量代码时，不方便阅读；

2.内嵌式

• 可以将多行JS代码写到 script 标签中

• 内嵌 JS 是学习时常用的方式

3.外部JS文件

• 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用

• 引用外部 JS文件的 script 标签中间不可以写代码

• 适合于JS 代码量比较大的情况

    
        ?
        // 3.外部js的写法，开始和结束标签间不能写字
        ?
    
        
        

2 - JavaScript注释

JS中的注释主要有两种，分别是单行注释和多行注释。

1. 单行注释
// 用来注释单行文字（  快捷键   ctrl  +  /   ）
?
2. 多行注释
/* */  用来注释多行文字（ 默认快捷键  alt +  shift  + a ）

?

更改快捷键：vscode → 首选项按钮 → 键盘快捷方式 → 查找 原来的快捷键 → 修改为新的快捷键 → 回车确认

3 - JavaScript输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

程序设计基础

1 - 变量概述

1.1 什么是变量

• 为什么需要变量？有些数据需要保存，所以需要变量；

• 变量是什么？变量相当一个容器，用来存储数据；

• 本质？变量的本质是程序在内存中的一块存储空间；

• 通过变量名找到变量，访问内存；

• 变量的命名规范：见名知意-驼峰命名法；

1.2 - 变量的使用

• 变量的声明

• 变量的赋值

• 变量的初始化

  1.声明变量

var age; // 声明一个名称为 age 的变量；本质是 在内存中申请一块存储空间

• var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管；

• age 是程序员定义的变量名，我们要通过 变量名来访问内存中分配的空间；

  2.赋值

age = 10; // 给 age 这个变量赋值为 10    

• = 表示赋值，用来把右边的值赋给左边的变量空间

• 变量值是程序员保存到变量空间里的值

  3.变量的初始化

声明一个变量的同时并赋值， 我们称之为变量的初始化。

var age  = 18;  // 声明变量同时赋值为 18

案例：

• 弹出一个输入框，提示用户输入姓名；

• 弹出一个对话框，输入 用户刚才输入的姓名；

1.3 变量语法扩展

1.更新变量

变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

var age = 18;
age = 81;   // 最后的结果就是81 因为18 被覆盖掉了 

2.同时声明多个变量

同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。

var age = 10,  name = ‘zs‘, sex = 2;     

3.声明变量特殊情况

案例：变量的语法扩展

案例：交换两个变量的值

js 是编程语言有很强的逻辑性在里面： 实现这个要求的思路 先怎么做后怎么做

// 思路：引入一个临时变量temp
    

1.4 变量命名规范

• 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name

• 严格区分大小写。var app; 和 var App; 是两个变量

• 不能 以数字开头。 18age 是错误的

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

• 变量名必须有意义。 MMD BBD nl → age

• 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。

2 - 数据类型

2.1 数据类型简介

1.为什么需要数据类型？

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成内存所需的大小，充分利用存储空间，于是定义了不同的数据类型。

2.变量的数据类型？

变量的数据类型决定了以什么样的类型存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型；在程序运行过程中，变量的数据类型是由 JS引擎根据 = 右边变量值的数据类型来判断的。

var age = 10;// 这是一个数字型
var areYouOk = ‘是的‘;// 这是一个字符串     

JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：

var x = 6;// x 为数字
var x = "Bill";// x 为字符串   

3.数据类型的分类

• 简单数据类型 （Number,String,Boolean,Undefined,Null）

• 复杂数据类型 （object)

2.2 简单数据类型

简单数据类型（基本数据类型）

1、数字型 Number

2、字符串型 String

（1）字符串型是引号内的任意文本，内部换行需要用转义字符 如 \ n

（2）字符串转义符

（3）字符串拼接：

• 多个字符串之间可以使用 + 进行拼接， 字符串 + 任何类型 = 新字符串类型

• + 号总结口诀：数值相加 ，字符相连

（4）字符串拼接加强

• 经常会将字符串和 变量 来拼接，变量可以很方便地修改里面的值

• 变量是不能添加引号的，因为加引号的变量会变成字符串

• 如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间

案例：交互编程的三个基本要素

• 用户输入：弹出一个输入框prompt，让用户输入年龄；

• 程序内部处理：把用户输入的值作为变量保存起来，把刚才输入的年龄与所要输出的字符串拼接；

• 输出结果：使用alert语句弹出警示框；

案例：显示年龄案例

3、布尔型Boolean

• 布尔类型有两个值：true 和 false ，其中 true 表示真，而 false 表示假；

• 布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0；

console.log(true + 1);  // 2
console.log(false + 1); // 1

4、Undefined 和 Null

• 一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时，注意结果）

var variable;
console.log(variable);           // 只声明未赋值 输出 undefined
console.log(‘你好‘ + variable);  // 你好undefined
console.log(11 + variable);    // undefined 和数字相加 输出 NaN 
console.log(true + variable); //  NaN

• 一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

var vari = null;
console.log(‘你好‘ + vari);  // 你好null
console.log(11 + vari);     // 11
console.log(true + vari);   //  1

2.3 获取变量数据类型

1.typeof 获取检测变量的数据类型

也可以通过控制台的颜色判断数据类型；黑色是字符串；

2.字面量

字面量表示如何表达这个值，一眼看上去知道这个属于什么类型的值。

2.4 数据类型转换

什么是数据类型转换？就是把一种数据类型的变量转换成另一种数据类型，通常会实现3种方式的转换：

• 转换为字符串类型

• 转换为数字型

• 转换为布尔型

1.转换为字符串

2.转换为数字型（重点）

案例：输出年龄

思路：

• 弹出一个输入框（prompt），让用户输入出生年份（用户输入）

• 把用户输入的值用变量保存起来，用今年年份减去变量值，就是现在的年龄（程序内部处理）

• 弹出警示框（alert），把计算的结果输出（输出结果）

案例：简单加法器

要求：计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后弹出窗口显示两次输入值相加的结果。

3.转换为布尔型

• 代表空、否定的值会被转换为 false ，如 ‘‘、0、NaN、null、undefined ;

• 其余值都会被转换为 true；

console.log(Boolean(‘‘)); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false

console.log(Boolean(‘小白‘)); // true
console.log(Boolean(12)); // true

3 - 标识符、关键字、保留字

3.1 标识符

标识(zhi)符：就是指开发人员 为变量、属性、函数、参数取的名字。
标识符不能是关键字或保留字。

3.2 关键字

关键字：是指 JS本身已经使用了的字，不能再用它们充当变量名、方法名。

包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

3.3 保留字

保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。

注意：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误。

3.4 标识符命名规范

• 变量、函数的命名必须要有意义

• 变量的名称一般用名词

• 函数的名称一般用动词

• 操作符（=）、括号、左右各留一个空格；

  注释后面打一个空格；

   

4 - 运算符（操作符）

4.1 运算符的分类

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有：
    - 算数运算符  + - * / %
    - 递增和递减运算符  ++ --
    - 比较运算符  > = 
4.2 算数运算符
1.算术运算符概述
 概念：算术运算使用的符号，用于执行两个变量或值的算术运算。

2.浮点数的精度问题

浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。

    var result = 0.1 + 0.2; // 结果是：0.30000000000000004
    console.log(0.07 * 100); // 结果是：7.000000000000001
    // 所以：不要直接判断两个浮点数是否相等 !

3.表达式和返回值

表达式：是由数字、运算符、变量等组成的式子

表达式最终都会有一个结果，返回给开发者，称为返回值

4.3 递增和递减运算符

如果需要反复给数字变量+1或-1可以使用递增（++）和递减（--）运算符来完成。
在 JavaScript 中，递增（++）和递减（--）既可放在变量前，也可以放变量后面 前置递增和后置递增。
注意：前置递增和后置递增在单独使用时，效果是一样的；在表达式里，有所不同；

递增运算符

• 前置递增运算符 “++变量”：

  使用口诀：先自加，后返回值 ++num——num = num + 1；

    var  num = 10;
    alert(++num + 10);   // num = 11  11+10=21

• 后置递增运算符 “变量++”：

  使用口诀：先原值运算，后自加 num++ —— num = num + 1 ；

    var  num = 10;
    alert(10 + num++);  // num = 11 10+10=20

案例：递增运算符：

4.4 比较运算符

• 比较运算符概述

  概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

  运算符名称	说明	案例	结果
  	小于号	1	true
  >	大于号	1>2	false
  >=	大于等于号	2>=2	true
  	小于等于号	2	false
  ==	判断号（会转型）	37==37	true
  !=	不等号	37!=37	false
  === !==	全等 要求值和数据类型都一致	37===‘37‘	false

   

• 等号比较

  符号	作用	用法
  =	赋值	等号右侧的值赋给左侧
  ==	判断	判断两边的值是否相等（注意隐式转换）
  ===	全等	判断两边的值和数据类型是否完全相同

  实例：比较运算符

          //1. 我们程序里面的 == 是判断两边值是否相等
          console.log(3 == 5); // false
          console.log(‘pink老师‘ == ‘刘德华‘); // flase
          console.log(18 == 18); // true
          console.log(18 == ‘18‘); // true
          console.log(18 != 18); // false
          // 2. 我们程序里面有全等 一模一样  要求 两侧的值 还有 数据类型完全一致才可以 true
          console.log(18 === 18);
          console.log(18 === ‘18‘); // false

   

4.5 逻辑运算符

• 逻辑运算符概述

  逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。

  逻辑运算符	说明	案例
  &&	"逻辑与" ’与‘ and	true && false
  ||	"逻辑或" ’或‘ or	true || false
  ！	"逻辑非" ’非‘ not	! true

  案例：逻辑运算符

   

   

• 短路运算（逻辑中断）

  逻辑运算符左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值;

    // 1.逻辑与 短路运算
    //如果第一个表达式为真，则返回表达式2；如果第一个为假，