javascripts知识点梳理1

1-JavaScript 概念

JavaScript 是什么

  • JavaScript 是世界上最流行的语言。
  • JavaScript是一种运行在客户端 的*脚本语言 script
  • 脚本语言： 不需要编译，-运行过程中由解释器逐行来行进行解释 php
  • 现在也可以基于Node.js技术进行服务器端编程。

JavaScript 的组成

1
2
3
4
5
6
7
8
9
1.ECMAScript  （ECMA 欧洲计算机制造联合会） 是 javascript 的核心  也是我们后面学习的重点
	ECMAScript是一套JS语言设计标准，描述 JavaScript 语言基本语法和数据类型，以及其它实现标准。
	可以理解为是javascript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。
2.BOM - 浏览器对象模型
	一套提供给程序员 操作浏览器功能 的API
	通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
3.DOM - 文档对象模型
	一套提供给程序员 操作页面元素 的API
	通过DOM提供的API可以对页面上的各种元素进行操作（大小、位置、颜色等）

2-JS代码书写位置

三种JS书写位置：行内、内嵌标签、外部引入

行内 JS

1
2
3
4
5
6
7
8
9
10
- 可以将 单行或少量JS代码 写在HTML标签的事件属性（以 on 开头的属性），如：onclick
- 注意单双引号的使用：在HTML中我们推荐适应双引号

    <input type="button" value="点我试试" onclick="alert('Hello World')" />

缺点：

- 可读性差， 在html中编写JS大量代码时，不方便阅读；
- 引号易错，引号多层嵌套匹配时，非常容易弄混；

内嵌 JS

1
2
3
4
5
<head>
  <script>
    alert('Hello  World~!');
  </script>
</head>

外部 JS 文件

1
<script src="outdoor.js"></script>

注意：引用外部 js 文件的 script 标签中不可以写代码

2数据类型及检测

简单数据类型

Number

数值类型，包含 整型值和浮点型值，如 21、0.21

Boolean

布尔值类型，如 true 、false，等价于 1 和 0

String

字符串类型，如 “张三” 注意咱们js 里面，字符串都带引号

Undefined

var a; 声明了变量a 但是没有给值，此时 a = undefined

Null

表示空的对象

获取变量的数据类型

typeof 可用来获取变量的数据类型

1
2
3
var num = 3747;
var isNum = typeof num; // 也可以 写成 typeof(num)
alert(isNum); // "number"

数据类型检测typeof

1
2
3
var num = 3747;
var isNum = typeof num; // 也可以 写成 typeof(num)
alert(isNum); // "number"

3-变量var

我们CSS 中，.red { color : red;} 一次声明， 多次调用 非常方便

同样，我们页面中，有很多的数据，我们需要多次使用， 我们可以把这个数据保存起来，多次调用就好了。

这就可以用到变量了。

总结目的： 一次存储，多次使用

变量使用注意点

只声明 不赋值
var age ; console.log (age); // undefined
不声明 不赋值 直接使用
console.log(age) ; // 报错
不声明 只赋值
age = 10; console.log(age); // 10 不推荐这样写

语法：

var 变量名 = 变量值;

同时声明多个变量

var age, name, sex; // 等价于 var age; var name; vae sex;
age = 10;
name = ‘zs’;
sex = 2;

变量命名规则和规范

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- 规则 必须遵守的，不遵守的话 JS引擎 发现并报错
  规则 相当于人类社会的法律，犯法就坐牢
  - 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：var usrAge, num01, _name
  - 区分大小写 强调：JS 严格区分大小写 ，var app; 和 var App; 是两个变量
  - 不能 以数字开头
  - 不能 是关键字、保留字 和 代码符号，例如：var、for、while、&
      // JS 区分大小写，所以当 大小写 不一样时，JS引擎 会认为是两个变量
      var age = 1;
      var Age = 2;
      alert(age + Age);

- 规范  建议遵守的，不遵守的话 JS引擎 也不会报错
  规范 相当于 人类社会的 道德，违反了不会有警察找你，但任何人都可能指责你  
  - 变量名必须有意义
  - 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。
    如：usrName 和 usrPassword      和    xian   和 xiAn

变量属于那种数据类型？

你给变量一个什么值，它就是什么数据类型的变量。

数值类型

5.1.2 数值的进制

1
2
3
4
5
6
7
8
9
10
11
12
//1.十进制
	var num = 9;
    // 进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。

//2.八进制 数字序列范围：0~7
    var num1 = 07;   // 对应十进制的7
    var num2 = 019;  // 对应十进制的19
    var num3 = 08;   // 对应十进制的8

//3.十六进制 数字序列范围：0~9以及A~F
	var num = 0xA;
    //如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析

浮点数的精度问题

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

数值范围

1
2
3
- 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
- 最小值：Number.MIN_VALUE，这个值为：5e-324

数据类型转换

转换为字符串

toString()

1
2
3
4
5
6
var num01 = 27; // alert(num01)输出"27"
var num02 = 27.37; // alert(num02)输出"27.37"
console.log(num01.toString())

var isFound = false;
alert(isFound.toString()); // 输出"false"

String() 方法

1
2
3
4
5
String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。

比如：undefined 和 null
var  timer = null;
console.log(String(timer));

加号拼接字符串

1
2
alert(21 + "小白"); // 输出"21小白"
alert(false + "小白"); // 输出"false小白"

转换为数值

parseInt(string) 函数

将string类型参数转成整数

parseFloat(string) 函数

将string类型参数转成浮点数

Number() 强制转换函数

  • 里面如果只要出现非数字字符或者undefined， 则就返回 NaN
  • 如果该值是空字符串、数字0、或null、false 则返回 0 如果是 true 则返回 1

转换为Boolean值

