JavaScript 学习

ctrl+~打开javaScript 终端

node 是一个包含谷歌浏览器v8引擎的c++程序

下面是在终端窗口运行的js程序

javaScript 中let 和const的用法和区别 

用法

• let的用法：用于声明可重新赋值的块级作用域局部变量 ，可以选择将其初始化为一个值。语法示例：

  // 声明并初始化一个let变量
  let num = 10; 
  // 也可以先声明，后续再赋值
  let str; 
  str = "hello"; 
  // 在块级作用域（如if语句块、for循环块等）中使用
  if (true) {let localVar = "我是块级作用域内的变量"; console.log(localVar); 
  } 
  // 这里无法访问localVar，因为它在if块级作用域外

• const的用法：用于声明常量变量，其值在程序运行期间不可重新赋值 ，声明时必须初始化。语法示例：

  // 声明一个数值常量
  const PI = 3.1415926; 
  // 声明一个字符串常量
  const APP_NAME = "MyApp"; 
  // 声明一个对象常量，注意虽然变量不能重新赋值，但对象属性可以修改
  const person = {name: "Alice",age: 25
  }; 
  person.age = 26; // 可以修改对象属性
  // person = {name: "Bob"}; 这样重新赋值会报错

  区别

• 可变性：
  • let：声明的变量值可以被改变 ，无论是值的更新还是类型的改变（例如从存储数字变为存储字符串）。例如：

    let count = 5; 
    count = 10; // 合法，重新赋值

  • const：声明的变量值不能被重新赋值 ，一经初始化便固定下来。如果尝试重新赋值，会在运行时抛出错误。但对于复合类型（如对象、数组），只是保证变量名指向的地址不变，地址内的数据（对象属性、数组元素）可以修改。例如：

    const arr = [1, 2, 3]; 
    arr.push(4); // 合法，修改数组内容
    // arr = [5, 6, 7]; 非法，尝试重新赋值，会报错

  • 重复声明：
    • let：不允许在同一作用域内重复声明 。例如：

      let a = 1; 
      let a = 2; // 报错，Identifier 'a' has already been declared

    • const：和let一样，不允许在同一作用域内重复声明 。例如：

      const b = 3; 
      const b = 4; // 报错，Identifier 'b' has already been declared

      一般来说，当变量的值在后续代码中不会改变时，优先使用const声明，这样可以增强代码的稳定性和可维护性，防止意外修改；当变量的值需要改变时，则使用let声明。

1. Undefined（未定义）

• 含义：表示已声明但未赋值的变量 。当声明一个变量后没有给它指定值，该变量的值就是undefined。
• 示例：

  let variable;
  console.log(variable); // 输出 undefined

2. Null（空值）

• 含义：表示显式赋值为null的变量，代表不存在任何对象值 ，常用来表示有意清空一个变量，使其不指向任何对象。
• 示例：

• let obj = null;
  console.log(typeof obj);//输出object

3. Boolean（布尔值）

• 含义：只有两个值，true（真）和false（假） ，通常用于条件测试和逻辑运算。
• 示例：

  let isDone = true;
  let isError = false;
  if (isDone) {console.log('任务已完成');
  }

4. Number（数字）

• 含义：用于表示整数和浮点数 ，在 JavaScript 中所有数字都以 64 位浮点数格式存储。
• 示例：

  let integer = 10;
  let floating = 3.14;

5. String（字符串）

• 含义：代表文本数据，是由零个或多个字符组成的字符序列 ，可以用单引号、双引号或模板字面量（反引号）来创建。
• 示例：

  let str1 = 'Hello';
  let str2 = "World";
  let str3 = `This is a template literal`;

 

6. BigInt（大整数） （ES2020 新增）

• 含义：表示任意精度的整数，用于处理超出Number范围的大整数 。通过在整数末尾附加n或使用BigInt()函数创建。
• 示例：

  const bigNum = 1234567890123456789012345678901234567890n;
  const anotherBigNum = BigInt(9876543210987654321098765432109876543210);

模版字符串 

 

字符串的内置方法

const s ='Hello world!';
console.log(s.length);//12
console.log(s.toUpperCase());//HELLO WORLD!
console.log(s.toLowerCase());//hello world!
console.log(s.substring(0,5));//Hello
console.log(s.substring(0,5).toUpperCase());//HELLO
console.log(s.split(''))// ['H', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd', '!']

数组

const numbers=new Array(1,2,3,4,5);//构造方法
console.log(numbers);const fruits=["apples","oranges","pears"];
fruits.push("mangos");//末尾加元素
fruits[1]="grapes";//数组下标从0开始
fruits.unshift("strawberries");//从数组的头部插入元素
fruits.pop();//删除末尾元素
console.log(Array.isArray(fruits));//true 判断是否是数组
console.log(fruits.indexOf("apples"));//寻找'apples'的下标
console.log(fruits);//打印数组

对象

创建一个对象

const person={firstName:'John',lastName:'Doe',age:30,hobbies:["music","movies",'sports'],address:{street:'50 main st',city:"boston",state:"MA",},
};

给对象添加属性

person.email="john@email.com";

如何调用对象中的内容

console.log(city);
console.log(person.firstName,person.lastName);
console.log(person.hobbies[0]);
console.log(person.address.city);

给对象进行解构赋值

解构赋值的过程

const {firstName,       // 提取 person 对象的 firstName 属性lastName,        // 提取 person 对象的 lastName 属性address: { city } // 嵌套解构：从 person.address 对象中提取 city 属性
} = person;

解构结果

执行后，会创建三个常量变量：

1. firstName：值为 'John'（来自 person.firstName）。
2. lastName：值为 'Doe'（来自 person.lastName）。
3. city：值为 'boston'（来自 person.address.city）。

等价的传统写法

若不使用解构，需手动逐个访问属性并赋值：

const firstName = person.firstName;
const lastName = person.lastName;
const city = person.address.city;

总结

解构赋值使代码更简洁，直接从对象中提取所需属性并创建变量。在这个例子中，第一个 const 的作用是高效地从 person 对象中提取 firstName、lastName 和嵌套的 city 属性，并将它们声明为常量变量。

对象数组

对象数组，即数组中的每个元素都是一个 JavaScript 对象。

const todos = [{id: 1,text: "take out the rubbish",isCompleted: true},{id: 2,text: "meet a beautiful girl",isCompleted: true},{id: 3,text: "meet grilfriend",isCompleted: true}
];

• 数组结构：todos 是一个包含 3 个元素的数组，每个元素都是一个对象。
• 对象属性：每个对象包含 3 个属性：
  • id：唯一标识（数字类型）。
  • text：待办事项的描述（字符串类型）。
  • isCompleted：表示任务是否完成（布尔类型）。

2. 访问对象数组中的元素

console.log(todos[2].text); // 输出："meet grilfriend"

if语句（语法和java类似）

===用来判断类型是否相符，==类型不相符也可以，所以大部分用的是===

const a=10;
if(a===10){console.log("x is 10");
}

三目运算符（简化if else 代码）

//三目运算符
const b=1;
const color =b>10 ? "red":"blue";
console.log(color);

switch 语句（和java类似）

switch(color){case "red":console.log("color is red");break;case"blue":console.log("color is blue");break;default:console.log("color is nut red or blue");
}

for while 循环

for(let i=0;i<=10;i++){console.log(`for loop number:${i}`);
}
let i=0;
while(i<10){console.log(`while loop number:${i}`);i++
}

对象数组循环

for(let i =0;i<todos.length;i++){console.log(todos[i].text);
}for(let todo of todos){console.log(todo.text);
}