JS入门到进阶知识总结（一）-阿里云开发者社区

一. 初始JavaScript

1.概念

JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言

运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎

脚本语言：不需要编译，直接就可以被浏览器解析执行了

功能：

可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

2.JS的组成

3. 与html结合方式

1.行内式

<input type="button" value="点我试试" οnclick="alert('Hello World')" />

注:

可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick

注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号

可读性差，在html中编写JS大量代码时，不方便阅读；

引号易错，引号多层嵌套匹配时，非常容易弄混；

特殊情况下使用

2.内嵌 JS

<script>
alert('Hello World~!');
</script>

注:

可以将多行JS代码写到 <’‘script’’> 标签中

内嵌 JS 是学习时常用的方式

3.外部 JS文件

<script src="my.js"></script>

利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
引用外部 JS文件的 script 标签中间不可以写代码
适合于JS 代码量比较大的情况

3.JS注释

单行注释

// 用来注释单行文字（ 快捷键 ctrl + / ）

多行注释

/*
获取用户年龄和姓名
并通过提示框显示出来
*/  默认快捷键 alt + shift + a ）
快捷键修改为： ctrl + shift + /

4.JS的输入输出语句

注:

console.dir()可以输出对象的属性.

二. JS基础语法

1. 变量

变量：一小块存储数据的内存空间

Java语言是强类型语言，而JavaScript是弱类型语言。

强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据

弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

语法：

 var 变量名 = 初始化值;

注:

typeof运算符：获取变量的类型。
null运算后得到的是object

2.数据类型

JS 把数据类型分为两类：

简单数据类型（Number,String,Boolean,Undefined,Null）

复杂数据类型（object)

1.数字型 Number

数字型三个特殊值

Infinity ，代表无穷大，大于任何数值

-Infinity ，代表无穷小，小于任何数值

NaN ，Not a number，代表一个非数值

注:

isNaN()方法用来判断一个变量是否为非数字的类型，返回 true 或者 false

2.字符串型 String

字符串型可以是引号中的任意文本，其语法为双引号 “” 和单引号’’

var strMsg = "我爱北京天安门~"; // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~'; // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子; // 报错，没使用引号，会被认为是js代码，但js没有这些语法

注:

因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)

通过字符串的 length 属性可以获取整个字符串的长度。

多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串

3.布尔型 Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。

布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

console.log(true + 1); // 2
console.log(false + 1); // 1

4.Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）

var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN

一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)

var vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1

5.数据类型转换

toString() 和 String() 使用方式不一样。
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

转换为数字型

3. 运算符

一元运算符：只有一个运算数的运算符

++，-- ， +(正号)

++ --: 自增(自减)

++(–) 在前，先自增(自减)，再运算

++(–) 在后，先运算，再自增(自减)

+(-)：正负号

注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的

算数运算符

 + - * / % ...

赋值运算符

= += -+…

比较运算符

< >= <= == ===(全等于)

比较方式

类型相同：直接比较

字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。

类型不同：先进行类型转换，再比较

===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

逻辑运算符

&& || !

* 其他类型转boolean：

           1. number：0或NaN为假，其他为真
           2. string：除了空字符串("")，其他都是true
           3. null&undefined:都是false
           4. 对象：所有对象都为true

三元运算符

? : 表达式

var a = 3;

var b = 4;

var c = a > b ? 1:0;

语法：

表达式? 值1:值2;

判断表达式的值，如果是true则取值1，如果是false则取值2；

4. 流程控制语句：

f…else…

switch:

在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)

switch(变量):

case 值:

在JS中,switch语句可以接受任意的原始数据类型

while

do…while

for

5. JS特殊语法：

    1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
    2. 变量的定义使用var关键字，也可以不使用
        用： 定义的变量是局部变量
           不用：定义的变量是全局变量(不建议)

三.基本对象

1.数组

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式

1.创建数组

利用 new 创建数组

var 数组名 = new Array() ；
var arr = new Array(); // 创建一个新的空数组

利用数组字面量创建数组

//1. 使用数组字面量方式创建空的数组
var 数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑','大黄','瑞奇']

注:

声明数组并赋值称为数组的初始化
这种字面量方式也是我们以后最多使用的方式

2.遍历数组

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
  console.log(arrStus[i]);
}

注意:

使用“数组名.length”可以访问数组元素的数量（数组长度）。

当我们数组里面的元素个数发生了变化，这个 length 属性跟着一起变化。

2.函数对象

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

1.函数的使用

函数在使用时分为两步：声明函数和调用函数。

声明函数

// 声明函数
function 函数名() {
//函数体代码
}

调用函数

函数名();

注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

2.函数的返回值

return 语句的语法格式如下：

// 声明函数
function 函数名（）{
...
return 需要返回的值；
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值

注意:

在使用 return 语句时，函数会停止执行，并返回指定的值

如果函数没有 return ，返回的值是 undefined

break ,continue ,return 的区别

break ：结束当前的循环体（如 for、while）

continue ：跳出本次循环，继续执行下次循环（如for、while）

return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

3.arguments的使用

JS中所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

具有 length 属性

按索引方式储存数据

不具有数组的 push , pop 等方法

4. 函数的两种声明方式

自定义函数方式

利用函数关键字 function 自定义函数方式。

// 声明定义方式
function fn() {...}
// 调用
fn();

注:

因为有名字，所以也被称为命名函数
调用函数的代码既可以放到声明函数的前面，也可以放在声明函数的后面

函数表达式方式(匿名函数）

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();

注:

因为函数没有名字，所以也被称为匿名函数
这个fn 里面存储的是一个函数

3.自定义对象

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的。

属性：事物的特征，在对象中用属性来表示（常用名词）

方法：事物的行为，在对象中用方法来表示（常用动词）

1.创建对象的三种方式

在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：

利用字面量创建对象

利用 new Object 创建对象

利用构造函数创建对象

利用字面量创建对象
对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。
{ } 里面采取键值对的形式表示

var star = {
name : 'pink',
age : 18,
sex : '男',
sayHi : function(){
alert('大家好啊~');
}
};

利用new Object创建对象

var andy = new Obect();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
alert('大家好啊~');
}

利用构造函数创建对象

在 js 中，使用构造函数要时要注意以下两点：

构造函数用于创建某一类对象，其首字母要大写

构造函数要和 new 一起使用才有意义

function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.sayHi = function() {
alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex);
}
}
var bigbai = new Person('大白', 100, '男');
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
console.log(smallbai.name);

注意:

构造函数约定首字母大写。

函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。

构造函数中不需要 return 返回结果。

当我们创建对象的时候，必须用 new 来调用构造函数。

2.遍历对象属性

for…in 语句用于对数组或者对象的属性进行循环操作。

其语法如下：

for (变量 in 对象名字) {
// 在此执行代码
}

举例:

for (var k in obj) {
console.log(k); // 这里的 k 是属性名
console.log(obj[k]); // 这里的 obj[k] 是属性值
}

JS入门到进阶知识总结（一）