网站做弹窗广告,免费注册域名和空间,公司网站建设提纲,西安小程序开发费用git
工作区 暂存区 仓库区
git config --global user.name xxx
git config --global user.email xxx验证是否配置成功
输入命令#xff1a; git config --list在 c:/用户/用户名 下有 .gitconfig文件#xff0c;存放的就是git配置的用户信息
新项目git管理步骤
初始化 g…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 initadd 提交到暂存区
git add . 把项目目录下所有文件都提交到暂存区
git add 文件名 把指定的文件提交到暂存区commit 提交到仓库区
每提交一次就生成一个版本
git commit -m 版本描述status 查看状态
绿色表示文件上传到暂存区 红色文件在工作区nothing to commit, working tree clean 表示工作区是空的所有文件都已提交到仓库区
git statuslog 查看版本号
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 -vremote 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},今年${age1}岁)console.log(45 是 ${45?真:假})// 对象属性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(值) 给集合添加值返回新setdelete(值) 删除某个值返回布尔值表示是否删除成功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获取valhas(key) 是否存在keydelete(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 x100}*/let fn1 x x100 ;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()原生ajax
1. 介绍
1.1 定义
Ajax(Asynchronous Javascript And XML) 是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换Ajax 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下对网页的某部分进行局部更新。
