javascript基础知识大集锦(一) 推荐收藏

欢迎来到“Javascript基础知识大集锦(一) 推荐收藏”的攻略。这篇文章本身短小精悍，囊括了Javascript基础知识的各个方面。本文内容包括但不限于变量、数据类型、运算符、流程控制语句、函数、面向对象编程、ES6等内容。下面我将详细讲解每个部分的内容。

变量与数据类型

Javascript是一门弱类型语言，所以变量的类型可以在声明时指定，也可以在赋值时自动推断。Javascript支持的数据类型有：

• Number（数字）
• String（字符串）
• Boolean（布尔值）
• Null（空值）
• Undefined（未定义）
• Object（对象）

下面是一个声明变量的例子：

// 声明一个数字类型变量
let a = 100;

// 指定变量类型为字符串
let b: string = "hello"

// 未赋值时类型默认为undefined
let c

// 声明一个对象类型变量
let d = {
  name: 'Jack',
  age: 20
}

// 声明一个布尔类型变量
let e: boolean = true

运算符

Javascript支持的运算符有：

• 算术运算符（加、减、乘、除、求余等）
• 比较运算符（小于、大于、等于、不等于）
• 逻辑运算符（与、或、非）

以下是示例代码：

// 算术运算符示例
let a = 2;
let b = 3;
let c = a + b; // 加法
let d = a - b; // 减法
let e = a * b; // 乘法
let f = a / b; // 除法
let g = b % a; // 求余

// 比较运算符示例
let x = 4;
let y = 5;
let z1 = x > y; // 大于
let z2 = x < y; // 小于
let z3 = x >= y; // 大于等于
let z4 = x <= y; // 小于等于
let z5 = x == y; // 等于
let z6 = x != y; // 不等于

// 逻辑运算符示例
let m = true;
let n = false;
let p = m && n; // 并且
let q = m || n; // 或者
let r = !m; // 取反

流程控制语句

Javascript支持的流程控制语句有：

• if语句
• switch语句
• for循环
• while循环
• do…while循环
• break语句
• continue语句

以下是示例代码：

// if语句示例
let score = 90;
if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

// switch语句示例
let fruit = "apple";
switch (fruit) {
  case "apple":
    console.log("这是一个苹果");
    break;
  case "banana":
    console.log("这是一个香蕉");
    break;
  default:
    console.log("这不是一个水果");
}

// for循环示例
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// while循环示例
let j = 0;
while (j < 5) {
  console.log(j);
  j++;
}

// do…while循环示例
let k = 0;
do {
  console.log(k);
  k++;
} while (k < 5);

// break语句示例
for (let i = 1; i <= 10; i++) {
  if (i == 5) {
    break;
  }
  console.log(i);
}

// continue语句示例
for (let i = 1; i <= 10; i++) {
  if (i == 5) {
    continue;
  }
  console.log(i);
}

函数

Javascript中的函数使用function关键字来定义，可以传入参数和返回值。可以使用箭头函数（Arrow Function）简写函数定义方式。

以下是示例代码：

// 函数示例
function sum(a, b) {
  return a + b;
}

let result = sum(3, 4);
console.log(result);

// 箭头函数示例
let add = (a, b) => a + b;
let result2 = add(3, 4);
console.log(result2);

面向对象编程

Javascript通过Object构造函数和装饰器（Decorator）等方式，支持面向对象编程。面向对象编程中的重点是封装、继承和多态。

以下是示例代码：

// 封装示例
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`大家好，我是${this.name}，我今年${this.age}岁了。`);
  }
}

let p = new Person("张三", 18);
p.sayHello();

// 继承示例
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  sayHello() {
    super.sayHello()
    console.log(`我是${this.grade}年级的学生。`);
  }
}

let s = new Student("李四", 20, 2);
s.sayHello();

ES6

ES6（ECMAScript6）是Javascript的一种新的语法规范，包含了许多新特性，例如：

• 块级作用域
• 模板字符串
• 解构赋值
• 箭头函数
• Promise对象
• Class关键字

以下是示例代码：

// 块级作用域示例
function test() {
  let a = 1;
  if (true) {
    let a = 2;
    console.log(a); // 2
  }
  console.log(a); // 1
}

// 模板字符串示例
let name = "张三";
console.log(`你好，${name}`);

// 解构赋值示例
let arr = [1, 2, 3];
let [x, y, z] = arr;
console.log(x, y, z); // 1 2 3

// 箭头函数示例
let add = (a, b) => a + b;
console.log(add(3, 4)); // 7

// Promise对象示例
let p = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('Promise 已被解决');
  }, 1000);
});
p.then(function(value) {
  console.log(value);
});

// Class关键字示例
class Animal {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`我是${this.name}`);
  }
}

let cat = new Animal("小猫");
cat.sayHello();

以上就是本文的全部内容，涵盖了Javascript基础知识的各个方面。希望本文可以对你有所帮助，如果有任何问题或意见，请随时与我们联系。