day14:ES5及ES6新增

原创已于 2024-01-30 15:28:47 修改 · 185 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #javascript #前端

于 2023-02-25 09:41:02 首次发布

JavaScript的构成

BOM 操作浏览器对象
DOM 操作文档对象
ECMAScript 基础语法

ECMAScript介绍

ECMAScript是对应js的基础语法，里面包含js中除dom操作和bom的所有内容。ECMAScript主要拆分为俩个单词 ECMA (欧洲计算机协会) 、Script (脚本)。ECMAScript 简称（es）他主要的版本有 ES3、ES5、ES6…对应的版本管理以及切换是由不同兼容问题产生的。低版本的兼容就比较好，高版本的兼容性较差。在项目中我们可以使用bable.js来进行生成代码的版本切换（后续框架中必然使用的）。ES3为基础版本他支持市面常用的所有浏览器，ES5支持市面上大多数浏览器, ES6只支持高版本浏览器。

ECMAScript的版本

ES3 基础版本（大多数的基础内容都属于es3）
ES5 (ES2009) 他在es3上增强对应的规范性以对应的方法
ES6(ES2015) 他在es5的基础上扩展了对应的类及对应的处理

严格模式的书写

书写在首行
使用use strict来声明

 		'use strict'
        hello = '你好'
        console.log(hello) //报错

严格模式的特性

声明变量必须使用var关键词声明
函数中的this不允许指向全局对象（global）（window）
arguments中的形参不同步
函数名的参数唯一
函数声明只处于上下文对象中
禁止使用八进制方法
将一切不规范的地方全部抛出错误
不允许在非函数的代码块内声明函数

数组新增的高阶函数

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

新增的高阶函数

forEach遍历（返回值为void）

        var arr = ['a', 'b', 'c', 'd']
        // 传入的函数为操作函数
        // 传入的函数有三个参数 分别为遍历的值 遍历的下标 遍历的数组
        arr.forEach(function (value, index, arr) {
            console.log(value, index, arr)
        })
        // a 0(4)['a', 'b', 'c', 'd']
        // b 1(4)['a', 'b', 'c', 'd']
        // c 2(4)['a', 'b', 'c', 'd']
        // d 3(4)['a', 'b', 'c', 'd']

map 遍历（返回值是数组且这个数组个数和遍历的个数一致）

        //map的使用和forEach是一样的 唯一的区别在于forEach没有返回值 map有返回值
        // map返回的是一个数组 这个数组的个数一定和遍历的数组个数是一样的
        var nums = arr.map(function (v, i, arr) {
            console.log(v, i, arr)
            if(i%2 == 0){
                return i
            }
        })

filter 过滤（返回的是一个数组）

        //filter用于过滤 里面传入的对应的函数一定返回值boolean true就是添加的返回的数组 如果是false就不添加
        //v表示对应的值 i表示下标 array表示数组
        var filterArr = ['a', 'b', 'c', 'd','ab'].filter(function(v,i,arr){
            //条件 返回值bool
            return /a/.test(v)
        
        })
        console.log(filterArr)// ['a', 'ab']

every 每个条件都满足就返回true （传入的函数必须返回的是bool）

        //every 当前是否每个都满足条件
        var is = ['1','2','3','4'].every(function(v,i,arr){
            return v>3
        })
        console.log(is)//false

some 没有一个满足条件就返回false（传入的函数必须返回的是bool）、

        //some当前是否存在满足条件的
        var is = ['1', '2', '3', '4'].some(function (v, i, arr) {
            return v > 3
        })
        console.log(is)//true

reduce 计算的（返回的是一个值（一般情况下为number或string））

参数讲解

第一个为处理函数处理函数里有四个参分别为前面的结果值当前遍历的值当前遍历的下标当前遍历的数组
第二个为初始值如果没指定那么将会将第一个值付给前面的结果值默认下标从一开始

        // reduce求和
        var num = [12,21,2,14,23,1].reduce(function(prev,current,i,arr){
            return prev + current
        })
        console.log(num)//73

