JavaScript基础知识总结(一)

一、JavaScript

1.Java、JavaScript、html

①JavaScript与Java的区别类型:

(1)JavaScript----解释性编程语言

(2)Java----编译型的编程语言

html----超文本标记语言

② JavaScript是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。

作用(做什么?)

网页特效 (监听用户的一些行为让网页作出对应的反馈)

表单验证 (针对表单数据的合法性进行判断)

数据交互 (获取后台的数据, 渲染到前端)

服务端编程 (node.js)

③JavaScript的组成

 

ECMAScript:

规定了js基础语法核心知识。 比如:变量、分支语句、循环语句、对象等等。

Web APIs :

DOM 操作文档,比如对页面元素进行移动、大小、添加删除等操作。

BOM 操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等 。

注意 DOM属于BOM。

2.JavaScript的引用方式

①方式一:js内部式————功能调试

②方式二:js外部式————实际项目推荐使用

③方式三:js内联式————通过事件方法写在标签内部(不推荐使用)

3.常见的输入输出语法

输出方式1:document.write();————将内容显示在浏览器页面中

输出方式2: alert();————方法----逻辑调试中,或者警告语句

输出方式3: console.log();————方法----逻辑调试中

输入方式1: prompt();----交互式弹窗

二、变量和数据类型

1.变量

内存:计算机中存储数据的地方,相当于一个空间。

变量:是程序在内存中申请的一块用来存放数据的小空间。

变量不是数据本身,它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。

        // 变量的定义方式----let 变量名称;
        let age;  //年龄---定义声明
        console.log(age);//undefined   未定义---当前变量未赋值
​
        //变量赋值
        age = 20;
        console.log(age);//20————数字型
​
        // 变量初始化————变量声明和赋值同时写
        // 注意:let不允许多次声明一个变量(即同一个变量名称不能重复声明)
        let userName = "张三"
        console.log(userName);
​
        // 多变量同时声明
        let userName1 = "魈", userAge = 18;

2.变量命名规则和规范

(1)规则:

Ø 不能用关键字

Ø 关键字:有特殊含义的字符,JavaScript 内置的一些英语词汇。例如:let、var、if、for等

Ø 只能用下划线、字母、数字、$组成,且数字不能开头

Ø 字母严格区分大小写,如 Age 和 age 是不同的变量

(2)规范:

Ø 起名要有意义

Ø 遵守小驼峰命名法

Ø 第一个单词首字母小写,后面每个单词首字母大写。例:userName

3.数据类型

1.JS 数据类型整体分为两大类:

①基本数据类型

②引用数据类型----内存中开辟空间存储数据---变量(数据存放地址)

 

检查基本数据类型的方法 typeof

2.基本数据类型

数字类型(number)————整数、小数

字符串(string)————被单引号、双引号、反引号包括的数据都是字符串类型

布尔类型(boolean)————真假值————true/false————条件判断

未定义型(undefined)————变量未赋值,数据类型为undefined

空类型(null)

null 和 undefined 区别:

1.undefined 表示没有赋值

2.null 表示赋值了,但是内容为空

3.补充:模板字符串

反引号,ES6中新增的模板字符串

  let uname = "魈";
        let age = 18;
        console.log("我的姓名为" + uname + ",年龄为" + age + "岁");
        console.log(`我的姓名为${uname},年龄为${age}岁`);

3.数据类型转换

类型转换:

(1)隐式(自动)转换----凭借经验判定

 //除了+以外,其他的和字符串里的数字数据都是做运算
    console.log(11 + 11);//22       +号====加法作用
    console.log("11" + 11);//1111   +号====拼接作用
        
    console.log(11 - 11);//0         -号====减法作用
    console.log('11' - 11);//       -号====减法作用

(2)显式(手动)转换

 // 转换为数字型
        let str = "124"
        console.log(Number(str) + 10);//字符串转换为数字类型
​
        let str2 = "12.345元";
        console.log(parseInt(str2));//转换成整数类型
​
        let str3 = '12元';
        console.log(parseFloat(str3).toFixed(2));//转换成小数类型
​
        let flag = false;
        let under = undefined;
        let nul = null;
        console.log(Number(flag));//false---0,true---1
        console.log(Number(under), typeof Number(under)); //NAN-----非数字,但是number型
        console.log(Number(nul));//为空的0
