JS一些基础知识JavaScript是什么一种运行在客户端浏览器的编程语言 JavaScript组成部分 ECMASc

JavaScript是什么

一种运行在客户端浏览器的编程语言

JavaScript组成部分

ECMAScript 规范标准
web API （通过js来操作浏览器-网页标签）

JS引入三种方式

外部工作中常用

    <script src="./js/弹出窗口.js"> </script>

内部

    <script>
      alert('你好 js 我呸');
    </script>

内联

    <!-- 不常用  编写代码的体验不好，很容易写错，了解一下即可 -->
    <button onclick="alert('过万啦')">点击我 我就月薪过万</button>

输出的三种方法

    document.write("你好");
    console.log("你好");
    alert("你好");

输入的方法

    prompt("请输入你的姓名");

结束符

加分号；
加不加无所谓
工作中工具统一帮我们做格式化

变量 let

      let height; // 创建变量
      height = '180'; // 变量赋值
      console.log(height); // 变量的使用

变量的本质

变量是内存里的一块空间，用来存储数据。

变量交换

// 1 要创建三个变量
           let num1 = 101,
           num2 = 202,
           temp;
      // 2 设置 空的变量 存放num1的值
          temp = num1;
      // 3 设置num1 等于 num2
          num1 = num2;
      // 4 设置num2 等于之前num1的值(temp)
          num2 = temp;
          console.log(num1);
          console.log(num2);
      // 5 小结
      // 思路在于 要多创建一个变量 来存放临时的数据

变量命名规则与规范

规则

不能用关键字关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等
只能用下划线、字母、数字、$组成，且数字不能开头
字母严格区分大小写，如 Age 和 age 是不同的变量

规范

起名要有意义
遵守小驼峰命名法第一个单词首字母小写，后面每个单词首字母大写。例：userName

JS 数据类型整体分为两大类：

1. 基本数据类型 5种

number 数字型：

    JavaScript 中的正数、负数、小数等 统一称为 数字类型

