ES5_6_7-Object对象方法扩展&json对象方法扩展&ES6的let,const,解构赋值
ES5_6_7
ECMAScript入门介绍
- 它是一种由ECMA组织（前身为欧洲计算机制造商协会）制定和发布的脚本语言规范
- 而我们学的 JavaScript 是ECMA的实现, 但术语ECMAScript和JavaScript平时表达同一个意思
- JS包含三个部分：
1). ECMAScript（核心）
2). 扩展==>浏览器端
BOM（浏览器对象模型）
DOM（文档对象模型）
3). 扩展==>服务器端
Node - ES的几个重要版本
- ES5 : 09年发布
- ES6(ES2015) : 15年发布, 也称为ECMA2015
- ES7(ES2016) : 16年发布, 也称为ECMA2016 (变化不大)
严格模式
- 理解:
- 除了正常运行模式(混杂模式)，ES5添加了第二种运行模式：“严格模式”（strict mode）。
- 顾名思义，这种模式使得Javascript在更严格的语法条件下运行
- 目的/作用
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
- 消除代码运行的一些不安全之处，为代码的安全运行保驾护航
- 为未来新版本的Javascript做好铺垫
- 使用
- 在全局或函数的第一条语句定义为: ‘use strict’;
- 如果浏览器不支持, 只解析为一条简单的语句, 没有任何副作用
- 语法和行为改变
- 必须用var声明变量
- 禁止自定义的函数中的this指向window
- 创建eval作用域
- 对象不能有重名的属性
eval测试
<script type="text/javascript">
'use strict';
var str='xuefeng';
eval('var str= "tianjinfeng" ;alert(str)');
alert(str);
</script>
打开页面 先弹出tianjinfeng 再弹出xuefeng eval里的str并没有污染全局作用域的str
去掉’use strict’再测试
<script type="text/javascript">
// 'use strict';
var str='xuefeng';
eval('var str= "tianjinfeng" ;alert(str)');
alert(str);
</script>
打开页面，两次都弹出tianjinfeng 此时eval里的str已经污染了全局作用域中的str，这就会有安全隐患
同名测试
<script type="text/javascript">
'use strict';
var obj={
username: 'daofeng',
username: 'xuefneg'
}
</script>
在使用严格模式下，有两个同名的就会报错
json对象扩展
- JSON.stringify(obj/arr)
- js对象(数组)转换为json对象(数组)
- JSON.parse(json)
- json对象(数组)转换为js对象(数组)
Object对象方法扩展
ES5给Object扩展了一些静态方法, 常用的2个:
- Object.create(prototype, [descriptors])
- 作用: 以指定对象为原型创建新的对象
- 为新的对象指定新的属性, 并对属性进行描述
- value : 指定值
- writable : 标识当前属性值是否是可修改的, 默认为false
- configurable: 标识当前属性是否可以被删除 默认为false
- enumerable： 标识当前属性是否能用for in 枚举 默认为false
- Object.defineProperties(object, descriptors)
- 作用: 为指定对象定义扩展多个属性
- get ：用来获取当前属性值得回调函数
- set ：修改当前属性值得触发的回调函数，并且实参即为修改后的值
- 存取器属性：setter,getter一个用来存值，一个用来取值
<script type="text/javascript">
var obj={username: 'xuefeng',age:12};
var obj1={};
obj1=Object.create(obj,{
sex:{
value: '女',
writable: true,
configurable:true,
enumerable:true
}
});
console.log(obj1.sex);
obj1.sex='男';
console.log(obj1.sex);//{sex: "男"}
// delete obj1.sex;console.log(obj1);//{}
for (var i in obj1) {
console.log(i);//sex username age
}
var obj2={firstName:'lian',lastName:'xuefeng'};
Object.defineProperties(obj2,{
fullName:{
get:function () {//专门用来获取扩展属性的值
//获取扩展属性值时 get方法就会被调用，获取几次调用几次
return this.firstName+ ''+this.lastName;
},
set:function (data) {//专门用来监听扩展属性，当扩展属性发生变化的时候会自动调用
//自动调用会将变化的值 作为实参传入
console.log('set()',data);//set() tianjinfeng
var names=data.split('');
this.firstName=names[0];
this.lastName=names[1];
}
}
});
console.log(obj2.fullName);//此处调用的get方法 lianxuefeng
obj2.fullName='tianjinfeng';//在这里调用的set方法
console.log(obj2.fullName);//输出ti 值改变了因为get没有权限把值改变，但是set方法有
</script>
3.对象本身的两个方法
get propertyName(){} 用来得到当前属性值的回调函数
set propertyName(){} 用来监视当前属性值变化的回调函数
<script type='text/javascript'>
var obj={
firstName:'lian',
lastName: 'xuefeng',
get fullName(){//fullName是你要扩展的属性名
return this.firstName+ ''+this.lastName;
},
set fullName(data){
var names=data.split('');
this.firstName=names[0];
this.lastName=names[1];
}
};
console.log(obj.fullName);//lianxuefeng
obj.fullName='bilanhangxian';//改变了值，触发了set方法
console.log(obj.fullName);//bi
</script>
数组的扩展
<script type="text/javascript">
/*
需求:
1. 输出第一个4的下标
2. 输出最后一个4的下标
3. 输出所有元素的值和下标
4. 根据arr产生一个新数组,要求每个元素都比原来大10
5. 根据arr产生一个新数组, 返回的每个元素要大于3
*/
var arr=[2,4,8,7,62,1,4];
console.log(arr.indexOf(4));//1
console.log(arr.lastIndexOf(4));//6
arr.forEach(function (item,index) {
console.log(item,index);
});
var arr1=arr.map(function (item,index) {
return item+10;
});
console.log(arr1,arr);
var arr2=arr.filter(function (item,index) {
return item>3
});
console.log(arr2,arr);
</script>
- Array.prototype.indexOf(value) : 得到值在数组中的第一个下标
- Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标
- Array.prototype.forEach(function(item, index){}) : 遍历数组
- Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组，返回加工之后的值
- Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组， 返回条件为true的值
call,apply,bind用法详解
-
1.Function.prototype.bind(obj) :
作用: 将函数内的this绑定为obj, 并将函数返回
-
2**.面试题: 区别bind()与call()和apply()?**
都能指定函数中的this
call()/apply()是立即调用函数
bind()是将函数返回
<script type="text/javascript"> var obj={username: 'xuefeng'}; function foo(data) { console.log(this,data); } //call和apply的区别 foo.call(obj,33);//直接从第二个参数开始，依次传入 foo.apply(obj,[33]);//第二个参数必须是数组，传入放到数组里 //bind的特点 绑定完this不会立即调用当前函数，而是将函数返回 //bind传参的方式同call一样 foo.bind(obj,33)(); //bind的用法 setTimeout(function(){ console.log(this); }.bind(obj),1000); //返回结果都是username: "xuefeng" 33 script>
ES6_let const关键字
-
let关键字
1.作用:
与var类似, 用于声明一个变量
-
特点:
在块作用域内有效
不能重复声明
不会预处理, 不存在提升
-
应用:
循环遍历加监听
使用let取代var是趋势
<script type="text/javascript"> let username='xuefemng'; console.log(username); let btns=document.getElementsByTagName('button'); for (var i = 0; i < btns.length; i++) { var btn = btns[i]; btn.onclick=function () { alert(i); } } script>用var的话，点击三个按钮只会弹出3
<script type="text/javascript"> let username='xuefemng'; console.log(username); let btns=document.getElementsByTagName('button'); for (let i = 0; i < btns.length; i++) { var btn = btns[i]; btn.onclick=function () { alert(i); } } script>该成let就可以避免这种情况
或者继续用var但是要修改代码
<script type="text/javascript"> let username='xuefemng'; console.log(username); let btns=document.getElementsByTagName('button'); for (let i = 0; i < btns.length; i++) { var btn = btns[i]; (function () { btn.onclick=function () { alert(i); } })(); } script>
-
const关键字
-
作用:
定义一个常量
-
特点:
不能修改
其它特点同let
-
应用:
保存不用改变的数据
-
ES6_变量的解构赋值
1.理解:
从对象或数组中提取数据, 并赋值给变量(多个)
-
对象的解构赋值
let {n, a} = {n:‘tom’, a:12} -
数组的解构赋值
let [a,b] = [1, ‘atguigu’];
-
用途
给多个形参赋值
<script type="text/javascript">
let obj={username:'xuefeng',age:12};
//let username=obj.username;
//let age=obj.age;
//上述代码等同于下面解构赋值代码
//解构赋值 相当于问obj已有的属性要 当对象有很多属性，而且我们只需要一部分属性 这时候就用到解构赋值
let {username,age} =obj;
console.log(username,obj);
//数组解构赋值
let arr=[1,3,5,'swq',true];
let [,,a,v]=arr;
console.log(a,v);//输出 5 'swq'
//解构赋值的用法
function foo({username,age}){//{username,age}=obj 以前这里写的是obj 这次我们利用解构赋值直接传入
console.log(obj.username,obj.age);
}
foo(obj); // 输出 xuefeng 12
script>