JavaScript基础

1、重点内容

1.1 定义变量

变量命名规范

​ 1、变量只能是数字、字母、下划线、$组成

​ 2、不能以数字开头

​ 3、不能使用系统定义好的关键字

​ 4、区分大小写

​ 5、建议命名有意义，比如我的名字 myName

​ 6、建议驼峰式命名法、也可以烤串法命名

定义变量目的：将用户输入的数据存储起来

语法：var 变量名;

1、方法一

var a;
a = prompt("请输入一些内容");
console.log(a);

2、方法二

var a = prompt("请输入一些内容");
console.log(a);

3、方法三

var a = 10,b = prompt("请输入一些内容");
console.log(a);
console.log(b);

1、将输入的内容保存到前面的变量，点击确定按钮键，控制台会将用户输入的内容打印出来

2、点击取消控制台将会打印null

1.2 简单数据类型

​ 1、Number 数字类型（整数、小数、负数）

​ 2、String 字符串类型：字符串特征：加引号，任何数据只要加上引号就是字符串

​ 3、Boolean 布尔类型：true、false 只要复合两中结果的数据都可以使用boolean类型

​ 4、null和undefined（空和未定义）

1.3 类型转换

​ 其他转数字

​ Number(): 只能转换纯数字的字符

​ parseInt(): 字符取整数，必须是数字开头

​ parseFloat(): 字符取所有数字部分包括小数，必须数字开头

var a = 100;
var b = '100.5abc';
console.log(a + Number(b));
console.log(a + parseInt(b));
console.log(a + parseFloat(b)); 

​ 其他转字符

​ 转字符一般直接加引号，大概率不会用转字符

​ String()

​ 变量名.toString()

var a = 100;
var b = 200;
console.log(String(a));
console.log(b.toString());

​ 其他转boolean

​ Boolean()

六种为false的数据，其余全为true
var a = "";
var b = null;
var c = 0;
var d = undefined;
var e = NaN;
var f = false;
console.log(Boolean(a));
console.log(Boolean(b));
console.log(Boolean(c));
console.log(Boolean(d));
console.log(Boolean(e));
console.log(Boolean(f));

1.4 算术运算符

+ : 这个运算符数字之间运算是求和字符，字符之间运算是拼接

口诀：

​ 变量中间拼接字符先写++在++中间写"“在”"中间写字符

​ 字符中间拼接变量先写"“在”"中间写++在++中间写变量

var a = 'hello';
var b = 'ld';
console.log(a + ' wor' + b);

var c = ' wor';
console.log('hello' + c + 'ld');

+:表示求和

-:表示求差

*:表示求积

/:表示求商

%:表示取余

var a = 10,b = 3;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);


var a = '10';
var b = 3;
console.log(a + b);   // 103 其余数值正常运算（隐式转换：Number()）
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);

1.5 比较运算符

><>= <= == !=…

== 判断值是否相等

=== 判断值和数据类型是否都相等

console.log(NaN == NaN); // false特殊的值

isNaN判断是否是非数字，是数字返回false，不是数字返回true

var a = 10,b = '10';
console.log(a < b);     //false
console.log(a == b);    //true(隐式转换)
console.log(a === b);   //false
console.log(isNaN('A'));//true

1.6 自增自减运算符

++

–

在前先自增（自减）再参与运算

在后先参与运算，再自增（自减）

1.7 逻辑操作符

&& 与：从左→右依次判断，返回第一个不成立值或最后一个成立值。

|| 或：从左→右依次判断，返回第一个成立值或最后一个不成立值。

! 非：取反，非真即假，非假即真。

1.8 分支结构

1、if结构

if(条件1){
          代码块；
}else if(……){
          代码块；
}else{
          除去以上条件以外的情况；
      }

2、switch结构：实现判断（用于固定值的判断）

switch(固定的值){
           case 1:代码块1
              break;  //终止条件语句
           case 2:代码块2
              break;
               ……
           default:代码块（除去以上所有条件之外的情况）;
}

