git-es6-promisem面试

git

工作区暂存区仓库区

git config --global user.name 'xxx'
git config --global user.email 'xxx'

验证是否配置成功

输入命令： git config --list
在 c:/用户/用户名下有 .gitconfig文件，存放的就是git配置的用户信息

新项目git管理步骤

初始化 git init 一个项目只需要初始化一次
编写代码----工作区
提交到暂存区 git add .
提交到仓库区，生成一个版本 git commit -m 版本描述
git status 查看文件的状态

.Git命令

init 初始化

git  init

add 提交到暂存区

git add  .   把项目目录下所有文件都提交到暂存区
git  add 文件名  把指定的文件提交到暂存区

commit 提交到仓库区

每提交一次，就生成一个版本

git  commit -m  版本描述

status 查看状态

绿色表示文件上传到暂存区红色文件在工作区
nothing to commit, working tree clean 表示工作区是空的，所有文件都已提交到仓库区

git  status

log 查看版本号

git log    版本详细信息
git  log  --oneline  简洁的版本信息

reset --hard 切换版本

git  reset  --hard  版本号

reflog 查看所有版本号

git reflog

文件忽略

(1)介绍：

对于无需使用git进行管理的文件或文件夹使用此文件进行配置

(2)使用步骤

在项目文件夹下创建文件 .gitignore
在该文件里配置信息

(3)常用配置规则：

/git-demo1/ 过滤整个文件夹
*.txt 过滤所有.txt文件
/git-demo1/a.html 过滤某个具体文件

分支相关命令

branch 查看所有分支

git branch

branch 分支名创建分支

git branch 分支名

checkout 切换分支

git checkout 分支名

merge 合并分支

git merge 分支名

项目使用分支的步骤

新的项目需要初始化 git init
提交到暂存区
提交到仓库区，生成第一个版本，生成master主分支
根据需要创建其他分支 git branch 分支名
切换分支 git checkout 分支名hong
写代码
提交到暂存区
提交到仓库区
切换到主分支 master, hong分支写的代码没有
把hong分支的代码合并到master git merge hong

推送到远程仓库

第一种

git  push  远程仓库地址  分支名

第二种

起别名：  git  remote add  别名 远程仓库地址
查看是否起成功：  git  remote -v
提交 ：   git  push  别名  分支名

第三种

git push -u  别名/远程仓库地址  分支名-u  可以记录本次的远程仓库地址和分支名，后期再提交时只需要 git  push即可

克隆和同步远程仓库

电脑上没有远程仓库内容，需要克隆下来
```
git clone 远程仓库地址
```
如果电脑上有该项目，需要更新
- 在项目目录下打开git , 输入git pull命令

总结

remote add 添加远程仓库别名

git  remote  add  别名  远程仓库地址

remote -v 查看别名

git  remote -v

remote rm 删除别名

git remote rm  别名

push 提交到远程仓库

git push  远程仓库地址  分支名git push  别名  分支名git push  -u  别名  分支名
后边的提交只需要  git push  即可

clone 下载一个新的项目到本地

git  clone 远程仓库地址

pull 更新本地的项目

git  pull

工作区暂存区仓库区

git init 初始化 git add . 上传到暂存区 git commit -m 上传到仓库区

git log 查看版本信息 git log --online 简洁的版本信息

git reset --hard banbenhao切换版本号

git reflog 查看所有版本信息

分支

git branch查看分支

git branch 分支名创建分支

git checkout 分支名切换分支

git merge 分支名合并分支

推送到远程仓库

git push 远程仓库地址分支名

起别名

git remote add 别名仓库地址

git remote -v 查看别名 git remote rm 别名删除别名 git push 别名分支名用别名提交

git push -u 别名/远程仓库地址分支名

-u 记录本次的远程仓库地址和分支名后期只要git push

es6

let和const

ES6 新增了let命令，用来声明变量。

ES6新增了const命令用来声明一个只读的常量。

