JavaScript基础（ES5）

JavaScript 由三部分组成

• ECMAScript（ES）
• DOM
• BOM

目录

一、ECMAScript（ES）

1. 三元表达式

2. switch语句

3. 数组创建的方式

4. arguments 的使用

5. 函数声明的方式

6. 作用域

7. 变量

7.1 执行效率

8. 作用域链

9. 预解析

10. 对象

10.1. 创建对象的三种方式

 10.2. new 关键字执行过程

 10.3. for in 遍历对象

11. 内置对象

11.1. js 的对象分为三种：

11.2. 常见的内置对象：

二、DOM

三、BOM

---

一、ECMAScript（ES）

ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

1. 三元表达式

// 条件表达式 ? 表达式1 : 表达式2
// 如果条件表达式结果为真，返回表达式1的值；如果条件表达式的值为假，返回条件表达式2的值。
var result = 10 > 5 ? '是' : '不是';
console.log(result);

 输出结果：

2. switch语句

// switch(表达式){
//     case value1:
//         执行语句1;
//         break;
//     case value2:
//         执行语句2;
//         break;
//     ……
//    default:
//         执行最后的语句;
// }

switch(2+1){
    case 1:
        console.log(1);
    case 2:
        console.log(2);
    case 3:
        console.log(3);
    case 4:
        console.log(4);
    default:
        console.log("默认值");
}

 

switch(5+1){
    case 1:
        console.log("1");
        break;
    case 2:
        console.log("2");
        break;
    case 3:
        console.log("3");
        break;
    case 4:
        console.log("4");
        break;
    default:
        console.log("默认值");
}

3. 数组创建的方式

js 种有两种创建数组的方式：

（1）利用 new 创建数组

//语法：var 数组名 = new Array();

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

（2）利用数组字面量创建数组（常用）

// 语法：var 数组名 = [];
var arr = [];    //创建一个空数组
var arr1 = [1,3,'hello','张三',true];    //创建带初始值的数组

4. arguments 的使用

当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

5. 函数声明的方式

两种方式：

（1）利用函数关键字自定义函数（命名函数）

// 第一种 语法：function  函数名() { };
function myFun() {
    console.log('我是函数');
}
//调用函数
myFun();

（2）函数表达式（匿名函数）

// 第二种 语法：var 变量名 = function() { };
var myFun = function() {
    console.log('我是函数');
}
//调用函数
myFun();

6. 作用域

js 作用域：就是代码名字在某个范围内起作用和效果。

目的：提高程序的可靠性，减少命名冲突。

• 全局作用域        整个 script 标签  或者是一个单独的 js 文件
• 局部作用域（函数作用域）        在函数内部就是局部作用域

7. 变量

• 全局变量
• 局部变量

注：

• 如果在函数内部，没有声明直接赋值的变量属于全局变量。
• 函数的形参也可以看作是局部变量。

function myFun() {
    var num = 9;    //局部变量
    num1 = 10;      //全局变量
    console.log(num);
}
myFun();
console.log(num1);

 输出结果：

7.1 执行效率

• 全局变量：只有当浏览器关闭的时候才会销毁，比较占内存资源
• 局部变量：程序执行完毕就会销毁，比较节约内存资源

8. 作用域链

函数嵌套会产生作用域链

var num = 10;
function myFun1() {
    var num = 20;
    function myFun2() {
        console.log(num);
    }
    myFun2();
}
myFun1();

输出结果： 

根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链。

9. 预解析

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。

JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。

• 预解析：js引擎会把 js 里面所有的 var 还有 function 提升到当前作用域的最前面
• 代码执行：按照代码的顺序从上往下执行

预解析分为：变量预解析（变量提升）和函数预解析（函数提升）

• 变量提升：就是把所有的变量声明提升到当前作用域的最前面；只提升变量声明，不提升赋值操作。
• 函数提升：就是把所有的函数声明提升到当前作用域的最前面；不调用函数。

注：函数表达式调用  必须写在函数表达式的下面。

10. 对象

10.1. 创建对象的三种方式

（1）利用字面量创建对象

var obj1 = {};    //创建一个空的对象

var obj2 = {
    name: '张三',
    age: 18,
    sex: '男',
    sayHi: function() {
        console.log('hi~');
    }
}
// 调用对象的属性
console.log(obj2.name);
console.log(obj2['age']);
//  调用对象的方法
obj2.sayHi();

