JavaScript基础-part01

JavaScript

一、JavaScript介绍

1.javascript 介绍与作用

是一种运行在客户端的编程语言，实现人机交互效果

---

作用：

1. 网络特效（监听用户的一些行为让网页做出对应的反馈）
2. 表单验证（针对表单数据的合法性进行判断）
3. 数据交互（获取后台的数据，渲染到前端）
4. 服务端编程（node.js）

2、JavaScript组成

• ECMAScript :规定了js基础语法核心知识
  • 比如：变量、分支语句、循环语句、对象等
• Web APIs：
  • DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
  • BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等

权威网站：MDN

3、 书写位置

• 内部javascript 写在html文件里，用script包住
  • 写在body最下面是因为浏览器会按照代码在文件中的顺序加载HTL
• 外部 通过script标签引入到html页面中
  • script标签中无需写代码，否则会被忽略
• 内联 写在标签内部，vue会常用

4、注释

• 单行注释 ctrl+/ //
• 块注释 shift+alt+a /**/

5、输入输出语法

• 输入：

  1. 弹出对话框，提供给用户输入

  prompt('请输入姓名')
  

• 输出：

  1. 向body内输出内容，如果输出的内容写的是标签，也会被解析为网页元素

  document.write('输出的内容')
  

  2. 页面弹出警告

  alert('输出的内容')
  

  3. 控制台打印

  console.log('控制台打印')
  

  4. 弹出确认框，提供给用户确认

  confirm('点击确认')
  

二、数据类型

• 基本数据类型
  • number 数字类型
  • String 字符串类型
  • boolean 布尔类型
  • undefined 未定义类型
  • null 空类型
• 引用数据类型
  • object 对象

检测数据类型 typeof 数值

typeof null 返回的是object

1、数值类型（Number）

数字。正负数、小数等

用来做运算

       //  数据类型 数字类型(Number)  数学里面的数字 在js里面做计算
        console.log(18);//整数  正数
        console.log(-18);//负数 负整数
        console.log(1.2);//小数

NaN

 // NaN:是在你计算错误的时候出现
        let uname = '张三'
        //  true默认转换为数值为1
        let flag = true
        let age = 18
        console.log(uname - age);//NaN  not a Number 这不是一个数字
        console.log(flag - age); //-17


        // NaN只要你进行数学运算那他返回的结果都是NaN
        console.log(NaN + '18');//NaN18
        console.log(NaN + 18);//NaN
        console.log(NaN - 18);//NaN
        console.log(NaN * 18);//NaN


        // NaN 不等于他自己
        console.log(NaN == NaN);//false
        console.log(NaN === NaN);//false


        //  NaN数据类型是数字类型
        console.log(typeof NaN);

2、字符串类型（String）

• 通过单引号’ ‘、双引号“ ”、反引号``包裹的内容是字符串类型
• 嵌套规则：外单内双、外双内单
• 转义字符 \ 可输出单双引号

       // 字符串类型 (String)  在js里面以'' ,"", ``包裹叫字符串类型
        console.log('你好吗');
        console.log("123");
        console.log(`我是字符串型`);
        // 字符串的引号是可以嵌套 : 外单内双  外双内单
        console.log('abc"123"');
        console.log("abc'123'");

字符串拼接 + 数值相加，字符相连

模板字符串：用反引号``包起来 内容拼接变量时，用${}包住变量

document.write(`这是第${one}个数`)

3、布尔类型（Boolean）

• true 真
• false 假

  // 布尔型 (Boolean) 在js里面有2个固定的值 true真  false假  一般用来做判断
        console.log(true);
        console.log(false);

4、未定义类型（undefined）

• 未定义
• 当只声明变量，未赋值时会输入默认值
• 通过检测这个变量是不是undefined 判断用户是否有数据传来

     // 特殊值:undefined  在js里面代表没有值,或者未定义
        console.log(undefined);

5、空类型（null）

• 值为空
• 表示赋值了，内容为空
• 开发中使用场景：把null作为尚未创建的对象（将来有个变量里面存放的是一个对象，但对象还没创建好，可以先给个null）

 // 特殊值:null  在js里面代表有值,但是值为空,一般在定义引用数据类型时对象使用,null一般表示一个空对象
        console.log(null);

三、变量、 常量

• 计算机用来存储数据的容器。

变量

1、声明变量

let 变量名 //关键字 变量名（标识）

2、变量赋值-初始化数据

变量名 =  值  

3、更新变量

用 = 重新赋值即可 ，不允许let重新 定义

4、变量的本质

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

5、命名规则与规范

• 规则：
  • 不能用关键字
  • 只能用下划线、字母、数字、$组成 ，且数字不能开头
  • 字母严格区分大小写
• 规范
  • 起名要语义化
  • 遵守小驼峰命名法-第一个单词首字母小写，后面每个单词首字母大写

6、var与let

• var可以先试用再定义（不合理）
• var声明过的变量可以重复声明（不合理）
• 比如变量提升、全局变量、没有块级作用域等等

常量-const

• 常量用const声明
• 常量不允许重新赋值，且声明的时候必须初始化

当值不会修改不会变化时候我们使用const声明,如果你的值需要进行修改和变化就使用let进行声明

四、运算符

1、算术运算符

··· + - * / % 取余（取模）

      // 算术运算符  +  - * /  取余%
        console.log(1 + 2 + 3);//6
        console.log(4 - 5 - 8);//-9
        // 先乘除在加减
        console.log(1 * 5 + 10 / 2); //10
        //取余 %   一般判断一个数是否能整除,看他的余数是否为0就可以
        console.log(10 % 3); //1
        console.log(50 % 49); // 1

        // 第一个值小于第二个值,直接返回第一个值
        console.log(3 % 5);//3  
        console.log(100 % 200);//100

2、赋值运算符

= += -= *= /=

对变量进行赋值的运算符，把等号右边的值赋值给左边，要求左边必须是一个容器

3、一元运算符

自增 n++ 先赋值本身再加一

++n 自身先加一再赋值

自减 n-- --n 同理

4、比较运算符

大于等于小于

== 判断两边值是否相等

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

！== 左右两边是否不全等，全等指数值和数据类型都相等

比较结果都为boolean

 // 比较运算符 做比较 : 返回都是布尔数据类型
        console.log(1 > 2);//false
        console.log(4 < 5);//true
        console.log(4 >= 5); //false
        console.log(1 + 2 <= 3);//true
        // 1个=号是在赋值操作  
        let a = 10
        console.log(a = 10);//10
        console.log(a == 10);//true
        console.log(a === '10');//false
        // 2个=号是在进行比较,比较的是他值是否相等
        console.log(2 == 2);//true
        console.log(2 == '2');//true

        // 3个=号,称为全等,比较的是他的值和数据类型 推荐的比较使用方法,更加严谨的比较
        console.log(2 === '2');//false

        // != 不等于  判断左边是否不等于右边 ,比较的是值
        console.log(4 != '4');//false
        // !==  推荐 不全等,比较的是他的值和数据类型
        console.log(5 !== '5');//true

5、逻辑运算符

与或非：

与 && 两个都是真则为真，有一个假的就为假

或 || 有一个为真就为真，两个都假则为假

非 ! 取反

 // && 与 并且的意思   多个条件必须同时满足,返回值是布尔类型true,false
        // 快捷记法:一假则假
        console.log(1 < 2 && 2 > 3);//false
        console.log(true && true);//true
        console.log(2 == '2' && 3 < 4);//true
        console.log(1 != '1' && true); //false

        // || 或的意思 多个条件满足一个即可,返回值是布尔类型 ture  flase
        // 快捷记法:一真则真
        console.log(true || false); //true
        console.log(false || false); //false
        console.log(5 === '5' || 2 !== '2');//true
        console.log(1 < 3 || 2 >= 1);//true

        // ! 取反  true变false  false变true
        console.log(!true); //false
        console.log(!false);//true
        console.log(!(1 > 3));//true

逻辑中断

只有在逻辑运算符&& || 中才会出现这种情况

逻辑运算中： ‘ ’，0，false，undefined，null，NaN 均会转换为false进行判断，其余都为true

&&：与，两个为真才为真，一个假的都为假。所以当判断到第一个为真时，如果第二个为假，则输出第二个假的元素，如果第二个为真则输出第二个为真的值。如果第一个为假，则整个式子为假，则直接输出第一个假（false、或NaN或空或null或undefined或0,看写的是什么），并且不看第二个值，不进行后续操作