​
        // 转换为字符型
        //prompt()中出来的是String型!!!!
        let num1 = 20;
        console.log(String(num1));
        console.log(typeof String(num1));
​
        var num = 15;
        var a = num.toString();//转换为十进制
        //  var a = num.toString(2);----转换为二进制
 

三、运算符和流程控制

1.算数运算符

数学运算符也叫算术运算符,主要包括加、减、乘、除、取余(求模)。

  • + 求和

  • -求差

  • *求积

  • / 求商

  • % 取模(取余数)------ 开发中经常作为某个数字是否被整除

    // +加:有些小数相加得出结果为无限小数,如0.3+0.6
            let num1 = 10;
            let num2 = 20;
            // let num1 = "0.1" - 0;//通过-0,num1从字符串变为数字型
            // let num2 = "0.7" - 0;
            console.log(num1 + num2);//30
    ​
    ​
            // /除
            let num3 = 4;
            let num4 = 5;
            console.log(num3 / num4);
            //被除数是0,结果是Infinity:无限大
            console.log(1 / 0);
    ​
    ​
            //  %取余(求模)
            let num5 = 4;
            let num6 = 5;
            console.log(num5 % num6);//4
    ​
            let a = 12 % 5;//2
            console.log(a);
    ​
            let b = 100 % 2;
            console.log(b);//0
            let d = 1 % 1;
            console.log(d);//0
    ​
            let c = 1 % 10;
            console.log(c);//1
    ​
            let e = 0 % 1;
            console.log(e);//0
            let f = 10 % 0;
            console.log(f);//NaN

2.赋值运算符

  • +=

  • -=

  • *=

  • /=

  • %=

        let num = 10;
        num = num + 5;
        console.log(num);   //15
​
        let num2 = 20;
        num2 += 20; //num2=num2+20
        console.log(num2);//40
​
        let num3 = 10;
        num3 %= 3;    //num3=num3%3;
        console.log(num3);//1
​

3.一元运算符

(1)自增:

符号:++

作用:让变量的值 +1

(2)自减:

符号:--

作用:让变量的值 -1

         //参与运算时
        // 2.1 ++在后,先参与运算,再自增1
        let num3 = 10;
        let sum1 = num3++ + 10;
        console.log(sum1, num3);//20  11
​
        // 2.2 ++在前,先自增1,再参与运算,
        let num4 = 20;
        let sum2 = ++num4 + 10;
        console.log(sum2, num4);//31  21
​
​
        //只要num++进行过一次运算它就自增一,那个算数式子不需要要算完
        let num5 = 10;
        console.log(num5++ + 1 + ++num5);//  23
        // let sum3 = num5++ + 1 + ++num5;
        //num5++参与运算时为10,加完1后,自增1,num5为11
        //++num5此时先自增1,即为12
        //所以num5++ + 1 + ++num5=10+1+12=23

4.比较运算符

  • > 左边是否大于右边

  • < 左边是否小于右边

  • 小于= 左边是否大于或等于右边

  • <= 左边是否小于或等于右边

  • == 左右两边是否相等,将两边的数据进行转换为数值

  • === 左右两边是否类型和值都相等

  • !== 左右两边是否不全等

比较结果为boolean类型,即只会得到true或false

字符串比较,是比较的字符对应的ASCII码

 // == 左右两边是否相等,将两边的数据进行转换为数值
        console.log(5 == "5");//true
        console.log(5 == 5);//true
        // === 左右两边是否类型和值都相等
        console.log(5 === "5");//false
        console.log(5 === 5); //true
        // !== 左右两边是否不全等
        console.log(5 !== "5");//true
        console.log(5 !== 5); //false
​
        //这里为ASCII表比较
        console.log("a" > "b");//false
        console.log("a" < "b");//false
        //一位一位的比,第一位可以比出大小就不需要比后面的了
        console.log("ab" > "ac");//false
        console.log("ab" < "bc");//true
​
        //NaN不等于任何值,包括它本身
        // console.log(NaN == NaN);//false
​
        //小数最好不要比较很有可能出现精度问题,0.3+0.6=0.899999....
        console.log(0.3 + 0.6 == 0.9)//false

