es5和es6的一些基础知识

es5和es6

es5

ECMAscript 5 2009年发布的

严格模式

普通编码的话叫做怪异模式

'use strict'

1,检查代码,消除语法的一些不合理,不严谨之处

2,消除一些代码运行的不安全之处,保证代码运行的安全

3,提高编译器效率

特点:

1,不可以省略var声明变量

2,不支持八进制

3,禁止使用this关键字指向全局变量

4,不允许在非函数的代码块内声明函数

5,arguments变量的形参不同步

bind

将这个函数绑定给一个对象,那么这个函数里的this就会指向这个对象

var user = {
            username: '张三'
        }

        function fn() {
            console.log(this.username);
        }
        //bind将这个函数绑定给一个对象,那么这个函数里的this就会指向这个对象
        //函数对象.bind(绑定的对象)()
        fn.bind(user)() //张三
        var obj = {
            print: function() {
                console.log(this.username);
            }
        }
        obj.print.bind(user)() //张三
        setInterval(obj.print.bind(user), 2000) //每两秒打印一次张三(定时器自动调用函数,所以不用加()调用了)
    </script>

数组的高阶函数

以函数作为参数的函数是高阶函数

静态方法isArray

参数为任意类型

Array.isArray()//检查是否为数组类型,返回布尔类型

forEach和map

forEach

遍历的函数,没有返回值(改变原数组)

map

遍历的函数,有返回值,返回新数组(不改变原数组),且返回的数组长度一定与原数组一致

var arr = [1, 2, 3]
        console.log(Array.isArray(arr)); //判断是否是一个数组,返回布尔类型

        //以函数作为参数的函数是高阶函数
        //forEach   遍历的函数,没有返回值(改变原数组)
        arr.forEach(function(value, index, array) {
                //第一个参数表示值,第二个表示下标(可以省略),第三个表示遍历的数组(可以省略)
                console.log(value);
                console.log(index);
                console.log(array);
                array[index] = value + value
            })
            //map   遍历的函数,有返回值,返回新数组(不改变原数组),且返回的数组长度一定与原数组一致
        var newArr = arr.map(function(value, index, array) {
            return value + value

        })
        console.log(arr);
        console.log(newArr);

filter 和reduce 和reduceRight

filter 过滤

reduce 计算方法 从左到右

如从左加到右

reduceRight 从右到左

如从右加到左

var arr = [1, 2, 3, 4, 5, 6]
            //filter 过滤,返回值为数组  里面指定是一个函数
        var newArr = arr.filter(function(value, index, array) {
            if (value >= 4) {
                return value
            }
        })
        console.log(newArr);
        var strArr = ['abcabd', 'abc', 'erd', 'dfg']
        var newStrArr = strArr.filter(function(value, index, array) {
            if (!/abc/.test(value)) {
                return value
            }
        })
        console.log(newStrArr);
        var newStrArr1 = strArr.filter(function(value, index, array) {
            if (index % 2 == 0) {
                return value
            }
        })
        console.log(newStrArr1);

        //reduce    计算方法    从左加到右
        var arr1 = [1, 2, 3, 4, 5]
            //第一个参数是上一个值,第二个参数是当前值,第三个参数是当前下标,第四个参数是遍历的数组
        var newArr1 = arr1.reduce(function(preValue, currentValue, currentIndex, array) {
            return preValue + currentValue
        })
        console.log(newArr1);
        //reduceRight   从右加到左
        var arr2 = ['a', 'b', 'c']
        var newArr2 = arr2.reduceRight(function(preValue, currentValue, currentIndex, array) {
            return preValue + currentValue
        })
        console.log(newArr2);

every和some

every

遍历每一个是否都符合条件,返回值是布尔类型

some

是否有符合条件的,返回值是布尔类型

//every 遍历每一个是否都符合条件,返回值是布尔类型
        var numberArr = [1, 2, 6, 9, 10]
        var isTrue = numberArr.every(function(value, index, array) {
            return value > 0
        })
        console.log(isTrue);
        //some  是否有符合条件的,返回值是布尔类型
        var isTrue2 = numberArr.some(function(value, currentIndex, array) {
            return value > 9
        })
        console.log(isTrue2);

now

针对日期,新增now,获取当前日期离1970年1月1日0时0分0秒的毫秒值

var n = Date.now()
        console.log(n);

ES6

var与let与const关键词

var

全局变量

let

let关键词,不能重复命名(在同一作用域),作用方法只在模块内

//var 全局变量
        for (var i = 0; i < 3; i++) {
            console.log(i); //0,1,2
        }
        //let关键词,不能重复命名(在同一作用域),作用方法只在模块内
        for (let j = 0; j < 3; j++) {
            console.log(j); //0,1,2
        }
        console.log(i); //3  可以打印
        console.log(j); //出错,不可以打印

const关键词

const关键词 声明常量(不能变的量),一般在全局声明 不能二次赋值,不能重复命名

const a = 10

箭头函数(提升效率)

自身没有this,里面写的this会向上找,都没有就找到window

没有argument

var fn = (参数)=>{

​ 只有一个参数时可以省略(),只有一句代码执行可以省略{}

代码

}

var box = document.getElementById('box')
        var fn1 = name => console.log(name + '你在吗');
        fn1('刘德华')

es6 对应string的增强

indexOf

检索是否包含某个内容 indexOf (存在返回第一个下标,不存在返回-1)

includes

检索是否包含某个内容 includes,返回布尔类型

let str = 'hello'
console.log(str.includes('he')); //true
//第二个参数是从什么位置开始找
 console.log(str.includes('he', 0)); //false

endsWith

结束是否为传递值 返回布尔类型

let str = 'hello'
console.log(str.endsWith('he')); //false
console.log(str.endsWith('he', 2)); //true    不包含指定的下标

startsWith

是否为开始的值 返回布尔类型

let str = 'hello'
console.log(str.startsWith('he')); //true
//第二个参数是结束的下标    包含指定的下标
console.log(str.startsWith('he', 1)); //true

repeat

平铺,返回一个新string,参数为个平铺个数

let str = 'hello'
var newStr = str.repeat(2)
console.log(newStr); //hellohello

es6对数组的增强(静态方法)

Array.of

返回一个新的数组,将指定的元素组成一个新的数组

let arr = [1, 2, 3]
var newArr = Array.of('a', 'b', 'c')
        console.log(newArr);

…

扩展运算符 可以打开对应的数组取出里面的内容

let arr = [1, 2, 3]
var newArr = Array.of('a', 'b', 'c')
var newArr1 = Array.of(...arr, ...newArr)
        console.log(newArr1);
var objArr = [{
            age: 18,
            name: 'jack'
        }, {
            age: 19,
            name: 'tom'
        }]
        console.log(objArr[1]);
        console.log(...objArr); //返回全部

Array.from

可以将类似数组的类型转为数组

    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <script>
        var htmlColltion = document.getElementsByTagName('a')
        var newArr3 = Array.from(htmlColltion)
        console.log(newArr3);
        //添加第二个参数    进行map遍历
        var newArr4 = Array.from(htmlColltion, function(value, index, array) {
            var n = Number(value.innerText)
            if (n % 2 == 1) {
                value.href = 'http://www.baidu.com'
            } else {
                value.href = 'http://www.sohu.com'
            }
            return value
        })
        console.log(...newArr4);
    </script>

find 查找

let strArr = ['a', 'b', 'c']
        var str = strArr.find(function(value, index, array) {
            return value > 'a'
        })
        console.log(str); //b

findIndex

查找下标,找到返回第一个下标,找不到返回-1

let strArr = ['a', 'b', 'c']
        var str1 = strArr.findIndex(function(value, index, array) {
            return value > 'a'
        })
        console.log(str1); //1

for in与for of

for of 是es6新增 不能遍历对象

因为数组属于对象,所以for in可以遍历数组 一般遍历数组用for of,遍历对象用for in

forEach是方法,不是循环,不可以用continue break return

var arr = ['a', 'b', 'c']
        var user = {
            name: 'jack',
            age: 18,
            sex: '男'
        }
        for (let i in arr) {
            console.log(i); //       for in 遍历数组时i表示下标
            console.log(arr[i]);
        }
        for (let i in user) {
            console.log(i); //for in    遍历对象时i表示键
            console.log(user[i]);
        }
		for (let v of arr) {
            console.log(v); //for of 遍历时v表示值
        }
        for (let k of arr.keys()) {
            console.log(k); //抽取数组里面的键作为一个数组
        }
        for (let v1 of arr.values()) {
            console.log(v1);//抽取数组里面的值作为一个数组
        }
        for (let v2 of arr.entries()) {
            console.log(v2);    //抽取数组里面的键和值作为一个数组
        }

指定参数默认值

没有指定时

var fn = name => {
            console.log(name);
        }
        fn('张三') //张三
        fn() //打印默认值,也就是undefined

指定默认值时

var fn1 = function(name = 'jack') {
            console.log(name);
        }
        fn1('李四') //李四
        fn1() //jack

箭头函数指定默认值

里面的参数指定默认值时必须要带上()

var fn2 = (name = 'rose') => {
            console.log(name);//rose
        }
fn2() //调用

求幂方 **

//以前
console.log(Math.pow(5, 2));
//**
console.log(5 ** 2);

使用箭头函数简写

var arr = [1, 2, 3]
            //使用箭头函数简写
        var newArr = arr.reduce((pre, v) => {
            return pre + v
        })
        console.log(newArr); //6

es6新增object里的

属性简写,方法简写(简写要写在对象中)

方法简写

//正常
        var obj = {
                name: 'jack',
                fn: function() {
                    console.log(this.name);
                }
            }
//方法简写
        var obj1 = {
                name: 'rose',
                fn() {
                    console.log(this.name);
                }
            }

属性简写

var newObj = new Object()
            // 正常
        newObj.obj = obj
        console.log(newObj);
        console.log(newObj.obj);
        //属性简写
        newObj = {obj}
        console.log(newObj);
        console.log(newObj.obj);

拼接

//属性名拼接
        let object = {}
        object['a' + 'ge'] = 18
        console.log(object.age); //18
//方法名拼接
        object = {
            ['say' + 'hello']() {
                console.log('你好');
            }
        }
        object.sayhello() //你好

object.is的静态方法

判断两个对象是否是一个

        var str = 'a'
        var str1 = 'a'
        console.log(str === str1); //true
        console.log(Object.is(str, str1)); //true
//Object.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 静态方法(对象合并)

提取对象的所有属性和方法,合并为一个对象,返回这个新对象

//提取属性
        var newObj1 = Object.assign({
            a: 'a'
        }, {
            b: 'b'
        }, {
            c: 'c'
        })
        console.log(newObj1); //{a:'a',b:'b',c:'c'}
//提取方法
        var a = {
            click() {
                console.log('hello');
            }
        }
        var b = {
            click2() {
                console.log('world');
            }
        }
        console.log(Object.assign(a, b));
        Object.assign(a, b).click()

新增的数据结构(对象)

set

set构建使用new关键词 里面可以传参数(数组),可以不传 set没有下标

里面存储的数据不能重复,有重复会自带删除重复的

var set1 = new Set()
        console.log(set1);
        //set存在增删改查
        //增
        var set2 = set1.add('a')
        set2.add('a') //这个数据时重复的,会被自动删除
        console.log(set2);
        set2.add('b')
            //删
        set2.delete('a') //删a
        set2.clear() //清空
        console.log(set2);
        set2.add('c')
        set2.add('d')
        set2.add('e')
            //size属性  个数       
        console.log(set2.size);
        //has   判断是否存在,返回布尔类型
        console.log(set2.has('c')); //true
        //有keys,values,entries方法,所以时类数组,可以用from转成数组
        console.log(set2.keys());
        console.log(set2.values());
        console.log(set2.entries());
        var set2Arr = Array.from(set2)
        console.log(set2Arr);
        //forEach   跟数组的forEach一样,遍历,但是键不允许重复
        set2.forEach((v, v1, set2) => {//v表示值,v1表示键,set2指向本身遍历
            console.log(v);
        })

map

map是一个键值对 键可以是任意类型 值也可以是任意类型

        let map = new Map()
        console.log(map);
        //添加数据有set方法
        var keyObj = {
            age: 18
        }
        var valueObj = {
            name: 'jack'
        }
        map.set(keyObj, valueObj)
        console.log(map);
        //使用get获取,通过键获取值
        console.log(map.get(keyObj));
        //删除方法 delete   根据键来删除
        map.delete(keyObj)
        console.log(map);
        //重复添加键    覆盖之前的,相当于改值
        map.set(keyObj, valueObj)
        map.set(keyObj, 'hello')
        console.log(map);
        //删除所有  clear
        // map.clear()
        //has   判断有没有这个键    返回布尔类型
        console.log(map.has(keyObj));

        //因为map也有keys,values,entries方法,所以也是类数组,可以用from转成数组
        //将map转为数组时,会把键和值分别作为数组的元素
        var mapArr = Array.from(map)
        console.log(mapArr);

//map在构建的时候,如果需要传递参数,那么也可以传递一个数组,但必须是二维数组
        var arr = [
            [1, 2],
            [2, 3],
            [3, 4]
        ]
        let arrMap = new Map(arr)
        console.log(arrMap);

解构

解除构造,打开拿到里面的内容,解构不成功,返回undefined

        //数组
        var arr = [1, 2, 3] //原本写法
        var [a, b, c] = [1, 2, 3] //1对应a,2对应b,3对应c
        //对象
        var obj = {
                x: 10,
                y: 20
            } //原本写法
        var {
            x,
            y
        } = {
            x: 10,
            y: 10
        } //将对象构造解除,进行一对一赋值
        //函数
        function fn(arr) {
            return arr[0] - arr[1]
        } //原本写法
        function fn1([x, y]) {
            return x - y
        }
        console.log(fn([2, 1]));
        console.log(fn1([2, 1]));

class类

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

实际这个class其实是一个function

        class Student {
            constructor(name, sex) { //构造方法
                this.name = name
                this.sex = sex
            }
            eat() {
                console.log(this.name + '吃饭');
            }
        }
        var stu1 = new Student('张三', '男') //通过对应的构造函数来构建对象
        console.log(stu1.name); //张三
        stu1.eat() //张三吃饭
        var stu2 = new Student('李四', '男')
        console.log(stu2.name); //李四
        stu2.eat() //李四吃饭

        class car {
            constructor(name, speed) {
                this.name = name
                this.speed = speed
            }
            run() {
                console.log(this.name + '在跑,时速为' + this.speed);
            }
        }
        var car1 = new car('跑车', '250km/h')
        car1.run()

        //继承  extends 继承可以获取父辈的非私有内容  
        class classStudent extends Student {
            constructor(name, sex) {
                super(name, sex) //指向父亲的构造
            }
        }
        var studentson = new classStudent('王五', '男')
        studentson.eat() //调用父类的eat方法,如果自己有eat方法就调用自己的

Symbol

Symbol是es6新增的类型 是个值类型,独一无二的值

        let a = Symbol()
        let b = Symbol()
        console.log(a == b); //falese  
        //里面可以传参,里面的参数是string类型或者number类型
        let c = Symbol('hello')
        let d = Symbol('hello')
        console.log(c == d); //false
        //通过键构建一个Symbol类型,如果没有这个键的Symbol就会创建一个全局变量,如果有就会找到它
        let e = Symbol.for('ok') //通过键构建一个Symbol类型
        let f = Symbol.for('ok') //已经有ok键的Symbol类型,所以是找到它
        console.log(e == f); //true
        //通过keyFor获取key   
        console.log(Symbol.keyFor(e)); //ok
        //iterator获取迭代器    可以进行数据迭代,也就是数据遍历
        console.log(Symbol.iterator);
        //Symbol一般用来作为枚举类型的值使用
        //枚举
        var sex = {
            b: '男',
            g: '女'
        }