javascript es6

尧

2023-03-09

javascript

618

es6

javascript组成

ECMAScript(核心)
扩展–>浏览器端
- DOM
- BOM
扩展–>服务器端
- NODEJS

数组函数的扩展

Array.prototype.indexOf(value)
- 返回value在Array中第一次出现的下标
Array.prototype.lastIndexOf(value)
- 返回value在Array中第一次出现的下标
Array.prototype.forEach(function(item, index, arr){})
- 遍历整个数组
Array.prototype.map(function(item, index){})
- 遍历整个数组并将每个值按照回调函数的return的结果进行修改,返回值为修改好的数组
Array.prototype.filter(function(item, index){})
- 遍历整个数组并将每个值按照回调函数的return的结果进行过滤,不满足则丢弃,返回值为修改好的数组

函数的扩展

Function.prototype.bind(obj)
- 将函数内的this值修改为obj并将修改好的函数返回，常用作为回调函数
Function.prototype.call(obj, para1, para2…)
- 立即调用函数并将函数内的this值修改为obj并将修改好的函数返回, 与apply区别在于参数不同
Function.prototype.apply(obj, [para1, para2…])
- 立即调用函数并将函数内的this值修改为obj并将修改好的函数返回
  3.let和const

let

作用与var类似, 用于声明变量
特点：
- 在块作用域里有效
- 不能重复声明
- 不会预处理, 不会发生提升
应用：
- 循环遍历加监听
- 取代var是趋势

const

特点：
- 值不能修改
- 其余与let相同
应用：
- 保存不需要修改的数据

结构赋值

从对象或者数组中提取数据并将其赋值给变量(多个)
给对象解构赋值
- let {a,b} = {a: 'bbb', b: 'ccc'}
- 按照对象名来进行取值
给数组解构赋值
- let [a,b] = [1, 'aaaa']
- 按照下标顺序赋值
用途：
- 给多个参数赋值
应用给函数形参与实参

<script type="test/javascript">
//ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值
//解构赋值
//1数组的结构
const F=['你','好']
let [ni,hao]=F
console.log(ni)
console.log(hao)
//2对象的结构
 const zhap={
	 name:'篮球'
 }
 let {name}=zhap;
 console.log(name)
</script>

模板字符串

简化字符串的拼接
使用``对字符串进行拼接
变量的部分使用${xxx}代替

