html+css+jshtml+css+js......................................

css:

flex布局

css单位

50% 相对父元素的尺寸
1vw 等于viewport宽度的1/100,如果浏览器的宽度是1000px，1vw就是10px
1px 始终不变
1rem 相对于根元素，html body的大小
1em 相对于父元素

水平垂直居中方法

grid布局

<div class='container'>
    <div></div>
</div>
.container{
    display:grid;
    place-content:center;
}

flex布局

<div class='container'> 
    <div class='g'></div> 
</div>
.container{
    display:flex;
        g{
            margin:auto
        }
}

word-break: break-all; /* 所有字符都会换行，不考虑字符类型 */

js

ECMAScript：描述了JS的语法和基本对象
BOM(浏览器对象)：与浏览器交互的方法和对象
DOM(文档对象模型)：处理网页内容的方法和接口，本质是BOM的window对象的子对象

mouseenter和mouseover区别

mouseenter不会冒泡，只经过自身盒子会触发，mouseover经过自身和子盒子都会触发

获取位置

offsetLeft&offsetTop相对于带定位的父元素的位置
getBoundingClientRect相对于窗口的位置

获取宽高：

clientWidth&clientHeight：内容+padding

存储：

.localStorage：数据即使关闭浏览器也会存在，同一浏览器共享数据
.sessionStorage：数据关闭浏览器消失，同一页面下共享数据

数据类型

数字型
字符串型
布尔型
uderfined 只声明未赋值，这个变量的值就是 undefined。函数没有返回值时，默认返回 undefined。对象属性不存在时，访问该属性也会返回 undefined。和数字相加结果为NaN。
null 空值，表示一个变量没有值。和数字相加结果为原来的数字

如何判断变量的类型

typeof:对原始类型类型number、string、boolean的反应是精准的；但是，对于对象、数组、null 都会返回object
intanceof 判断一个引用类型是否属于某构造函数
Object.prototype.toString.call() 会返回一个字符串[object 类型],可以检测到任何类型

数据类型之间相互转换:

数字==>字符串：数字.toString()
字符串==>数字： +string; string*1; string.toNumber(); String.parsInt();取整 String.parsFloat();取到小数
数组==>字符串： toString(); arr.join("-")
字符串==>数组： a.split(' ') ==>['a','b']

数组方法

不影响原数组

Slice(2) 删掉前两个 slice（2，5）删除下标2-4，不包含下标5
filter(function(item,index,arr){ return item>3 }) 筛选所有符合条件的元素，返回一个数组
find(item=> item.a == 0) 筛选第一个符合条件的元素，找到一个就不会再继续遍历数组，返回一个数组
findIndex（）筛选第一个符合条件的元素下标
some 筛选第一个符合条件就返回true
every 筛选所有元素符合条件才返回true
indexOf(1) 返回索引值，如果返回值-1说明数组中没有1
includes("d") 查是否包含d //true
concat 拼接: arr.concat([1,2])
flat(Infinity) 扁平化数组，Infinity指的是层次为最深层次

map((x)=>x*2) 对数组的每一项进行统一的处理

筛选数组：
let a = [{name:"zhangsan",age:19},{name:"lisi",age:20}]
a.map(item => item.age)//[19,20]

影响原数组

shift 删除第一个元素
pop 删除最后一个元素
Splice(2,3) 删除元素splice(从第2个开始，截取3个，替换成什么（可省略）)
push 从尾部添加元素
unshift 从头部添加元素
- reverse 翻转数组
foreach 遍历
fill(100,0,10) 从0到10都设为100
sort 排序，默认按字母的顺序排序，可以自定义排序规则 sort（function（a，b）｛//把数字从小到大排序 return a-b ｝）

字符串常用方法

substring(2,3) 截取字符串(从第2个开始，截取到第3个字符)
Slice 截取字符串
replace("被替换的内容","用什么来替换")
includes(a) 判断是否包含某字符,返回布尔值
indexOf("e") 找某个字符的位置
trim 删除两端空白字符（会返回一个新的字符）
a.split(' ') ==>['a','b']