1.9 三元表达式

判断条件 ？ 条件成立时执行此处代码 ： 条件不成立时执行此处代码;

document.write(start == '开' ? '开' : '关')

1.10 循环结构

1、while循环结构

可以解决未知循环次数的问题

while(条件){
              代码块
}

注意：

​ （1）、初始值

​ （2）、取值范围

​ （3）、自增

2、do-while循环结构

无论条件是否成立，至少会执行一次，可以解决未知循环次数的问题

 do{
      代码块
}while(条件)

3、for循环结构

解决已知循环次数的问题

for(初始值;取值范围;自增量){
                        代码块
}

1.11 循环结束语句

break 结束当前循环

continue 跳过本次循环，进入下一次循环

1.12 数组

数组：一系列有序的数据集合（有顺序，有长度）

**语法：**var 数组名 = [] 字面量定义一个数组

数组中某一个数据项：arr[数字代表索引（从零开始）]

常用方式：var 数组名 = [初始值] 字面量定义一个数组并添加相对应的数据项

var arr = [1,2,3,4,5,6]
arr[arr.length] = 18                // 在原有数据之后，添加数组内容
arr[0] = 20                         // 根据索引修改数据
delete arr[1]                       // 根据索引删除数据（一般不用）
document.write(arr)                 // 打印数组内容
document.write(arr.length)          // 打印数组长度
document.write(arr[arr.length-1])   // 打印数组最后一项

遍历数组
for (i = 0; i < arr.length; i++) {
        document.write(arr[i] + ' ')
 }

1.13 将字符串转为数组

关键字split

arr = 字符串变量名.split(符号) // 按符号分隔开

运用数组时要转为数字类型

// 求和
var str = '1 5 1 5 2 6 5 8'
var arr = str.split(' ')
for (i = 0,sum = 0; i < arr.length; i++) {
        document.write(arr[i] + ' ')
        sum += +arr[i]
}
document.write(sum)

1.14 获取实时时间

// 方法一
var time = new Date().toLocaleString()


// 方法二
// 创建时间对象
var time = new Date()
// 获取年份
var year = time.getFullYear()
// 获取月份(月份要+1)
var month = time.getMonth() + 1
// 当数字个位数时，在个位数前加一个0（美观）
month = month > 10 ? month : '0' + month
// 获取日期
var date = time.getDate()
// 获取小时
var hours = time.getHours()
// 获取分钟
var min = time.getMinutes()
// 获取秒钟
var seconds = time.getSeconds()
var times = year + '-' + month + '-' + date + ' ' + hours + ":" + min + ':' + seconds
document.write(times)

1.15 获取随机数

​ 1、Math.random() 获取[0,1)之间的随机数

​ 2、Math.floor() 向下取整

​ 3、获取[最小数，最大数]之间的随机数

​ 公式：Math.random()*(最大数-最小数+1)+最小数

// 获取数组中的随机一项数据，让索引随机
var arr = ['香蕉','苹果','榴莲','西瓜','草莓']
var s = Math.floor(Math.random()*arr.length)
alert(arr[s])

1.16 函数

函数分类

​ 1、预定义函数

​ 预先定义好的函数可以直接使用的 例如：parseInt()

​ function parseInt(){}

​ 2、自定义函数

​ 自己使用语法规定的关键字来定义一个函数

​ 定义函数的语法: function 函数名(){ }

​ 函数不光要定义还要使用才会看到效果

函数的参数

​ function 函数名(形式参数1,形式参数2)

​ 形参与实参位置一 一对应

​ 封装函数的时候,将变化的作为参数,将不变的作为函数体

​ 调用的时候传递的是实际参数,定义函数的时候的参数是形式参数

1.17 函数的返回值

return 数据（整个函数返回的数据）

​ 1、结束函数，return之后的代码不会执行

​ 2、将return后面的数据返回给调用者