示例偶数位求和

        //reduce 第一个参数为处理函数 第二个参数为初始值 (如果没有设置默认为第一个 如果设置那么就对应设置的值)
        //prev前面的结果值 （默认为第一个的值） 如果的参数设置了那么prev值为这个设置值
        //current 现在的值 （默认从第二个开始） 设置了第二个参数那么默认从第一个开始
        //i 默认从下标为1开始 设置了第二个参数那么下标从0开始
        var number = [10, 2, 3, 13, 41, 34, 12].reduce(function (prev, current, i,
            arr) {
            //判断是否为偶数位
            console.log(i)
            if (i % 2) {
                prev += current
            }
            return prev
        }, 0)
        console.log(number)//49

reduceRight 从右开始计算

        // reduceRight 从右开始计算 
        var str = ['a', 'b', 'csa', 'dcd','ab'].reduceRight(function(prev,current,i,arr){
            return prev + current
        },'hi')
        console.log(str)//hiabdcdcsaba

高阶函数的实现

forEach

        var arr = [1, 2, 3, 4]
        //封装myForEach
        function myForEach(callback) {
            if (typeof callback != 'function') {
                throw new Error('参数错误')
            }
            //遍历执行处理函数
            for (var i = 0; i < arr.length; i++) {
                callback(arr[i], i, arr)
            }
        }
        //调用
        myForEach(function (v, i, arr) {
            console.log(v, i, arr)
        })

map

        //封装myMap
        function myMap(callback) {
            if (typeof callback != 'function') {
                throw new Error('参数错误')
            }
            //返回的内容
            var results = []
            //遍历执行处理函数
            for (var i = 0; i < arr.length; i++) {
                results.push(callback(arr[i], i, arr))
            }
            return results
        }
        console.log(myMap(function (v) { return v + 'hello' }))

every

        // every （所有都满足条件返回true 不然返回false）
        // 封装myEvery
        function myEvery(callback){
            if(typeof callback != 'function'){
                throw new Error('参数错误')
            }
            // 遍历执行处理函数
            for(var i=0;i<arr.length;i++){
                // 只要有一个false 直接返回false
                if(!callback(arr[i],i,arr)){
                    return false
                }
            }
            return true
        }
        // 调用
        console.log(myEvery(function(v){
           return v < 4
        }))

some

// some （只要有一个就返回true）
        // 封装mySome
        function mySome(callback){
            if(typeof callback != 'function'){
                throw new Error('参数错误')
            }
            // 遍历执行处理函数
            for(var i=0;i<arr.length;i++){
                // 只要有一个true 直接返回true
                if(callback(arr[i],i,arr)){
                    return true
                }
            }
            return false
        }
        // 调用
        console.log(mySome(function(v){
           return v < 4
        }))

filter

        // filter （返回一个数组）
        // 封装myFilter
        var str = ['a','ab','ac']
        function myFilter(callback){
            if(typeof callback != 'function'){
                throw new Error('参数错误')
            }
            // 准备一个返回的数组
            var result = []
            // 遍历执行处理函数
            for(var i=0;i<str.length;i++){
                if(callback(str[i],i,str)){
                    result.push(str[i])
                }
            }
            return result
        }
        // 调用
        console.log(myFilter(function(v,i,str){
           return /a/.test(v)
        }))

reduce

// reduce （从前到后 返回一个值）
        // 封装myReduce
        function myReduce(callback,value){
            if(typeof callback != 'function'){
                throw new Error('参数错误')
            }
            // value值传递的情况
            var index = 0
            var prev = value
            // 如果value没有被传递 那么遍历从下标一开始 初始值为对应的下标为0的元素
            if(typeof value == 'undefined'){
                //判断是否为空数组
                if(arr.length == 0){
                    throw new Error('cerror')
                }
                index = 1
                prev = arr[0]
            }
            // 遍历计算值
            for(;index<arr.length;index++){
                // 调用传入的函数 得到对应的结果值 在覆盖对应的结果
                prev = callback(prev,arr[index],arr)
            }
            return prev
        }
        // 调用
        console.log(myReduce(function(prev,current){
           return prev + current
        },20))

this指向改变

function对象的方法

