图标字体:icomoon.下载,
ES5:
1:使用严格模式,use strict。可在script里启用,也可在function里启用
严格模式解决的问题(1):禁止给未声明的变量赋值,如果强行赋值会报错。因为给未声明的变量赋值会造成全局污染(内存泄漏)。
严格模式解决的问题(2):静默失败提升为报错。
比如普通模式下修改只读属性的值,既修改不成功又不报错。
严格模式解决的问题(3):严格模式下函数里的this不再指向window,而是undefined。
严格模式解决的问题(4):禁止使用arguments.callee。
2:保护对象,让使用者有限度的使用对象。
因为普通js里的对象没有任何限制,可以对其做任何修改。
2-1:保护对象的结构:
2-2:保护属性
es5将对象的属性分为
内部属性:内部属性不能用.直接访问
命名属性:命名属性可以用.直接访问
命名属性又分为:
访问器属性:不实际存储数据值,仅提供对其他属性的保护。
数据属性:实际存储数据值。
es5将每个属性定义成了一个对象,对象包括四个特性:
value:属性值。
writable:true或false。控制是否可以修改属性的值。
enumerable:true或false,控制是否可以被for in 遍历。
configurable:true或 false,控制是否可删除该属性,也控制着是否可修改另外两个对象特性(writable和enumerable)的值。
例:设置一个对象的属性的一个特性:
var obj={
id:1001,
name:"jack",
age:23
}
Object.defineProperty(obj,"id",{
//设置obj对象的id属性为只读。
writable:false
})
//因为为只读,所以此处修改不成功,普通模式下不会报错,严格模式下会报错。
obj.id="1002"
console.log(obj.id)
同时设置多个特性:
Object.defineProperts(obj,{
id:{
writable:false,
configurable:false,
},
//设置age属性不能被遍历。
age:{
enumerable:false,
configurable:false,
},
})
以上对属性的保护只能起到简单保护,不能自定义规则保护,而访问器属性可以。
3:Object.create(father):基于父对象创建子对象。(不需要构造函数)。
4:数组API
4-1:indexOf(),和字符串的用法完全一样。
var arr=[2,4,6,4]
arr.indexOf(2)//查找2的位置
arr.indexOf(2,4)//从第2位置开始,找4的位置.
4-2:every()
var arr=[2,4,6,4]
var a=arr.every(function(e){
//判断数组是否全是偶数。
return e%2==0
})
console.log(a)
//判断是不是升序。
var arr=[2,4,6,8]
var a = arr.every(function(elem,i,ar){
//判断数组是否是升序。当倒数第二项和最后一项比较后,就不要再比较。
return i<arr.length-1?elem<=ar[i+1]:true
})
console.log(a)
4-3:some()
4-4:遍历API
forEach():对原数组每个元素进行相同操作,执行后再放回原数组。原数组改变。
map():对每个元素进行操作后,放入新数组,原数组不变。
4-5:过滤和汇总
filter():将符合条件的元素组成新数组返回。原数组不变。
汇总:reduce()
arr.reduce(function(prev,elem,i,arr){})
var arr=[2,4,6,8]
var a = arr.reduce(function(prev,elem){
return prev+elem
})
console.log(a)
5:call(),apply,bind()
call()的作用:
调用函数,改变函数的this指向,
第一个参数为this指向,其他参数为函数对应参数。
call的返回值就是函数的返回值。
apply():将数组作为参数传递,他会将数组展开,将每一项作为参数传递。
var arr=[4,2,6]
console.log.apply(null,arr)//4 2 6
定时器里的this值window
bind()
var obj={
name:"jsck"
}
var btn = document.getElementById("i")
btn.onclick=function(){
//时间处理函数的this指触发事件的对象,此处指btn.
console.log(this)
}.bind(obj)//将this修改为obj。
ES6:js语法和原理不变的情况下,尽量简化代码。
1:let代替var。
var的问题:
(1):var申明的变量可以被申明提前,
(2):没有块级作用域。
(3):可以被重复申明(后申明的直接覆盖前面申明的)。
console.log(a)//undefined
var a=10
console.log(a)//10
如果将var换成let,
console.log(a)//直接报错。
let a=10
console.log(a)//10
let的原理相当于匿名函数自调。
console.log(a)
(function(){
var a=10
console.log(a)
})()
2:参数增强。
2-1:默认参数
function indexOf(arr,elem,starii=0){}//starti如果啊没传入,则默认为0.
相当于:if(starti===undefined){starti=0}
如果浏览器不支持es6,可以这样判断。
2-2:剩余参数:从来代替arguments
arguments的问题:不是纯真的数组,不能使用数组API;只能获得全部参数,不能有选择的选择。
function calc(name,...salary){
//此处...表示将传来的参数组成数组。
//salary可以调用数组的函数。如果是arguments则不行。
var sal=salary.reduce(function(prev,elem){
return prev+elem
},0)
console.log(sal)
}
calc("jack",1000,1000,1000)//3000
兼容性写法:
function calc(){
//将arguments转换为数组。
// var arr=Array.prototype.slice.call(arguments,1)
//slice(starti,endi)表示从starting开始,截取到endi-1.如果没参数,
//表示复制数组。
var arr=[].slice.call(arguments,1)
var sal=arr.reduce(function(prev,elem){
return prev+elem
},0)
console.log(sal)
}
calc("jack",1000,4000)
2-3:散播:代替apply,将数组打散。
var arr=[4,3,2]
console.log(Math.max(...arr))
3:箭头函数
回调函数的this大多数情况指向window,如果要让回调函数的this和外部的this保持一致,可使用箭头函数。
4:模板字符串:做字符串拼接
支持双引号,单引号,换行等。
支持动态生成内容:${js表达式}
5:解构:简化批量赋值。将一个对象的成员提取出来,单独使用。
//数组解构
var a=4,b=5
;[b,a]=[a,b]
console.log(a,b)//5,4
es6对象的属性名和值相等时,可以简写
如: