前言

每天努力一点点💪，就能升职加薪💰当上总经理出任 CEO 迎娶白富美走上人生巅峰🗻，想想还有点小激动呢😎。

希望能够把每一处知识点，说明白，（当然，如果哪一处不了解，可以在评论区进行探讨哦！）⏰，计时开始！

如果您发现本文有帮助，请您点赞，收藏，评论，留下您学习的脚印👣，我很乐意谈论😃

话不多说，开始学习！！！

我会不断修改这篇文章内容，一起来探讨吧！😁

学习 css 布局🤣

display 属性，它是 css 中最重要的用于控制布局的属性，每个元素都有一个默认的 display 值，这与元素的类型有关，大多数元素的默认值一般是 block 或 inline。

每个元素都有一个默认的 display

block 元素叫做块级元素；inline 元素叫做行内元素

常用的 display 值，有时候为 none，它是用来再不删除元素的情况下隐藏或显示，display:none。

display 设置成 none 元素不会占据它本来应该显示的空间；使用 visibility:hidden 会占据空间，只是隐藏了，元素还在。

position 属性：static 是默认值，口诀，子绝父相。fixed，一个固定定位元素会相对于视窗来定位，即使页面滚动，它也会停留再相同的位置上。

css 属性中的 float，float 可实现文字环绕图片效果：

img { float: right; margin: 0 0 1em 1em;}

复制代码

clear 属性可以用于被控制的浮动元素，如果一个盒子添加了 float: left 浮动，可以使用 clear: left 清楚元素的向左浮动。

清楚浮动，clearfix hack，可以使用新的 css 样式：

.clearfix { overflow: auto;}

复制代码

百分比宽度，百分比是一种相对于包含块的计量单位。

.clearfix { float: right; width: 50%;}

nav { float: left; width: 15%;}

section { margin-left: 15%;}

复制代码

响应式设计是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，可以让网站在不同情况下呈现很好的效果。

inline-block 为行内块标签

.box { float: left; width: 200px; height: 100px; margin: 1em;}.after-box { clear: left;}

// 相同效果.box1 { display: inline-block; width: 200px; height: 100px; margin: 1em;}

复制代码

flexbox 是 css3 种的一种新的布局模式，用于满足现代 web 的复杂需求。

<div class="flex-container"> <div class="flex-item">flex item 1</div> <div class="flex-item">flex item 2</div></div>

.flex-container { display: -webkit-flex; display: flex; width: 300px; height: 240px; background-color: Silver;}

.flex-item { background-color: DeepSkyBlue; width: 100px; height: 100px; margin: 5px;}

复制代码

JavaScript 变量😊

1，Int 整型

2，Float 浮点

3，Boolean 布尔

4，String 字符串

5，Array 数组

6，Object 对象

7，Function 函数

8，Regular Expression 正则

驼峰命名法😀

全部小写，单词与单词间用下划线分割

大小写混合，大驼峰，每个单词首字母大写，小驼峰，第一个单词首字母小写，其他首字母大写。

规则😁

首字符，英文字母或者下划线；组成，英文字母，数字，下划线；（禁用，JavaScript 关键词与保留字）

声明😃

显示声明，使用 var 变量名，（{没有类型，重复声明，隐式声明，不声明直接复制}），（{先声明，后读写，先赋值，后运算}）。

变量类型😃

值类型，占用空间固定，保存在栈中，保存与复制的是值本身，使用 typeof 检测数据的类型，基本类型数据是值类型。

引用类型，占用空间 不固定，保存在堆中，保存与复制的是指向对象的一个指针，使用 instanceof 检测数据的类型，使用 new()方法构造出的对象是引用型。

作用域😄

全局变量，包括，在函数体外定义的变量，在函数体内部定义的无 var 的变量；调用，在任何位置。

局部变量，包括，在函数内部使用 var 声明的变量，函数的参数变量；调用，当前函数体内部。

优先级，局部变量高于同名全局变量，参数变量高于同名全局变量，局部变量高于同名参数变量。

特性：忽略块级作用域，全局变量是全局对象的属性，局部变量是调用对象的属性。

作用域链，内层函数可访问外层函数局部变量，外层函数不能访问内层函数局部变量。

声明周期：全局变量，除了被删除，否则一直在，局部变量，声明起到函数运行完毕或显示删除。回收机制，标记清楚，引用计数。

逻辑运算符😅

！逻辑非

返回 true

空字符串0nullNaNundefined

复制代码

返回 false

对象非空字符串非0数值（Infinity）

复制代码

注意：逻辑非，连续使用两次，可以将任意类型转为布尔型值

&&逻辑与😆

当第一个操作数是对象，返回第二个操作数

当第二个操作数是对象，第一个操作数值为 true 时返回该对象

两个操作数都是对象，返回第二个操作数

一个操作数为 null 时，返回 null

一个操作数为 NaN 时，返回 NaN

一个操作数为 undefined，返回 undefined

注意：当第一个操作数的值时 false，则不对第二个操作数进行求值。

逻辑或 ||😉

第一个操作数是对象，返回第一个操作数