1.18 作用域

函数能生成作用域

局部作用域： 只能在函数内访问

局部变量: 只有在函数内部使用var声明的变量

全局作用域： 能在页面的任何位置都可以访问

全局变量: 除去在函数中var声明的变量，其余变量全是

1.19 作用域链

自己身上有就不会去父级身上找（就近原则）

所有变量都没有，就会报错not defined

1.20 预解析

在作用域中，将变量和函数提到当前作用域的第一行，变量只提变量名不提值

1.21 arguments参数

伪 数 组： 有数组特征，但不是数组类型（非官方叫法）

arguments: 为了解决形参实参不对等，将所有实参打包成一个集合，可以通过循环遍历来操作

1.22 短路运算

短路运算： 真正解决形参实参不对等的问题，当某参数没有取到数值时，就等于默认值0进行运算

||：输出第一个成立值或最后一个不成立值

1.23 创建对象的方法

对象的语法：

​ 1、字面量定义一个对象

​ var obj = {};

       // 对象的常见写法
        var obj = {
            name:'沐沐',
            age:3,
            // 添加方法
            girl:function(){
                return this.name + '是一个漂亮的女孩！'
            },
            // 方法的简写
            guitar(){
                console.log(this.name + '喜欢弹吉他!');
            }
        }
        console.log(obj);
        console.log(obj.name);
        // 对象名.方法名 （来调用对象中的方法，方法要加小括号）
        console.log(obj.girl());     // 该方法有return返回数据直接打印即可
        obj.guitar();                // 该方法中已经打印了，直接调用即可

​ 2、构造函数创建对象

​ var obj = new Object();

​ 3、工厂函数可以达到批量生产对象，但不能判断类型

function person(name,age){
            // 1、创建对象
            var obj = new Object();
            // 2、给对象添加属性
            obj.name = name
            obj.age = age
            // 3、返回对象
            return obj
        }

​ 4、自定义构造方法创建对象

​ 语法：function Person(){}

​ 要求: 首字母大写（非必须，约定俗成的）

​ 总结: 自定义构造函数既能够批量生产对象，也能够看出类型

function Person(name,age){
            /* 
                1、自动创建对象
                2、给this添加属性
                3、对象自动返回
                （以上所有自动操作都是new完成的）
            */
            this.name = name
            this.age = age
        }
        // 创建对象的时候，一定要搭配new关键字一起使用
        var p1 = new Person('王安石',20)
        var p2 = new Person('欧阳修',30)
        console.log(p1,p2);

1.24 对象的数据操作

​ 对象：数据是一系列无序的键值对的集合（按照属性首字母排序），属性不能重复，否则会覆盖上面的值

​ obj[‘属性名’] = 属性值：这种写法一般是获取某个值，而非添加

        // 添加数据
        // obj.name = '沐沐'; 键 值 对（但凡看到键值对都是对象数据类型）
        obj.name = '沐沐'
        // 修改数据（有数据则改，无数据则添加）
        obj.name = '池月'
        // 删除数据
        // delete obj.age;  // 很少使用
        obj.age = null;
        // 查询数据
        console.log(obj.name);
        console.log(obj);

1.25 new关键字

new关键字在构造函数中的过程

​ 1、创建一个空对象 var obj = new Object();

​ 2、把对象赋值给this this = obj;

​ 3、给this添加属性 this.xxx = xxx;

​ 4、返回this return this;

 function Person(name, age) {
            this.name = name
            this.age = age
        }
        // 搭配new关键字实现对象的创建
        var p1 = new Person('欧阳修',20)
        console.log(p1);

1.26 this指向

对象没有作用域，根据作用域找this指向（就近原则）

​ 1、全局打印this this指向window

​ 2、全局的函数在全局调用 打印this，this指向window

​ 3、对象.方法的调用 this指向该对象

1.27 键访问对象属性和方法

