首页手记 JavaScript 高级知识入门教程

JavaScript 高级知识入门教程

标签：

JavaScript 前端工具算法与数据结构

概述

本文深入探讨了JavaScript高级知识，包括高级数据类型如Symbol和BigInt，以及类型转换方法。文章还详细介绍了高级函数特性、对象与原型链、Promise与异步编程、ES6新特性等。通过理解和应用这些高级特性，可以提升JavaScript代码的健壮性和效率。

JavaScript 高级知识入门教程

JavaScript 高级数据类型与类型转换

Symbol 类型介绍

在JavaScript中，Symbol 是一种原始类型（primitive type），是ES6引入的新数据类型。Symbol 类型的值是唯一的，这意味着两个不同的 Symbol 值永远不会相等。

创建 Symbol 的基本语法是：

const symbol = Symbol('description');

Symbol 可以带有一个可选的描述字符串，该字符串用于描述 Symbol 值。描述字符串并不是 Symbol 值的一部分，只是用于调试时提供信息。

const uniqueSymbol = Symbol('unique');
console.log(uniqueSymbol); // 输出：Symbol(unique)

Symbol 值可以作为对象的属性键，这样可以避免与其他属性键冲突。

const obj = {};
obj[uniqueSymbol] = 'unique value';
console.log(obj[uniqueSymbol]); // 输出：unique value

BigInt 类型介绍

BigInt 类型是ES10引入的一种新数据类型，用于表示整数的任意精度，解决了JavaScript中数字精度丢失的问题。BigInt 是通过在数字后面加 n 来创建的。

const largeNumber = 1234567890123456789012345678901234567890n;
console.log(largeNumber); // 输出：1234567890123456789012345678901234567890n

BigInt 可以与 BigInt 类型的变量进行运算，但不能直接与 Number 类型变量进行运算。

const num = 12345678901234567890n;
const result = num * 2n;
console.log(result); // 输出：24691357802469135780n

数据类型的转换方法

JavaScript提供了多种类型转换方法，包括 Number、String、Boolean 等。

`Number` 转换

Number 函数可以将多种类型的值转换为数字。例如：

console.log(Number('123')); // 输出：123
console.log(Number('123.45')); // 输出：123.45
console.log(Number('123e3')); // 输出：123000
console.log(Number('abc')); // 输出：NaN
console.log(Number('')); // 输出：0

`String` 转换

String 函数可以将任何类型的值转换为字符串。例如：

console.log(String(123)); // 输出："123"
console.log(String(true)); // 输出："true"
console.log(String(null)); // 输出："null"
console.log(String(undefined)); // 输出："undefined"

`Boolean` 转换

Boolean 函数可以将任何类型的值转换为布尔值。例如：

console.log(Boolean(0)); // 输出：false
console.log(Boolean('')); // 输出：false
console.log(Boolean(null)); // 输出：false
console.log(Boolean('abc')); // 输出：true
console.log(Boolean({})); // 输出：true

示例代码汇总

// Symbol 示例
const uniqueSymbol = Symbol('unique');
console.log(uniqueSymbol); // 输出：Symbol(unique)
const obj = {};
obj[uniqueSymbol] = 'unique value';
console.log(obj[uniqueSymbol]); // 输出：unique value

// BigInt 示例
const largeNumber = 1234567890123456789012345678901234567890n;
console.log(largeNumber); // 输出：1234567890123456789012345678901234567890n
const num = 12345678901234567890n;
const result = num * 2n;
console.log(result); // 输出：24691357802469135780n

// 数据类型转换示例
console.log(Number('123')); // 输出：123
console.log(String(123)); // 输出："123"
console.log(Boolean('abc')); // 输出：true

高级函数特性

函数的默认参数

在ES6中，函数可以接受默认参数。使用默认参数时，如果在调用函数时未传入参数或传入 undefined，则使用默认值。

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet(); // 输出：Hello, Guest!
greet('John'); // 输出：Hello, John!

函数的剩余参数

剩余参数（rest parameters）允许将可变数量的参数收集到一个数组中。剩余参数使用三个点 ... 来表示。

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 输出：6
console.log(sum(1, 2, 3, 4)); // 输出：10

