ES6的笔记

如果声明的变量的值需要变化就使用 Let
如果这个变量的值不需要变化就使用 Const

Let

1 let具有块级作用域
2 不能声明提升
3 在同一个块级作用域下，不能有重复的声明变量

const

声明常量. 常量：值不能修改的量
1 一定要赋初始值 例如：const A; 这样会报错
2 一帮常量使用大写 例如：const A = 100; 这个c可以大小写
3 常量的值不能修改 例如：给常量的保存的值 重新赋值（重新修改常量的值的指向会报错）
4 块级作用域
5 对于数组和对象的元素进行修改不算做对常量的修改（这种修改数组和对象是指修改其中的 属性，没有改变指向）

变量结构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值

+ 数组的结构赋值写法（参照写法）
    const sisui = [1,23,3,4]
    let ['xfq','fjy','zcj','yq'] = sisui
    console.log(xfq)  打印结果：1
    console.log(fjy)  打印结果：23
    console.log(zcj)  打印结果：3
    console.log(yq)   打印结果：4
+ 对象的解构赋值写法（参照写法）
    const sisui = {
      name:'四岁爱上了她',
      age:21,
      ta:function(){
        console.log('对象的解构赋值：这两种本质上是属于：‘模式匹配’，只要 等号 两边的值相对应，左边的值就会被赋值上相对应的右边的值')
      }
    }
    let {name,age,ta} = sisui
    console.log(name)  打印结果：四岁爱上了她
    console.log(age)   打印结果：21
    console.log(ta)    打印结果：function(){一大段文字}

模板字符串

** ${这里可以写想要写的任何东西，变量的拼接之类的} **

箭头函数

省略掉 function ,在 小括号 后面写 => ,其它照样
1 this 是静态的，this 始终指向 函数声明时所在的作用域下的 this 的值。不会像 var 声明的那样，谁调用就指向谁。 无论使用什么改变this指向的方法都不能改变
2 不能作为构造实例化对象
3 不能使用 arguments 变量
箭头函数适合 与 this 无关的回调。 定时器，数组方法的回调之类的。不适合事件回调，对象的方法之类的。 不适合不代表不能

arguments是什么？？做什么

arguments的作用是保存所有传递给函数的实参，每个函数中的arguments其实是一个伪数组

Es6的继承

ES6里出现class，能很方便的实现继承的实现

ES5实现继承的方法：

• 1. 混入式继承： 遍历父对象成员，添加给 子对象

let fuduixiang = {
  house:{
    fnagzi:'房间',
    id:01
  },
  cart:{
    ceziz:'五环圈',
    id:02
  }
}
let ziduixiang = {
  pengjun:['吃饭','数据','打豆豆']
}
// 1. 混入式继承： 遍历父对象 添加给 子对象
// 特点： 如果 只有一个子对象，则可以使用这个方式继承，多个对象则不行
for(let key in fuduixiang){
  ziduixiang[key] = fuduixiang[key]
}
  console.log(ziduixiang)
// 替换原型继承： 将父对象作为子对象的原型
// 2. 将 父对象 作为 子对象的原型
// 特点： 由于 赋值 的特点，赋值会把原来的值覆盖掉，所有使用这种方式继承会把原先拥有的 原型 覆盖掉
function Son(sisui){
  this.sisui = sisui
}
Son.prototype = fuduixiang
let wsa = new Son(['12','23','34'])
let xfq = new Son(['112','23','34'])
let fjy = new Son(['142','213','34'])
console.log(wsa,xfq,fjy)

// 3. 混入式 + 原型替换式 的继承
// 特点；  遍历父对象的所有成员， 添加给 子对象的原型
function Son(sisui){
  this.sisui = sisui
}

for(let key in fuduixiang){
  Son.prototype[key] = fuduixiang[key]
}

let wsa = new Son(['12','23','34'])
let xfq = new Son(['112','23','34'])
let fjy = new Son(['142','213','34'])
console.log(wsa,xfq,fjy)

将 字符串或数字转数组的方法