代表 空、否定的值 会被转换为 false 有五种 “ ‘’、0、NaN、null、undefined

Boolean()函数
Boolean(‘true’);

字符串转义符

1
2
3
4
5
6
7
8
9
10
11
12
13
不能在字符串中包含相同的引号   (单引号中不能再嵌套单引号 双引号中不能再嵌套双引号)
// 请注意 i'm 中的 单引号
var badQuotes02 = 'I'm the GOD of my world ~!'; // 报错！

- 使用 转义字符 可以让单引号中嵌套单引号。   （也可以让双引号中嵌套双引号）
- 定义： 可以将某些具有特殊功能的字符转换为没有特殊功能的字符

         在JavaScript中，我们通过在 不需要特殊功能的字符之前 放一个 反斜杠 来实现这一点。看看这个：

    var strMsg = 'I\'m the GOD of my world ~!'; //输出：I'm the GOD of my world ~!
    var strMsg2 = "I\"m the GOD of my world ~!"; //输出：I"m the GOD of my world ~!
    var strMsg3 = '反斜杠是这个 \\，神奇！';  //输出：反斜杠是这个 \，神奇！

字符串操作

字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串

1 字符方法

charAt() //获取指定位置处字符
charCodeAt() //获取指定位置处字符的ASCII码
str[0] //HTML5，IE8+支持 和charAt()等效

2 字符串操作方法

concat() //拼接字符串，等效于+，+更常用
slice() //从start位置开始，截取到end位置，end取不到
substring() //从start位置开始，截取到end位置，end取不到
substr() //从start位置开始，截取length个字符

3 位置方法

indexOf() //返回指定内容在元字符串中的位置
lastIndexOf() //从后往前找，只找第一个匹配的

4 去除空白

trim() //只能去除字符串前后的空白

5 大小写转换方法

str.toLocaleUpperCase() //转换大写
str.toLocaleLowerCase() //转换小写

6 其它

search()
replace()
split()
fromCharCode()
// String.fromCharCode(101, 102, 103); //把ASCII码转换成字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    var str = ' 1,sdssda ';
    str = str.trim();
    // 去两边空格
    // str = str.slice(1, 3);
    // 第var1开始截到var2个
    // str1 = str.split(',')    
    // str = str.substr(1, 2)       第var1开始截var2个
    // str = str.substring(1, 3)
    //  第var1开始截到var2个   与slice 相同但不接受负值
    // str = str.toLocaleUpperCase()
    // str = str.toLocaleLowerCase()
    // 
    // for (var i = 0; i < str.length; i++) {
    //     str = str.replace('s', 'a')
    // }
    // str = str.charAt(2)
    // str = str.indexOf('s')
    console.log(str);
</script>

基础输入输出

alert(msg)

  • 消息弹出窗：在 JS 中可以使用浏览器提供的 alert 函数 显示消息

  • 语法如下：

    var usrMsg = “请问有空吗？”
    alert(usrMsg);

    1
    2
    3
    4
    5
    6
    - 消息弹出窗：在 JS 中可以使用浏览器提供的 alert 函数 显示消息
    - 语法如下：

        var usrMsg = "请问有空吗？"
        alert(usrMsg);

prompt(info)

1
2
3
4
5
6
7
8
- 消息输入窗：在 JS 中可以使用浏览器提供的 prompt 函数从键盘接收用户的输入
  - 括号中的参数 info 是用来显示在输入窗给用户看的提示信息
- 用户输入的 任何内容 都是一个 字符串
- 语法如下：

    var usrMsg = prompt();
    var usrName = prompt('请输入您的名字'); //会在输入窗显示给用户看的提示信息
    alert(usrName); // 打印用户名字

console.log() 控制台输出

运算符

一元运算符

前置运算(理解)
++num 前置自增 ：先自加 后运算
后置运算(重点)
num++` 后置自增：先 原值运算 后 自加
案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var a = 1; var b = ++a + ++a; console.log(b);  5    2  +  ++2
var a = 1; var b = a++ + ++a; console.log(b);   4    1 + ++2
var a = 1; var b = a++ + a++; console.log(b);   3    1 + 2++
var a = 1; var b = ++a + a++; console.log(b);  4    2 + 2++


8.2.3 自增自减运算符 小结

- ++ 和 -- 运算符目的可以简化代码的编写，让变量的值 + 1 或者 - 1；

- 单独使用时，运行结果相同；
- 与其他代码联用时，执行结果会不同 
- 后置：先  原值运算    后 自加     ---先人后己 
- 前置：先自加  后运算  
- 开发时，大多使用后置自增/减，并且代码独占一行，例如：num++; 或者 num--;。
- 开发时，不要和其他代码联用 —— 会降低代码的可读性


var b = ++a + ++a; // 此处 和 +号 同时使用，会影响 到 后面 ++a 的执行过程

逻辑运算符

逻辑与 &&： 两边都是 true才返回 true，否则返回 false。
逻辑或 ||： 两边都为 false才返回 false 否则都为true
赋值运算符
运算符的优先级
== 与 === 的区别

赋值运算符

1
2
3
4
var age = 10;
age += 5;  // 相当于 age = age + 5;
age -= 5;  // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

运算符的优先级

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

规律：
先一元   后  二元 
先 算数  后 关系

== 与 === 的区别

1
2
3
== 相等，两边值类型不同的时候，忽略类型比较，直接比较 值，只要值相等 就返回 true。

=== 全等，先判断类型是否相等，如果相等才去判断值是否相等，只有类型 和 值 都相等，才返回 true
javascript
#javascript
javascripts知识点梳理1
http://www.dwyblog.cn/2019/02/23/javascripts知识点梳理1/
作者
幸福来敲门
发布于
2019年2月23日
许可协议