（2）利用 new Object 创建对象

var obj = new Object(); //创建了一个空的对象
obj.name = '李四';
obj.age = 19;
obj.sex = '男';
obj.sayHi = function() {
    console.log('hello~');
}
console.log(obj.name);
console.log(obj['sex']);
obj.sayHi();   

 （3）利用构造函数创建对象

上面两种方法一次只能创建一个对象，且对象里边的很多属性和方法是相同的。

构造函数就是把对象里边一些相同的属性和方法抽象出来封装到函数里面。

注：

• 构造函数的名字首字母要大写
• 属性和方法前必须添加 this
• 构造函数不需要 return 就可以返回结果
• 调用构造函数必须使用 new

// 构造函数语法格式
// function 构造函数名() {
//     this.属性 = 值;
//     this.方法 = function() {};
// }
// new 构造函数名();

function Star(uname,age,sex) {  //构造函数名称首字母大写
    // 属性
    this.name = uname;
    this.age = age;
    this.sex = sex;
    // 方法
    this.sing = function(sang) {
        console.log(sang);
    }
}
var zs = new Star('张三',18,'男');
console.log(zs.name);
console.log(zs['age']);
console.log(zs['sex']);
zs.sing('两只老虎');
var ls = new Star('李四',20,'男');
console.log(ls.name,ls.age,ls.sex);
ls.sing('唱了个寂寞');
var xh = new Star('小花',19,'女');
console.log(xh['name'],xh['age'],xh['sex']);
xh.sing('说不出话来');

 10.2. new 关键字执行过程

1. 在内存中创建一个新的空对象
2. 让 this 指向这个新的对象
3. 执行构造函数里边的代码，给这个对象添加属性和方法
4. 返回这个新的对象

 10.3. for in 遍历对象

var obj = {
    name: '张三',
    age: 18,
    sex: '男'
}

// 语法：for(变量 in 对象){}
for(var k in obj){
    console.log(k+':'+ obj[k]);
}

11. 内置对象

11.1. js 的对象分为三种：

• 自定义对象
• 内置对象
• 浏览器对象

内置对象是指 js 自带的一些对象，这些对象供开发者使用，并提供了一些基本的，常用的必要功能（属性和方法）。

11.2. 常见的内置对象：

• Math
• Number
• Date
• Array
• String

12. 检测是否为数组

12.1. 两种方式

• instanceof

var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);

• isArray

var arr = [];
var obj = {};
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));

 12.2. 添加删除数组元素的方法

方法名	说明	返回值
push(参数1……)	末尾添加一个元素，注意修改原数组	并返回新的长度
pop()	删除数组最后一个元素，把数组长度减1 无参数、修改原数组	返回它删除的元素值
unshift(参数1……)	向数组的开头添加一个或更多元素，注意修改原数组	并返回新的长度
shift()	删除数组的第一个元素，数组长度减1 无参数、修改原数组	并返回第一个元素的值

12.3. 数组索引方法

方法名	说明	返回值
indexOf	数组中查找给定元素的第一个索引	如果存在，返回索引号； 如果不存在，返回 -1。
lastIndexOf()	在数组中的最后一个的索引	如果存在，返回索引号； 如果不存在，返回 -1。

12.4. 数组去重

function unique(arr){
    var newArr = [];
    for(var i = 0;i < arr.length; i++){
        if(newArr.indexOf(arr[i]) === -1){
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

var demo = unique(['a','b','a',2,3,2]);
console.log(demo);

12.5. 数组转换为字符串

方法名	说明	返回值
toString()	把数组转换为字符串，逗号分隔每一项	返回一个字符串
join('分隔符')	把数组中的所有元素转换为一个字符串	返回一个字符串

var arr = ['hello','world','bey'];
console.log(arr.toString());
console.log(arr.join());
console.log(arr.join('-'));

 13. 基本包装类型

 三种特殊的引用类型：

• String
• Number
• Boolean

基本包装类型就是把简单数据类型包装成复杂数据类型，这样基本数据类型就有了属性和方法。

 字符串的不可变性

二、DOM

DOM：文档对象模型（Document object Model）。操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

三、BOM

BOM：浏览器对象模型（Browser Object Model）。操作浏览器部分功能的API。比如让浏览器自动滚动。