第一个操作数值为 false，返回第二个操作数

两个操作数都是对象，返回第一个操作数

两个操作数都是 null，返回 null

两个操作数都是 NaN，返回 NaN

两个操作数都是 undefined，返回 undefined

注意：如果第一个操作数值为 true，就不会对第二个操作数求值。

JavaScript 数组

添加

push()在数组末尾添加数组

unshift()在数组头部添加元素

concat()合并两个数组

删除

pop()删除并返回数值的最后一个元素

shift()删除并返回数组的第一个元素

队列方法（先进先出）；栈方法（后进先出）。

splice()和 slice()

splice()

删除任意数量的项：1，要删除的起始下标，2，要删除的项数

在指定位置插入指定的项：1，起始下标，2，0（不删除任何项），3，要插入的项。

替换任意数量的项：1，起始下标，2，要删除的项数，3，要插入的项

splice()方法，注解，该方法会改变原始数组。用于添加或删除数组中的元素。

arrayObject.splice(index,howmany,item1,.....,itemX)

var arr = ['a', 'b', 'c']

arr.splice(2,1) // 删除一个，返回删除元素的数组

['c']

arr.splice(2,0) // 删除0个，返回空数组

[]

var array = [1,2,3,4,5];array.splice(3,2);console.log(array);// 结果: [1,2,3]

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];var removed = myFish.splice(2);// 从第 2 位开始删除所有元素// 运算后的 myFish: ["angel", "clown"]// 被删除的元素: ["mandarin", "sturgeon"]

复制代码

所有主要浏览器都支持 splice()

Array 数组的 splice()方法，它的作用删除，插入，替换

插入的用法

语法：array.splice(starti,0,值1，值2...);

// 表示要在哪个位置插入，0表示删除0个元素，因为插入和替换都是由删除功能拓展的，值1，值2，需要插入的值

var array = [1,2,3,4,5];array.splice(2,0,11,22);

// 结果：[1,2,11,22,3,4,5]

复制代码

替换的用法

语法:array.splice(starti,n,值1，值2);

var array = [1,2,3,4,5];array.splice(2,2,11,22);

// 结果：[1,2,11,22,5]

复制代码

slice()功能，从已有数组中选取部分元素构成新数组

返回项的起始位置

返回项的结束位置

特性，如果是负数，则用数组长度加上该值确定位置，启示位置实为数组的实际下标，结束位置的实际下标为结束数值减 1。

Array.prototype.slice()

slice()方法返回一个新的数组对象。原始数组不会被改变。这一对象是一个由 begin 和 end 决定的原数组的浅拷贝。

const animals = ['1', '2', '3', '4', '5'];

console.log(animals.slice(2));// expected output: Array ["3", "4", "5"]

console.log(animals.slice(2, 4));// expected output: Array ["3", "4"]

console.log(animals.slice(1, 5));// expected output: Array ["2", "3", "4", "5"]

复制代码

slice(start,end)，从 start 开始截取到 end 单不包含 end，返回值为截取出来的元素的集合(只是返回一个浅复制了原数组中的元素的要给新数组)

var fruits = ['a', 'b', 'c', 'd', 'e'];var citrus = fruits.slice(1, 3);

// fruits contains ['a', 'b', 'c', 'd', 'e']// citrus contains ['b','c']

复制代码

slice 方法用一个类数组对象/集合转换成一个新数组。

function list() { return Array.prototype.slice.call(arguments);}

var list1 = list(1, 2, 3); // [1, 2, 3]

复制代码

在 JavaScript 中，几乎所有东西都是一个对象，除了 string，number 和 booleans 这样不可变的原始值。

Array.prototype.slice

