当前位置：首页>前端>正文

git es6

前端2024-04-29 23:36:42

一、Git简介

二、使用gitee管理git仓库

官网地址

新建仓库

生成ssh key

配置ssh公钥

安装git

安装小乌龟

忽略提交.gitignore

git配置用户名和邮箱

参考链接

三、ES6

ES6简介

ECMAScript 和 JavaScript 的关系

S6与ECMAScript2015的关系

Let&const命令

数组和对象的解构赋值

模板字符串

字符串includes方法

数组

数组拼接

查找下标

查找值

过滤

包含

排序

判断是否是数组

map

forEach

对象的扩展

属性的简介标识法

属性名表达式

Object.is()

Object.assign()

函数的扩展

函数参数的默认值

rest参数

箭头函数及普通函数的区别

Symbol

作为属性名的Symbol

消除魔术字符串

set数据结构

基本用法

实例属性方法属性

数组去重

map数据结构

含义和基本用法

实例属性方法属性

for of 遍历

一、Git简介

git es6,git es6_字符串,第1张

Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。

Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

Git 与常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本库的方式，不必服务器端软件支持。

二、使用gitee管理git仓库

官网地址

https://gitee.com

新建仓库

git es6,git es6_字符串_02,第2张

git es6,git es6_字符串_03,第3张

生成ssh key

ssh-keygen -t ed25519 -C "1183391880@qq.com"

或者：

ssh-keygen -t rsa -C "1183391880@qq.com"

git es6,git es6_字符串_04,第4张

git es6,git es6_数组_05,第5张

git es6,git es6_git_06,第6张

git es6,git es6_git_07,第7张

配置ssh公钥

git es6,git es6_数组_08,第8张

git es6,git es6_git_09,第9张

确保启用 SSH 代理：

$ eval "$(ssh-agent -s)"

为 SSH key 启用 SSH 代理：

$ ssh-add ~/.ssh/id_rsa

git es6,git es6_数组_10,第10张

安装git

git es6,git es6_字符串_11,第11张

安装小乌龟

git es6,git es6_字符串_12,第12张

git es6,git es6_数组_13,第13张

git es6,git es6_字符串_12,第12张

git es6,git es6_git_15,第15张

忽略提交.gitignore

在使用Git的过程中，我们喜欢有的文件比如日志，临时文件，编译的中间文件等不要提交到代码仓库，这时就要设置相应的忽略规则，来忽略这些文件的提交。

/mtk 过滤整个文件夹
*.zip 过滤所有.zip文件

参考链接：https://www.jianshu.com/p/74bd0ceb6182

git配置用户名和邮箱

全局配置用户名：

git config --global user.name "xutongbao"

全局配置邮箱：

git config --global user.email "1183391880@qq.com"

ssh配置失败的同学，可以用https协议下载代码，而且也可以配置免密！

用git时，每次都需要输入密码会比较麻烦。
可以进行设置，这样在输入过一次密码之后，以后就不需要每次都输入密码了。
打开终端输入：

touch ~/.git-credentials

再输入：

git config --global credential.helper store

克隆代码

git clone git@github.com:baweireact/m-app-test.git

添加要上传的文件：

git add README.md

提交到本地：

git commit -m "first commit"

提交到远程：

git push origin master

git es6,git es6_git_16,第16张

git add readme.txt
 
git add readme.txt ant.txt
 
git add *.html
 
git add all 
 
git add .
 
git add *
 
git log
 
git status

git add . 会把本地所有untrack的文件都加入暂存区，并且会根据.gitignore做过滤，但是git add * 会忽略.gitignore把任何文件都加入

git es6,git es6_数组_17,第17张

使用 git add 命令将想要快照的内容写入缓存区，而执行 git commit 将缓存区内容添加到本地仓库中。

参考链接

git使用简易指南：

https://www.bootcss.com/p/git-guide/

设置ssh key出问题的可以参考下面的链接：

三、ES6

ES6简介

ECMAScript 和 JavaScript 的关系

ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。

S6与ECMAScript2015的关系

ES6 的第一个版本，就这样在 2015 年 6 月发布了，正式名称就是《ECMAScript 2015 标准》（简称 ES2015）

Let&const命令

在循环中给按钮绑定事件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <script>
      var buttons = document.getElementsByTagName('button')
      console.log(buttons)
      for (var i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function () {
          console.log(i)
        }
      }
    </script>
  </body>
</html>

点击任意一个按钮均输出3