• Array.of(‘四岁’,’'8)

const sisui = Array.of('四岁','8',78)
    console.log(sisui,sisui.length)

将 数组转字符串的方法

• 数组.toString()
• 数组.join()

let colors = ['res','asda','asjdb']
    console.log(colors.toString())
    console.log(colors.join())s

rest参数

用于获取函数的实参，作用跟 ES5里面的 arguments 一样

// ES5 获取实参的方式
  function data(){
    console.log(arguments)  //打印结果：伪数组 Arguments(3)['四岁','xfq','fjy']
  }
  data('四岁','xfq','fjy',)
// ES6 获取实参的方法 rest    注意：rest 参数必须放到最后面，
  function data(...arges){
    console.log(arges)  //打印结果：['四岁','xfq','fjy']
  }
  data('四岁','xfq','fjy',)

扩展运算符 …

[…] 将 [数组]转换为 逗号（,） 分隔的 [参数序列]。 由一个参数序列变成多个参数序列

• 数组合并。 把多个数组合并到一个新数组里面

• 数组的克隆
• 将伪数组转换成 真正的数组

for…in 和 for…of 循环的区别

• for in : 遍历方法，可以遍历对象和数组
• for on : 遍历方法，只能遍历数组
  语法：

for(var key in obj){ for(var key of obj){
// key 是 对应的 下标 // key 是 对应的 值
} }

const obj = { name: '林三心', age: 22, gender: '男' }
const arr = [1, 2, 3, 4, 5]
for(let key of obj) {
  console.log(key)  // name age gender
  console.log(obj)
}
for(let key in arr){
  console.log(key)  // 0 1 2 3 4
  console.log(arr)
}

Promise

实例化 Promise 对象
cosnt p = new Promise(function(resolve,reject){
代码执行块。。。
//成功 resolve
resolve()
//失败 reject
reject
}).then(function(e){
成功的回调打印
},function(e){
失败的回调打印
})

Promise封装一个 Ajax请求

• 1. 原生的 ajax 写法

8// 原生的 AJAX 的写法 
// 1. 创建对象
cosnt xhr = new XMLHttpRequset();
// 2. 绑定事件，处理响应结果
xhr.onreadystatechange = function(){
  //判断请求进程
  if(xhr.readyState === 4){
    // 判断响应状态码  200~299 成功范围
    if(xhr.status >= 200 %% xhr.status < 300>){
      //表示成功
      console.log(xhr.response)
    } else {
      //表示失败
      console.log(xhr.status)
    }
  }
}
// 3. 初始化
xhr.open('GET','请求的网络地址')
// 4. 发送
xhr.send()

• 2. Promise 封装 ajax 的写法

const p = new Promise((resolve,reject)=>{
  // 1. 创建对象
  cosnt xhr = new XMLHttpRequset();
  // 2. 绑定事件，处理响应结果
  xhr.onreadystatechange = function(){
    //判断请求进程
    if(xhr.readyState === 4){
      // 判断响应状态码  200~299 成功范围
      if(xhr.status >= 200 %% xhr.status < 300>){
        //表示成功
       resolve(xhr.response)
      } else {
        //表示失败
       reject(xhr.status)
      }
    }
  }
}).then(function(value){
     console.log(value)
},function(reason){
   console.log(reason)
})

set 集合

set里面存储的内容都是不重复的，
方法：

• add(val) 添加某值
• delete(val) 删除某值
• has(val) 检测Set的成员是否由这个值，返回 true 和 false。 作用和数组的 find 一样
• clear(val) 清除 集合 内所有存储的内容
• size(val) Set集合里面存储的内容个数。 和 length 一样

注意: 使用 Set 来将 数组去重，由于 set是个集合，将数组放进 set 里面，此时，数组变成集合，返回的也是集合，需要用 数组符号[] 来包裹住并且把它展开… new Set(要被去重的数组) ，在进行赋值给左边的变量

//数组去重
let sisui = [1,2,3,1,2,3,4,5,6,2,3,5]
let xfq = [...new Set(sisui)]
console.log(xfq)    // [1，2，3，4，5，6]

数组方法

方法：

• push 在末端添加一个元素
• pop 删除数组最后一个元素
• unshift 在首端添加一个元素
• shift 删除数组首个元素
• splice 删除数组某个未知上的元素 ** 传 3 个参数，参数一: 从哪开始删除。参数二：删除几个（如果是 0 的话，就意味着传入的第三个参数为新增的）。 参数三：新增的参数的值 **
• concat 连接多个数组，返回新数组
• join 将 数组里的逗号转换成你传入的各种符号，常用来转成 字符串数据
• forEach 遍历数组
• reverse 翻转数组
• slice 提取指定的 一个或多个 元素
• indexOf 从前往后匹配，获得 传入的元素 在数组中第一次出现的 下标。 没有的话返回**-1**
• lastIndexOf 作用和 indexOf 一样，不过是 从后往前 查找
• Array.isArray 判断传入的参数是不是数组
• sort 数组排序

带回调函数的数组方法

|方法名|格式|解释|返回值|是否影响原数组|
|:—😐:—😐
|forEach|数组变量.forEach((val,index)=>{})|遍历|无|否|
|map|数组变量.map((val,index)=>{return 值})|映射，形成一个新数组|新数组|否|
|filter|数组变量.filter((val,index)=>{return 条件})|过滤|新数组|否|
|find|数组变量.find((val,index)=>{return 条件})|查找元素|元素|否|
|findIndex|数组变量.findIndex((val,index)=>{return 条件})|查找索引|索引|否|
|reduce|数组变量.reduce((sum,val,index)=>{return 下个sum初始值})|累计运算，算总和之类的|累积结果|否|
|every|数组变量.every((val,index)=>{return 条件})|测试所有|布尔值|否|
|some|数组变量.some((val,index)=>{return 条件})|测试至少一个，检测到了就返回|布尔值|否|

能修改原数组的方法

方法名	格式	解释	返回值	是否影响原数组
push	数组变量.push(val)	末尾插入	新数组长度	是
pop	数组变量.pop()	末尾删除	删除的元素	是
unshift	数组变量.unshift(val)	头部插入	新数组长度	是
shift	数组变量.shift()	头部删除	删除的元素	是
reverse	数组变量.reverse()	翻转数组	翻转后的数组	是
splice	数组变量.splice(起始，个数)	删除/新增元素	被删除的元素形成的数组	是
sort	数组变量.sort()	排序	原数组	是

不能修改原数组的方法

|方法名|格式|解释|返回值|是否影响原数组|
|:—😐:—😐
|slice|数组变量.slice(起始，终止)|截取数组（不包含终止位置）|截取后的数组|否|
|join|数组变量.slice(符号)|用传入的符号来拼接每一项|字符串|否|
|indexOf|数组变量.indexOf(val)|查找值|下标|否|
|lastindexOf|数组变量.lastindexOf(val)|查找值(从后开始查找)|下标|否|
|flat|数组变量.flat()|铺平（数组降维，把多维数组降维成一维数组）|新数组|否|

async 和 await

async 和 await 在一起使用可以让异步代码像同步代码一样

函数的 this 的指向

调用方式	this指向
普通函数调用	window
构造函数调用	实例对象，原型对象里面的方法也只向实例对象
对象方法调用	该方法所属对象
事件绑定方法	绑定事件对象
定时器函数	window
立即执行函数	window

改变 this 指向的方法

call()方法

call() 第一个参数是表示要将 this 指向哪里

call()作用：1）可以调用函数，实现继承 2）可以改变 this 指向
语法：func.call(thisObj,arg1,arg2,arg3…)

apply()方法

apply() 第一个参数是便是this指向哪里，后面的参数需要以数组形式传入（数组必须是伪数组），返回的是 字符串，不是数组

apply()作用：1）可以调用函数 2）可以改变 this 指向
语法：func.apply(thisObj,[argArray])

bind()方法

bind()作用： 1）不会调用原来的函数 2）改变 this 指向

// bind()需要将原函数赋给一个新的变量，然后再由新变量调用，那样就不会改变原函数  （常用这种方法改变 this 指向）
function fn(a,b){
  console.log(this)
}
var f = fn.bind(需要指向哪里,参数一，参数二)
f()

call(),apply(),bind()总结

• 相同点: 都可以改变函数内部 this 的指向
• 不同点：
  • call()和apply() 会调用函数，并且改变函数內部 this 指向
  • call()和apply() 传递的参数不一样。call()传递 参数一，参数二…形式，apply()传递的参数必须以伪数组方式[参数一，参数二]
  • bind()不会调用函数，会把 原函数 赋值给一个新的变量，然后通过调用新变量来改变参数
• 主要应用场景：
  • call()常用来继承
  • apply()经常跟数组有关系，
  • bind()比如改变定时器内部 this 指向

git常用指令

• 创建新文件夹，然后执行 git init 会创建新的 git 仓库
• 添加文件或修改文件到缓存区（暂存区）执行 git add
• 将暂存区的文件 提交到本地仓库（此时还没提交到远端仓库） 执行 git commit -m’提交的信息’
• 将本地仓库和远端仓库绑定 执行 git remote add origin 远程仓库地址
• 将提交的文件改动同步推送到远程仓库 执行 git push origin master

量来改变参数

• 主要应用场景：
  • call()常用来继承
  • apply()经常跟数组有关系，
  • bind()比如改变定时器内部 this 指向

git常用指令

• 创建新文件夹，然后执行 git init 会创建新的 git 仓库
• 添加文件或修改文件到缓存区（暂存区）执行 git add
• 将暂存区的文件 提交到本地仓库（此时还没提交到远端仓库） 执行 git commit -m’提交的信息’
• 将本地仓库和远端仓库绑定 执行 git remote add origin 远程仓库地址
• 将提交的文件改动同步推送到远程仓库 执行 git push origin master