console.log(11&& NaN);//NaN
console.log(11 && 22);//22
console.log(0 && null);//0
console.log(0 && 44);//0

||：或，一个为真就为真，两个为假才为假。所以当判断第一个为真时，直接输出第一个为真的值，不看第二个值且不计算，无论第二个真的假的。当判断第一个数为假，接着判断，第二个为真则式子为真就输出后面第一个为真的数，后面的值为假就输出最后一个为假的数

        console.log(11 || 22);//11
        console.log(11 || undefined);//11
        console.log(NaN || 11 ||22 ||undefined);//11
        console.log(0 || false || NaN || ''|| undefined);//undefined

6、运算符优先级

从左往右运算 优先级从上到下

++ – ！

先乘除取余后加减

大于小于大于等于小于等于

== != === !==

先&& 后||

五、类型转换

• 显式转换 由自己决定我们的数据类型转换为我们想要数据类型
• 隐式转换 由浏览器进行转换

1、显式转换

1、强制转换为数字型类型

        // 转数字类型
        // Number(数据) 强制转换为数值类型  注意点:false 和 ''转换为数值类型为0
        console.log(Number('18')); //18
        console.log(Number(true)); //1
        console.log(Number(false)); //0
        console.log(Number('abc12'));//NaN 非数字  他属于数字类型
        console.log(Number(''));//0
        console.log('------------');
        // parseInt(数据) 转换为数值类型 整数 注意点:把字符串转换为一个整数,如果数字带字母字母必须要在数字的后面
        console.log(parseInt('10'));//10
        console.log(parseInt('10.22'));//10
        console.log(parseInt('12px'));//12
        console.log(parseInt('abc12'));//NaN 非数字  他属于数字类型
        console.log('------------');
        // parseFloat(数据) 转换为数值类型 小数 注意点:把字符串转换为一个带小数的数值类型,如果数字带字母字母必须要在数字的后面
        console.log(parseFloat('18'));//18
        console.log(parseFloat('20.5555555'));//20.555555
        console.log(parseFloat('12.55px'));//12.55
        console.log(parseFloat('abc12.22'));//NaN


        // 总结:如果需要转换的数字类型的字符串是整数,我们使用Number或者parseInt方法
        //      如果需要转换的数字类型的字符串是带小数:我们使用parseFloat

• false和‘ ’ 转换为数值类型为0

• 数字+字母的字符串转换为int float number时，数字要写在前面，否则输出NaN

• underfined 转换为数值型结果为 NaN,null转换为数值型结果为0

2、强制转换为字符串类型

       // String(数据) 强制转换为字符串
        console.log(String(1));//'1'
        console.log(String(true));//'true'
        console.log(String(undefined));//'undefined'
        console.log(String(null));// 'null'
        console.log('-----------');


        // 进制就是计算机识别的代码:2,8,10,16进制
        // 变量.toString(进制)
        let str1 = 18
        let str2 = false
        console.log(str1.toString());//'18'
        console.log(str2.toString());//'false'
        // 注意点: undefined和null没有toString方法不能使用这个方法
        let str3 = undefined
        let str4 = null
        // console.log(str3.toString());
        // console.log(str4.toString());
        // toString(进制)转换字符串为对应的进制编码,了解
        let str5 = 255
        console.log(str5.toString(16));	

3、强制转换为布尔类型

 //   转布尔类型Boolean(数据)
        //  '',0,undefined,null,false,NaN这几个值转布尔类型为false,其他的值转布尔全部为true
        console.log(Boolean(''));
        console.log(Boolean(0));
        console.log(Boolean(undefined));
        console.log(Boolean(null));
        console.log(Boolean(false));
        console.log(Boolean(NaN));

        console.log(Boolean(' '));
        console.log(Boolean(1));
        console.log(Boolean('你好'));
    </script>

2、隐式转换

 //   +号 数字相加,字符串相拼
        // console.log(1 + '2'); '1' + '2' ='12'

        // 在运算符里面除了我们的+号会进行拼接,其他的符号会默认把其他数据类型转换为数值类型
        console.log(1 - '1');//0
        console.log(1 * '5');//5
        console.log(10 / '2');//5

        // !逻辑非 会自动转为布尔类型进行取反操作
        console.log(!(1 > 2));//true
        console.log(!'你好');//false

        // +号可以当正号解析,转为数值类型
        console.log(typeof +'123');