JS基础加强一_变量

JavaScript基础知识

1. JS概述

1.1 JS作用

• 验证表单(以前的网速太慢)
• 页面特效(PC端的网页效果)
• 移动端(移动web和app)
• 异步和服务器交互(ajax)
• 服务器开发(nodejs)

1.2 弱类脚本语言(解释型语言，解析执行与编译执行)

• 解析执行和编译执行
  
  • 编译执行：把代码编译成CPU认识的语言(文件)，然后整体的执行
  • 解析执行：一行一行解析，解析一行执行一行
• 弱类型脚本语言
  
  • 脚本语言：弥补编译语言的不足而存在的，作为补充语言，不用编译。
  • 弱类型语言：简单理解定义一个变量，可以有多种数据类型(var temp)

1.3 组成（前端标准和JS组成）

• 前端标准（HTML/CSS/JS)
  
  • JavaScript、HTML、CSS各自的作用
    
    • HTML 提供网页上显示的内容（结构）
    • CSS 美化网页（样式）
    • JavaScript（JS）控制网页行为（行为）
  • 设计原则：
    结构、样式、行为—分离！

1.4JS组成

JS = ECMAScript + DOM + BOM + 高级

• ECMAScript（前身为欧洲计算机制造商协会）
  
  • JavaScript的语法规范
• DOM（Document Object Model 的简称）
  
  • JavaScript操作网页上元素的API
• BOM（Browser Object Model 的简称）
  
  • JavaScript操作浏览器部分功能的API

2、变量

2.1 命名规则

• 驼峰命名规则：
  getElementById/matherAndFather/aaaOrBbbAndCcc
• 遵从规则
  
  • 变量命名必须以字母或是下标符号”_”或者”$”为开头。
  • 变量名长度不能超过255个字符。
  • 变量名中不允许使用空格，首个字不能为数字。
  • 不用使用脚本语言中保留的关键字及保留符号作为变量名。
  • 变量名区分大小写。(javascript是区分大小写的语言)
  • 汉语可以作为变量名。但是不建议使用！！！（low）

2.2 变量的使用

• 定义复制和定义后再赋值

var  age = 19;             var age ;     age = 19不建议使用：var age = “张三”;  age = 19;    跨类型。

3、数据类型

3.1 数据类型划分

• 查看方法
  使用关键字 typeof: typeof name 或者typeof(name)
• 简单数据类型(值类型)
  四种：
  字符串 | 数字 |布尔 |未定义空
  String|Number|Boolean|undefined|null
• 复杂数据类型(引用类型)
  Object、function、Array、Date、RegExp、Error…….

3.2 字面量

固定的值，让你从“字面上”理解其含义。
数值字面量
var age = 18; // 数值字面量，18为字面值

3.3 简单数据类型介绍

• Number

  • ①进制
    
    • 进制包括2进制、8进制（011）、10进制、16进制（0xA）、制等….
  • ②浮点数
    
    • 因为精度丢失问题，所以不判断计算后的两个浮点数是否相等。
  • ③数值范围
    
    • 由于内存的限制，ECMAScript 并不能保存世界上所有的数值
    • 最小值：Number.MIN_VALUE，这个值为： 5e-324
    • 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
    • 无穷大：Infinity
      
      • 无穷小：-Infinity
• NaN
  
  • ①.NaN 非数值（Not a Number的简写）
    
    • console.log(“abc”/18); //结果是NaN
    • Undefined和任何数值计算为NaN;
    • NaN与任何值都不相等，包括 NaN 本身
  • ②.isNaN() :任何不能被转换为数值的值都会导致这个函数返回 true（isNaN译为是否符合一个标准，什么标准呢？不是一个数字的标准，如果符合了那么就不是一个数字，不符合就是一个数字）
    
    • isNaN(NaN); // true
    • isNaN(“blue”); // true
    • isNaN(123); // false
• string
  
  • ①.字面量定义方式
    用引号时，可单可双，唯独不可一单一双。可用.length看有几个字符。
    
    • var name = “zhangsan”;
    • var name = ‘zhangsan’;
    • var name = ‘zhangsan”; //错误，单引号和双引号要成对出现
  • ②.转译
    总结：无法输出的字符，先输出/，在输出字符。（“、\、换行等….）
  • ③.字符串不可变
    在内存中不会立刻消失，只能二次赋值，原有的字符在一定时间 内被垃圾回收器回收。
  • ④.字符串拼接
    如果两个变量都是字符串，无论是否包含数字，只要是拼接，那么在前一个后面添加后一个字符串。（+与-情况不同，详情参考数据转换）