对象常用方法

object.defineProperty(obj,prop,descriptor) 给对象设置属性和值
Object.keys(obj) 返回obj对象所有的属性名组成的数组
Object.values({a:1,b:2,c:3}) 遍历对象,结果是[1,2,3]
Object.assign(newObj,oldObj) 浅拷贝
var newObj = JSON.parse(JSON.stringify(oldObj)) 深拷贝
Object.assign(obj1,obj2) 合并对象，有重名的后者会覆盖前者

Es6语法

let var const

let:块级作用域，没有变量提升
const:块级作用域，没有变量提升，声明常是时必须初始值，对于基本类型数据来讲，值不可变，对于复杂类型的声明常量，常量在内存中的地址是不能更改的。
块级作用域:一对大括号产生的作用域，防止内层变量覆盖外层变量；防止循环变量变成全局变量
变量提升:可以先使用再声明，不会报变量未定义的错
暂时性死区:一旦在块级区域使用let声明了一个变量，这个变量就和块级作用域绑定在一起，在当前的区域使用这个变量和外部的这个变量是没有关系的；

解构赋值

数组:

let ary = [1,2,3];
let [a,b,c,d]= ary;
//其中d=underfined

对象：

let person = { name : 'zhangsan', age : 20 };
let {name, age} = person ;
console.log(name) ; //"zhangsan"
let {name: myName ,age: myAge} = person;
console.log (myName) ; // 'zhangsan"

箭头函数

this指向函数定位位置的上下文this
对象是不能产生作用域的，在对象里面的箭头函数中的this指向全局window

剩余参数和解构配合使用

let students = ['wangwu',' zhangsan',"lisi"]
let [s1, ...s2] = students ;
console .log(s2); //' zhangsan',"lisi"

扩展运算符

可以把数组拆分成以逗号分割的参数序列，用来合并对象或者数组

    let ary = [1,2,3];
    console.log(...ary)//1,2,3
    
    const a = [1,2,3]; 
    const b = [1,5,6]; 
    const c = [...new Set([...a,...b])];//[1,2,3,5,6] 
    
    const obj1 = { a:1, } 
    const obj2 = { b:1, } 
    const obj = {...obj1,...obj2};//{a:1,b:1}

模板字符串，${}中可以放入任意的js表达式

增强版的字符串。可以用来定义多行字符串，或者在字符串中嵌入变量

   const name = '你'; 
    const score = 100; 
    const result = `${name}的考试成绩${score > 60?'及格':score >90?'优秀':score >99?'超级优秀'}`
    
    //对象属性名可以用表达式  
    let obj = {}; 
    let index = 1; 
    obj[`topic${index}`] = '话题内容';//obj={topic1: '话题内容'}

Promise

为了解决回调地狱

Promise的基本使用

学习视频: www.bilibili.com/video/BV145…

promise实例有两个属性：state状态和result结果。

state状态有3种状态：pending(进行中)fufilled(成功)rejected(失败)

const p = new Promise((resolve, reject) => {
    // resolve("成功的结果"): 调用函数使当前Promise对象的state=fulfilled，result=成功的结果
    // reject("失败的结果"): 调用函数使当前Promise对象的state=rejected，result=失败的结果
})
console.dir(p)

Promise.then()方法的基本使用

   var t = p.then((value)=>{
        // 当P的state=fulfilled时执行,其中value=result=成功的结果
        console.log("成功的回调",value)
        // 使用return可以将t实例的状态改为fulfilled
            return 123
    },(err)=>{
        // 当P的state=rejected时执行,其中value=err=失败的结果
        console.log("失败时调用",err)
         // 如果这里代码出错,会将p实例的状态改为rejected
            console.log("失败")
    })
    console.dir(p)

Promise.catch()方法的基本使用