1.let命令

(1) 基础用法

和var语法一样

let 变量名;
let 变量名 = 值；
let 变量名，变量名；

(2) let 特点

不存在变量提升，必须先声明后使用
块级作用域
同一作用域不能重复声明
暂时性死区

代码案例：

 // 1、 let 块级作用域   var 函数作用域let a = 10; //全局if (true) {let b = 20; //局部}// console.log(b) // b is not definedfor (let i = 0; i < 3; i++) {let c = 30//局部}function fn() {let d = 40;//局部}fn(){let e = 50; {console.log(e)}}// console.log(e)// 2.var 可重复声明  let 同一作用域不能重复声明let aa = 10;// let aa = 'apple';  //Identifier 'aa' has already been declared{let aa = 'apple'}// 3.var有声明提升，let 没有，必须先声明后使用// console.log(aaa) //Cannot access 'aaa' before initializationlet aaa = 100;// 4.暂时性死区let bbb = 200; {console.log(bbb)  //Cannot access 'bbb' before initializationlet bbb = 'banana';}

☆(3) let和循环

代码案例：

        // es5 实现 点哪个就获取相对应下标var btn = document.querySelectorAll('button');/*for (var i = 0; i < btn.length; i++) {//   function fn(a) {//      btn[a].onclick = function() {//          console.log(a)//      }//  }//  fn(i) (function(a) {btn[a].onclick = function() {console.log(a)}})(i)}*/// es6 for (let i = 0; i < btn.length; i++) {btn[i].onclick = function() {console.log(i)}}

2.const命令

用来声明常量

(1) 基础用法

一般起常量名用大写

(2)const特点

一旦声明必须赋值
常量的值不能修改，引用类型除外
块级作用域，没有声明提升，不能重复声明，有暂时性死区

代码案例：

  // 1.常量后期基本数据类型不能修改,但是复杂数据类型可以修改const A = 'apple';// A = '苹果'console.log(A)const ARR = [10, 20, 30];ARR[0] = 100;console.log(ARR)// 2.常量声明必须赋值// const B; //Missing initializer in const declaration// console.log(B)// 3.块级作用域{const C = 30;console.log(C)}// console.log(C) //C is not defined// 4.没有声明提升// console.log(D) //Cannot access 'D' before initializationconst D = 10;// 5.同一作用域不能重复声明// const D = 100; // 6.暂时性死区{// console.log(D) //: Cannot access 'D' before initializationconst D = 100;}

数据类型和数据结构：

数据类型：字符串数组对象 Symbol

数据结构：Set Map

1. 字符串

★(1) 模板字符串

基础用法

用反引号括起来，中间的变量用${变量名}

代码案例：

// es5  字符串拼接let name = '夏明';let age = 30;console.log('我叫' + name + '，今年' + age + '岁');// es6 模板字符串console.log(`我叫${name},今年${age}岁`)// 表达式console.log(`我叫${name},今年${age+1}岁`)console.log(`4<5 是 ${4<5?'真':'假'}`)// 对象属性let obj = {sex: '男'}console.log(`我是${obj.sex}`)// 函数调用function fn() {return 'hahha'}console.log(`我是函数结果: ${fn()}`)

优点

