零基础全栈：揭秘为何要学JavaScript

需积分: 9 76 浏览量更新于2024-07-17 1 收藏 2.08MB PDF 举报

"《廖雪峰JavaScript教程》是一份针对零基础的学习者设计的小白级全栈JavaScript教程。JavaScript作为当今世界上最流行的脚本语言，其核心地位无可替代。它在浏览器中作为解释型语言运行，负责驱动网页和HTML5手机应用的交互逻辑。尽管JavaScript曾被视为玩具语言，因其早期存在的一些缺陷而未被部分后端开发者看重，主要用于网页交互和动画效果，但随着HTML5的发展和Node.js的引入，JavaScript已经发展成为全能型编程语言，不仅局限于前端，还扩展到了服务器端。对于已经掌握其他编程语言如Java或C++的开发者来说，学习JavaScript的原因在于其在Web世界的广泛使用和跨平台、跨浏览器的优势。即使面对众多在线资源，廖雪峰的教程因其全面性（涵盖全栈开发）、免费在线学习的便利性，以及实时代码运行的功能，使其成为一个独特且有价值的选项。通过这个教程，读者可以从零基础开始，逐步深入学习，成为能够应对全栈开发挑战的工程师。作者廖雪峰拥有丰富的软件开发经验，除了JavaScript外，他还精通多种编程语言，这使得他的教学既有理论深度又有实践经验。对于想要紧跟Web时代步伐，不被落下的人来说，这是一个不容错过的起点。因此，无论是初学者还是希望提升JavaScript技能的开发者，都应该把握这次机会，立即开始学习，踏上成为全栈开发工程师的旅程。"

数组数组

Reads: 287437 Edit

JavaScript的Array可以包含任意数据类型，并通过索引来访问每个元素。

要取得Array的长度，直接访问length属性：

var arr = [1, 2, 3.14, 'Hello', null, true];

arr.length; // 6

请注意

，直接给Array的length赋一个新的值会导致Array大小的变化：

var arr = [1, 2, 3];

arr.length; // 3

arr.length = 6;

arr; // arr变为[1, 2, 3, undefined, undefined, undefined]

arr.length = 2;

arr; // arr变为[1, 2]

Array可以通过索引把对应的元素修改为新的值，因此，对Array的索引进行赋值会直接修改这个Array：

var arr = ['A', 'B', 'C'];

arr[1] = 99;

arr; // arr现在变为['A', 99, 'C']

请注意

，如果通过索引赋值时，索引超过了范围，同样会引起Array大小的变化：

var arr = [1, 2, 3];

arr[5] = 'x';

arr; // arr变为[1, 2, 3, undefined, undefined, 'x']

大多数其他编程语言不允许直接改变数组的大小，越界访问索引会报错。然而，JavaScript的Array却不会有任何错误。

在编写代码时，不建议直接修改Array的大小，访问索引时要确保索引不会越界。

indexOf

与String类似，Array也可以通过indexOf()来搜索一个指定的元素的位置：

var arr = [10, 20, '30', 'xyz'];

arr.indexOf(10); // 元素10的索引为0

arr.indexOf(20); // 元素20的索引为1

arr.indexOf(30); // 元素30没有找到，返回-1

arr.indexOf('30'); // 元素'30'的索引为2

注意了，数字30和字符串'30'是不同的元素。

slice

slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];

arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']

arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']

注意到slice()的起止参数包括开始索引，不包括结束索引。

如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];

var aCopy = arr.slice();

aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']

aCopy === arr; // false

push和和pop

push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉：

var arr = [1, 2];

arr.push('A', 'B'); // 返回Array新的长度: 4

arr; // [1, 2, 'A', 'B']

arr.pop(); // pop()返回'B'

arr; // [1, 2, 'A']

arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次

arr; // []

arr.pop(); // 空数组继续pop不会报错，而是返回undefined

arr; // []

unshift和和shift

如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉：

var arr = [1, 2];

arr.unshift('A', 'B'); // 返回Array新的长度: 4

arr; // ['A', 'B', 1, 2]

arr.shift(); // 'A'

arr; // ['B', 1, 2]

arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次

arr; // []

arr.shift(); // 空数组继续shift不会报错，而是返回undefined

arr; // []

sort

sort()可以对当前Array进行排序，它会直接修改当前Array的元素位置，直接调用时，按照默认顺序排序：

var arr = ['B', 'C', 'A'];

arr.sort();

arr; // ['A', 'B', 'C']

能否按照我们自己指定的顺序排序呢？完全可以，我们将在后面的函数中讲到。

reverse

reverse()把整个Array的元素给掉个个，也就是反转：

var arr = ['one', 'two', 'three'];

arr.reverse();

arr; // ['three', 'two', 'one']

splice

splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素：

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];

// 从索引2开始删除3个元素,然后再添加两个元素:

arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']

arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

// 只删除,不添加:

arr.splice(2, 2); // ['Google', 'Facebook']

arr; // ['Microsoft', 'Apple', 'Oracle']

// 只添加,不删除:

arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素

arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

concat

对象对象

Reads: 210725 Edit

JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成。

JavaScript的对象用于描述现实世界中的某个对象。例如，为了描述“小明”这个淘气的小朋友，我们可以用若干键值对

来描述他：

var xiaoming = {

birth: 1990,

school: 'No.1 Middle School',

height: 1.70,

weight: 65,

score: null

};

JavaScript用一个{...}表示一个对象，键值对以xxx: xxx形式申明，用,隔开。注意，最后一个键值对不需要在末尾

加,，如果加了，有的浏览器（如低版本的IE）将报错。

上述对象申明了一个name属性，值是'小明'，birth属性，值是1990，以及其他一些属性。最后，把这个对象赋值给变

量xiaoming后，就可以通过变量xiaoming来获取小明的属性了：

xiaoming.name; // '小明'

xiaoming.birth; // 1990

访问属性是通过.操作符完成的，但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符，就必须用''括

起来：

var xiaohong = {

'middle-school': 'No.1 Middle School'

};

xiaohong的属性名middle-school不是一个有效的变量，就需要用''括起来。访问这个属性也无法使用.操作符，必须

用['xxx']来访问：

xiaohong['middle-school']; // 'No.1 Middle School'

xiaohong['name']; // '小红'

xiaohong.name; // '小红'

也可以用xiaohong['name']来访问xiaohong的name属性，不过xiaohong.name的写法更简洁。我们在编写JavaScript代码

的时候，属性名尽量使用标准的变量名，这样就可以直接通过object.prop的形式访问一个属性了。

实际上JavaScript对象的所有属性都是字符串，不过属性对应的值可以是任意数据类型。

如果访问一个不存在的属性会返回什么呢？JavaScript规定，访问不存在的属性不报错，而是返回undefined：

'use strict';

var xiaoming = {

};

----

console.log(xiaoming.name);

console.log(xiaoming.age); // undefined

由于JavaScript的对象是动态类型，你可以自由地给一个对象添加或删除属性：

var xiaoming = {

剩余286页未读，继续阅读

Ryanjiena

粉丝: 19
资源: 78

零基础全栈：揭秘为何要学JavaScript

廖雪峰 javascript.pdf

廖雪峰Python&Git;&javascript;教程离线版

廖雪峰教程pdf版

廖雪峰javascript教程pdf

廖雪峰python教程

廖雪峰pyhon教程下载

廖雪峰python教程官网怎么样

廖雪峰git教程 pdf

廖雪峰python教程不包括第三方库吗

javascriptpdf 廖雪峰

最新资源