const p = new Promise((resolve, reject) => {
    // reject()
    // console.log(a)
    throw new Error("出错了");
})

// catch中的函数在什么时候被执行
//  1. 当Promise的状态改为rejcted.被执行
//  2. 当Promise执行过程出现代码错误时,被执行
p.catch((reason => {
    console.log("失败", reason)
})
console.log(p);

Promise解决回调地狱问题的写法：

// 封装ajax请求
function getData(url, data = {}){
    return new Promise((resolve, reject) => {
        $.ajax({
            // 发送请求类型
            type: "GET",
            url: url,
            data: data,
            success: function (res) {
            // 修改Promise状态为成功, 修改Promise的结果res
            resolve(res)
            },
            error:function (res) {
            // 修改Promise的状态为失败,修改Promise的结果res
            reject(res)
            }
        })
    }
}

// 调用函数
getData("data1.json")
.then((data) => {
    // console.log(data)
    const { id } = data
    return getData("data2.json", {id})
})
.then((data) => {
    // console.log(data)
    const { usename } = data
    return getData("data3.json", {usename})
})
.then((data) => {
    console.log(data)
})

async和await

    async function test(){
        // async标记的函数都为async函数，最开始这个函数内部是同步代码，当遇到第一个await，第一个await后面的就变成了异步代码，但第一个await里面的内容还是同步代码，同理promise里的内容也是同步代码，直到遇到第一个then才变成异步；
        let result1 = await getData("data1.json");
        const { id } = result1;//result1返回的结果就是第一个await后面的promise返回的result成功的结果
        let result2 = await getData("data2.json", {id});
        const { usename } = result2;
        let result3 = await getData("data3.json", {usename});
        console.log(result3);
    }
    test();

闭包:是一个函数，一个作用域可以访问另外一个函数的局部变量，可以延伸变量适用范围

function fn(){
    var n=1;
    return function(){
        console.log(n)
    }
}
var f = fn();
f()

call apply bind区别

call 会调用函数，改变this指向;传递参数是a1,a2，常做继承，把父构造函数里面的this指向子构造函数
apply 会调用函数，改变this指向;传递参数是数组对数组一些操作；求数组的最大最小值
bind 不会调用函数，只是改变this指向定时器里面的this指向

new操作具体做了什么

生成一个新的空对象 var obj = new Object()
将空对象的原型赋值给构造函数的原型 Person.prototype = obj.proto
绑定this Person.call ( obj )
返回一个新的对象

js模块化

nodejs：

默认情况下modul.exports={}

共享成员：modul.exports.成员名 = 值；其中modul.exports可以简写成：exports

   写法一：
    modul.exports = {
        fn1:function(){...}
    }
    写法二：
    modul.exports.fn1 = function(){...}

引入成员：var 对象=require （"路径，可以省略.js后缀名"）

   写法一：
   const router = require("./a.js");
   router.fn1();
   写法二：解构赋值
   const {fn1} = require("./a.js");
   fn1();

Es6：

前提是 要写上<script type="module">

导出：export{函数名或类名}

    let a = 1;
   function fn(){};

   写法一：
    export {a,fn}
   写法二：
    export let a = 1

导入：import {函数名或类名} from'./a.js';

写法一：按需导入
import{a,fn} from "./a.js"

写法二：全部导入
import * as test(这个是自己起的别名) from "./a.js"
怎么用：test.a

方式二：把导出所有的内容作为一个整体,每个模块只允许有一个export default，否则报错！

导出：export default 函数名或类名；

   let a = 1;
   function fn(){};
   
   export default {a,fn}

导入：import 自己起一个名字 from'./a.js';

import suibian from "./a.js"
怎么用：suibian.a

注意：如果只是导入文件执行，不需要获取文件内容，则可以这样写:import "./a.js"
注意："./a.js"这里的./不可缺少，即使是导入文件和目前文件处于同一路径下也要加上./前缀

变量提升预解析

把变量声明提升到最前面
把函数声明继续提升
把剩下的罗列出来
再提升里层作用域的变量
注意：变量的就近原则
在局部作用域中没声明直接赋值的值是全局变量

同步和异步

同步代码:promise里的内容，不算.then的内容；async函数内容以及第一个await里的内容
异步代码中的微任务(优先)：Promise.[ then/catch/finally ]
异步代码中的宏任务：script代码块；定时器；点击事件等；load资源加载；async函数第一个await执行完之后的内容

js中常用的数学函数

Math.random() 随机数
Math.sqrt(2) 根号二
Math.pow(2,4) 2的4次幂，即16
Math.floor(12.9)=12 向下取整
Math.floor(12.98888*1000)/1000=12.988 保留3位小数
Math.ceil(12.1) = 13 向上取整
Math.round(12.5) = 13 四舍五入
Math.cos(弧度)=cos值三角函数
Math.acos(cos值)=弧度反三角函数
Math.tan和Math.atan同上

Math.atan2() 点(x,y)和点(0,0)之间直线的倾斜角，如果要计算任意两点连线的倾斜角，可以用x2-x1代替x

  例子：已知x，y分量求和向量的角度和值（颜色表示长度）
   let angle = (Math.atan2(y, x) * 180) / Math.PI;

   let length = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));

   let color = d3.scaleLinear().domain([0,14]).range(["rgb(231, 230, 230)","rgb(0, 0, 0)"])