[‘属性名/方法名’]

        // 键的方式访问
        console.log(obj['name']);
        // 键的方式添加     一般用于获取数据
        obj['age'] = 20
        // 键的方式调用方法
        obj['fn']()

1.28 遍历对象

遍历对象的语法：for…in…

​ for(var 变量名 in 对象名){

​ 1、变量名（一般用key命名） 获取对象中的所有属性名

​ 2、对象名[变量名] 获取对象中的所有属性值

​ }

for(var key in obj){
            // console.log(key);         属性名
            // console.log(obj[key]);    属性值
            console.log(key + ":" + obj[key]);
        }

1.29 forEach遍历数组

语法：

​ 数组名.forEach (匿名函数(形参1，形参2){

​ 形参1：数据项（item）

​ 形参2：数据项对应的索引（index）

​ })

var arr = [1,2,3,5,8,5,6]
        var sum = 0
        arr.forEach(function(item,index){
            sum += item
        })
        console.log(sum);

1.30 filter 数组筛选

语法：

​ 数组名.filter(函数 (形参1，形参2，形参3){

​ 形参1：数据项(item)

​ 形参2：索引(index)

​ 形参3：数组本身(slef)

​ })

var arr = [1,2,3,4,5,6,7,8]
        var res = arr.filter(function (item,index,self){
            return item > 5
            // return index != 0
        })
        console.log(res);

// filter数组去重
var arr = [1,2,1,45,5,2]
        var res = arr.filter(function(item,index,self){
            // indexOf判断某数据项在不在此数组中时，从左往右取第一项该数据，因此索引为第一个该数据的数据项的索引
            // 例如：1的索引为0，2的索引为1   当索引不相等时则不反回数据，以此来达到数组去重的目的
            return self.indexOf(item) === index
        })
        console.log(res);

2、需要理解的内容

2.1 引入js三种方式

外链式
<script src="./01-第一个js文件.js"></script>

内嵌式
<script>
        // 存放内嵌式js代码
</script>

行内式
<button onclick="alert('注册成功')">用户交互</button>

2.2 判断数据类型关键字

typeof

var num = 10;
var str = "abc";
var bool = true;
console.log(typeof num);   //number
console.log(typeof str);   //string
console.log(typeof bool);  //boolean

2.3 嵌套for循环

/* 
            应用场景:练习99乘法表金字塔*
                       i  j
            *          1  1
            **         2  2
            ***        3  3
            ****       4  4
            *****      5  5
            1x1=1
            1x2=2 2x2=4
        */

// 99乘法表
document.write(" <table border=1>")
for (var i = 1; i <= 9; i++) {
     document.write("<tr>")
     for (j = 1; j <= i; j++) {
          document.write("<td>" + j + "x" + i + "=" + i * j + "</td>");
     }
     document.write("</tr>")
}
document.write(" </table>")

// 直角三角形
document.write("<br>")
    for (i = 1; i <= 9; i++) {
        for (j = 1; j <= i; j++) {
              document.write('*')
        }
        document.write("<br>")
}

2.4 字符串方法

​ 1、indexOf() 表示整个字符串中第一次出现某个字符的位置

​ 2、lastIndexOf() 表示整个字符串中最后一次出现某个字符的位置

​ 3、substring(start,end) 字符串截取，包括前一位，不包括后面位置，不写end表示截取到最后

​ 4、substr(start,num) num表示要截取的个数

​ 5、toUppercase() 字符转大写

​ 6、toLowercase() 字符转小写

​ 用法：字符串.方法

var str = 'Hello'
console.log(str.indexOf("w"));          // -1  表示该字符串不包含这个字符
console.log(str.indexOf('l'));          // 2   输出第一个出现该字符所在的位置
console.log(str.lastIndexOf('l'));      // 3   最后出现该字符的位置
console.log(str.substring(2));          // llo 输出字符从位置2开始到最后一个字符（包含）
console.log(str.substring(2,4));        // ll  输出字符从位置2开始到最后一个字符（不包含最后一个字符）
console.log(str.substr(0,2));           // He  从第一个位置开始往后截取两个字符（包含第一个位置的字符）
console.log(str[4].toUpperCase());      // O   某一字符转大写
console.log(str[0].toLowerCase());      // h   某一字符转小写