5.逻辑运算符

 

  //  &&逻辑短路-----左边为假,则输出左边的数据;左边为真,则输出右边的数据
        console.log(0 && 10);//0
        console.log(10 && 20);//20
​
        //  || 逻辑短路-----左边为假,则输出右边的数据;左边为真,则输出左边的数据
        console.log(0 || 10);//10
        console.log(10 || 20);//10

6.运算符优先级

 

7.分支语句

程序三大流程控制语句

(1)以前我们写的代码,写几句就从上往下执行几句,这种叫顺序结构

(2)有的时候要根据条件选择执行代码,这种就叫分支结构

(3)某段代码被重复执行,就叫循环结

① if语句

if语句有三种使用:单分支、双分支、多分支

if (条件) {
满足条件后执行的逻辑代码;
}
​
​
if (条件) {
满足条件后执行的逻辑代码;
} else {
不满足条件后执行的逻辑代码;
}
​
​
if (条件1) {
满足条件1后执行的逻辑代码;
} else if (条件2) {
满足条件2后执行的逻辑代码;
} else if (条件3) {
满足条件3后执行的逻辑代码;
} else {
上述条件都不满足后执行的逻辑代码;
}

②三元运算符

其实是比 if 双分支 更简单的写法,有时候也叫做三元表达式

语法:条件 ? 满足条件执行的代码 : 不满足条件执行的代码;

 // 三元运算符
        //  条件?   条件成立则返回数据1:条件不成立返回数据2;
        /*  let age = 20;
         if (age >= 18) {
             console.log("成年");
         } else {
             console.log("未成年");
         } */
​
        // age >= 18 ? console.log("成年") : console.log("未成年");
        /*  let str = age >= 18 ? "成年" : "未成年";
         console.log(str); */
​
        let num1 = 40;
        let num2 = 44;
        /* if (num1 > num2) {
            console.log("num1-" + num1 + "最大");
        } else {
            if (num1 < num2) {
                console.log("num2-" + num2 + "最大");
            } else {
                console.log("num2和num2相等");
            }
        } */
        //多个条件
        let max = num1 > num2 ? num1 : (num1 < num2 ? num2 : "相等");
        console.log(max);

③ switch 语句

switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特 定值的选项时,就可以使用 switch。

switch( 表达式 ){
    case value1:
    // 表达式 等于 value1 时要执行的代码
    break;
        
    case value2:
    // 表达式 等于 value2 时要执行的代码
    break;
        
    default:
    // 表达式 不等于任何一个 value 时要执行的代码
 }
 

四、循环

1.while循环

        while (循环条件) {
            要重复执行的代码(循环体);
        }


        // 输出1-10的数字到控制台
​
        // 循环三要素:
        // 1.初始化值----计数器
        let i = 1;
        // 2.循环条件
        while (i <= 10) {
            console.log(i);
            //3.控制变量
            i++;
        }
 

2.do-while循环