function myFunc() { // 错误, arguments是一个类数组对象, 不是一个真实的数组 arguments.sort(); // 借用 Array 原型中的方法 slice // 它接受一个类数组对象 (key:value) // 并返回一个真实的数组 var args = Array.prototype.slice.call(arguments); // args 现在是一个真正的数组, 所以可以使用Array的sort()方法 args.sort();}

复制代码

数组排序，reverse()颠倒数组中元素的顺序，sort()对字符数组或数字数组进行排序。

function compare(value1, value2) { if(value1 < value2) { return -1; }else if(value1 > value2) { return 1; }else{ return 0; }}

复制代码

数组转换

toString()转换为字符串并返回

toLocaleString()转换为本地格式字符串并返回

join()用指定分割符分割数组并转换为字符串

toString()函数用于将当前对象已字符串的形式返回。该方法属于 Object 对象。

迭代方法：参数

every 如果该函数对每一项都返回 true，则返回 true

filter 返回值为 true 的所有数组成员

forEach 无返回值

map 返回每次函数调用的结果数组

some 有任意一项返回 true，则返回 true

接收参数：

要在每一项上运行的函数

运行该函数的作用域对象

传入参数：

数组项的值 item

该项在数组中的位置 index

数组对象本身 array

缩小方法：

reduce 从数组起始位开始遍历

reduceRight 从数组末尾开始遍历

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

reduce() 可以作为一个高阶函数，用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

var numbers = [1, 2, 3, 4];numbers.reduce(回调函数);

复制代码

const array1 = [1, 2, 3, 4];const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4console.log(array1.reduce(reducer));// 10

// 5 + 1 + 2 + 3 + 4console.log(array1.reduce(reducer, 5));// 15

var arr = [1,2,3,4];// 求和var sum = arr.reduce((x,y)=>x+y)var sum1 = arr.reduce((x,y)=>x*y)

复制代码

求数组项的最大值

var max = arr.reduce(function (prev, cur) { return Math.max(prev,cur);});

复制代码

取两值最大值后继续进入下一轮回调。

数组去重

arr.reduce(function(prev,cur,index,arr){ ...}, init);

arr 表示原数组；prev 表示上一次调用回调时的返回值，或者初始值 init;cur 表示当前正在处理的数组元素；index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；init 表示初始值。

arr.reduce(callback,[initialValue])initialValue （作为第一次调用 callback 的第一个参数。）

复制代码

如果这个数组为空，运用 reduce 是什么情况？

var arr = [];var sum = arr.reduce(function(prev, cur, index, arr) { console.log(prev, cur, index); return prev + cur;})//报错，"TypeError: Reduce of empty array with no initial value"

var arr = [];var sum = arr.reduce(function(prev, cur, index, arr) { console.log(prev, cur, index); return prev + cur;}，0)console.log(arr, sum); // [] 0

复制代码

js 中 in，一般用来遍历对象, 也可以用来遍历数组

in 作用，判断属性是否存在于对象中，在 true，不在 false。

in 作用，判断数组，索引号就是属性。

对于数组循环出来的是数组元素；对于对象循环出来的是对象属性；当‘对象’是数组时：“变量”指的是数组的“索引”；当‘对象’为对象是，“变量”指的是对象的“属性”。

计算数组中每个元素出现的次数

// 求总成绩var scoreReport = [ { name: 'dada', score: 100 }, { name: '魔王哪吒', score: 99 }]

// forvar sum = 0for(var i = 0; i<scoreReport.length; i++) { sum += scoreReport[i].score}

复制代码

如果使用 reduce

var sum = scoreReport.reduce(function(prev, cur) { return cur.score + prev},0);

复制代码

Vuex

Vuex 中规则只能在 mutations 里修改 state 中的数据，actions 不能直接修改 state

创建 Vuex.Store 实例保存到变量 store 中，使用 export default 导出 store

import Vuex from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ })export default store

复制代码

state

常常写的文件 store.js

import Vue from 'vue'import Vuex from 'vuex'// import * as getters from './getters'Vue.use(Vuex)const state = { // 放置初始状态 a: 123};

const mutations = { // 放置我们的状态变更函数};

export default new Vuex.Store({ state, mutations, // getters})

复制代码

this.$store.state来获取定义的数据

import Vuex from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 1 }})export default store

复制代码

import Vuex from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 1 }, getters: { // getters相当与vue中的computed计算属性 getStateCount: function(state){ return state.count+1; } }})export default store

复制代码

要修改 state 中的值，需要提交 mutation 来修改

Vuex 中的 getter，就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，并且只有当它的依赖值发生了改变才会被重新计算。

Getter 接受 state 作为其第一个参数：

const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false } ] }, getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) } }})

复制代码

getter 在通过属性访问时，是作为 Vue 的响应式系统的一部分缓存其中的

getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

某函数中{ this.$store.commit('add');}

import Vuex from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 1 }, getters: { // getters相当与vue中的computed计算属性 getStateCount: function(state){ return state.count+1; } }, mutations: { add(state) { state.count += 1; }, }})export default store

// xxx.vue{ {$store.getters.getStateCount}}

复制代码

提交 mutation-对象风格的提交方式，直接使用包含 type 属性的对象：

store.commit({ type: 'increment', amount: 10})

复制代码

Vuex 中还有一个 Actions，这个目的是不想上面那样直接修改 store 里面的值，而是通过去提交一个 actions，然后再在 actions 中提交 mutations 中去修改状态值。

先定义 actions 提交 mutations 的函数

示例：

某函数中{ this.$store.dispatch('addFun')}

import Vuex from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 1 }, getters: { // getters相当与vue中的computed计算属性 getStateCount: function(state){ return state.count+1; } }, mutations: { add(state) { state.count += 1; }, }, actions: { // 注册actions，相当于vue中的methods addFun(context){ // context接收一个与store实例具有相同方法的属性的context对象 context.commit('add') }, }})export default store

复制代码

使用 mapState，mapGetters，mapActions，代替this.$store.state.count和this.$store.dispatch('addFun')这种写法。

如何使用：

import {mapState, mapGetters, mapActions} from 'vuex';

// 使用computed 状态变化

computed: { ...mapState({ countdada: state=>state.count })}

// 将 store 中的 getter 映射到局部计算属性：import { mapGetters } from 'vuex'

export default { // ... computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) }}

...mapGetters({ // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount` doneCount: 'doneTodosCount'})

复制代码