01.es5回顾

ES5回顾

01. 严格模式：

01.1. 变量必须先声明后使用：

var  age = 20;
console.log(age);

01.2. 改变this指向

全局作用域，函数中的this指向undefined，函数new调用指向实例对象

console.log(this); //undefined
function foo(){
	console.log(this);
}
foo();//undefined

01.3.eval()函数有自己的作用域：

eval函数作用：将js字符串转化为js代码执行

严格模式下，eval中声明的变量在局部，eval自己拥有的作用域，非严格模式下，eval中声明的变量在全剧中

"use strict";
var name = "张三";
var str = "var name = '李四'; alert(name); var age = 3";
eval(str);
alert(name);
//严格模式：李四、张三
//非严格模式：李四、李四
console.log(age);
//严格模式下报错，age is not defined
//非严格模式，输出：3

02. JSON:

02.1. 什么是JSON

JavaScript Object Notation(记号) 的缩写，是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

02.2. json的用途：

主要用来在不同编程语言之间交换数据。

02.3. json分类：

02.3.1. json数组：

JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数值, 对象, 数组, 布尔值或 null），也可以是 JavaScript 的表达式，包括函数、日期、undefined

02.3.2. json对象：

1. 一个无序的key/value对的集合
2. key是字符串，必须放在双引号里面（单引号不可以）
3. value 可以是合法的 JSON 数据类型（字符串, 数值, 对象, 数组, 布尔值或 null）,注意不可以是函数

02.4. json的方法

02.4.1. JSON.parse()

将字符串格式的json转换成真正的json对象

var str = '{"bookname":"web开发","price":88}';
var bkObj = JSON.parse(str);
console.log(typeof bkObj, bkObj);

02.4.2. JSON.stringify():

将json对象转换成字符串格式的json

 var bkStr = JSON.stringify(bkObj);
console.log(bkStr, typeof bkStr);

03.对象：

03.1. Object.create(prototype, [descriptors])：

03.1.1. 作用：

以指定对象为原型创建新的对象

03.1.2. descriptors

• 为新的对象指定新的属性, 并对属性进行描述
• 是一个大对象，它的属性名即为为指定对象新增的属性名，可以添加以下属性配置：
  • value : 指定值
  • writable : 标识当前属性值是否是可修改的, 默认为false
  • configurable: 标识当前属性是否可以被删除 默认为false
  • enumerable： 标识当前属性是否能用for in 枚举 默认为false 遍历

03.1.3. 代码示例：

 var stuObj = {
      "usr": "lisi",
      "age": 20
     };
var stuObj2 = Object.create(stuObj, {
    "email": {
        value: "lisi@163.com",
        writable: true, //设置当前属性值是否可以被修改
        configurable: true, //设置当前属性是否可以被删除
        enumerable: true
    },
    "tel": {
        value: '110'
    }
});
stuObj2.email = 'lisi@qq.com'; var stuObj2 = Object.create(stuObj, {
    "email": {
        value: "lisi@163.com",
        writable: true, //设置当前属性值是否可以被修改
        configurable: true, //设置当前属性是否可以被删除
        enumerable: true
    },
    "tel": {
        value: '110'
    }
});
stuObj2.email = 'lisi@qq.com';    			    
//删除属性：
// delete stuObj2.email;
console.log(stuObj2, stuObj2.email);

//遍历对象
for (var y in stuObj2) {
    console.log(y, 888);
}

03.2. Object.defineProperties(object, descriptors)

03.2.1. 作用：

1. 为指定对象定义扩展多个属性
2. 个人理解：为指定对象的某个属性添加修改器，修改器可以get和set属性

03.2.2. descriptors:

• 是一个大对象
• 若要为指定对象定义扩展多个属性时：它的属性名即为为指定对象新增的属性名，可以添加以下属性配置：
  • value : 指定值
  • writable : 标识当前属性值是否是可修改的, 默认为false
  • configurable: 标识当前属性是否可以被删除 默认为false
  • enumerable： 标识当前属性是否能用for in 枚举 默认为false 遍历
• 若要为指定对象的某个属性添加修改器，可以添加以下属性：
  • get：用来获取当前属性值的回调函数
  • set：修改当前属性值得触发的回调函数，并且实参即为修改后的值
  • 作用：可以以封装的形式在获取或设置对象前，做一些业务操作，增强代码的功能与作用，而且可以语义化定义修改器名称。
  • 注意：
    • 此时不会给对象新增属性
    • set和get中的this指向要操作的对象，即参数object
• 注意：value,writable,configruable等不能与set和get混用

03.2.3. 代码示例：

let obj = {
    firstName: "zhang",
    lastName: "san",
    age: 20
};
Object.defineProperties(obj, {
    fullname: {
        value: "张三",
        writable: true, //设置当前属性值是否可以被修改
        configurable: true, //设置当前属性是否可以被删除
        enumerable: true
    },
  	//age的语义化修改器
    optAge: {
        set(val) {
            //这里不可以this.Optage, 这是调用该函数本身，会陷入死递归
            //在设置属性前，做一些业务代码
            if (val > 140 || val < 0) {
                alert("年龄输入不合法");
            }
            this.age = val;
        },
        get() {
          	 //这里不可以this.Optage = xxx, 这是调用该函数本身，会陷入死递归
            //在获取对象属性前，做一些业务代码
            if (this.age > 18) {
                return this.age;
            }
						alert("未成年不得入内");
        }
    }
})
//相当于执行了obj.optAge.get()
console.log(obj.optAge)
//相当于执行了obj.optAge.set(34)
obj.optAge = 34;
function foo() {
    console.log(arguments);
}

04.数组：

04.1. filter：

遍历数组的同时过滤元素，得到满足条件的元素构成的数组

//需求：查询分数大于等于80分的
var arr2 = arr.filter(function(item, ind) {
    // console.log(x, y);
    return item >= 80;
});
//[89, 90, 83]
console.log(arr2);

04.1. map：

遍历数组的同时改变其中元素值，返回一个由每个元素改变后构成的数组

//需求：给分数小于80分的加5分  
var arr3 = arr.map(function(item, ind) {
    if (item < 80) {
        return item + 5;
    } else {
        return item;
    }
});
//[72, 89, 76, 90, 83]
console.log(arr3);

05.函数：

05.1. arguments：

• arguments.length: 实参个数
• arguments.callee: 函数本身
• 扩展：函数名.length: 形参个数

05.2. 改变this指向

• call(): 第一个参数是要绑定给this的值，后面传入的是一个参数列表。
• apply()：接受两个参数，第一个参数是要绑定给this的值，第二个参数是一个参数数组。
• bind(): 第一个参数是this的指向, 后面传入的是一个参数列表
• 三者的比较：
  • 相同：当第一个参数为null、undefined的时候，默认指向window。
  • 不同点：
  • call、apply与bind：前者改变this指向，并调用执行函数，后者只改变this指向，不调用执行函数
  • call、bind与apply：前者第一个参数后的是一个参数列表，后者只能有两个参数，第二个参数必须是数组

05.3. apply扩展应用：求数组中的最大值

1. Math.max(n1,n2,n3, …): 参数必须是数字或数字字符串，否则返回NaN
2. Math.max.apply(null，arr): 参数可以是数组，使编码更方便
3. Math.max.call / Math.max.bind: 参数仍然必须是数字或数字字符串