<script type="text/javascript">
    let obj = {
        name : 'anverson',
        age : 41
    };
    console.log('我叫:' + obj.name + ', 我的年龄是：' + obj.age);
    console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`);
</script>

对象简写

对象的简写

属性值与属性名相同时可以只写属性名
函数的function可以省略

<script type="text/javascript">
    let x = 3;
    let y = 5;
    //普通额写法
//    let obj = {
//        x : x,
//        y : y,
//        getPoint : function () {
//            return this.x + this.y
//        }
//    };
    //简化的写法
    let obj = {
        x,
        y,
        getPoint(){
            return this.x
        }
    };
    console.log(obj, obj.getPoint());

	//ES6中允许在大括号里面,直接写入变量和函数,作为对象的属性和方法
	let name='mm'
	let chage=function(){
		console.log("特别好")
	}
	const school={
		name,
		chage,
		improve(){
			console.log("我们可以提高你的技能")
		}
	}
</script>

箭头函数

不能作为构建实例化对象
不能使用arguments变量

<script type="text/javascript">
 //ES6允许使用箭头函数 =>
//  声明一个函数
 let f=function f(){
  console.log("一般函数")
 }
// 箭头函数
let jia=()=>{
    console.log("箭头函数")
}
// 调用函数
jia()
//this是静态的，this始终指向函数声明时所在作用域下的this的值
function getName(){
    console.log(this.name)
}
let getName2=()=>{
    console.log(this.name)
}
//设置window对象的name属性
window.name='你好'
const school={
    name:"nihao"
}
//直接调用
getName();
getName2()
//call方法调用
getName.call(school);
getName2.call(school)
// 箭头函数的简写
//   当只有一个参数的时候，省略小括号
let t= n =>{
    return n+1
}
console.log(t(1))
//省略花括号，当代码体只有一句语句的时候,此时return必须省略，而且语句的执行结果就是函数的返回值
let pow =(n)=> n*n;
console.log(pow(2))
</script>

特点：
- 简洁
- 箭头函数的this与谁调用无关，而是定义时所处对象的this
  - 扩展理解
    1. 先看箭头函数外层有没有函数，有则为普通函数的this，没有就是window
    2. 如果外层也是箭头函数继续重复第一步的操作

点点点（…）扩展运算符

let e=['我的','你的','好']
//声明一个函数
function c(){
console.log(arguments)
}
c(...e)
const r=['2','3']
//数组的合并
const er=[...e,...r]
console.log(er)


//当可变参数前也声明了形参时会自动从自己里剔除相应数量形参
function foo(a, ...value){
    console.log(value)
}
foo(1,2,3,4,5)  //2,3,4,5

扩展用法

let a = [1,6]
let b = [2,3,4,5]
a = [1, ...b, 6]
console.log(a)  //[1,2,3,4,5,6]
9.形参默认值
//形参初始值，具有默认参数一般靠后
 function add(a,b,c=10){
       return a+b+c
   }
   let result=add(1,2)
   console.log(result) //13

promise对象

promise对象: 代表了将来某个将要发生的事件(通常是异步操作)
有了promise对象，可以将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数
ES6的Promise是个构造函数，用来生成promise实例
参数函数resolve的参数可以是另一个promise，此时当前promise会等待另一个promise状态发生改变时才继续执行
promise共有三个状态：
- pendding 初始化状态
- fullfilled 成功状态
- rejected 失败状态
基本步骤

// 1. 创建promise的实例
let url = ''
function getNews(url){
    let xmlRequest = new XMLHttpRequest(url)
    let promise = new Promise((resolve, reject)=>{
    // promise处于初始化状态
        xmlRequest.onreadystatechange = ()=>{
            if(xmlRequest.readystate === 4){
                if(xmlRequest.state === 200){
                    xmlRequest.open('get', url)
                    console.log(xmlRequest.responseText)
                    //  2. 指定进入成功状态时的回调函数的逻辑
                    resolve(xmlRequest.responseText)
                }else{
                    //  3. 指定进入失败状态时的回调函数的逻辑
                    reject('失败了')
                }
            }
        }
    })
    // 返回promise以创建下一条链式调用
    return promise
}
getNews(url)
    .then((data)=>{
        // fullfilled状态，步骤2中的回调函数
        let {newUrl} = JSON.parse(data)
    // 返回promise以继续创建下一条链式调用
        return getNews(newUrl)  // 重新创建了新的promise来重复执行函数getNews
    }, (error)=>{
        // rejected状态，步骤3中的回调函数
        console.log(error)
    })
    .then((data)=>{
        // fullfilled状态，步骤2中的回调函数
        console.log('完成')
    }, (error)=>{
        // rejected状态，步骤3中的回调函数
        console.log(error)
    })
    .catch(error=>{ //通常不会给then指定第二个错误回调，而是使用catch方法来捕获错误
        console.log(error)
    })
    .finally(()=>{}) //在执行完then或者catch回调后就执行，本质两者回调中的逻辑交集，发布于ES8

Promise来封装ajax请求操作

   //promise进行封装
const p=new Promise(
 (resovle,reject)=>{
//1、创建对象
let xhr=new XMLHttpRequest()
//2、初始化
xhr.open("GET","https://api.apiopen.top/getJoke")
// 3、发送
xhr.send();
// 4、绑定事件处理响应结果
//promise进行封装
const p=new Promise(
 (resovle,reject)=>{

})
xhr.onreadystatechange=function(){
  //判断
  if(xhr.readyState===4){
    // 判断状态码200到299
    if(xhr.status>=200&&xhr.status<300){
      //表示成功
     resovle(xhr.response)
    }else{
      //失败
      reject(xhr.response)
    }
  }
}
})
//指定回调
p.then(function(value){
   console.log(value)
},function(reason){
  console.log(reason)
})
</script>

symbol

在ES5中由于对象的属性名是个字符串，可能造成命名冲突

比如想给别人创建的对象添加新属性时，新属性名可能与原属性名冲突，此时可用symbol解决
在ES6中新增加的基本类型
表示一个独一无二的值，无法与其他值进行运算包括拼串
创建时不使用new运算符，因为它不是对象而是一个原始类型的值
不会被for in 与for of遍历到

let symbol = Symbol()
console.log(symbol) //symbol()
//可以传参作为它的标识符
let symbol1 = Symbol('one')
console.log(symbol) //symbol(one)
//如果传入参数是一个对象则调用toString方法来作为标识符
let obj = {
    toString(){
        return 'abc'
    }
}
let symbol2 = Symbol(obj)
console.log(symbol) //symbol(abc)

iterator遍历器

是一个接口机制，为各种不同的数据结构提供统一的访问机制
作用：
- 为各种数据结构提供一种统一简洁的接口
- 使得数据结构能按一定次序排列
- ES6创造一种新的遍历方式for of，带有iterator接口的数据才能被遍历
工作原理：
- 创建一个指针对象(遍历器对象)，指向数据结构的起始位置
- 调用next方法，指针自动指向数据结构的第一个成员
- 继续调用next方法，指针指向下一个成员直到指向最后一个成员
- 每调用一个next方法返回一个对象包含value与done
  - value表示当前的值，done表示是否遍历完成，布尔值
  - 当遍历结束时(最后一个值的next)value为undefined，done返回true

//模拟遍历器接口
let arr = [1,2,3,4,5]
let iterator = (arr)=>{
    let index = 0
    return index >= arr.length?{value: arr[index], done: false}:{value: undefined, done: true}
}
* 将iterator接口部署到指定数据结构上，可以使用for of遍历
* 数组，字符串，arguments，map容器，set容器自带iterator接口
let arr = [1,2,3,4,5]
for(let i of arr){
    console.log(i)
}
//1,2,3,4,5
let str = 'abcdefg'
for(let i of str){
    console.log(i)
}
//a,b,c,d,f,g
function foo(a,b,c,d){
    for(let i of arguments){
        console.log(i)
    }
}
foo(1,2,3,4)//1,2,3,4

对对象使用for of时会调用对象内Symbol.iterator的函数

//给对象添加模拟遍历器
obj = {
    [Symbol.iterator](){ 
        return { index: 0,
                next:function(){
                return this.index<=3?{value: this.index++, done: false}:{value: undefined, done: true}
        }}
    }
}

async函数

ES7语法
真正意义上解决异步回调，同步流程表达异步操作
本质是generator的语法糖
async函数返回值为promise

async function foo(){
    await 异步操作
    await 异步操作
}

例子

function getNews(url){
    let promise = new Promise((resolve, reject)=>{
        if(url === 'aaa'){
            resolve(url)
        }else{
            //参数函数的执行不会终止后续逻辑但是由于状态只会转变一次，因此回调需要二选一
            resolve(false)  //此种回调可以让失败的逻辑交给async函数本身处理
            reject('普通函数失败')  //此种回调可以让失败逻辑交给async函数的then方法来执行
        }
    })
    return promise
}

async function test(){
    let result = await getNews('bbb')   //await后的函数只有promise为成功状态才会继续执行
    //此处的if判断是建立在上个函数调用resolve的基础上
    if(result===false){ //可以借用给resolve传递false来表示promise实际为fullfilled状态
        console.log('async函数失败') //针对fullfilled状态需要执行的逻辑
    }else{
        console.log(result) //成功状态执行的逻辑
    }
    result = await getNews('aaa')
    console.log(result)
    return 'async函数成功'
}
//处理异步执行过程中发生的成功或者失败的逻辑
test().then((data)=>{   
    console.log(data)   //成功执行此处，data的值为async函数return的值
},(error)=>{
    console.log(error)  //失败执行此处
})

class

通过class定义类/实现类的继承
在类中使用constructor来实现类的属性继承
使用函数简写的形式给类添加一个方法
子类使用extends继承父类
子类在constructor中使用super来调用父类继承的属性
子类可以通过父类的方法重写来实现调用自己的方法

class Person{
    constructor(name, age){ //属性继承
        this.name = name
        this.age = age
    }
    getName(){  //创建父类方法
        console.log(this.name, this.age)
    }
}
class SalaryPerson extends Person{
    constructor(name, age, salary){
        super(name, age)    //继承父类属性
        this.salary = salary
    }
    getName(){  //重写父类方法
        console.log(this.name, this.age, this.salary)
    }
}
let aPerson = new SalaryPerson('aa', 16,2000)
console.log(aPerson)

扩展

字符串扩展

str.includes(str) 判断是否包含指定字符串
str.startWith(str) 判断是否以指定字符串开头
str.endWith(str) 判断是否以指定字符串结尾
str.repeat(count) 返回重复了指定次数的字符串

数值扩展

二进制与八进制表示法：0b开头表示二进制，0o表示八进制
number.isFinite(i) 判断是否是有限数
number.isNaN(i) 判断是否是NaN
number.parseInt(str) 字符串转化为整数
number.isInteger(i) 判断是否是整数
Math.trunc(i) 小数转化为整数

数组对象的扩展

Array.from(v) 将伪数组转化为真数组
Array.of(v1,v2,v3) 将一系列数据转化为数组
Array.find(function(item, index, arr){}) 找到满足条件的第一个值

对象的扩展

Object.is(v1, v2) 判断两个数据是否相等，底层是判断字符串
Object.assign(target, source, [source, source]) 将源对象的属性添加到目标对象上
从ES6开始__proto__可以被操作

拷贝

拷贝数据：
- 基本数据类型
  - 拷贝后生成一份新的数据，修改新数据不会改变原数据的值
- 对象/数组
  - 拷贝后是传递原数据的引用地址，修改新数据会改变原数据的值
深拷贝：
- 拷贝的不是引用地址
浅拷贝：
- 拷贝的是引用地址
几种拷贝方法：
1. 直接赋值浅拷贝
2. Object.assign() 浅拷贝
3. Array.prototype.concat() 浅拷贝
4. Array.prototype.slice() 浅拷贝
5. JSON.parse(JSON.stringify()) 深拷贝, 但是内容中不能包括函数，否则是null
深拷贝的实现要求
- 拷贝的内容里不能有对象/数组
深拷贝的实现

function clone(target){
    let value = null
    if(checkedType(target) === 'Object'){
        value = {}  //如果形参为对象则创建对象字面量
    }else if(checkedType(target) === 'Array'){
        value = []  //如果形参为数组则创建数组字面量
    }else{
        return target
    }
    for(let i in target){   //遍历对象或者数组
        value[i] = arguments.callee(target[i])  //递归调用判断对象或者数组中的值
    }
    return value
    function checkedType(obj){
        return Object.prototype.toString.call(obj).slice(8, -1) //调用原型上纯净的方法
    }
}

set与map容器

set容器

无序的不可重复的多个value的集合体
Set(array) 将数组转化为set容器
set.add()
set.delete()
set.has()
set.clear()

可用来解决数组内数据重复问题

map容器

无序的key不重复的多个key-value的集合体
Map(array) 将两维数组转化为map容器
map.set(key, value)
map.get(key)
map.delete(key)
map.has(key)
map.clear()
map.size

ES7新增

指数运算符**
Array.prototype.includes(value) 判断某个值是否在数组内

模块化

导入

1.导入一个没有导出任何接口的文件（js或者其他类型文件）
直接 import 引入文件即可，相当于文件在引入的位置处运行（模块化，变量不会互相污染）

import './assets/a.css'
import './assets/a.js'

引入第三方模块（下载在node_modules中的模块）
引入时直接写文件名即可，如果导出接口需要使用变量接收

import 变量名 from '包名'
import Vue from 'vue'
import VueRouter from 'vue-router'

3.在另一个文件中导入

    1 全部引入
        import * as obj from './assets/c.js'
          obj是对象 属性 就是 模块中所有的接口名
    2 按需引入  
        import { a, b, fn } from './assets/c.js' 利用对象的结构赋值

自定义模块导入导出

注意：自定义的模块即使同一目录也一定要加 ./

定义一个文件导出多个接口
- export 多次导出

    // a.js
    export const a = 10
    export const b = [1, 2, 3]
    export const fn = () => {
      console.log(111)
    }
 
  - export 统一导出
  
    const a = 10
    const b = [1, 2, 3]
    const fn = () => {
      console.log(111)
    }
 
    export {
      a,
      b,
      fn
    }

导出默认值

	export defualt 值
    // eg
    export default [1, 2, 3, 4]

导入

    直接import时声明变量接收值 import arr from './js/d'

注意：一个文件只能出现一次 export default