bind（返回一个函数需要收到调用）
apply（自动调用返回的值是对应函数执行的结果）
call（自动调用返回的值是对应函数执行的结果）

        var obj = {
            sayHi:function(){
                console.log(this) //默认指向obj这个对象
            }
        }
        function sayWorld(){
            console.log(this) //默认指向window
        }
        obj.sayHi()//打印obj对象
        sayWorld()//打印window对象
        // 改变obj里面的sayHi的this指向
        var fn = obj.sayHi.bind(window)
        console.log(fn) //使用bind是一个新函数
        console.log(obj.sayHi == fn)//false
        // 通过bind函数来更改this指向 这个bind函数会返回一个新的函数 这个函数里的this会指向你传入的对象
        fn()//执行这个函数 打印window
        // apply 这个函数他也是函数对象的方法
        console.log(sayWorld.apply(obj))//自动调用 更改this指向 只想对应的obj
        // call这个函数类似于apply 也会自动调用
        sayWorld.call(document)//更改this指向为document自动调用

传递参数方式对比

区别

bind返回的是一个函数需要手动调用
apply会自动调用返回的是对应的函数执行的结果（传递的参数是一个数组）
call会自动调用返回的是对应的函数执行的结果（传递的参数是一个个的元素（多个参数））

bind函数执行完返回的函数不能被apply和call进行二次更改this指向

        function sum(n,m){
            console.log(n,m)
            console.log(n+m)
        }
        // bind传递函数 跟对应的函数执行传递参数是一样的
        sum.bind(String)(1,2)
        // apply传递的参数是对应的数组（按照函数的形参顺序来传入）
        sum.apply(document,[1,2])
        // call 传递的参数是一个个的
        sum.call(document.body,1,2)

补充新增

字符串的trim方法（去前后空格）
数组的静态方法 Array.isArray
数组的indexOf 及 lastIndexOf
JSON的序列化方法及反序列化方法
Object的相关方法

    <script>
        // 静态方法就是首字母大写的类型(class类)名来调用的方法(static修饰的)
        console.log(Array.isArray([]))//判端是否为数组
        // 数组的补充方法 indexOf lastIndexOf 新增
        console.log(['a', 'd', 'c', 'a'].indexOf('a')) // 0 获取当前对应的第一个出现的下标
        console.log(['a', 'd', 'c', 'a'].lastIndexOf('a')) // 3 从后往前获取对应的第一个出现的下标
        console.log(['a', 'd', 'c'].indexOf('a', 1))//-1 第二个指定是对应的开始下标找不到返回-1
        console.log(['a', 'b', 'c'].lastIndexOf('a', 1))//0
        //JSON的序列化方法及反序列化方法
        // JSON.stringify()
        // JSON.parse()
        //Object 新增的方法 object.defineProperty 等
    </script>

getter setter （对象里面）

    <script>
        // get这个方法的名字必须是访问的属性名
        var obj = {
            _name:'hell0',
            // get这个方法的名字必须是访问属性名（无限递归 如果get里面使用对应的名字的内容就会继续调用getter）
            get name(){
                console.log('getter 调用了')
                return this._name+'张三'
                // return this.name+'张三'  出错无限递归
            },
            // set这个方法的名字必须是访问的属性名
            set name(value){
                this._name = value
                console.log('setter 调用了')
                
            }
        }
        console.log(obj.name) // 调用getter
        obj.name = 'hi' //调用setter
        console.log(obj.name) // 调用getter
    </script>

ES6新增

字符串新增

var num = 1000000000
var str = `我有${num}元`

字符串相关方法

includes 是否包含
startsWith 是否以传入的参数开头
endsWith 是否以传入的参数结尾
repeat 平铺（重复）

var str = 'abcdef'
//传入的检索的内容 传入的第二参数指定的下标
//检索是否包含
console.log(str.includes('abc',1)) //从下标1开始后面的内容是否包含abc
//检索是否开头
console.log(str.startsWith('abc')) //true
//是否结尾
console.log(str.endsWith('def')) //true
//repeat 平铺 传入对应的次数 返回一个新的字符串
console.log(str.repeat(3))

数组新增

相关方法

