1-JS基础

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

1.1 JS的组成

1.ECMAScript(JavaScript语法)

2.DOM(页面文档对象模型)

3.BOM(浏览器对象模型)

1.2 三种书写位置

1.内嵌式

在html文件中使用script双标签

2.行内式

直接写到元素的内部

3.外部js

在另外的文件中写

注意

1.可以将少量或单行js代码写在标签属性中

2.JS中推荐使用单引号

1.3 JS注释

1.单行注释

//

2.多行注释

/**/

1.4 输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

1.5 变量

1.变量的声明

​ var age;//声明一个名为age的变量

扫描二维码关注公众号，回复： 15215136 查看本文章

2.变量的赋值

变量的赋值以最后一次为准。

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

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

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

特殊情况：

情况	说明	结果
var age ; console.log (age);	只声明 不赋值	undefined
console.log(age)	不声明 不赋值 直接使用	报错
age = 10; console.log (age);	不声明 只赋值	10

1.6 数据类型

​ JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会根据赋值的变量类型被自动确定。

• 简单数据类型 （Number,String,Boolean,Undefined,Null）
• 复杂数据类型 （object,Array,Date)

1.简单数据类型

1.1数字型Number

• JavaScript 数字类型既可以用来保存整数值，也可以保存浮点数。

• 在JS中八进制前面加0，十六进制前面加 0x 。

• 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308

  最小值：Number.MIN_VALUE，这个值为：5e-32

• 三个特殊值

  lInfinity ，代表无穷大，大于任何数值

  l-Infinity ，代表无穷小，小于任何数值

  lNaN ，Not a number，代表一个非数值

• isNaN()

  用来判断一个变量是否为非数字的类型，返回 true 或者 false。

  示例：

  var usrAge = 21;
  var isOk = isNaN(userAge);
  console.log(isNum);            // false ，21 不是一个非数字
  var usrName = "andy";
  console.log(isNaN(userName));  // true ，"andy"是一个非数字
  

1.2字符串型String

• 字符串型可以是引号中的任意文本，其语法为 双引号 “” 和 单引号’'。推荐使用单引号。

• JS 可以用单引号嵌套双引号 ，或者用双引号嵌套单引号 (外双内单，外单内双)也就是里外不能相同。

• 转义符

  转义符	解释说明
  \n	换行符，n 是 newline 的意思
  \ \	斜杠 \
  ’	’ 单引号
  "	”双引号
  \t	tab 缩进
  \b	空格 ，b 是 blank 的意思

• 字符串长度

​ 通过字符串的 length 属性可以获取整个字符串的长度。 str.length

字符串拼接

​ 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

​ 字符串 + 任何类型 = 拼接之后的新字符串

变量不能添加引号！！！

1.3布尔型Boolean

• 布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
• 布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

1.4Undefined和Null

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

2.获取变量数据类型

使用typeof 可用来获取检测变量的数据类型。

3.数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

3.1转换为字符串

3.2转换为数字型

3.3转换为布尔型

• 代表空、否定的值会被转换为 false ，如 ’ '、0、NaN、null、undefined
• 其余值都会被转换为 true

1.7 运算符

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

JavaScript中常用的运算符有：

算数运算符

递增和递减运算符

比较运算符

逻辑运算符

赋值运算符

1.算数运算符

​ + - * / %

var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);   // 结果不是 7，  而是：7.000000000000001

不能直接判断两个浮点数是否相等。

2.递增递减运算符

​ ++、–

3.比较运算符

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

​

4.逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断.

​ 当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值。

5.赋值运算符

6.运算符优先级

1.8 流程控制-分支

1.if语句

if(表达式){//成立执行语句

}

else if(表达式){//成立执行语句

}

else{//不成立执行的语句

}

2.switch语句

switch( 表达式 ){

case value1:

​ // 表达式 等于 value1 时要执行的代码

​ break;

case value2:

​ // 表达式 等于 value2 时要执行的代码

​ break;

default:

​ // 表达式 不等于任何一个 value 时要执行的代码

}

3.三元表达式

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

表达式1成立，执行表达式2，否则执行表达式3

1.9 流程控制-循环

1.for循环

for(初始化变量; 条件表达式; 操作表达式 ){

//循环体

}

2.while循环

while (条件表达式) {

// 循环体代码

}

3.do while循环

do {

// 循环体代码 - 条件表达式为 true 时重复执行循环体代码

} while(条件表达式);

1.10 数组

// 普通变量一次只能存储一个值

var num = 10;

// 数组一次可以存储多个值

var arr = [1,2,3,4,5];

​ 数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

1.创建数组

• 利用new创建数组(先创建，不初始化)

  var 数组名 = new Array() ；

  var arr = new Array(); // 创建一个新的空数组

• 利用数组字面量创建数组(创建时初始化)

  //1. 使用数组字面量方式创建空的数组

  var 数组名 = []；

  //2. 使用数组字面量方式创建带初始值的数组

  var 数组名 = [‘小白’,‘小黑’,‘大黄’,‘瑞奇’];

2.数组的索引(下标)

// 定义数组

var arrStus = [1,2,3];

// 获取数组中的第2个元素

alert(arrStus[1]);

3.数组长度

使用：数组名.length

数组长度：数组元素的个数

4.新增元素

• 修改length长度

  数组的length属性是可读可写的，通过修改length的值来实现扩容，扩容后是默认值undefined。

  var arr = ['red', 'green', 'blue', 'pink'];
  arr.length = 7;
  console.log(arr);
  console.log(arr[4]);
  console.log(arr[5]);
  console.log(arr[6]);
  

  

• 修改数组索引

  直接用索引为后面的元素赋值。

  var arr = ['red', 'green', 'blue', 'pink'];
  arr[4] = 'hotpink';
  console.log(arr);
  

1.11 函数

1.声明

// 声明函数
function 函数名() {
    
    
    //函数体代码
}

2.调用

// 调用函数
函数名();  // 通过调用函数名来执行函数体代码

3.返回值

有return，返回对应的值。

无return，返回undefined。

4.arguments的使用

当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

• 具有 length 属性
• 按索引方式储存数据
• 不具有数组的 push , pop 等方法

使用举例：

function maxValue() {
    
    
      var max = arguments[0];
      for (var i = 0; i < arguments.length; i++) {
    
    
         if (max < arguments[i]) {
    
    
                    max = arguments[i];
         }
      }
      return max;
}
 console.log(maxValue(2, 4, 5, 9));
 console.log(maxValue(12, 4, 9));

1.12 对象

1.对象的创建

• 利用字面量(创建时初始化)

  var star = {
        
        
      name : 'pink',
      age : 18,
      sex : '男',
      sayHi : function(){
        
        
          alert('大家好啊~');
      }
  };
  

• 利用new Object(先创建再初始化)

  var andy = new Obect();
  andy.name = 'pink';
  andy.age = 18;
  andy.sex = '男';
  andy.sayHi = function(){
        
        
      alert('大家好啊~');
  }
  

• 利用构造函数(创建时直接在构造函数中初始化)

  function Person(name, age, sex) {
        
        
       this.name = name;
       this.age = age;
       this.sex = sex;
       this.sayHi = function() {
        
        
        alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex);
      }
  }
  var bigbai = new Person('大白', 100, '男');
  var smallbai = new Person('小白', 21, '男');
  console.log(bigbai.name);
  console.log(smallbai.name);
  

2.对象元素的调用

1.13 内置对象

JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象

1.math对象

Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

• Math.PI // 圆周率
• Math.floor() // 向下取整
• Math.ceil() // 向上取整
• Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3
• Math.abs() // 绝对值
• Math.max()/Math.min() // 求最大和最小值

2.date对象

date对象是一个构造函数，所以我们需要实例化后才能使用(需要创建对应的对象)。

var now = new Date();
console.log(now);

• 构造函数的参数

  如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写成new Date(‘2019-5-1’) 或者 new Date(‘2019/5/1’)。

  如果Date()不写参数，就返回当前时间。

• 获取时间

  

• 获取毫秒数

  // 实例化Date对象
  var now = new Date();
  // 1. 用于获取对象的原始值
  console.log(date.valueOf())	
  console.log(date.getTime())	
  // 2. 简单写可以这么做
  var now = + new Date();			
  // 3. HTML5中提供的方法，有兼容性问题
  var now = Date.now();
  

3.数组对象

3.1判断是否为数组对象

instanceof 运算符，可以判断一个对象是否属于某种类型。

Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

​ 如：var arr = [1, 23];

​ console.log(arr instanceof Array); // true

​ console.log(Array.isArray(arr)); // true

3.2添加删除数组元素的方法

var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    
    
    if (arr[i] < 2000) {
    
    
        newArr.push(arr[i]);
    }
}
console.log(newArr);

3.3数组排序

var arr = [1, 64, 9, 6];
arr.sort(function(a, b) {
    
    
    return b - a;      // 降a序
    // return a - b;   // 升序
});
console.log(arr);

3.4数组索引方法

3.5数组转换为字符串

3.6数组变换

4.字符串对象

4.1基本包装类型

​ 基本数据类型是没有属性和方法的，而对象才有属性和方法 。

4.2根据字符返回位置

4.3根据位置返回字符

4.4字符串操作方法

4.5repalce()方法

用于替换字符。

replace(被替换的字符串， 要替换为的字符串);

4.6split()方法

用于切分字符串。

var str = 'a,b,c,d';
console.log(str.split(','));   // 返回的是一个数组 [a, b, c, d]

4.7其他方法

• toUpperCase() //转换大写
• toLowerCase() //转换小写