相对于es5字符串拼接比较简洁，用反引号`表示，里面的变量用${}包起来就可以实现
模板字符串可换行
${}中嵌入的内容可以写js语句

★(2) 新增方法

startsWith

语法：字符串.startsWith( 参数字符 )

描述：参数字符串是否在原字符串的头部

endsWith

语法：字符串.endsWith( 参数字符 )

描述：参数字符串是否在原字符串的尾部

repeat

语法：字符串.repeat( num )

描述：返回一个新字符串，表示将原字符串重复n次

padStart

语法：字符串.padStart( 目标长度，填充的字符 )

描述：字符串头部补全

padEnd

语法：字符串.padEnd( 目标长度，填充的字符 )

描述：字符串尾部补全

代码案例：

       let str = '/login?username=张三';// 判断某个字符串是否以**开头console.log(str.startsWith('/index'));// 是否以***结尾let str1 = './img/1.jpg';console.log(str1.endsWith('.png'))// 字符串重复n次console.log(str1.repeat(3))let str2 = '5';// 字符串头部补全console.log(str2.padStart(2, '0'))// 字符串尾部补全console.log(str2.padEnd(2, '1'))

2. 数组

新增方法

Array.of

语法：Array.of( …args )

作用：实例化数组

Array.from

语法：Array.from( arrayLike )

作用：把伪数组转换成数组

find

语法：数组.find((item,index,arr)=>{return 条件})

作用：返回的是第一个符合条件的值

findIndex

语法：数组.findIndex((item,index,arr)=>{return 条件})

作用：返回的是第一个符合条件的下标索引

includes

语法：数组.includes(某个元素)

作用：判断某个元素是否存在，存在返回true，不存在返回false

 // es5 let arr = new Array(10, 20, 30);console.log(arr)let arr1 = new Array(5);console.log(arr1)// es6  实例化数组let arr2 = Array.of(10, 20, 30);console.log(arr2)let arr3 = Array.of(10);console.log(arr3)// 伪数组转数组let obj = {'0': 'haha','1': 'heihei','length': 2}let arr4 = Array.from(obj)console.log(Array.isArray(arr4))let btn = document.querySelectorAll('button');console.log(Array.isArray(btn))console.log(Array.from(btn))// 查找符合条件的第一个值,没有符合条件的返回undefinedlet arr5 = [10, 20, 30];let s = arr5.find(function(item, index, arr) {// console.log(index, item, arr)return item > 150})console.log(s)// 查找符合条件的第一个值的下标,没有符合条件的返回 -1let s1 = arr5.findIndex(function(item, index, arr) {// console.log(item, index, arr)return item > 200})console.log(s1)// 判断某个数组是否包含某项let arr6 = ['apple', 'haha', 'heihie'];console.log(arr6.includes('hello'))let str = 'hello,world';console.log(str.includes('orr'))

★3. 对象

对象（object）是 JavaScript 最重要的数据类型。ES6 对它进行了重大升级，包括（数据结构本身的改变和Object对象的新增方法）

(1) 对象属性和方法简写

对象属性名和属性值的变量名一致，可省写
方法可省略冒号和function

代码案例：

 // es6简写let obj1 = {name,age: 30,eat() {console.log('吃吃吃')}}console.log(obj, obj1)obj.eat();obj1.eat();

(2) 属性名表达式

可以是变量，字符串，数字，表达式

代码案例：

 // 属性名表达式let a = 'apple';let obj2 = {[a]: 10,[2 + 5]: '运算',[3 > 4 ? 'haha' : 'hiehie']: '三木',10: 'haha'}console.log(obj2.apple)console.log(obj2[a])console.log(obj2['apple'])console.log(obj2[7]) //属性名是数字时获取不能以点的形式获取

(3) 新增方法

Object.assign

语法： Object.assign( target,source1,source2,… )

描述：对象的合并( 浅拷贝 )，将源对象（source），复制到目标对象 ( target )

Object.keys

语法：Object.keys( object )

描述：返回一个数组，成员是参数对象自身的属性的键名

Object.values

语法：Object.values( object )

描述：返回一个数组，成员是参数对象自身的属性的键值

JSON.parse

语法：JSON.parse( jsonstr)

描述：把json字符串转换成js对象

JSON.stringify

语法：JSON.stringify( object )

描述：把js对象转换成json字符串

json的两个方法实现深拷贝

let obj = {name: '张三',age: 18}let obj1 = {sex: '男',address: '北京',score: [10, 20, 30]}// 对象合并let s = Object.assign(obj, obj1);console.log(s, obj)// 对象浅拷贝let newobj = Object.assign({}, obj, obj1);obj1.score[0] = 100;obj1.sex = '女';console.log(newobj, obj1)// 获取对象属性名的集合console.log(Object.keys(obj1)) //['sex', 'address', 'score']// 获取对象属性值的集合console.log(Object.values(obj1)) //['女', '北京', Array(3)]// 对象转字符串console.log(JSON.stringify(obj));// json字符串转对象let str = '{"a":10,"b":20}';console.log(JSON.parse(str))// 深拷贝let obj2 = JSON.parse(JSON.stringify(obj1));obj2.score[1] = 200;console.log(obj1, obj2)

4、Symbol

★ES6 引入了一种新的基本数据类型Symbol，表示独一无二的值。

es5基本数据类型：number \ string \ boolean \ null \ undefined \ symbol

es5复杂数据类型：Object(function、array 、 object)

它是 JavaScript 语言的第六种基本数据类型。

Symbol 值通过Symbol函数生成。

★(1) 基础用法

代码案例：

        let s = Symbol();console.log(typeof s) //symbollet s1 = Symbol();console.log(s == s1) //false

(2) Symbol描述符

描述符可以理解为 symbol的注释，没有任何影响
两个symbol的描述符一样，也不会相等

代码案例：

        // 标识符  相当于是  注释let s2 = Symbol('name');let s3 = Symbol('name');console.log(s2 == s3) //false

(3) 应用场景

常用来模拟对象私有属性和方法。

一般常用于框架、js内置函数和对象中

代码案例：

         // 应用 --- 用在对象中作为属性名，防止被覆盖//程序员alet n = Symbol('name');let obj = {[n]: '张三',age: 30}// 程序员bobj.name = '哈哈';console.log(obj)console.log(obj.name)

5、Set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

★(1) 基本用法

代码案例：

      let s = new Set([10, 20, 10, 10, 2, 3]);console.log(s)

(2) 常见方法

size 获取set集合的长度
add(值) 给集合添加值，返回新set
delete(值) 删除某个值，返回布尔值，表示是否删除成功
has(值) 查询这个值是否时集合的成员，返回布尔值
clear() 清空集合,没有返回值

代码案例：

 // set数据结构--方法// 获取长度console.log(s.size)// 添加s.add('apple');console.log(s)// 删除s.delete(10)console.log(s)// 判断某项是否存在console.log(s.has(10))// 清空整个set集合s.clear();console.log(s)

★（3）使用场景

数组去重

 // 应用----数组去重let arr = [10, 10, 20, 10, 20, 30, 40, 30];let s1 = new Set(arr); // set数据结构将数组中重复项去除console.log(Array.from(s1)) // 转数组

6、Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值都可以当作键。

☆(1) 基本用法

代码案例：

let m = new Map([ ['name', 'haha'], [{ a: 10 }, 'heihei'], [ [10, 20], 'hello'] ]);

(2) 常见方法

size 获取Map的长度
set(key,val) 添加一条数据
get(key) 根据key获取val
has(key) 是否存在key
delete(key) 删除某条数据
clear() 清空所有数据

代码案例：

        // 长度console.log(m.size)// 添加一条m.set('age', 20)console.log(m)// 获取console.log(m.get('age'))//判断某个键 是否存在console.log(m.has('haha'))//删除一个m.delete('name');console.log(m)//清空m.clear();console.log(m)

解构赋值

1.概念及意义

ES6 允许按照一定模式，将数组和对象中值拿出来，赋值给变量，这被称为解构

2.数组解构

2.1 完全解构

变量个数和数据个数一致

代码案例：

 let [aa, bb, cc] = [100, 200, 300];console.log(aa, bb, cc)

2.2 不完全解构

变量个数少，数据个数多

代码案例：

 let [dd, ee] = [10, 20, 30, 40];console.log(dd, ee)

2.3 解构失败

变量多，数据少

代码案例：

 let [a,b,c] = [10,20]// 缺省值let [, d, , e] = [10, 20, 30, 40];console.log(d, e)

2.4 解构默认值

代码案例：

 // 默认值 , 解构出来的值是undefined时，默认值生效let [aaa, bbb = '嘿嘿', ccc = 'haha', ddd = 100, eee = '哈哈'] = [10, 20, null, undefined];console.log(aaa, bbb, ccc, ddd, eee) //10 20 null 100 '哈哈'

2.5 数组解构应用(数据交换)

代码案例：

        // 应用 -- 数据交换let i = 100;let j = 200;[i, j] = [j, i]; // let [i,j] = [200,100]console.log(i, j)

…运算符

1.rest参数

在形参里，…表示剩余参数运算符，后边紧跟形参名
剩余参数是一个数组，如果没有传参，默认是空数组
注意剩余参数必须放在形参列表的最后边，否则报错

代码案例：

 // es5function fn(a,b){// 不是数组console.log(Array.isArray(arguments))// 把所有参数接收console.log(a,b,arguments) // 10,20 , [10,20,30,40]}fn(10,20,30,40)// es6  rest参数function fn1(...a){console.log(a) //[10, 20, 30, 40]}fn1(10,20,30,40)// rest参数必须放到参数列表的最后边，否则报错：Rest parameter must be last formal parameterfunction fn2(a,b,...c){console.log(a,b,c) //10 20  [30, 40]}fn2(10,20,30,40)

2. 扩展运算符(spread)

遍历具有iterator接口的集合(字符串数组 nodelist set map)

        let arr = [10,20,30];let str = 'hello';let s = new Set(['haha','heihei'])console.log(...arr)console.log(...str)console.log(...s)

作用：数组合并、伪数组转数组、数组浅拷贝、对象浅拷贝、对象中使用技巧

    // 数组合并let arr1 = [10,20]let arr2 = ['haha','hiehie'];console.log([...arr1,...arr2])// 伪数组转数组let s1 = new Set([10,20,30]);console.log([...s1])// 数组去重console.log([...new Set([10,10,10,20,30,40,20])])var btn = document.querySelectorAll('button');console.log([...btn])// 数组浅拷贝let arr3 = [10,20,30,['haha','heihei']];let arr4 = [...arr3];arr4[0] = 100;arr4[3][0] = 'hehe';console.log(arr3,arr4)// 对象浅拷贝let obj = {name:'张三',age:20,score:[10,20,30]}let obj1 = {...obj};obj1.name = '小花';obj1.score[0] = 100;console.log(obj,obj1)// 对象中使用技巧let obj2 = {a:10,b:20}let obj3 = {c:30}// 对象合并, 后边可直接写键值对，如果前边没有就追加，如果前边已经有属性名，覆盖前边的值let obj4 = {...obj2,...obj3,d:40,c:300};console.log(obj4)

函数新增

1. 箭头函数基础用法

没有参数，小括号不能省略
一个参数，小括号可省略
多个参数，小括号不能省略
有返回值，且只有一句，可省略花括号和return关键词
有返回值，返回值有歧义，用小括号括起来

代码案例：

// es6 箭头函数// let fn = ()=>{}// fn() //调用// 传参并只传一个参数，可省略小括号let  fn = x =>{console.log(x)}fn(10)// 函数体有返回值，并且返回值只是一句,可省略{} 和 return/* let fn1 = (x) =>{return x+100}*/let fn1 = x => x+100 ;console.log(fn1(10))// 返回值有歧义，省略写时用小括号括起来let fn2 = () => ({name:'张三',age:30})console.log(fn2())

★2.箭头函数特点

箭头函数中this问题
- 父元素指向谁，箭头函数就指向谁
- 箭头函数不能改变this指向

     function fn(){console.log(this); setTimeout(function(){console.log(this)},1000)}// fn() // window  windowlet obj = {name:'张三'};// fn.call(obj); //obj window// this指向 -- 父作用域this指向谁，箭头函数中的this就指向谁function fn1(){console.log(this)setTimeout(()=>{console.log(this)},1000)}// fn1() //window  window// fn1.call(obj) // obj objlet fn2 =()=>{console.log(this)}// 箭头函数不能直接修改this指向fn2.call(obj)

箭头函数没有构造器，不能作为构造函数

        function fn3(){}console.dir(fn3)let fn4 = ()=>{}console.dir(fn4)

箭头函数不可以使用argements对象，用剩余参数代替

      let fn5 = (...a) =>{// console.log(arguments)console.log(a)}fn5()

promise与异步

1. 同步

代码从上到下一行一行执行，遇到需要等待的会阻塞代码

2. 异步

代码从上到下一行一行执行, 遇到需要等待的代码放到异步队列，同步执行完再回头执行异步队列中代码

promise

promise简介

Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理。ES6 将其写进了语言标准，统一了用法。

简单说Promise就是一个容器，里面保存着异步操作的结果。Promise 提供统一的 API，各种异步操作都可以用同步的方法进行处理。

作用：Promise代表了未来某个将要发生的事件(通常是一个异步操作) 有了Promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数。

语法：

基本语法：

then 接收成功信息
catch 接收失败信息

代码案例：

        // 同步操作，一旦创建，立即执行let p = new Promise((resolve,reject)=>{// resolve 返回成功结果   reject 返回失败结果// console.log('3333')resolve('成功')// reject('失败')})// console.log(p)  //rejected 已失败  fulfilled已成功 pending 进行中// 接收成功结果  异步console.log('1111')p.then((res)=>{console.log(res)})console.log('222')// catch 接收失败结果  异步操作/*  console.log('1111')p.catch((err)=>{console.log(err)})console.log('2222') */

★4.2 promise状态

三种状态：进行中，已成功，已失败
状态有两种转换方式：进行中–》已成功进行中–》已失败，一旦状态改变，就不会再变
promise一旦创建立即执行，此时是进行中，是同步任务
then和catch 方法是异步的
一旦调用resolve , 状态将由进行中–》已成功，调用 reject , 状态有进行中—》已失败

async函数

ES2017 标准引入了 async 函数，它是一个关键字，被async修饰的函数称为async函数。

作用：async也是处理异步的，它是对Promise的一种扩展，让异步更加方便，彻底解决回调嵌套

1.async函数基本用法

解决异步的回调地狱问题，将异步转同步
如果函数体内有await关键字，则此函数必须加async，否则报错 await is only valid in async functions and the top level bodies of modules
被async修饰的函数, 返回的是Promise对象
如果await后面是一个promise对象, 会直接接收resolve传回来的结果,不用再调用then方法接收

语法：

// 一般写法
async function name( ){let res1 = await promise异步1let res2 = await promise异步2...
}// 箭头函数写法
async ()=>{let res1 =  await promise异步1let res2 =  await promise异步2...
}// 在对象里面的写法{async fn(){let res1 =  await promise异步1let res2 =  await promise异步2...}
}// 点击函数写法
bnt.onclick = async function(){let res1 =  await promise异步1let res2 =  await promise异步2...
}

代码案例：

      let p = new Promise((resolve,reject)=>{resolve('haha')// reject('hehe')})async function fn(){console.log('1111')let s = await p; // await后边跟promise  接收成功结果，同步console.log(s)console.log('222')}fn();

2. 应用

使用async函数把promise的异步变成真正的同步代码

代码案例：

  /* 1.封装： 写一个函数，函数返回promise , promise里存放异步代码，resolve返回异步得到的结果2.使用：async函数，await关键词后边跟 上边封装的函数调用*/function p(){return new Promise((resolve,reject)=>{setTimeout(function(){resolve('1')},1000)}) }console.log(p())async function fn(){let s = await p();console.log(s)console.log(await p());console.log(await p());}fn()