day15 ES5和ES6
ES5
一、<!-- 严格模式 -->
<script>
// 'use strict' //声明严格模式
n=123
console.log(n);//里面会直接报错 采用了严格模式后对应的内容 需要更加规范
// eslint 按照严格模式检查 代码检查器 严格模式不支持八进制
// 怪异模式
// n=123
// console.log(n);//123
// 严格模式特点
// 1．不可以省略var声明变量
// 'use strict' //声明严格模式
// n=123
// console.log(n);//里面会直接报错 采用了严格模式后对应的内容 需要更加规范
// 2．禁止函数使用this关键字指向全局变量
// function fn(){
// console.log(this);//undefined 非严格下打印window
// }
// 3．禁止使用八进制方法
// 4．不允许在非函数的代码块内声明函数
// 5．严格模式下, arguments变量,形参是不会变(不同步)
</script>
二、<!-- this指向的改变 -->
<script>
var user={
name:"张三"
}
function hello(){
console.log(this);
}
// bind将这个函数绑定给一个对象 那么这个函数里面的this就会指向对应的对象
// 函数对象.bind(绑定的对象)()
hello.bind(user)()
var obj={
print:function(){
console.log(this.name);
}
}
obj.print.bind(user)() //最后这个括号是调用 一般我们绑定的this是函数里面的 bind绑定对象 一般用于定时器
var obj1={
name:"行三",
run:function(){
console.log(this.hname);
}
}
var obj2={
hname:"哈哈啊哈"
}
obj1.run.bind(obj2)()
setInterval(obj1.run.bind(obj2),2000)
</script>
三、<!-- ES5数组高阶函数 -->
<script>
// es5数组的方法
var arr=[1,2,3,4]
Array.isArray() //判断是否是一个数组 返回为布尔类型的值 true
// 什么是高阶函数 以函数作为参数的函数叫做高阶函数
// es5关于数组的高阶函数
// forEach() 遍历的函数 没有返回值
arr.forEach(function(value,index,array){
// 第一个表示值 第二个表示下标 第三个表示遍历的数组
// value=value+value 是只读的 无法改变
array[index]=value+value
});
// map遍历的函数 有返回值
var newArr=arr.map(function(value,index,array){
return value+value
})//返回新数组 ，不改变原数组 数组长度和我们原本数组长度一致
// filter 过滤 返回值为数组里面指定一个function
var arr=[10,15,34,12,,13,9]
// 过滤掉12以下的数据
var newArr=arr.filter(function(value,index,array){
if(value>=12){
return value
}
})
console.log(newArr);
// reduce 计算方法 计算总和(从左到右)
var arr=[1,2,3,4]
var sum=arr.reduce(function(prevalue,value,index,array){
//上一个值 当前值 当前下标 遍历数组
return prevalue+value
})
console.log(sum);
// reduceRight 计算方法 (从右到左)
var arr=[1,2,3,4]
var count=arr.reduceRight(function(prevalue,value,index,array){
//上一个值 当前值 当前下标 遍历数组
return prevalue+value
})
console.log(count);
// every 遍历数组 是否都符合条件 返回布尔类型的值 如果都符合返回true 有一个不符合就返回false
var narr=[1,20,30,15]
var arr1=narr.every(function(value,index,array){
return value>0
})
console.log(arr1);//true
// some 只要有一个符合条件 就返回true 都不符合才反悔false
var arr2=narr.some(function(value,index,array){
return value>20
})
</script>
六<!-- es5新增其他内容 -->
<script>
// 针对日期 新增方法 now()获取当前日期离1970年0时0分0秒的毫秒值(时间戳)
var n=Date.now()
// 字符串模板
var str=`${n}hello`
// 对于对象来说提供get及set
var user={
name:"张三",
// getName:function(){
// }
getName(){
return this.name
},
setName(name){
this.name=usename
}
}
user.setName("jack")
</script>
ES6
一、<!-- ES初体验 -->
<script>
//es6介绍 ecmascript的第六个版本他是再es5之上做了功能添加
//变量命名
// var命名的是伪全局作用域var命名可以重复
// var a = 1
// var a = 'a '
// for(var i=o;i<5;i++){//走到i为5的时候
//document.getElementById( ' btn ' ).onclick=function(){ lconsole.log(i);}
// }
//console.log(i);
// for(let i=0;i<5;i++){//走到i为4的时候
//document.getElementById( ' btn ' ).onclick=function(){console.log(i);}
// }
//console.log(i);
//这个i的作用域仅仅存在于for块中外面不能访问
//let关键词不能重复命名 （同一作用域的情况 不同作用域是可以的）let关键词是声明块状作用域 也就是说他的作用方法只在模块里面（建议使用)
// let a = 10
// let a = 20
//var可以声明全局变量
//const关键词 声明常量 不能变的量使用const修饰不能二次赋值 不能重复命名
const a = 10 //不会局部声明 一般都在全局声明
a = 20
// 箭头函数 没有this
function fn(){//普通函数
}
// 箭头函数 如果需要提高效率 建议使用
var fn=(参数)=>{
//this找上面的this
}
//name
var fn=(name)=>{ //只有一个参数可用省略括号
console.log(name+'你在干嘛');//只有一句代码执行的话 可用省略{}
}
// 调用
fn('刘德华')
// 检索是否存在某个内容 indexOf(存在返 回第一个下标 不存在返回-1)
let str='hello'
// includes
// 检索是否包含这个1内容 返回布尔类型的值
// 可以传递两个参数 第二个参数为从什么位置开始查找
str.includes('he')//true
str.includes('he',3)//false
// endsWith 返回布尔类型的值 判断结束位置是否为传递的值
str.endsWith('he')//false
// 可以传递两个参数 第二个参数指定结束位置
str.endsWith('he',2)//true 不包含指定位置
// startsWith 开始 是否为开始的值 返回布尔类型
str.startsWith('he') //true
//可用传递两个参数 第二个参数为指定开始位置
str.startsWith('he',0)//包含对应的指位置
// repeat 平铺返回一个新的string 参数是个数
let newArr=str.repeat(2)//hellohello
// es6对数组的增强
// 静态方法
// Array.of 方法 返回一个新的数组 将指定的元素组成一个新的数组
let newar=Array.of('a','b','c')//abc
// ....扩展运算符 他可用打开对应的数组取出里面的内容
let arr=[1,2,3]
let newa=Array.of(...arr,...newar)
var objArr=[{
age : 18,
name : 'jack',
age: 19,name: "tom"
},{
age : 20,
name: 'lisa'
}]
// for(let i=;i>objArr.length;i++){
// console.log(objArr[i]);
// }
// console.log( ...objArr);
// Array.from() 将对应类似数组的类型转为数组
let acoll=document.getElementsByTagName("a")[0]
let newac=Array.from(acoll)//[a]
// 添加第二个参数 进行map遍历
Array.from(acoll,function(value,index,array){
var n=Number(value.innerText)
if(n%2==1){
value.href="http://ww.baidu.com"
}
})
// find 查找 findindex 查找下标
let arr4=['a','b','c']
arr4.find(function(value,index,arr){//value 表示元素 index表示下标 arr表示数组
return value>'a'
})//b
// find 查找 findindex 查找下标
let arr5=['a','b','c']
arr4.find(function(value,index,arr){//value 表示元素 index表示下标 arr表示数组
return value>'a'
})//b的下标
</script>
二、<!-- 循环 -->
<script>
var arr1=['a','b','c']
var user={
name:'jack',
age:18,
sex:'男'
}
for(let i in arr){
console.log(i);//0-2
console.log(arr[i]);
}
for(let i in user){
console.log(i);
console.log(user[i]);
}
// for of es6新增 只能遍历数组 不能遍历对象
for (let i of array){//这个i表示的是值
console.log(i);
}
// for in 和for of的区别
// forin 可用遍历数组和对象 forof只能遍历数组
// forin在遍历数组的时候 里面表示的是下标或者键 forof在遍历数组的时候表示的值
// 一般遍历对象的时候使用forin 遍历数组的时候使用forof
//和forEach的区别 forEach是方法 forin是循环 在循环里面可以使用 continue break return
// entrie() 键值对象 keys()键 values() 值
// 遍历数组的时候
var objArr = [ 'a','b']
for(let k of objArr.keys()){ //keys抽取数组里面所有的键作为一个数组console.log(k);//取出下标0 1
}
I
for(let v of objArr.values()){//values抽取数组里面所有的值作为一个数组console.log(v);//取出值ab
}
for(let v of objArr.entries())//entries抽取数组里面所有的键值对作为一个数组
console.log(v);//取出键值对象
</script>
三、<!-- 箭头函数 -->
<script>
// 箭头函数
var fn=name=>{console.log(name);}
// 默认值
fn('张三')//张三
fn()//undefined
// 指定参数默认值
var fn1=function(name='jack'){
console.log(name);
}
fn1('李四')//传参的时候使用参数
fn1()//不传参使用默认值jack
// 箭头函数指定参数默认值 里面如果要指定参数默认值的话必须带上()
var fn=(name='rose')=>{
console.log(name);
}
fn()//打印默认值
// 求幂次方
Math.pow(5,2)
5 ** 2 //5的2次方
var arr3=[1,2,3]
arr.reduce((preV,v)=>{return preV+v})
// object 新增 属性简写 方法简写 简写需要在对象中
var obj={
name:'jack',
fn:function(){
console.log(this.name);
}
}
var obj={
name:'jack',
fn(){//方法简写
console.log(this.name);
}
}
var aobj=new Object()
// 这个新对象里面要包含对应的obj
aobj.obj=obj //第一个obj是属性名 第二个obj对应的对象
console.log(aobj.obj);//获取obj属性
// 简写
newobj={obj}//利用对象的名字作为属性名
console.log(newobj.obj);
// 拼接
let object={}
object['a'+'ge']=18
console.log(object.age);
object={
['say'+'hello'](){//支持拼接表达式 必须写在中括号里面
console.log('hello');
}
}
object.sayhello()
// object的静态方法 is方法 判断两个对象是否是一个 ===恒等
// is方法和恒等的区别
// 区别1
console.log(NaN===NaN);//false
console.log(Object.is(NaN,NaN));//true
// 区别2
var i=+0
var j=-0
console.log(i===j);//true
console.log(Object.is(i,j));//false
// Object.assign 静态方法 提取对象的所有的属性，方法合并为一个对象 返回一个对象
Object.assign({a:'a'},{b:'b'},{c:'c'})//打印{a:'a',b:'b',c:'c'}
// 新增的数据结构 (对象)
// set构建使用new关键词 里面如果需要传参数 传递的参数为数组
var set=new Set() //传入的是数组或者ArrayLike
// set存在增删改查的方法
// add 增加
set.add('a')
set.add('a')//由于第二个数据是重复的所以会被删
console.log(set);
// size属性 个数
set.size
// delete 删除
set.delete('a')
// clear 清空
set.clear() //全部删除
// set没有下标
// has 判断是否存在 返回布尔类型
set.has('a')
// ArrayLike的方法
// 将set转为array类型
Array.from(set)
// forEach 跟数组的forEach一样 遍历的方法
// 键不允许重复
set.forEach((v,v1,set)=>{//v表示值 v1表示键 键和值一样 set本身遍历 set
console.log(v);
})
// map在构建的时候 如果需要传递参数 也可以传递一个数组 但是这个数组必须是二维数组[[2,1],[3,4],[5,6]]
// map是一个键值对 键可以是任意类型 值也可以是任意类型
let map=new Map()
// map大部分方法和set一样 存在下标
// 添加方法 set
var obj1={age:18}
var obj2={name:'jack'}
map.set(obj1,obj2)
// 重复添加key
map.set(obj1,'hello')//覆盖之前的 相当于改值
// 获取方法 get 通过键获取值
map.get(obj1)
// 删除方法 delete 根据键来删除值
map.delete(obj1)
// 清空clear
map.clear()
// has 判断有没有这个键 返回布尔类型
map.has(obj1)
// map也是个arraylike 他也具备keys values entries这几个方法
// 将map转换为数组 把键值分别作为一个数组元素储存
var mapArr=Array.from(map)
console.log(mapArr);//长度为2
// 解构 解除构造 打开拿到里面的内容
var [aa,[b,c],d]=[1,[2,3],4] //1对应aa 2对应b 3对应c 4对应d
var obj3={x:10,y:20}
var {x,y}={x:10,y:20}//解构 相当于把x，y所属对象打开了 进行1对1赋值
// 函数的解构
function fn([x,y]){return x-y} //对于函数的解构 解构是一个数组
console.log(fn(10,5));
//快速遍历json数据
var {name}={name:'jack',age:18,sex:'男'} //直接name:jack
// 快速交换位置
// es6新增class这个东西(类) 其实是一个function
// class相当于构造对象的模板 提取对象的公共内容
class Student{
constructor(name,sex){ //构造方法 等下在new的时候会调用这个方法
this.name=name
this.sex=sex
}
eat(){
console.log(this.name+'吃饭');
}
}
var stu1=new Student('张三','男')
console.log(stu1.name);
console.log(stu1.sex);
var stu2=new Student('李四','女')
console.log(stu2.name);
console.log(stu2.sex);
// 继承 extends 继承可以获取他的非私有内容
class classStudent extends Student{
constructor(name,sex){
super(name,sex)//指向父类的构造
}
}
var studentSon=new classStudent('王五','未知')
studentSon.eat() //调用父类的eat方法
studentSon.name()
studentSon.sex()
// symbol是es6新增的类型 这个是值类型 独一无二的值
// 不需要new关键词
let a1=Symbol()
let b=Symbol()
console.log(a1==b);//false
// 里面可以传参 里面参数是string类型或者是number类型
let c=Symbol('hello')
let d=Symbol('hello')
console.log(c==d);//false
//通过键构建一个symbol类型 如果没有这个键的symbol他会创建一个全局变量 如果有他会找这个全局变量
let e=symbol.for('ok')
let f=symbol.for('ok')//通过键构建一个symbol类型
console.log(e==f);//true
// symbol.keyFor() 获取key
console.log(Symbol.keyFor(e));//ok
// 获取迭代器 可以进行数据迭代(数据遍历)
console.log(Symbol.iterator);
// symbol一般用来作为枚举类型值的使用
// 枚举
var sex={
b:'男',
g:'女'
}
</script>
浙公网安备 33010602011771号