find 查找对应的内容（高阶函数）
findIndex 查找对应的下标（高阶函数）
Array.of 将对应的内容填入Array 返回是数组
Array.from 将伪数组转为数组
fill 覆盖为一个值
inculdes 是否包含

    <form action="http://www.baidu.com"></form>
    <form action="http://www.baidu.com"></form>
    <form action="http://www.bilibili.com"></form>
    <script>
        // 新增的静态方法 of将值填入对应的数组 返回的是一个新的数组
        var arr = Array.of(1, 2, 3)
        console.log(arr)
        // form 将对应的伪数组转为数组
        var arr = Array.from(document.forms).filter(function (v) {
            return v.action.includes('baidu')
        })//将伪数组变为数组
        console.log(arr)
        // find 查找方法 返回的是值 第一个的值 传入的函数返回的是一个bool类型的值
        // 查找不到返回undefined
        var v = [1, 2, 3, 4].find(function (v, i, arr) {
            return i > 2
        })
        console.log(v) //4
        //findIndex 查找下标的方法 查找不到返回-1
        var i = [1, 2, 3, 4].findIndex(function (v, i, arr) {
            return v < 4
        })
        console.log(i) //0
        console.log([1, 23, 4].fill('a')) //默认start是0 对应的end为length [a,a,a]
        console.log([1, 23, 4].fill('a', 1, 2)) // 包含开始的 不包含的结束的 [1,a,4]
        console.log([1, 2, 3].includes(1))//true 
    </script>

find及findIndex 自定义实现

        function find(callback) {
            if (typeof callback != 'function') {
                throw new Error('参数错误')
            }
            for (var i = 0; i < arr.length; i++) {
                if (callback(arr[i], i, arr)) {
                    return arr[i]
                }
            }
        }
        //findIndex
        function findIndex(callback) {
            if (typeof callback != 'function') {
                throw new Error('参数错误')
            }
            for (var i = 0; i < arr.length; i++) {
                if (callback(arr[i], i, arr)) {
                    return i
                }
            }
            return -1
        }

变量声明（块级作用域）

let 声明普通变量
const 声明常量

let关键词（不允许重复声明存在块级作用域）

        //var 伪全局作用域 进行变量提升
        for (var i = 0; i < 10; i++) {
            setTimeout(function () {
                console.log(i) //打印10个10
            })
        }
        //使用块级作用域
        for (let i = 0; i < 10; i++) {
            setTimeout(function () {
                console.log(i) //打印0-9
            })
        }
        // var a = 1
        // var a = 2
        //数据混乱 为了避免let关键不允许重复声明
        let a = 1 //在每个块变量是单独存在的不允许重复声明

const关键词（声明必须赋值地址不可变对象里面的内容可以更改存在块级作用域不允许重复声明）

        //const关键词 声明是常量 (不能改变的量 地址不可变)
        //声明必须赋值
        const n = 10
        // n = 9 //报错 不可变
        const obj = {
            name:
                'jack'
        }
        // obj = {} //错误的 更改了地址
        obj.name = 'rose'

基础值类型新增

es3就存在的

string
number
boolean
null
undefined

es6新增的

bigInt 大的整型（存在对应的存储不了的数据）
symbol 独一无二数据（没有相同的机器码来实现的）

//产生一个bigInt类型
var bigInt =
BigInt('11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111')
console.log(bigInt)
console.log(11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111)
//产生一个symbol类型
//Symbol 独一无二的类型 机器码
var sym = Symbol('hello')
console.log(sym)
console.log(sym.description)//获取描述
console.log(Symbol() == Symbol())
//一般被当成对象的属性 用于设计的 而不是用于操作的

函数新增

默认参数（指定参数的默认值）
箭头函数（()=>{}）

默认参数

写法

function 函数名(参数=默认值,参数2=默认值){
}

示例

    <script>
        function sum(a, b) {
            console.log(a + b)
        }
        sum(1, 2) //3
        sum(1) //NaN 不想打印NaN而想打印1
        //按照之前的写法
        function sum(a, b) {
            if (!a) {
                a = 0
            }
            if (!b) {
                b = 0
            }
            console.log(a + b)
        }
        //参数越多判断就会越多 所以es6新增了对应的默认参数 通过在形参后赋值来指定默认参数
        function sum(a = 0, b = 0) {
            console.log(a + b)
        }
        console.log(sum()) //0
        console.log(sum(1)) //1 如果传递的参数那么就会覆盖默认参数
        console.log(sum(1, 2)) //3 如果传递的参数那么就会覆盖默认参数
    </script>

箭头函数
标准写法（箭头函数是一个匿名函数）

var fn = (参数1,参数2)=>{
代码块
}

简写

如果参数只有一个可以省略()

//简写 如果参数只有一个那么可以省略对应()
document.querySelector('button').onclick =e=>{
console.log('点击了',e)
}

如果执行代码块只有一行那么可以省略{}

