JavaScript学习（一）

[TOC]

Hello World

JS是一个面向对象的在浏览器上执行的解释性语言。首先学习编程语言第一步：Hello World JS输出显示的内容都是在浏览器上，有以下三种显示形式：


alert("Hello World"); //在弹出的窗口中显示
console.log("Hello World"); //在控制台中显示
document.write("Hello World"); //在浏览器页面中显示

编写位置 JS内容需要编写在javascript标签中,可以编写在head标签中，也可编写body标签中（编写在body标签中时需要放在最下面的位置，防止页面加载缓慢），还有通过像CSS中的内联样式一样添加，也可以使用src来进行外部引入。

<script src="./1.helloworld.js"></script>

外部引入时标签内部不再写任何内容

基本语法

//单行注释
/* 多行注释 */
严格区分大小写
多个空格和换行无效
分号可加可不加，建议加上

字面量和变量 字面量：就表示其字面意思的量

如：123，a，null，true...

变量：存储可以修改的字面量

let a = 123;
console.log(a);

常量常量：不可被修改的量常量采用const来定义，常量名通常采用全大写来与其他变量名区分

const PI = 3.1415926

标识符 标识符：所有可以自主命名的符号，如变量名、函数名、类名标识符只能包含数字、字母、下划线及$,并且不能以数字开头标识符也不能使用关键字和保留字，如 let,var,true... 命名规范：一般使用驼峰命名法，从第二个单词开始首字母大写

markdown ---> markDown

数据类型

数值 Number JS中的数据类型都是动态类型，即不用像JAVA中需要定义int,double等等 JS中尽量避免高精度的数值计算

二进制：0b 八进制：0o 十六进制：0x

let a = 10; //10
a = 9999999999999991; //9999999999999992
a = 0.1 + 0.2; //0.30000000000000004
a = 0.00000000001; //1e-11
a = 9999 ** 9999; //Infinity
a  = 1 - 'a'; //NAN
console.log(a);

大整数（BigInt） 大整数用来表示比较大的整数，以n结尾大整数的大小与内存有关

a = 99999999999999999991n; //99999999999999999991n

类型检查 typeof 只检查值的类型，不检查变量的类型，变量没有类型返回的是字符串

let a = 10;
let b = 10n;
console.log(a == b); //true
console.log(typeof a); //number
console.log(typeof b); //bigint

字符串 String 字符串通常由单引号或双引号包围，两者并无差别，但是不能混用用反斜杠表示转义符：\

\t : 制表符 \n : 换行符

模板字符串字符串：使用反单引号``包围的字符串模板字符串的好处是字符串内可以嵌入变量

let name = '小明';
let a = '今天\t\"天气\"\n真好';
let b = `你好，${name}`;
console.log(a); //今天	"天气"
                //真好
console.log(b); //你好，小明
console.log(typeof b); //string

布尔值 Boolean 布尔值是执行判断语句时返回的值布尔值只有两个即：true , false

空值 Null 空值只有一个值Null 空值也可以表示为空对象

未定义 Undefined Undefined只有一个值，即Undefined 变量未被赋值时返回

符号 Symbol 用来创建一个唯一的标识一般以函数形式调用，格式为：Symbol()

类型转换

其他类型转字符串 其他类型转字符串有两种强制转换的方法也叫做显式转换

toString():toString方法可以实现对非Null和Undefined值向字符串的转换 String():String函数可以将所有类型值转换为字符串类型

在后面学习运算符后会有更加简便的转换方式，也叫做隐式转换

其他类型转换转数值 使用Number()函数可以将其他类型转换为数值

let a = '123'; //123
a = 'abc'; //NaN
a = ''; //0
a = true; //1
a = null; //0
a = undefined; //NaN
a = '123px'; //NaN 
a = Number(a);

有两种专门将字符串转化为数值的方法：

parseInt():转化为整数 parseFloat():转化为浮点数

parseInt()函数将字符串从左向右开始解析，也可用作取整

let a = '123px'; //123
a = 'px123'; //NaN
a = '123.4'; //123
a = parseInt(a);
console.log(a);

parseFloat()函数也是从左向右解析

let a = '123.4'; //123.4
a = parseInt(a);
console.log(a);

同样，转化为数值的方法会在后面学习运算符时学习到更为简便的方法

其他类型转化为布尔值 使用Boolean()函数来实现转化

数值：只有0和NaN会转化为false，其他都是true 字符串：只有空串会转化为false，其他都是true 对象：都会转化为true 其他：Null和Undefined会转化为true

运算符

算术运算符 对一个或多个值进行运算

+：加法运算 -：减法运算 *：乘法运算 /：除法运算 %：取余 ** ：幂运算

除了字符串拼接（即字符串与其他类型进行加法运算，会将其他类型转化为字符串，然后拼接），其他运算都会将值自动转化为数值类型（Number）。

可以使用其他类型与空串的拼接实现向字符串的转换

let a = true + '';
console.log(typeof a,a); // String  true

赋值运算符 将等号右侧的值赋值给等号左侧的变量

let a = 123;
let b = a;

a = a + n ，可以简写为 a += n，其他运算符亦可如此

??= ：空赋值，当这个变量是Null或Undefined时才会赋值

let a = 10;
a = null;
a ??= 20;
// console.log(a); //10
console.log(a); //20

一元运算符 +-，即正负，先将值转化为数值类型然后进行正负运算操作主要作用是实现其他类型向数值类型的转换，是常用的隐式转换方法

let a = '123';
a = +a;
console.log(typeof a,a); //number 123

自增和自减 ++和-- 自增是将本身的值加一分为前自增(a)和后自增(a)，两者都是将a本身数值加一，但是前自增与后自增返回值不同（前自增返回新值，后自增返回旧值）。自减是将本身的值减一，与自增基本相同。

let a = 10;
// let b = a++;
let c = ++a;
console.log(a); //11
// console.log(b); //10 
console.log(c); //11

//小练习
let a = 5;
let b = ++a + a++ + a;
console.log(b); //19

逻辑运算符 || 、&& 、！或、与、非非运算符对值进行非运算，也就是取反，若值是布尔值，则会直接进行取反操作，若不是布尔值，则会先将其自动转换为布尔值再进行取反操作

let a = true;
a = !a;
console.log(a); //false
let b = '123';
b = !b;
console.log(b); //false

可以运用非运算符来实现对布尔值的转换

let a = '123';
a = !!a;
console.log(a); //true

类型转换
转换为字符串显式转换：String(a) 隐式转换：a + ' '
转换为数值显式转换：Number(a) 隐式转换：+a
转换为布尔值显式转换：Boolean(a) 隐式转换：!!a

与运算符

对&&两边的值进行判断，当都为true时返回true,其他时候都返回false
与运算是短路与，当第一个值为false时，则不看第二个值
与运算是找false，找到false则直接返回，都不是false时才返回true
当第一个值是false则返回第一个值，当第一个值是true，则无论第二个值是true还是false都返回第二个值
对非布尔值进行与运算时会将其先转换为布尔值再进行与运算，但最后返回的是原值，不是转换后的布尔值

let a = true && true; //true
a = true && false; //false
a = false && true; //false
a = false && false; //false
console.log(a);

let b = 1 && 2; //2
b = null && 1; //null
b = null && 0; //null
b = 1 && 0; //0
console.log(b);

或运算符

或运算是对||两侧值进行判断，都为false时返回false,只要有true则返回true
或运算是短路或，当第一个值为true时，则不看第二个值
或运算是找true，有true则返回，都不是true时返回false
对非布尔值进行或运算时，先将其转换为布尔值，再进行或运算，当第一个值为true则返回第一个值，当第一个值为false，则返回第二个值，返回的都是原值，不是转换后的布尔值

let a = true || true; //true
a = true || false; //true
a = false || true; //true
a = false || false; //fasle
console.log(a);

let b = 1 || 2; //1
b = 1 || 0; //1
b = undefined || null; //null
b = null || true; //true
console.log(b);

关系运算符

< ，>，<=，>=

检查运算符两边大小关系是否成立，成立则返回true，否则返回false 当对非数值类型进行比较时会先自动转换为数值类型，然后进行比较当运算符两边都是字符串时，会逐个检查字符串的Unicode码进行比较注意比较两个字符串格式的数字时一定要转换为数值类型

let result = '12' > 2; //true
result = '12' > '2'; //false
console.log(result);

相等运算符：==(相等) 、 ===(全等) 、 !=(不等) 、 ! ==(不全等)