string 字符串型：

    通过单引号（ ''） 、双引号（ ""）或反引号( ` )包裹的
    数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
    
    例如  反引号拼接字符：
    let userName = '如花';
    let age = 18;
    console.log(`你的姓名${userName}, 年龄${age}`);

boolean 布尔型:

  2个固定值  true和false

undefined 未定义型:

  let age; // 声明了但是没有赋值
 console.log(age); // 不会报错 当前的数据 是未定义  undefinded

    null  空类型
    
    官方解释：把 null 作为尚未创建的对象
    大白话： 将来有个变量里面存放的是一个对象，但是对象还没
    创建好，可以先给个null

null 和 undefined 区别：

1. undefined  表示没有赋值
2. null 表示赋值了，但是内容为空

数据类型转换

1. 隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

1. +号两边只要有一个是字符串，都会把另外一个转成字符串

2.除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型

列如：

转数字

    let num1 = "123";
    let num2 = + num1;
    console.log(typeof num2) //number
   
    let num2 = '2';
    let num3 = num2 - 0; // num3 是一个数字类型
    
    let num2 = '2';
    let num3 = num2 * 2; // num3 是一个数字类型
    console.log(num3) //输出number 4

转字符串

    let str = 123;
    let str2 = str + "";
    console.log(typeof str2) //string  123

显示转换

number显示转换

Number( 数据 ) 比如： Number("123")
parseInt( 数据 ) 只保留整数 let num1 = "123.55"; console.log(parseInt(num1));//123
parseFloat( 数据 ) 可以保留小数 let num1 = "123.55"; console.log(parseFloat(num1));//123.55

string显示转换

String( 数据 )
toString(数据)

    let num2 = String(123); 
    console.log(typeof num2);// 字符串类型
    let num3 = toString(123);
    console.log(typeof num3);// 字符串类型

数据类型如果转换不成功就好变成NaN(not a Number)

检测数据类型（通过 typeof 关键字检测数据类型）

let str = 123;
let str2 = str + "";
console.log(typeof str2) //string  123

空字符串 NaN false undefined null 0 转布尔类型都是false

逻辑运算符

逻辑与（&&）一假则假符号两边都为true结果才为true
逻辑或（||）一真则真符号两边有一个true就为true
逻辑非（！）取反

短路运算

1.利用逻辑运算符的规则去判断代码如何执行

10>3 && console.log('出去吃饭')//出去吃饭  10<3 || console.log('出去吃饭')//出去吃饭

2. 短路运算结果通常是用来或者运算结果（谁最终被运算，整个表达式就等于谁）

      let num = 10>3 && 30;   console.log(num); //30

// 一假则假  && 左边为false 右边就不再去执行
      console.log(2 > 10 && 1 < 3 && 3 > 1 && 9 > 5 && 5 < 10 && 8 > 2);
      
      // 工作中常见的写法
      // 如果今天还下雨 那我就去吃海鲜
      //   不下雨 不去吃海鲜了

      // let rain = false;

      // 左边成立了 右边才会去执行
      // rain && console.log('下雨 去吃海鲜');

      // 逻辑或 一真则真
      // 只要 || 左边 成立了为true，右边就不再去执行

      // console.log(100 > 3 || 2 > 6 || 9 > 10 || 10 > 11 || 13 > 20);

      // 工作中 常用的技巧

      // 如果下雨，那么我就不玩了

      // let rain = false;

      // rain || console.log('去玩');

      // 两个短路运算  逻辑或 和 逻辑与

      //   工作中的语法  逻辑与来说   满足了 就去执行

      //   工作中的语法  逻辑或来说   不满足了 就去执行

      // 逻辑运算的最终结果

      // let result = 1 > 0 && 9 > 10; // false

      // 那段代码是最后执行即可

      // let result = 1 > 0 && 30;
         let result = 1 > 0 && false && 30;
         console.log(result);

三元表达式

条件？满足条件了执行代码1 ：不满足条件就执行代码2

// 三元表达式

      // num1 > num2 ? console.log(num1) : console.log(num2);
      let num1 = 10;
      let num2 = 99;
      let num3; // 就要等于 num1 和 num2 中 大的值
      num3 = ( (num1 > num2) ? num1 : num2); 
      console.log(num3);

一元运算符

1.前置自增(++i) 先自加再使用（口诀：++在前先加）

    let i = 1;
    console.log(++i + 2); //4
    console.log(i);//2
   //i先自加1，变成2之后 再和后面2相加

2.后置自增（i++）：先使用再自加（记忆口诀：++在后后加）

        let i = 1;
        console.log(i++ + 2); //3 此时 i还是1
        console.log(i);//2
        //i先和2相加 先运算输出完毕后 i在自加 变成2

while循环

1.变量初始值 let str;
2.循环条件 while(str!=='爱')
3.变量发生改变 str= prompt('请输入数')

//  1 定义 初始变量
      let str; // undefined
      
// 2 判断的条件  （满足什么条件 就继续 执行循环）

    while (str !== '爱') {
     str = prompt('你爱不爱我?');
    }
 // 变量的初始值 变量判断循环的条件 变量需要被修改

for循环

for(变量初始值；循环的条件判断；变化值){ 循环体 }

for (let index = 1; index <=100; index++) {
          console.log(index);
        }
    
       //let index = 1  ; 记录循环次数变量
       //循环条件； i要满足什么条件 循环才会被执行
       //变化值: i++

continue：结束本次循环，继续下次循环

continue 跳过本次循环继续开启下次循环（不是必须） continue 想要跳过这个循环不一定通过它我们自己 if else 也能实现类似的功能

    // 只显示 偶数
      // for (let index = 1; index <= 10; index++) {
      //   // 判断当前的index是不是奇数
      //   if (index % 2 !== 0) {
      //     // console.log(index);

      //     continue;
      //   }

      //   console.log(index,"⭐");//2 4 6 8 10
       }

break：跳出所在的循环

我们也是可以通过 if-else 来实现它的功能但是如果可以使用break的话尽量使用它（性能更加好）因为break会终止剩下的循环

    for (let index = 1; index <= 10; index++) {
        // 如果当前的index = 5 ，就不再往下 循环了，就终止循环
        if (index === 5) {
          break;
        }
        console.log(index); //4
        
        // if (index < 5) {
        //   console.log(index);
        // }
        console.log("代码调用的次数",index);
      }

数组方法

arr.push(新的元素) 在末尾新增元素

unshift(新的元素) 在开头新增元素

arr.shift() 删除开头的一个元素

arr.pop() 删末尾的一个元素

arr.splice(要删除的元素下标，删几个)

length 长度属性 arr=[]; arr.length=10;//表示数组长度10 里面10个元素是undefined

获取数组最后一个元素 arr[arr.length-1]

新增或者修改元素 arr[5]="元素"

数组可以存放任意类型的数据 let arr=[11,true,null,abc]

数组快速删除元素方法

arr.length=0
arr=[] 数组的长度是可以动态变化

常见使用场景 for(let index=0;index<数组的长度；index++){ 数组[index] 做一些业务 }

JS一些基础知识