# js-learn

**Repository Path**: lifutian66/js-learn

## Basic Information

- **Project Name**: js-learn
- **Description**: 自学 前端 历程
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-11
- **Last Updated**: 2023-03-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 1.es6

## 1.大纲

![](https://www.runoob.com/wp-content/uploads/2018/12/es6-tutorial.jpg)

### 1.let const

let a=1
const b=2
var 声明变量(可重复声明) 全局有效 变量提升
let 声明变量(不可重复声明) 局部块级作用域 不存在变量提升  
const 声明变量(不可重复声明) 局部块级作用域 不可更改（变量指向的内存地址所保存的数据不允许改动） 不存在变量提升

### 2. 赋值

let json={a:1,b:2}
const{a,b}=json
析构的结构与参数的结构一致 即可

### 3.for

let arr=[1,2,3,4]

for(let i=0;i<arr.length;i++>){
console.log(arr[i])
}

### 4.数组

foreach((item,index,arr)=>{})
map((item,index,arr)=>{ // 需要 return})
map + reduce = foreach
Array.from
find
filter
includs

### 5.对象

object.keys
object.values
object.entries

### 6.模块化

export 导出 (default 导出的 import 不用{}，否则都需要{})
import 导入 绝对路径/相对路径 导入默认提升

### 7.class 类

不会变量提升，不可重复声明

class A {
constructor(a) {
this.a = a;
}
}

### 8.Symbol

独一无二的 Symbol 作为对象属性名时不能用.运算符，要用方括

Symbol 值作为属性名时，该属性是公有属性不是私有属性，可以在类的外部访问。但是不会出现在 for...in 、 for...of 的循环中，也不会被 Object.keys() 、 Object.getOwnPropertyNames() 返回。如果要读取到一个对象的 Symbol 属性，可以通过 Object.getOwnPropertySymbols() 和 Reflect.ownKeys() 取到。

### 9.Generator

function 后面，函数名之前有个 \*
函数内部有 yield 表达式

调用的时候 .next()

迭代器

可以用... 解构

for in

Array.from

### 10.async await

替代 Generator 语法更清晰,Generator 会嵌套，需要调用 next

### set WeekSet

有序不可重复

WeekSet 不可初始化
成员只能是对象，方法有 add、delete 、has
WeakSet 里面的引用，都不计入垃圾回收机制
WeakSet 不能遍历，是因为成员都是弱引用，随时可能消失，遍历机制无法保证成员的存在，很可能刚刚遍历结束，成员就取不到了。WeakSet 的一个用处，是储存 DOM 节点，而不用担心这些节点从文档移除时，会引发内存泄漏。

### map WeekMap

k v 结构

get set delete

### proxy reflect

hander 是个函数

new Proxy(target,hander)

let exam = {
name: "Tom",
age: 24
}
let handler = {
get: function(target, key){
console.log("getting "+key);
return Reflect.get(target,key);
},
set: function(target, key, value){
console.log("setting "+key+" to "+value)
Reflect.set(target, key, value);
}
}
let proxy = new Proxy(exam, handler)

# 2.CSS

介绍：选择器 + 声明

### 1.id class 选择器

#name

.name

[name] 属性选择器

### 2.背景

背景颜色

background-color: 颜色;

背景图片

background-image: url(连接);

背景图片 x/y 平铺

background-repeat: [repeat-x,repeat-y]

背景定位

background-position: center/top/bottom/right/left

或者百分比 两个 background-position:0% 100%; 表示左下角

background-position:50px 100px 坐标

背景联动

background-attachment:fixed 背景固定 不会随着滚动 图像消失

### 3.文本

缩进

text-indent: 2em 行首缩进

text-indent: -2em padding-left: 2em 行首突出，一般配合 padding-left 使用

值可以使用百分比 可以继承

水平对齐

text-align center left right

字间距

word-spacing

字母间隔

letter-spacing

字符转换

text-transform none uppercase lowercase capitalize

文本装饰

text-decoration none underline 下划线 overline 上划线 line-through blink

text-decoration 值会替换而不是累积起来

忽略空白符

white-space:normal

文本方向：

direction ：ltr 和 rtl

### CSS 字体

指定字体

font-family

指定字体风格

font-style  
    normal 文本正常显示
    italic 文本斜体显示
    oblique  文本倾斜显示

字体变形

font-variant:small-caps;   小型大写字母

字体加粗

font-weight   bold  设置为粗体   100 ~ 900 不同级别的加粗 bold=700  normal=400 

light

字体大小

font-size   1em=16px
默认是 1em


### CSS 链接

链接的四种状态：

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

注意：a:hover 必须位于 a:link 和 a:visited 之后
      a:active 必须位于 a:hover 之后

### CSS 列表

修改列表前面的图表 
list-style-type : square

列表图像
list-style-image : url

列表标志位置
 list-style-position

 以上均可使用
 list-style

### CSS 表格

表格边框
border

折叠边框
border-collapse:collapse

表格宽度和高度

width:100%;  height:50px;

表格文本对齐

text-align:right;

vertical-align:top; 

表格内边距

padding 

### CSS 轮廓

outline

样式
outline-style

颜色
outline-color

宽度
outline-width

### CSS 框模型


padding : 内边距

        padding-top: 10px;
        padding-right: 0.25em;
        padding-bottom: 2ex;
        padding-left: 20%;

border：边框

        border-top-style
        border-right-style
        border-bottom-style
        border-left-style

margin : 外边框

顺时针设置
margin: top right bottom left 

会存在值复制 top=bottom  right=left

只设置一个值 四个值都是一样的

        margin-top
        margin-right
        margin-bottom
        margin-left

外边距合并： 
1.两个垂直外边距相遇时，它们将形成一个外边距
2.一个包含另一个，外边距会被并
3.一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并

### 定位

普通流、浮动和绝对定位

static 、relative、absolute、fixed

overflow:scroll 滚动条   overflow: auto 自动处理    overflow: hidden 隐藏溢出