git es6,git es6_git_18,第18张

使用let代替var

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <script>
      var buttons = document.getElementsByTagName('button')
      console.log(buttons)
      for (let i = 0; i < buttons.length; i++) {
        buttons[i].onclick = function () {
          console.log(i)
        }
      }
    </script>
  </body>
</html>

点击按钮依次输出 0 1 2

git es6,git es6_git_19,第19张

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

在使用let声明变量之前不能使用变量，及时使用typeof检查变量的类型也不行

console.log(typeof title)
      let title = '你好'
      console.log(title)

git es6,git es6_数组_20,第20张

//使用const定义的简单类型的数据不可以修改
      const title = '你好'
      //title = '1' //报错 

      //使用const定义的引用类型的数据可以修改属性
      const user = {
        name: 'xu',
      }
      user.name = 'tongbao'
      console.log(user)

数组和对象的解构赋值

const user = {
        name: 'xu',
        age: 33,
      }
      const { name, age, sex = 'male' } = user
      console.log(name, age, sex)
      let arr = ['apple', 'egg']
      const [apple, egg] = arr
      console.log(apple, egg)

模板字符串

const name = 'xu'
      const title = `姓名： ${name}`
      console.log(title)

字符串includes方法

const name = 'xu'
      const title = `姓名： ${name}`
      console.log(title)
      let isIncludes = title.includes('xu')
      console.log(isIncludes)

数组

数组拼接

let a = [1, 2, 3]
let b = [4, 5]
let c = [...a, ...b]
console.log(c)

查找下标

let arr = [1, 2, 3]
      const resultIndex = arr.findIndex(item => item === 2)
      console.log(resultIndex) //1

查找值

let arr = [1, 2, 3]
      const result = arr.find(item => item === 2)
      console.log(result) //2

过滤

let arr = [1, 2, 3]
      const result = arr.filter(item => item !== 2)
      console.log(result) //[1, 3]

包含

let arr = [1, 2, 3]
      const result = arr.includes(2)
      console.log(result) //true

排序

let arr = [1, 2, 3]
      arr.sort((a, b) => b - a)
      console.log(arr) //[3, 2, 1]

判断是否是数组

let arr = [1, 2, 3]
      console.log(Array.isArray(arr)) //true

map

let arr = [1, 2, 3]
      let newArr = arr.map(item => item * 2)
      console.log(newArr) //[2, 4, 6]

forEach

let arr = [1, 2, 3]
      let newArr = []
      arr.forEach((item) => {
        newArr.push(item * 2)
      })
      console.log(newArr) //[2, 4, 6]

对象的扩展

属性的简介标识法

let name = 'xu'
      let user = {
        name,
      }
      console.log(user) //{name: 'xu'}

属性名表达式

let field = 'title'
      let user = {
        [field]: 'xu',
      }
      console.log(user) //{title: 'xu'}

Object.is()

const result = Object.is(25, 25)
      console.log(result) // true

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is

Object.assign()

let user = {
        name: 'xu',
      }
      let info = {
        age: 33,
      }
      Object.assign(user, info)
      console.log(user) //{name: 'xu', age: 33}
      console.log(info) //{age: 33}
      const result = { ...user, ...info }
      console.log(result) //{name: 'xu', age: 33}

函数的扩展

函数参数的默认值

function getId(id = '1') {
        return id
      }
      let id = getId()
      console.log(id) //1

rest参数

function fun(...values) {
        console.log(values) //[1, 2, 3]
      }
      fun(1, 2, 3)

箭头函数及普通函数的区别

箭头函数都是匿名函数

箭头函数不能用于构造函数，不能使用new

在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例。

也可以说箭头函数本身没有this，但是它在声明时可以捕获其所在上下文的this供自己使用。

Symbol

作为属性名的Symbol

let title = Symbol('title')
      let title2 = Symbol('title')

      let user ={
        [title]: '徐',
        [title2]: 'xu'
      }
      console.log(title, title2) //Symbol(title)
      console.log(user)  //{Symbol(title): '徐'}

消除魔术字符串

const shapeType = {
  triangle: Symbol()
};


function getArea(shape, options) {
  let area = 0;
  switch (shape) {
    case shapeType.triangle:
      area = .5 * options.width * options.height;
      break;
  }
  return area;
}

getArea(shapeType.triangle, { width: 100, height: 100 });

set数据结构

基本用法

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

实例属性方法属性

- size

- add、delete、has、clear

数组去重

