JavaScript的一些核心知识点,涵盖了基本语法、控制流程、函数、对象、数组、字符串、异步编程、DOM操作等方面

  1. 变量声明和赋值 JavaScript中使用var、let、或const关键字来声明变量:
var age = 25; // 变量声明并赋值
let name; // 变量声明,但未赋值
const PI = 3.14159; // 常量声明并赋值,无法被修改

  1. 数据类型: JavaScript中有5种原始数据类型:字符串、数字、布尔、空值(null),以及未定义(undefined)。还有3种引用数据类型:对象、数组、函数。

字符串:

let str = 'Hello World';
let str2 = "Hello World";
let str3 = `Hello World`; // 模板字符串

数字:

let num1 = 10;
let num2 = 3.14;
let num3 = 0b1010; // 二进制
let num4 = 0o755; // 八进制
let num5 = 0xAF; // 十六进制

布尔:

let isTrue = true;
let isFalse = false;

空值和未定义:

let empty = null; // 空值
let undef = undefined;

对象:

let obj = {
  name: 'Alice',
  age: 20,
  gender: 'female'
};

数组:

let arr = ['apple', 'orange', 'banana'];

函数:

function add(a, b) {
  return a + b;
}

  1. 运算符: JavaScript中包括算术运算符(+、-、、/等)、比较运算符(==、!=、===、!==、>、<、>=、<=等)、逻辑运算符(&&、||、!等)、赋值运算符(=、+=、-=、=、/=等)等多种运算符。

  2. 注释: JavaScript支持单行注释(//)和多行注释(/.../)。

// 这是一行注释
/*
这是一个
多行注释
*/

  1. 控制流程: 条件语句if、else if、else、switch:
let score = 80;
if (score >= 90) {
  console.log('优秀');
} else if (score >= 80) {
  console.log('良好');
} else if (score >= 60) {
  console.log('及格');
} else {
  console.log('不及格');
}

switch (score) {
  case 90:
    console.log('优秀');
    break;
  case 80:
    console.log('良好');
    break;
  case 60:
    console.log('及格');
    break;
  default:
    console.log('不及格');
    break;
}

循环语句for、while、do-while、for...in、for...of:

for (let i = 0; i < 10; i++) {
  console.log(i);
}

let j = 0;
while (j < 10) {
  console.log(j);
  j++;
}

let k = 0;
do {
  console.log(k);
  k++;
} while (k < 10);

let fruits = ['apple', 'orange', 'banana'];
for (let index in fruits) {
  console.log(index); // 输出数组索引
  console.log(fruits[index]); // 输出元素值
}

for (let fruit of fruits) {
  console.log(fruit);
}

  1. 函数: 声明函数:
function add(a, b) {
  return a + b;
}

匿名函数和箭头函数:

let add = function(a, b) {
  return a + b;
};

let add = (a, b) => {
  return a + b;
};

参数传递和返回值:

function add(a, b) {
  return a + b;
}

let sum = add(1, 2); // 传递参数,返回值赋值给变量
console.log(sum); // 3

作用域和闭包:

let a = 1; // 全局变量

function test() {
  let b = 2; // 局部变量
  console.log(a); // 可以访问全局变量
  console.log(b); // 可以访问局部变量
}

test(); // 输出1和2

function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  };
}

let counter = createCounter();
counter(); // 输出1
counter(); // 输出2

  1. 对象: 创建对象:
let person = {
  name: 'Alice',
  age: 20,
  gender: 'female'
};

let person2 = new Object();
person2.name = 'Bob';
person2.age = 30;
person2.gender = 'male';

let person3 = Object.create(null);
person3.name = 'Charlie';
person3.age = 40;
person3.gender = 'male';

属性和方法:

let person = {
  name: 'Alice',
  age: 20,
  gender: 'female',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

console.log(person.name); // 访问属性
person.age = 25; // 修改属性
person.sayHello(); // 调用方法

原型和原型链:

function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

let person = new Person('Alice', 20, 'female');
console.log(person.name); // 访问属性
person.sayHello(); // 调用方法

console.log(person.__proto__); // Person原型
console.log(Person.prototype.__proto__); // Object原型
console.log(Object.prototype.__proto__); // null

  1. 数组: 创建数组:
let fruits = ['apple', 'orange', 'banana'];

访问和修改元素:

console.log(fruits[0]); // 访问单个元素
fruits[1] = 'pear'; // 修改元素
console.log(fruits); // 输出整个数组

数组方法:

fruits.push('grape'); // 添加元素到数组末尾
fruits.pop(); // 删除数组末尾的元素
fruits.shift(); // 删除数组第一个元素
fruits.unshift('kiwi'); // 添加元素到数组第一个位置
fruits.slice(1, 3); // 返回从第1个元素到第3个元素之前的子数组
fruits.splice(1, 2, 'pear', 'grape'); // 从第1个元素开始删除2个元素,并添加pear和grape

fruits.forEach(function(fruit) { // 遍历数组
  console.log(fruit);
});

let newFruits = fruits.map(function(fruit) { // 返回新数组
  return fruit + 's';
});

let filteredFruits = fruits.filter(function(fruit) { // 返回新数组
  return fruit.length > 5;
});

  1. 字符串操作: 字符串连接和拆分:
let str1 = 'Hello';
let str2 = 'World';
let str3 = str1 + ' ' + str2; // 字符串连接
console.log(str3);

let arr = str3.split(' '); // 字符串拆分成数组
console.log(arr[0]); // Hello

字符串方法:

let str = 'Hello World';
console.log(str.length); // 返回字符串长度
console.log(str.charAt(0)); // 返回指定位置的字符
console.log(str.substring(1, 3)); // 返回指定位置之间的子串
console.log(str.indexOf('W')); // 返回指定字符的位置
console.log(str.replace('World', 'JavaScript')); // 替换子串

正则表达式:

let str = 'Hello World';
let pattern = /l+/g; // 匹配一个或多个l字符
let matches = str.match(pattern); // 返回匹配结果
console.log(matches); // ['ll', 'l']

  1. 异步编程: 回调函数:
function fetchData(callback) {
  setTimeout(function() {
    let data = [1, 2, 3];
    callback(data);
  }, 1000);
}

function processData(data) {
  console.log(data);
}

fetchData(processData); // 输出[1, 2, 3]
  1. 变量声明和赋值

变量声明使用关键字 var、let 或 const。var 声明的变量作用域为当前函数或全局范围,let 和 const 声明的变量作用域为当前块级作用域。

示例:

var x = 10;
let y = "hello";
const z = true;

  1. 原始类型和引用类型

原始类型包括字符串、数字、布尔、空值和未定义,它们是不可变的。

引用类型包括对象、数组和函数。它们是可变的,可以通过修改其属性或元素来改变其状态。

示例:

let str = "hello";
let num = 123;
let bool = true;
let nullValue = null;
let undefinedValue = undefined;

let obj = { name: "John", age: 30 };
let arr = [1, 2, 3];
let func = function() { console.log("hello"); };

  1. 运算符

常见的运算符包括算术运算符、比较运算符、逻辑运算符、赋值运算符等。

示例:

let x = 5;
let y = 10;
let z = x + y; // 算术运算符
let a = x < y; // 比较运算符
let b = x > 2 && y < 15; // 逻辑运算符
let c = "hello";
let d = c + "world"; // 字符串拼接

x += 2; // 赋值运算符

  1. 注释

单行注释使用 // 符号,多行注释使用 /* */ 符号。

示例:

// 这是一个单行注释

/*
这是一个
多行注释
*/

  1. 条件语句

常见的条件语句有 if、else if、else、switch。

示例:

let x = 10;

if (x > 5) {
  console.log("x 大于 5");
} else if (x < 5) {
  console.log("x 小于 5");
} else {
  console.log("x 等于 5");
}

switch (x) {
  case 5:
    console.log("x 等于 5");
    break;
  case 10:
    console.log("x 等于 10");
    break;
  default:
    console.log("x 不等于 5 或 10");
    break;
}

  1. 循环语句

常见的循环语句有 for、while、do-while、for...in、for...of。

示例:

for (let i = 0; i < 5; i++) {
  console.log(i);
}

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

let arr = [1, 2, 3];
for (let item in arr) {
  console.log(item);
}

for (let item of arr) {
  console.log(item);
}

  1. 函数

声明函数使用关键字 function。

示例:

function sayHello() {
  console.log("hello");
}

sayHello();

function sum(x, y) {
  return x + y;
}

let result = sum(5, 10);
console.log(result);

let func = function() {
  console.log("hello");
};

func();

  1. 作用域和闭包

作用域分为全局作用域和局部作用域,局部作用域又分为函数作用域和块级作用域。

闭包是指一个函数可以访问其外部作用域中的变量,即使该外部作用域已经执行完毕。

示例:

let x = 5; // 全局作用域

function sum(y) { // 函数作用域
  let x = 10; // 局部作用域
  return x + y;
}

for (let i = 0; i < 5; i++) { // 块级作用域
  console.log(i);
}

function outer() {
  let x = 10;

  function inner() {
    console.log(x); // 可以访问 outer 函数中的 x 变量
  }

  return inner;
}

let func = outer();
func();

  1. 对象

创建对象可以使用字面量、构造函数、Object.create() 等方式。

示例:

let obj1 = { name: "John", age: 30 };
let obj2 = new Object();
obj2.name = "Mary";
obj2.age = 25;
let obj3 = Object.create(obj1);
obj3.gender = "female";

  1. 属性和方法

访问对象的属性和方法可以使用点号或方括号运算符。调用方法使用圆括号。

示例:

let obj = {
  name: "John",
  age: 30,
  sayHello: function() {
    console.log("hello");
  }
};

console.log(obj.name);
console.log(obj["age"]);
obj.sayHello();

  1. 原型和原型链

每个对象都有一个原型对象,原型对象拥有一些共享的属性和方法,可以通过对象的 proto 属性访问。如果对象调用某个属性或方法时不存在,它会去原型对象中查找,直到找到为止,这种机制就是原型链。

示例:

let parent = {
  sayHello: function() {
    console.log("hello");
  }
};

let child = Object.create(parent);
child.name = "John";
child.sayHello(); // 继承了 parent 的 sayHello 方法

  1. 数组

创建数组使用方括号。访问和修改元素使用方括号运算符,遍历数组可以使用 for 循环、forEach、map、filter 等方法。

示例:

let arr = [1, 2, 3];
console.log(arr[0]);
arr[1] = 10;

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

arr.forEach(function(item) {
  console.log(item);
});

let newArr = arr.map(function(item) {
  return item * 2;
});

let filteredArr = arr.filter(function(item) {
  return item > 1;
});

  1. 字符串操作

字符串连接可以使用加号运算符或模板字符串(使用反引号包裹),字符串拆分可以使用 split 方法或正则表达式。

示例:

let str1 = "hello";
let str2 = "world";
let str3 = `${str1} ${str2}`;

let arr = str1.split("");
let arr2 = str2.split("o");

let index = str1.indexOf("e");
let replacedStr = str1.replace("h", "H");

  1. 正则表达式

正则表达式是用来匹配、替换、提取等操作的工具。可以使用 RegExp 构造函数或正则表达式字面量来创建正则表达式对象。

示例:

let str = "hello world";
let pattern = /l/;
let result = pattern.test(str); // 匹配 l 字符
console.log(result);

let replacedStr = str.replace(/o/g, "O"); // 全局替换 o 字符
console.log(replacedStr);

let numStr = "123abc";
let numPattern = /\d+/g;
let nums = numStr.match(numPattern); // 提取数字
console.log(nums);

  1. 异步编程

异步编程是指某些操作需要在后台执行,执行完毕后再回调处理结果。常见的异步编程方式有回调函数、Promise 对象和 async/await。

示例:

使用回调函数:

function getData(callback) {
  setTimeout(function() {
    let data = [1, 2, 3];
    callback(data);
  }, 1000);
}

getData(function(data) {
  console.log(data);
});

使用 Promise:

function getData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      let data = [1, 2, 3];
      resolve(data);
    }, 1000);
  });
}

getData()
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.log(error);
  });

使用 async/await:

async function getData() {
  let data = await fetch(url);
  let result

  • 26
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码真的养发

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值