Math.random() 0~1之间

  例子：
   m+Math.random()*(n-m) = [m,n);   m+Math.random()\*(n-m+1) = [m,n];

数组常用处理方法

二维数组转一维数组

for(const item of arr2){
    // arr1代表一维数组，arr2代表二维数组
    arr1 = [...arr1,...item];
}

创建二维数组：

var arr = new Array();
for(let i = 0; i < 200; i++){
    arr[i] = new Array();
    for(let j = 0; j < 200; j++){
        if((j==100)){
            arr[i][j] = 1
        }else{
            arr[i][j] = 0
        }
    }
}

数组去重：

let array = [11, 12, 12, 222]; 
const unique = [...new Set(array)];
console.log(unique); // [11, 12, 222]

求数组的最大值最小值以及其对应的索引：

getIndexMin(arr){
    const maxNum = Math.max(...arr)
    const minNum = Math.min(...arr)
    const [maxIndex, minIndex] = [arr.indexOf(maxNum), arr.indexOf(minNum)]
    console.log(maxNum,minNum,maxIndex, minIndex);
    return minIndex
}

数组求和：

let numbers = [2, 52, 55, 5];
let sum = numbers.reduce((x, y) => x + y);
console.log(sum); // 114

js技巧

使用 && 代替 If 条件判断为真的条件

// 使用 if 的条件判断 
if(twitter) { 
    followme("a")
} 
// 可以替换成这样 
twiiter && followme("a")

html+css+js

css:

flex布局

css单位

水平垂直居中方法

grid布局

flex布局

js

mouseenter和mouseover区别

获取位置

获取宽高：

存储：

数据类型

数据类型

如何判断变量的类型

数据类型之间相互转换:

数组方法

不影响原数组

影响原数组

字符串常用方法

对象常用方法

Es6语法

let var const

解构赋值

数组:

对象：

箭头函数

剩余参数和解构配合使用

扩展运算符

模板字符串，${}中可以放入任意的js表达式

Promise

Promise的基本使用

Promise.then()方法的基本使用

Promise.catch()方法的基本使用

Promise解决回调地狱问题的写法：

async和await

闭包:是一个函数，一个作用域可以访问另外一个函数的局部变量，可以延伸变量适用范围

call apply bind区别

new操作具体做了什么

js模块化

nodejs：

Es6：

变量提升 预解析

同步和异步

js中常用的数学函数

数组常用处理方法

js技巧

使用 && 代替 If 条件判断为真的条件

可选链:

变量提升预解析