let arr = [1, 1, 2]
      console.log([...new Set(arr)]) //[1, 2]

map数据结构

含义和基本用法

Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应

实例属性方法属性

- size

- set、get、has、delete、clear

for of 遍历

let obj = {}
      const map = new Map([
        ['name', '张三'],
        ['title', 'Author'],
        [obj, '1'],
      ])
      for (let item of map) {
        console.log(item[0], item[1])
      }

git es6,git es6_数组_21,第21张

proxy与`Reflect`

概述

Proxy 用于修改某些操作的默认行为

Reflect用于获取某些操作的默认行为

get

let obj = new Proxy({}, {
        get: function(target, propKey, receiver) {
          console.log(target, propKey, receiver)
          return Reflect.get(target, propKey, receiver)
        }
      })
      obj.title = 'xu'

      console.log(obj.title) //xu

set

let obj = new Proxy(
        {},
        {
          get: function (target, propKey, receiver) {
            console.log(target, propKey, receiver)
            return Reflect.get(target, propKey, receiver)
          },
          set: function (target, propKey, value, receiver) {
            console.log(target, propKey, value, receiver)
            return Reflect.set(target, propKey, value, receiver)
          },
        }
      )
      obj.title = 'xu'

      console.log(obj.title) //xu

has

let obj = new Proxy(
        {},
        {
          get: function (target, propKey, receiver) {
            console.log('get', target, propKey, receiver)
            return Reflect.get(target, propKey, receiver)
          },
          set: function (target, propKey, value, receiver) {
            console.log('set', target, propKey, value, receiver)
            return Reflect.set(target, propKey, value, receiver)
          },
          has: function (target, propKey) {
            console.log('has', target, propKey)
            return Reflect.has(target, propKey)
          },
        }
      )
      obj.title = 'xu'

      console.log(obj.title) //xu
      console.log('title' in obj) //true

deleteProperty

let obj = new Proxy(
        {},
        {
          get: function (target, propKey, receiver) {
            console.log('get', target, propKey, receiver)
            return Reflect.get(target, propKey, receiver)
          },
          set: function (target, propKey, value, receiver) {
            console.log('set', target, propKey, value, receiver)
            return Reflect.set(target, propKey, value, receiver)
          },
          has: function (target, propKey) {
            console.log('has', target, propKey)
            return Reflect.has(target, propKey)
          },
          deleteProperty(target, propKey) {
            console.log('deleteProperty', target, propKey)
            return Reflect.deleteProperty(target, propKey)
          },
        }
      )
      obj.title = 'xu'

      console.log(obj.title) //xu
      console.log('title' in obj) //true
      delete obj.title
      console.log('title' in obj) //false

ownKeys

let obj = new Proxy(
        {},
        {
          ownKeys: function (target) {
            console.log('ownKeys', target)
            return Reflect.ownKeys(target)
          },
        }
      )
      obj.title = 'xu'
      console.log(Object.getOwnPropertyNames(obj)) //['title']

defineProperty

let obj = new Proxy(
        {},
        {
          defineProperty: function (target, property, descriptor) {
            descriptor.writable = false

            console.log('defineProperty', target, property, descriptor)
            return Reflect.defineProperty(target, property, descriptor)
          },
        }
      )
      obj.title = 'xu'
      obj.title = '徐' //赋值不生效
      console.log(obj.title) //xu

查看全文

https://www.xamrdz.com/web/2vr1938855.html

一、Git简介

二、使用gitee管理git仓库

官网地址

新建仓库

生成ssh key

配置ssh公钥

安装git

安装小乌龟

忽略提交.gitignore

git配置用户名和邮箱

参考链接

三、ES6

ES6简介

ECMAScript 和 JavaScript 的关系

S6与ECMAScript2015的关系

Let&const命令

数组和对象的解构赋值

模板字符串

字符串includes方法

数组

数组拼接

查找下标

查找值

过滤

包含

排序

判断是否是数组

map

forEach

对象的扩展

属性的简介标识法

属性名表达式

Object.is()

Object.assign()

函数的扩展

函数参数的默认值

rest参数

箭头函数及普通函数的区别

Symbol

作为属性名的Symbol

消除魔术字符串

set数据结构

基本用法

实例属性方法属性

数组去重

map数据结构

含义和基本用法

实例属性方法属性

for of 遍历

proxy与Reflect

概述

get

set

has

deleteProperty

ownKeys

defineProperty

相关文章：

proxy与`Reflect`