相等：
检查等号两边值是否相等，相等则返回true，否则返回false
当判断的值不是数值，则会自动转换为数值类型然后进行相等判断
null和undefined比较时会返回true
NaN值不与任何值相等
全等：
检查等号两边值是否相等，但是不会进行类型转换
不等：
对相等的性质取反即可
不全等：
对全等的性质取反

let result = 1 == 1; //true
result = 1 == '1'; //true
result = null == undefined; //true
result = 1 === '1'; //false
result = NaN == NaN; //false
console.log(result);

条件运算符 条件表达式？表达式1 ：表达式2 执行流程：先对条件表达式进行判断，结果为true，则执行表达式1，结果为false则执行表达式2 三元运算符与后面所学到的if...else...语句执行流程相同，只是结构更加简单

let a = 10;
let b = 20;
a > b ? alert('a大') : alert('b大')  //b大

运算符有不同的优先级，如幂运算>乘除>加减等等，但是（）括号有着最高的优先级，可以根据自己的需要把运算括起来提高其优先级。

流程控制语句

流程控制语句可以控制语句执行流程

流程控制语句：
条件判断语句
条件分支语句
循环语句

代码块 有{}包围的代码称为代码块声明变量可以通过let和var两种方式声明，但是两者有着一定的区别。 let声明的变量有块作用域，而var声明的变量没有块作用域

{
let a = 10;
var b = 20;
// console.log(a); //10
// console.log(b); //20
}
console.log(a); //报错，未定义
console.log(b); //20

if-else语句 语句格式：

if(条件表达式){
  表达式1
}else{
  表达式2
}

执行流程：先对条件表达式进行判断，若结果为true，则执行表达式1，false则执行表达式2 若还需要进一步判断，则可以使用if-else if-else语句语句格式：

if(条件表达式1){
  表达式1
}else if(条件表达式2){
  表达式2
}else if(条件表达式3){
  表达式3
}...{
}else{
  表达式n
}

执行流程与if-else语句一致，只是在判断结果为false时需再次进行下一个判断，当所有判断结果均为false时执行表达式n

//练习 
let number = +prompt('请输入一个整数：');
if(isNaN(number) || number % 1 !== 0){
      alert('您的输入有误，请输入整数！');
}else{
     if(number % 2 === 0){
         alert(`${number}是偶数`);
      }else{
          alert(`${number}是奇数`);
      }
}

使用isNaN()来判断值是否是数值，如果不是则返回true

switch语句 switch语句格式：

switch(表达式){
        case 表达式1:
            代码1...
            break;
        case 表达式2:
            代码2...
            break;
        case 表达式3:
            代码3...
            break;
          ...
        default:
            代码n...
}

执行流程：将表达式1与表达式进行全等判断，如果结果为true，则执行代码1，否则依次向下判断，直到结果为true，执行该case下的代码。 break的作用是如果表达式1与表达式全等，则执行代码1后便跳出整个switch语句，不再依次向下进行判断。当所有判断都是false时执行default中的代码n。

循环语句 循环语句包括：

while循环
do...while循环
for循环（使用最多的循环语句）

while循环 while格式：

while(条件表达式){
    代码
}

执行流程：对条件表达式进行判断，结果为true则执行代码，然后继续对条件表达式进行判断，直到结果为false时循环结束。

while循环语句的三个要件：
初始表达式
条件表达式
更新表达式

//while循环语句
let i = 0; //初始表达式
while(i < 6){ //条件表达式
    console.log(i);
    i++; //更新表达式
}

do...while语句 do...while语句和while语句大致相似，两者的区别在于do...while语句是先执行后判断，至少会执行一次，但是while语句是先判断后执行。 do...while语句格式：

do{
    代码...
}while(条件表达式)

执行流程：先执行do中的代码，然后对条件表达式进行判断，若结果为true则继续执行代码，直到结果为false终止循环。

for循环 for循环是最常用的循环语句 for循环格式：

for(初始表达式;条件表达式;更新表达式){
    语句;
}

执行流程：

执行初始表达式对变量初始化
执行条件表达式判断是否继续执行（true：继续执行；false：终止循环）
当判断结果为true时执行语句
执行更新表达式，对变量进行更新
将更新后的变量继续执行条件表达式
......
直到判断结果为false终止循环，for循环结束