//如果对应的代码只有一行可以省略{}
document.querySelector('button').onclick =e=>console.log('点击了1',e)

如果只有一行需要返回值省略了对应的{} 可以省略return

//如果对应的代码只有一行且需要返回值 可以省略return
// var fn = () =>{return 1}
var fn = () =>1
console.log(fn())

箭头函数的特性

没有this 没有arguments
箭头函数没有原型（prototype）（不能被new）

字面量简写

属性简写（属性值为变量属性值和属性名一致）
函数简写（删除对应的:function）

    <script>
        var name = '张三'
        var age = 18
        //原本写法
        var obj = {
            name: name,
            age: age
        }
        //简写 属性值一定是变量 属性名和属性值一致
        var obj = {
            name,
            age
        }
        //不支持 name:'name'这种简写 属性值不为变量
        console.log(obj)
        //原本写法
        var obj = {
            sayHello: function () {
                console.log('hello')
            }
        }
        //对象中的函数简写
        var obj = {
            sayHello() {
                console.log('hello')
            }
        }
        obj.sayHello()
    </script>

解构赋值

解构的概述就是将对应的对象或者数组解除对应的构造暴露其中的内容。

对象的解构（快速提取对象中的属性根据属性名提取）

基础写法

var {key,key1} = {key:value,key1:value1}

示例

var obj = {name:'jack',age:18}
obj.name
ob.age
//简化写法 使用解构赋值的形式 直接获取里面的name和age
var {name,age} = {name:'jack',age:18}
console.log(name)
console.log(age)

数组解构（根据对应的顺序）

基础写法

var [变量名,变量名1...] = [值,值1]

示例

//数组的解构是对应的顺序的
var [a,b,c] = [1,2,3]
console.log(a)

扩展运算符 ...

可以规定对应的参数不受限制自动将对应的内容封装为一个数组

    <script>
        //接收不限制的参数
        function sum(...args) {
            //自动将对应的数据组装成一个数组
            //args是一个数组
            console.log(args)
            //遍历args数组进行计算
            return args.reduce((prev, current) => prev + current)
        }
        console.log(sum(1, 2, 3, 4, 5, 1, 2, 1, 2, 1))//22
        //数组分割符 , es5的
        var arr = [, , , , ,]
        console.log(arr)
    </script>

打开对应的数组

// 利用...打开对应的数组
var arr = [{name:'张三'},{name:'李四'}]
var newArr = [...arr]
console.log(arr,newArr,newArr == arr)
//俩个数组组成一个数组
var arr1 = [1,2,3]
var arr2 = [4,5,6]
var newArr = arr1.concat(arr2)
console.log(newArr)
var newArr = [...arr1,...arr2] //对应的方法传参里面自动添加,
console.log(...arr1)

打开对应的对象

//利用...来打开对象
var obj = {name:'jack',age:18}
var newObj = {...obj}
console.log(obj,newObj,newObj == obj)

generator函数

他是一个解决异步问题的一个函数他可以将异步代码同步执行

声明方式

function* fn(){
yield 代码片段
}

基础示例

function* fn(){
//分成一个段 断点
yield console.log(1)
yield console.log(2)
yield console.log(3)
yield console.log(4)
yield console.log(5)
}
var g = fn() //返回一个generator
var iter = g.return('a') //结束
console.log(iter) //done 是否完成 value返回的值
// g.throw() //抛出异常
// //next下一个
// g.next()
// g.next()
// g.next()
// g.next()
// g.next()

promise （es7）

解决异步的一个类能解决异步执行问题

ES6的模块化

模块化技术指代的是将对应的功能代码拆分为一个个的模块，完成对应的复用。

require.js的模块化（一个内容要导入必须先导出）

export 导出

//基础导出 一个文件只有一个 默认导出 第一种
export default {
name:
'jack',
sayHi(){
console.log('hello')
}
}
//导出变量的形式 第二种
export const name = 'tom'
export const sayHi = ()=>{console.log('hello')}

import 导入

<!-- 支持es6的写法 -->
<script type="module">
// import 名字 from 路径地址 默认导出的 导入的名字随便写
// import a from './export.js' //第一种导入
// a.sayHi()
// console.log(a.name)
// 导出多个的导入 第二种导入
import {sayHi,name} from './export.js'
sayHi()
console.log(name)

重点：AMD和CMD的区别