do {
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

执行思路:

1 先执行一次循环体代码

2 再执行条件表达式,如果结果为 true,则继续执行循环体代码,如果为 false,则退出循环,继续执行后面代码 注意:先再执行循环体,再判断,do…while循环语句至少会执行一次循环体代码

  let i = 0;
        do {
            console.log(i);
            i++;
        } while (i >= 10);

3.for循环

for (初始化变量; 循环条件; 控制变量) {
                                        循环体
                                    }
        // 求1到10的和
        let sum = 0;
        for (let i = 1; i <= 10; i++) {
            sum += i;
        }
        console.log("1到10的和:" + sum);

4.退出循环

continue:结束本次循环,继续下次循环

break:跳出所在的循环

   // 退出循环
        /*   for (let i = 0; i < 10; i++) {
  
              if (i == 6) {
                  break;//终止循环体
              }
              console.log(i);
          }
         */
​
        for (let i = 1; i < 100; i++) { // 10,20,30,40,50,60,70,80,90
            if (i % 5 != 0) {
                continue; //跳过本次循环,继续下一次循环
            }
            console.log(i);
        }

五、数组

1.数组

①数组(Array)是一种可以按顺序保存数据的数据类型

(1)数组的创建与查询

②数组创建方式:

方式1:字面量创建

语法: let 数组变量名称=[数组元素1,数组元素2,数组元素4,数组元素n];

方式2:构造函数创建数组

        let arr1 = new Array();  //空数组
        let arr11 = [];          //空数组
​
        let arr2 = new Array(3);     //数组的长度为3
        let arr22 = [3];             //数组的具体元素为3
​
        let arr3 = new Array(3, 4);  //数组的具体元素3,4
        let arr33 = [3, 4];          //数组的具体元素3,4
  

③ 数组查询: 数组变量名称[下标]

    let names = ['Osborn', 'Sariel', 'Jesse', 'Evan', 'Charlie'];
        console.log(names);
        console.log(names[3]);
        console.log(names[5]);//undefined
        console.log(names.length);//5

(2)数组的遍历

for (let i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }

2.数组增删改查

   let arr = [1, 2, 3, 4, 5];
        //增
        arr.push(10, 11, 12)//末尾添加数据---数组名称.push(元素1,元素2,……元素n);
        arr.unshift(-15, -11);//头部添加数据
​
        //删
        let obj = arr.pop();//只是删除数组最后的一个数 
        //let obj1=arr.splice(删除的位置,删除的个数)----任意位置删除
        let obj1 = arr.splice(arr.length - 1, 1);//删除最后一个
​
        //改-----数组名称[下标]=值
        arr[4] = 6;
​
        //查----数组名称[下标]
        console.log(arr[2]);
​
​
        //1.删除指定元素  数组名称.splice(起始位置, 删除的个数)
       let obj2 = arr.splice(arr.length - 1, 1);
        console.log(arr);
        console.log(obj2); 
​
​
        //2.添加指定元素  数组名称.splice(起始位置, 0,新元素1,新元素2)
        let arr2 = [1, 2, 3];
         arr2.splice(1, 0, "张三", "lis");
         console.log(arr2); 
​
​
        //3.修改指定元素  数组名称.splice(起始位置, 修改的数目,新元素1,新元素2)
        let arr3 = [1, 2, 3, 4];
        arr3.splice(1, 2, "5", "6");
        console.log(arr3);

六、函数

1.函数

(1)函数----代码功能块

作用----有利于精简代码,方便复用。

(2) 函数的声明语法

function 函数名称() {
函数体;
}

(3)函数调用语法

函数名称(); // 调用方法
//求两个数的和---自己输入数
        let num1 = +prompt("第一个数")
        let num2 = +prompt("第二个数")
        // 1.创建函数
        function getSum() {
            let sum = num1 + num2;
            console.log(sum);
        }
        // 2.调用函数
        getSum();
​
​
        //求两个数的和---定死调用实参
        // 1.创建函数-----形参---局部变量
        function getSum1(num1, num2) {
            console.log(num1 + num2);
        }
        // 2.调用函数----实参---实际的数据
        getSum1(45, 55);
        getSum1(65, 55);
​
        //学生的分数是一个数组,计算每个学生的总分
        function getSum(str) {
            let sum = 0;
            for (let i = 0; i < str.length; i++) {
                sum += str[i];
            }
            console.log("总成绩为" + sum);
        }
        getSum([10, 20, 30, 40]);
        getSum([10, 203, 30, 40, 77]);
        getSum([10, 20, 30, 40, 67, 11]);

2.函数返回值

在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用

函数内部只能运行到 1 次 return,并且 return 后面代码不会再被执行,所以 return 后面的数据不要换行写

return会立即结束当前函数

函数可以没有 return,这种情况函数默认返回值为 undefined

  // 1.创建函数-----形参---局部变量
        function getSum(num2, num1) {
            let sum = num1 + num2;
            console.log("rwererwe");
            return sum;  //返回计算结果
            /*return 作用:
            (1)返回数据
            (2)结束函数体运算
    
            */
​
            console.log("sum的和:" + sum);
            console.log("232432432");
        }

3.作用域

 

4.匿名函数

 

具名函数:在声明函数的时候为函数命名

匿名函数:将匿名函数赋值给一个变量,并且通过变量名称进行调用 我们将这个称为函数表达式

匿名函数语法:

lef 函数变量名称=function(){
    函数体
}
​
 //调用
函数变量名称()
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值