for循环中的初始化表达式中使用let声明的变量是局部变量，只能在循环语句代码块中使用，若想要在代码块以外使用，需用var声明变量

//死循环代码
while(true){
    alert(1);
}

for(;;){
    alert(1);
}

//练习：求100以内3的倍数的个数及总和
let num = 0;
let sum = 0;
for(let i = 3 ; i <= 100 ; i++){
    if(i % 3 === 0){
        num++;
        sum += i;
    }
}
console.log(`100以内有${num}个3的倍数，总和为${sum}`)

//练习：找出1000以内水仙花数。（水仙花数是一个n位数（n>=3），个位n次幂加上十位n次幂加上百位n次幂等于其自身  如 ： 153）
for (let i = 100; i < 1000; i++) {
    let bai = parseInt(i / 100) ;
    let shi = parseInt((i % 100) / 10);
    let ge = i % 10;
    if ((bai **3 + shi **3 + ge **3) === i) {
        console.log(i);
        }
} //153,370,371,407

break和continue break语句是终止当前循环 continue语句是跳过本次循环

for(let i = 0 ; i < 5 ; i++){
    if( i === 1){
        // break; // 0
        continue; // 0 2 3 4
    }
    console.log(i)
}

//质数练习
for (let i = 2; i < 100; i++) {
    let flag = true;
    for (let j = 2; j <= i ** .5; j++) {
        if (i % j === 0) {
            flag = false;
            break;
        }
    }
    if (flag) {
        console.log(i);
    }
}

对象

数据类型分为原始值和对象原始值包括：数值(Number)，大整数(Bigint)，字符串(String)，布尔值(Boolean)，空值(Null)，未定义值(Undefined)，符号(Symbol)

对象是一种复合型数据类型，可以说是一个容器，可以添加任何其他数据类型。对象里添加的数据称为属性

添加属性：对象.属性名 = 属性值; 修改属性：对象.属性名 = 属性值; 查询属性：对象.属性名删除属性：delete 对象.属性名

let obj = new Object();
obj.name = "小明";
obj.age = 18;
obj.gender = "男";
delete obj.gender;
console.log(obj);
console.log(obj.name)

属性名是一个字符串可以是任何值，但是建议根据属性的特性来定义属性名，属性值可以是任何类型的数据，也可以是对象。

let obj = new Object();
obj.name = "小明"; //添加属性方法一
obj["name"] = "小明"; //添加属性方法二
let str = "age";
obj[str] = 18; // 等同于 obj["age"] = 18;
obj.o = new Object();
obj.o.name = "小红";
console.log(obj);

可以使用 in 运算符检查对象内是否有该属性，有则返回true，没有则返回false

let obj = new Object();
obj.name = "小方";
console.log("name" in obj);  //true

对象字面量 可以使用 {} 创建对象，并且可以在内部直接添加属性，用逗号隔开

let mySymbol = Symbol();
let obj1 = new Object();
let obj2 = {
    name: "小明",
    age: 18,
    ["gender"]: "男",
    [mySymbol]: "我只是一个符号"
}
console.log(typeof obj1, obj1); //object
console.log(typeof obj1, obj2); //object

枚举属性 枚举，也就是遍历，获取对象的所有属性。使用 for - in 语句但是无法获取使用符号添加的属性

let obj = {
    name: "小明",
    age: 18,
    gender: "男",
    [Symbol()]: "我是一个符号" //使用符号添加的属性无法通过for-in语句获取到
}
for (let propNumber in obj) {
    console.log(propNumber, obj[propNumber]);
}

可变类型 原始值都是不可变类型，不会在内存中创建重复值，对一个变量值的修改不会影响到其他变量。对象属于可变类型，可以在创建对象后对对象内的属性任意修改。当几个变量同时指向同一对象时，一个变量的对象属性改变时，其他变量也会受到影响。当两个变量进行相等或全等比较时，比较的是它们的地址值。

修改对象会使所有指向该对象的变量受影响，但是修改变量不会影响到其他变量。当使用变量存储对象时，修改变量的指向会提高代码复杂度，所以通常使用const来声明存储对象的变量const obj = {}。 const只是禁止对变量指向的修改，变量所指向的对象的属性依旧可以修改。

本文章使用limfx的vscode插件快速发布