2.5 Math对象中的方法

​ Math.abs() 绝对值

​ Math.max() 最大值

​ Math.min() 最小值

​ Math.floor() 向下取整

​ Math.random() [0,1)之间的随机数

​ Math.round() 四舍五入

​ Math.pow(x,y) 幂运算：x表示数值 y表示幂 y=2表示平方 0.5表示开方

​ Math.PI Π

​ …数组名 // 快速展开数组（拓展运算符）

​ 随机整数万能公式：Math.floor(Math.random()*(大数-小数+1)+小数)

2.6 Array对象

数组名.push() 在数组最后面添加数据项 返回新数组长度（一般用于数组去重的基础写法）

        // 数组去重
        var newArr = []
        for(var i = 0;i<arr.length;i++){
            // 判断这个数据是否在新数组中，不在则添加，在则不添加
            if(newArr.indexOf(arr[i]) === -1){
                newArr.push(arr[i])
            }
        }
        console.log(newArr);

2.7 字符串数组反转

​ split() 字符串转数组（按照一定规则,例如：’ '）

​ join() 数组转字符串（按照一定规则,例如：’ '）

2.8 数组方法

​ 1、slice（截取开始索引，截取借结束的索引） [开始索引，结束索引)

​ 2、indexOf(‘数据项’) 返回数据项对应的索引值

​ 3、pop() 从数组最后删除数据项 返回值是被删除的数据项

​ 4、unshift() 从数组开头添加数据项（了解） 返回值是新数组的长度

​ 5、shift() 从数组开头删除数据项（了解） 返回值是被删除的数据项

​ 6、reverse() 将数组进行反转 返回值是反转之后的数组

​ 7、splice(要删除的索引，删除多少个，替换内容，替换内容……) 返回删除后的数组

​ 8、push() 在数组最后面添加数据项 返回新数组长度（一般用于数组去重的基础写法）

2.9 String内置对象

​ 1、charAt(索引) 返回该位置对应的字符

​ 2、charCodeAt(索引) 返回该字符所对应的ASCII码

​ 3、replace（‘被替换的内容’,‘替换内容’） 返回替换后的数据

2.10 Date内置对象

        // Date内置对象
        var data = new Date()
        // 获取从1970年1月1日到现在的毫秒数
        console.log(+data);
        // 传入一个年月日时分秒的格式，用”，“隔开
        var t1 = new Date(2021,2,10,5,15,59)
        console.log(t1);
        // 传入一个字符串
        var t2 = new Date("2020-05-05")
        console.log(t2);
        // 只传入年份（字符串）会得到当年的第一天数字，返回1970那个日期
        var t3 = new Date('2022')
        console.log(t3);
        // 传入一个毫秒数,返回日期
        var t4 = new Date(15464312316545)
        console.log(t4);

3、需要了解的内容

3.1 javaScript的组成

Javascript是一门运行在浏览器上的脚本语言

什么是编程 —— 人为的设定一些步骤，让计算机去执行

• ECMAScript - 简称es，用来规范JavaScript的语法的，具有多个版本。
• DOM - 文档对象模型，用来操作页面上的标签的
• BOM - 浏览器对象模型，用来操作浏览器的部分功能的

3.2 补充函数

1、函数表达式 将函数存在一个变量中 var 变量名 = function （）{}

​ 可以通过 变量名（）来调用该函数

2、匿名函数 function(){}

3、自调用函数 (function (){})()

​ (1)、先写一个匿名函数

​ (2)、将匿名函数包裹在（）中

​ (3)、在最后面加上（）调用打开页面会立即执行该函数

// 自调用函数
(function(){
      alert('hello beautiful girl!')
})()