函数的解构参数

函数参数可以使用解构赋值来获取对象或数组的特定部分。

function printPerson({ name, age }) {
    console.log(`Name: ${name}, Age: ${age}`);
}

const person = { name: 'John', age: 30 };
printPerson(person); // 输出：Name: John, Age: 30

function printArray([first, second, ...rest]) {
    console.log(`First: ${first}, Second: ${second}, Rest: ${rest}`);
}

printArray([1, 2, 3, 4]); // 输出：First: 1, Second: 2, Rest: [3, 4]

示例代码汇总

// 默认参数示例
function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}
greet(); // 输出：Hello, Guest!
greet('John'); // 输出：Hello, John!

// 剩余参数示例
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 输出：6
console.log(sum(1, 2, 3, 4)); // 输出：10

// 解构参数示例
function printPerson({ name, age }) {
    console.log(`Name: ${name}, Age: ${age}`);
}
const person = { name: 'John', age: 30 };
printPerson(person); // 输出：Name: John, Age: 30

function printArray([first, second, ...rest]) {
    console.log(`First: ${first}, Second: ${second}, Rest: ${rest}`);
}
printArray([1, 2, 3, 4]); // 输出：First: 1, Second: 2, Rest: [3, 4]

高级对象与原型链

对象的属性与方法

JavaScript对象包含属性和方法。属性可以是数据属性或访问器属性，方法则是一种特殊类型的属性，它们是函数。

const person = {
    name: 'John',
    age: 30,
    greet: function() {
        return `Hello, my name is ${this.name}`;
    },
    getAgeInYears: function() {
        return this.age;
    }
};

console.log(person.name); // 输出：John
console.log(person.greet()); // 输出：Hello, my name is John
console.log(person.getAgeInYears()); // 输出：30

原型链的构建与继承

每个对象都有一个原型对象，原型对象也可以有自己的原型对象，形成了一个原型链。原型链的概念是JavaScript中继承的基础。

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

Person.prototype.greet = function() {
    return `Hello, my name is ${this.name}`;
};

Person.prototype.getAgeInYears = function() {
    return this.age;
};

const john = new Person('John', 30);

console.log(john.greet()); // 输出：Hello, my name is John
console.log(john.getAgeInYears()); // 输出：30

虚拟原型链示例

function Animal(species) {
    this.species = species;
}

Animal.prototype.speciesName = function() {
    return this.species;
};

function Dog(name, breed) {
    Animal.call(this, 'Dog');
    this.name = name;
    this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.breedName = function() {
    return `${this.name} is a ${this.breed}`;
};

const dog = new Dog('Rex', 'German Shepherd');
console.log(dog.speciesName()); // 输出：Dog
console.log(dog.breedName()); // 输出：Rex is a German Shepherd

示例代码汇总

// 对象的属性与方法示例
const person = {
    name: 'John',
    age: 30,
    greet: function() {
        return `Hello, my name is ${this.name}`;
    },
    getAgeInYears: function() {
        return this.age;
    }
};

console.log(person.name); // 输出：John
console.log(person.greet()); // 输出：Hello, my name is John
console.log(person.getAgeInYears()); // 输出：30

// 原型链与继承示例
function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.greet = function() {
    return `Hello, my name is ${this.name}`;
};

Person.prototype.getAgeInYears = function() {
    return this.age;
};

const john = new Person('John', 30);

console.log(john.greet()); // 输出：Hello, my name is John
console.log(john.getAgeInYears()); // 输出：30

function Dog(name, breed) {
    Animal.call(this, 'Dog');
    this.name = name;
    this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.breedName = function() {
    return `${this.name} is a ${this.breed}`;
};

const dog = new Dog('Rex', 'German Shepherd');
console.log(dog.speciesName()); // 输出：Dog
console.log(dog.breedName()); // 输出：Rex is a German Shepherd

Promise 与异步编程

Promise 基础使用

Promise 是异步编程的核心概念之一，它可以表示一个异步操作的最终完成（resolve）或失败（reject）。

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Task completed successfully');
    }, 1000);
});

promise.then(result => {
    console.log(result); // 输出：Task completed successfully
}).catch(error => {
    console.error(error);
});

Promise.all 和 Promise.race

Promise.all 和 Promise.race 是处理多个 Promise 的实用方法。

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Task 1 completed'), 1000);
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Task 2 completed'), 2000);
});

Promise.all([promise1, promise2]).then(results => {
    console.log(results); // 输出：[ 'Task 1 completed', 'Task 2 completed' ]
}).catch(error => {
    console.error(error);
});

Promise.race([promise1, promise2]).then(result => {
    console.log(result); // 输出：Task 1 completed
}).catch(error => {
    console.error(error);
});

示例代码汇总

// Promise 基础使用示例
const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Task completed successfully');
    }, 1000);
});

promise.then(result => {
    console.log(result); // 输出：Task completed successfully
}).catch(error => {
    console.error(error);
});

// Promise.all 和 Promise.race 示例
const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Task 1 completed'), 1000);
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Task 2 completed'), 2000);
});

Promise.all([promise1, promise2]).then(results => {
    console.log(results); // 输出：[ 'Task 1 completed', 'Task 2 completed' ]
}).catch(error => {
    console.error(error);
});

Promise.race([promise1, promise2]).then(result => {
    console.log(result); // 输出：Task 1 completed
}).catch(error => {
    console.error(error);
});

ES6 新特性

let 和 const

let 和 const 是ES6引入的两种新的声明变量的方式。let 用于声明一个可以修改值的变量，而 const 声明一个不可变的变量。

let number = 10;
number = 20;
console.log(number); // 输出：20

const name = 'John';
name = 'Jane'; // 报错：Cannot assign to const 'name'

const obj = { name: 'John' };
obj.name = 'Jane';
console.log(obj); // 输出：{ name: 'Jane' }

解构赋值

解构赋值允许从数组或对象中提取值并赋给新变量。

const arr = [1, 2, 3];
const [first, second, third] = arr;
console.log(first); // 输出：1
console.log(second); // 输出：2
console.log(third); // 输出：3

const obj = { name: 'John', age: 30 };
const { name, age } = obj;
console.log(name); // 输出：John
console.log(age); // 输出：30

类和模块

ES6引入了新的类语法，可以用类来定义对象的模板。模块允许将代码组织成更小的、更易管理的部分。

class Animal {
    constructor(species) {
        this.species = species;
    }

    speciesName() {
        return this.species;
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super('Dog');
        this.name = name;
        this.breed = breed;
    }

    breedName() {
        return `${this.name} is a ${this.breed}`;
    }
}

const dog = new Dog('Rex', 'German Shepherd');
console.log(dog.speciesName()); // 输出：Dog
console.log(dog.breedName()); // 输出：Rex is a German Shepherd

// 模块示例
// 导入模块
import { add, multiply } from './math.js';

console.log(add(1, 2)); // 输出：3
console.log(multiply(3, 4)); // 输出：12

// math.js 模块定义
export function add(a, b) {
    return a + b;
}

export function multiply(a, b) {
    return a * b;
}

示例代码汇总

// let 和 const 示例
let number = 10;
number = 20;
console.log(number); // 输出：20

const name = 'John';
// name = 'Jane'; // 报错：Cannot assign to const 'name'

const obj = { name: 'John' };
obj.name = 'Jane';
console.log(obj); // 输出：{ name: 'Jane' }

// 解构赋值示例
const arr = [1, 2, 3];
const [first, second, third] = arr;
console.log(first); // 输出：1
console.log(second); // 输出：2
console.log(third); // 输出：3

const obj2 = { name: 'John', age: 30 };
const { name: personName, age } = obj2;
console.log(personName); // 输出：John
console.log(age); // 输出：30

// 类和模块示例
class Animal {
    constructor(species) {
        this.species = species;
    }

    speciesName() {
        return this.species;
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super('Dog');
        this.name = name;
        this.breed = breed;
    }

    breedName() {
        return `${this.name} is a ${this.breed}`;
    }
}

const dog = new Dog('Rex', 'German Shepherd');
console.log(dog.speciesName()); // 输出：Dog
console.log(dog.breedName()); // 输出：Rex is a German Shepherd

// 模块示例
import { add, multiply } from './math.js';

console.log(add(1, 2)); // 输出：3
console.log(multiply(3, 4)); // 输出：12

// math.js 模块定义
export function add(a, b) {
    return a + b;
}

export function multiply(a, b) {
    return a * b;
}

高级调试与开发工具

开发者的工具简介

现代浏览器提供了强大的开发者工具，可以帮助开发者进行调试、性能分析、网络监控等。Chrome浏览器的开发者工具是最常用的一种。开发者工具主要包括以下几个部分：

Elements: 检查并编辑DOM。
Console: 打印日志和调试信息。
Sources: 源代码编辑器，断点调试。
Network: 监控网络请求。
Performance: 性能分析和优化。
Application: 检查存储、本地存储、Cookie等。

调试技巧与方法

断点调试

断点调试是最基本的调试方式之一。通过在代码中设置断点，可以在代码执行到该点时暂停执行，以便查看变量的状态。

function debugFunction() {
    console.log('Before operation');
    debugger; // 设置断点
    console.log('During operation');
}

debugFunction();

日志记录

使用 console.log、console.error 或 console.info 方法来记录调试信息，帮助理解程序的执行流程。

function debugFunction() {
    console.log('Before operation');
    const result = someComplexOperation();
    console.log('After operation, result:', result);
}

function someComplexOperation() {
    return Math.random() * 100;
}

debugFunction();

跟踪变量值的变化

通过开发者工具中的 "Timeline" 或 "Performance" 选项卡，可以跟踪变量值的变化，了解变量在不同阶段的状态。

function debugFunction() {
    let counter = 0;
    for (let i = 0; i < 10; i++) {
        counter += i;
        console.log(`Counter at iteration ${i}: ${counter}`);
    }
}

debugFunction();

使用 `eval` 在控制台中执行代码

在开发者工具的控制台中直接执行JavaScript代码，可以快速测试和调试代码片段。

const num = 123;
console.log(num); // 输出：123

示例代码汇总

// 断点调试示例
function debugFunction() {
    console.log('Before operation');
    debugger; // 设置断点
    console.log('During operation');
}

debugFunction();

// 日志记录示例
function debugFunction() {
    console.log('Before operation');
    const result = someComplexOperation();
    console.log('After operation, result:', result);
}

function someComplexOperation() {
    return Math.random() * 100;
}

debugFunction();

// 跟踪变量值的变化示例
function debugFunction() {
    let counter = 0;
    for (let i = 0; i < 10; i++) {
        counter += i;
        console.log(`Counter at iteration ${i}: ${counter}`);
    }
}

debugFunction();

总结

在本教程中，我们深入探讨了JavaScript的高级特性，包括高级数据类型、函数特性、对象与原型链、异步编程以及ES6新特性。通过理解和应用这些高级特性，可以使您的JavaScript代码更加健壮和高效。希望这篇教程对您有所帮助，如果您需要进一步学习更多高级知识，可以参考慕课网提供的相关课程。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕莱坞森

手记
篇

粉丝

35

获赞与收藏

146

关注作者，订阅最新文章

相关文章推荐

gitbook 入门教程之前置知识

.NET 入门到高级路线

RxJava 2.x 入门教程-知识整理

写给编程小白的HTML+CSS入门教程

Source Map入门教程

阅读免费教程

JavaScript 入门教程

80个小节 311150 2192

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

JavaScript 高级知识入门教程

Symbol 类型介绍

BigInt 类型介绍

数据类型的转换方法

Number 转换

String 转换

Boolean 转换

示例代码汇总

函数的默认参数

函数的剩余参数

函数的解构参数

示例代码汇总

对象的属性与方法

原型链的构建与继承

虚拟原型链示例

示例代码汇总

Promise 基础使用

Promise.all 和 Promise.race

示例代码汇总

let 和 const

解构赋值

类和模块

示例代码汇总

开发者的工具简介

调试技巧与方法

断点调试

日志记录

跟踪变量值的变化

使用 eval 在控制台中执行代码

示例代码汇总

相关文章推荐

阅读免费教程

`Number` 转换

`String` 转换

`Boolean` 转换

使用 `eval` 在控制台中执行代码