JavaScript---ES5及ES6

ES5内容

es5 ecmascript 5 （2009年发布的）

1.严格模式（普通编码的话叫做怪异模式）

'use strict'

1.1 必须要使用var声明

1.2 this不能指向全局变量

1.3 不能在不是方法块的里面定义函数

1.4 禁止8进制方法

1.5 arguements的形参不一致（不同步）

2.数组的高阶函数（以函数做为参数的函数叫做高阶函数）

2.1 静态方法isArray

Array.isArray()   //参数为任意类型 检查是否为数组类型 不是返回false 是返回true

2.2 forEach （遍历的）没有返回值

[1,2,3].forEach(function(v,i,arr){    //第一个是值(只读) 第二个是下标 第三个遍历的数组对象

    arr=[1,2,3]
    console.log(v) //1,2,3
})

2.3 map （遍历的）有返回值（数组 数组的长度和你遍历的数组的长度一致）

var newArr = [1,2,3].map(function(v,i,arr){
    return v+1
})
console.log(newArr) //[2,3,4]

2.4 filter 过滤方法 （将满足条件的过滤出来） 返回值为数组

var filterArr = [1,2,3].filter(function(v,i,arr){
    if(v>2){
        return v
    }
})
console.log(filerArr) //[3]

2.5 reduce 计算方法 （从左到右）

var str = ['a','b','c'].reduce(function(pre,current,i,arr){
    return pre+current
})
console.log(str) //abc

2.6 reduceRight 计算方法 (从右到左)

var str = ['a','b','c'].reduceRight(function(pre,current,i,arr){
    return pre+current
})
console.log(str) //cba

2.7 every 每个都要符合条件才返回true 否则返回false

var isTrue = [1,2,3].every(function(v,i,arr){
    return v<3
})
console.log(isTrue) //false

2.8 some 有一些符合条件就返回true 全部都不符合条件返回false

var isTrue = [1,2,3].some(function(v,i,arr){
    return v<3
})
console.log(isTrue) //true

3.Date的静态方法 now获取时间戳

Date.now() //获取离1970/01/01 00:00:00 的毫秒值

4.object.bind 绑定方法 针对this的指向

var fn = function(){
    console.log(this)
}
var user = {}
fn.bind(user)//将fn这个函数对象里的this绑定给user这个对象
fn() //window
fn.bind(user)() //{}

ES6

es6 ecmascript6.0 (2015发布的)

let 块作用域修饰（建议使用）

let a = 10
a = 30
let a = 20 //报错 同一作用域不允许同名

const 常量修饰 也有块状作用域 （不能更改）

const str = 'hello'
str = 'world'   //报错

箭头函数 => （箭头函数没有this 箭头函数没有arguments）

let fn =()=>{    //如果只有一个参数（）可以省略 如果指向的代码只有一句{}也可以省略
    console.log(this)     //指向winwod  箭头函数没有this 通通会指向外面的参数 箭头函数没有arguments
}
let user = {}
fn.bind(user)()  //将箭头函数的this指向user 调用

es6对应的string类的增强

includes 是否包含

//检索是否包含这个内容 返回boolean类型的值
console.log(str.includes('he')); //true
//可以传递俩个参数 第二个参数为什么位置开始查找
console.log(str.includes('he',3)); //false 包含对应的指定位置

startsWith 判断是否是开头的内容

//startsWith 开始 是否为开始的值 返回为boolean类型
console.log(str.startsWith('he'));//true
//可以传递俩个参数 第二个参数指定结束位置
console.log(str.startsWith('he',0));//false 包含对应的指定位置

endWith 判断是否是结束的内容

//endsWith 结束位置是否为传递值 返回为boolean类型
console.log(str.endsWith('he'));//false
//可以传递俩个参数 第二个参数指定结束位置
console.log(str.endsWith('he',2));//true 不包含对应的指定位置

repeat 返回一个内容平铺的值

// repeate 平铺 返回一个新的string 参数是个数
let newStr = str.repeat(2)
console.log(newStr); //hellohello

字符串模板

let str = `姓名:${user.username}`

es6对于array的增强

静态方法

Array.of()

// Array.of 返回一个新的数组 将指定的元素组成一个新的数组
var newArr = Array.of('A','B','C')
console.log(newArr);

Array.from()

//Array.from()   //将对应类似数组的类型转为数组
var htmlColltion = document.getElementsByTagName('a')   //获取所有的a
var newArr2 = Array.from(htmlColltion)   //将对应的ArrayLike转为array类型 返回是一个数组
console.log(newArr2);   //包含了a标签
//添加第二个参数 进行map遍历
var newArr2 = Array.from(htmlColltion,function(v,i,arr){
    var n = Number(v.innerText)     //取出里面的内容
    if(n%2==1){   //判断里面的数值是否为奇数
        v.href = 'http://www.baidu.com'   //将他的href地址变成百度
    }else{
        v.href = 'http://www.sohu.com'  //偶数将他的href地址变成搜狐
    }
    return v  //返回内容
})

扩展运算符 ...

let arr = [a,b,c]
console.log(...arr) //abc ...是打开数组取出对应的数组里面的数据

find及findIndex方法

//find 查找 findIndex 查找下标
let strArr = ['a','b','c','a'] 
//find 找不到返回undefined 找的到返回第一个元素
var str = strArr.find(function(v,i,arr){ //v表示元素 i表示下标 arr表示遍历的数组
    return v>'a' //写条件 要带return
})
console.log(str);//b
//findIndex 找不到返回-1 找的到返回第一个的下标
var index = strArr.findIndex(function(v,i,arr){ //v表示元素 i表示下标 arr表示遍历的数组
    return v>'a' //写条件 要带return
})
console.log(index);//1

for of 循环加强

// for in及for of的区别
// for in 可以遍历数组和对象 for of只能遍历数组不能遍历对象
// for in在遍历数组的时候 里面的表示的是下标或者是键 for of在遍历数组的时候里面遍历表示的是值
//一般情况下遍历对象的时候使用for in 遍历数组的时候使用for of
//和forEach的区别 forEach是方法 for of是循环 在循环里面可以使用contiun break return
//遍历数组的时候 数组的方法 entries() 键值对象  keys() 键 values() 值
var arr = ['a','b','c']
var user = {name:'jack',age:18,sex:'男'}
for(let i in arr){ //使用for in遍历数组的时候里面i是表示下标
    console.log(i); //0-2
    console.log(arr[i]);
}
for(let i in user){ //使用for in遍历对象的时候里面i是表示键
    console.log(i); //name  age  sex
    console.log(user[i]);
}
//for of es6新增的
for(let v of arr){ //这个v表示的是值
    console.log(v);
}

entries() 键值对象 keys() 键 values() 值

//遍历数组的时候 数组的方法 entries() 键值对象  keys() 键 values() 值
var objArr = ['a','b']
for(let k of objArr.keys()){ //keys抽取数组里面所有的键作为一个数组
    console.log(k); //取出下标0 1
}
for(let v of objArr.values()){//values抽取数组里面所有的值作为一个数组
    console.log(v); //取出值 ab
}
for(let v of objArr.entries()){//entries抽取数组里面所有的键值对作为一个数组
    console.log(v); //取出键值对象
}

关于function对应的默认参数指定

//指定参数默认值
var fn1 = function(name='jack'){
    console.log(name)
}
fn1('李四')//传参的时候 将识别你的参数 李四
fn1() //不传参使用默认的值 jack
//箭头函数指定参数默认值 里面如果要指定参数默认值的话必须带上()
var fn=(name='rose')=>{console.log(name)}
fn() //打印默认值

关于幂次方取值 **

//求幂方 
console.log(Math.pow(5,2));
//es6新增 ** 求幂方
console.log(5 ** 2);//5的2次方 25

方法简写及对象简写 属性名表达式以及函数名表达式（对象里面）

var obj = {
    name:'jack',
    fn(){ //方法简写
        console.log(this.name);
    }
}
var newObj = new Object()
//这个新对象里面要包含对应的obj
newObj.obj = obj //第一个obj是属性名 第二个obj对应的对象
console.log(newObj.obj);//获取obj属性
//简写
var newObj = new Object()
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方法（判断是否为一个对象）

//object的静态方法 is方法 判断俩个对象是否是一个 ===恒等
//is方法和恒等的区别 === 和 Object.is方法的区别1 NaN===NaN为false Object.is(NaN,NaN)为true
//区别2 +0===-0 为true Object.is(+0,-0)为false
var str = 'a'
var str1 = 'a'
console.log(str===str1);//true
console.log(Object.is(str,str1));//true
console.log(NaN===NaN);//false
console.log(Object.is(NaN,NaN));//true
console.log(null === undefined); //false
console.log(Object.is(null,undefined));//false
var i = +0
var j = -0
console.log(i === j); //true
console.log(Object.is(i,j));//false

Object.assign方法（对象合并）

//Object.assign 静态方法 提取对象所有的属性及方法,方法合并为一个对象 返回一个新对象
var newObj = Object.assign({a:'a'},{b:'b'},{c:'c'})
console.log(newObj); //{a:'a',b:'b',c:'c'}
var a = {
    click(){
        console.log('hello');
    }
}
var b = {
    handlerClick(){
        console.log('hello');
    }
}
console.log( Object.assign(a,b));

新增的数据结构（对象）

set （里面存储的数据值不能重复 如果有重复会自动去除 数组去重）

//在构建对应的set的时候可以传递参数（数组） 也可以不传
var arr = []
var arrset = new Set(arr) //传参
var set = new Set() //无参
//添加方法
set.add('a')
set.add('a') //添加的方法
set.add('a') //第二个数据是重复的所以会被删
//size属性 个数
console.log(set.size);
//set.delete('a') //把a删除
//删除全部 清空
//set.clear() //把size里面的数据全部删除
console.log(set.size);
// set是没有下标的
// has 判断是否存在 返回booleanl类型
console.log(set.has('f'));
// set.keys()
// set.values()
// set.entries()
//ArrayLike的方法
//将set转为array类型
var setArr = Array.from(set)
console.log(setArr);
//forEach 跟数组的forEach一个样 用户遍历的方法
//键不允许重复
set.forEach((v,v1,set)=>{//v表示的值 v1表示的键（他的键和值一样） set 指向本身遍历set
    console.log(v);
})

map （键值对形式 键可以是任意类型 值也可以是任意类型）

// map是一个键值对 键可以是任意类型 值也可以是任意类型
let map = new Map()
console.log(map);
// map在构建的时候 如果需要传递参数 那么也可以传递一个数组 但是这个数组必须是二维数组
var arr = [[1,2],[3,4],[5,6]]
let arrMap = new Map(arr)
console.log(arrMap);
// 添加数据使用set方法
var keyObj = {age:18}
var valueObj = {name:'jack'}
map.set(keyObj,valueObj)
console.log(map);
//获取 get获取 通过键获取值
console.log( map.get(keyObj));
//删除方法 delete 根据key来删除值
// map.delete(keyObj)
//重复添加key 覆盖之前 就相当于改值
map.set(keyObj,'hello')
//删除所有 clear清空
// map.clear()
//也存在has方法 判断有没有这个键
console.log(map.has(keyObj));
console.log(map);
//map也是个arrayLike 他也具备 keys values entries这个几个方法
//将map转为数组 把键和值分别都作为一个数组元素存储
var mapArr = Array.from(map)
console.log(mapArr);//长度为2

解构 解除构造（打开获取里面匹配的内容）

// 解构 解除构造 打开拿到里面的内容 解构不成功结果是undefined
var arr = [1,[2,3],4] //原本的写法
var [a,[b,c],d] = [1,[2,3],4] //1对应a 2对应b 3对应c 4对应d 将arr这个构造解除了
//对象的
var obj = {x:10,y:20}
var {x,y} = {x:10,y:20} //解构 相当于把x y所属的对象打开了 进行1对1赋值 将obj这个构造解除了
function func(arr){return arr[0] - arr[1]} //对于函数的参数进行解构 解构是一个数组
console.log( func([19,11]) )
//函数的解构
function func([x,y]){return x - y} //对于函数的参数进行解构 解构是一个数组
console.log( func([19,11]) )
function fn([x,y]){
    console.log(x);
}
fn([1,2])//打印1
//快速遍历json数据
var {name} = {name:'jack',age:18,sex:'男'}//name是不是会匹配对应的name
console.log({name});//直接name:jack
//快速交换位置

class 类（对象的模板 借助他可以生成对应的对象 抽取对应的公共特点）

// es6新增了class这个东西（类） 实际这个class其实是一个function
//class相当于构建对象的模板 提取对象的公共内容
class Student{
    constructor(name,sex){//构造方法 等下在new的时候会调用这个方法
        this.name = name //this指向对应的对象
        this.sex = sex 
    } 
    eat(){
        console.log(this.name+'吃饭');
    }
}
var stu1 = new Student('张三','男')//通过对应的构造函数来构建对象
console.log(stu1.name);//张三  获取对应的name属性
console.log(stu1.sex);//男
stu1.eat() //调用对象的eat方法

extends 继承 （可以继承父类所有的非私有属性）

//继承 extends  继承可以获取他的非私有内容 classStudent继承了Student的内容
class classStudent extends Student{
    constructor(name,sex){
        super(name,sex)//指向父类的构造 super指向父类
    }
}
var studentSong = new classStudent('王五','未知'); //构建对象
studentSong.eat() //如果自己有对应的方法就调用自己的 如果自己没有继承父类的eat方法
console.log(studentSong.name); //调用父类的name属性

Symbol 值类型 新增类型

// Symbol是es6新增的类型 这个是值类型 独一无二的值
//不需要new关键词
let a = Symbol()
let b = Symbol()
console.log(a==b);//false
//里面可以传参 里面参数是string类型或者是number类型
let c = Symbol('hello')//介绍是一样
let d = Symbol('hello')//介绍是一样
console.log(c==d);//false
//通过key构建一个Symbol类型 如果没有这个键的symbol他会创建一个全局变量  如果有他会找这个全局变量
let e  = Symbol.for('ok') //通过键构建一个Symbol类型
let f  = Symbol.for('ok')
console.log(e==f);
//获取key  keyFor
console.log(Symbol.keyFor(e));//ok
//获取迭代器 可以进行数据迭代（数据遍历）
console.log(Symbol.iterator);
//symbol一般用来作为枚举类型的值使用
//枚举
var sex =  {
    b:'男',
    g:'女'
}