• Boolean
  
  • ①.Boolean类型有两个字面量：true和false，区分大小写。（大写不对）
    虽然Boolean 类型的字面值只有两个，但 ECMAScript 中所有类型的值都有与这两个 Boolean 值等价的值
  • ②.true
    true、除0数字、“something”、Object(任何对象)为true
  • ③.false
    false、0 、“”、undefined 、null为false
  • ④.if判断时会把（）内的值强行转换成boolean类型进行判断。
• undefined和null
  
  • null和undefined有最大的相似性。看看null ==undefined的结果(true)也就更加能说明这点。但是null ===undefined的结果(false)。不过相似归相似，还是有区别的，就是和数字运算时，10 + null结果为：10；10 + undefined结果为：NaN。
  • 任何数据类型和undefined运算都是NaN;
  • 任何值和null运算，null可看做0运算。

4. 数据类型的转换

4.1 任何简单类型转换成string(三种方法)

• 变量+”” 或者变量+”ab”
• string(变量)
• 变量.tostring()
  注意:undefined和null不可以,这两个不能用tostring方法

4.2 任何简单类型转换成Number

此转换容易产生NaN，一旦被转换的变量中含有非数字字符，都容易出现NaN

• 变量- * /一个数字 (有非数字字符会出现NaN)

例：var  num1  = “11”- 0;  var num2 =“11”* 1;var num =“11”/1;JS底层做了一个强制类型转换，把字符串转换成了Number进行运算。

• Number(变量) (有非数字字符会出现NaN)

var num1 = Number(“18”);           把字符变成了数字。var num2 = Number(“18.99”);   结果为18.99数字型。（有小数也转换）

• parseInt( )和parseFloat( ) (译为取整数和浮点数)

  注意:空字符串parseInt()和parseFloat()返回NaN，Number(“”)返回0

  • ①.parseInt(变量)：如果变量中收割字符为字母则结果为NaN。
    否则取出现首个非数字前的整数。
    123 = parseInt(“123.123aaaa”);
  • ②.parseFloat(变量)：如果变量中收割字符为字母则结果为NaN。
    否则取出现首个非数字前的浮点数。（没有小数取整）
    123.123 = parseFloat(“123.123aaaa”);

4.3 任何简单类型转换成Blooean

任何数据类型都可以转换成boolean类型，所以和以往两个转换不同；

• Blooean(变量)
  var bool = Boolean(“1111”); bool为true；
• !!变量

第一个逻辑非操作会基于无论什么操作数返回一个与之相反的布尔值
第二个逻辑非操作则对该布尔值求反
于是就得到了这个值真正对应的布尔值

4.4 特别提示注意点！

• Boolean类型中：true数值为1；false为0；
• null的数值类型为0；
• undefined无数值类型或者为NaN;

5、操作符

5.1 操作符种类

• 算数运算符(+ - * /)
  
  • ①. 一元运算符：正号、负号、++、–、平方等一个变量就能运算
  • ②. 二元运算符：+-*/%等两个变量才能运算
  • ③. 三元运算符： 值1？值2：值3；
• 逻辑运算符 ( || & ! ) ( 或 且 非 )
• 比较运算符 ( <、>、==、>=、…)
• 赋值运算符 ( =、+=、-=、*=、/=、%=)

5.2 优先级

• ①. ()
• ②. !、-（负数）、++、– （正数省略+）（一元运算）
• ③. *、/、%
• ④. +、- （加，减）（二元运算）
• ⑤. <、<=、<、>= （一级逻辑运算）
• ⑥. ==、!=、===、!==、 （二级逻辑运算）
• ⑦. && （三级级逻辑运算）
• ⑧. ||
• ⑨. ?: （三元运算）
• ⑩. =、+=、-=、*=、/=、%= （赋值运算）

5.3 && 和 || 运算

• &&链接两个boolean类型，有一个是false结果就是false。
  链接值不是布尔类型时，按照成布尔类型计算，结果本身不变。（非布尔）
  例子： 1 = 2&&1； 0 = 0 && 1； 都是true取后面，都是false取前面。
• ||链接两个boolean类型，有一个是true结果就是true。
  链接值不是布尔类型时，按照成布尔类型计算，结果本身不变。（非布尔）
  例子： 2= 2||1； 1 = 0 || 1； 都是true取前面，都是false取后面。

5.4 循环结构

共3种，for/while/do…while；可根据需求选择使用；

• 遍历数组首选for循环，简单循环使用for。
• 而while循环强调，不记循环次数（不知道循环多少次），首选while。
• 最后do…while循环强调，无论怎样，至少执行一次是，使用do…while。