前端开发常用笔记

弹性盒模型

弹性盒模型使用首先必须条件就是要有：display:flex;

然后弹性盒子的五个属性才会生效，五个属性分别是：

flex-direction，justify-content，align-items，flex-wrap，align-content

一、flex-direction

flex-direction：属性决定主轴的方向（即子元素的排列方向）

• row：左对齐
• row-reverse：右对齐
• column：纵向对齐，即从上向下排列
• column-reverse：反转纵向对齐，即从下向上排列

二、justify-content

justify-content：设置弹性盒子元素在主轴（横轴）方向上的对齐方式

• flex-start：左对齐
• flex-end：右对齐
• center：居中
• space-between：平均分布
• space-around：平均分布并且两边有一半的间隔空间

三、align-items

align-items：设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式

• flex-start：左对齐
• flex-end：右对齐
• center：居中
• baseline：基线对齐
• stretch：auto默认

四、flex-wrap

flex-wrap：设置弹性盒子的子元素超出父容器时是否换行

• nowrap：默认单行
• wrap：多行
• wrap-reverse：翻转多行
• initial
• inherit：继承

五、align-content

align-content：修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

六、弹性盒子元素属性

1. order 属性值为整数，数字越小，越靠前。
2. align-self：纵轴
3. flex：用于指定弹性子元素之间怎么分配空间。

JS常用属性和方法

一、字符串常用属性和方法

1、charAt

作用：返回指定位置的字符串，索引从0开始

语法：.charAt(索引),返回值是指定索引位置的字符串,超出索引,结果是空字符串

let a = '123456';
a.charAt(0);	//1
a.charAt(5);	//6
a.charAt(10);	//返回空字符

2、indexOf

作用：返回字符串所在位置的下标，索引从0开始

语法：.indexOf(要找的字符串,从某个位置开始的索引);返回的是这个字符串的索引值,没找到则返回-1

let a = 'abcdefg';
a.indexOf('b');	//1
a.indexOf('g');	//6
a.indexOf('h');	//-1

3、replace

作用：替换字符串中的字符(不会影响原本的字符串)

.replace(“原来的字符串”,“新的字符串”);用来替换字符串的

let a = '123456';
a.replace('6','7');	//123457
console.log(a);	//123456
a = a.replace('6','g');
console.log(a);	//12345g

4、slice

作用：提取指定位置开始结束下标的字符串

语法：.slice(开始的索引,结束的索引); 从索引5的位置开始提取,到索引为10的前一个结束,没有10，并返回这个提取后的字符串

let a = 'abcde';
a.slice(1,3)	//bc	提取从索引1开始到索引3之前结束（不包括索引3的字符串）

5、substr

作用：根据下标位置和从下标开始显示几个字符截取字符串

语法：.substr(开始的位置,个数);返回的是截取后的新的字符串

let a = '123456';
a.substr(2,3);	//345

6、substring

作用：根据开始结束下标截取字符串

语法：.substring(开始的索引,结束的索引),返回截取后的字符串,不包含结束的索引的字符串

let a = '123456';
a.substring(2,4);	//34

7、转换大小写

//.toLowerCase();转小写
let a = 'ABC';
a.toLocaleLowerCase();	//abc
//.toUpperCase();转大写
let b = 'abc';
b.toUpperCase(); //ABC

8、干掉字符串两端的空格

 let c = '   ab   '
 c.trim();	//'ab'

二、Data对象常用属性和方法

let dt = new Date();

dt.getFullYear();//年

dt.getMonth();//月---从0开始

dt.getDate();//日

dt.getHours();//小时

dt.getMinutes();//分钟

dt.getSeconds();//秒

dt.getDay();//星期---从0开始

dt.toDateString();//日期	Wed May 11 2022

dt.toLocaleDateString();//日期	2022/5/11

dt.toTimeString();//时间	15:28:53 GMT+0800 (中国标准时间)

dt.toLocaleTimeString();//时间	15:28:53

dt.valueOf();//毫秒

三、对象常用属性和方法

1、数据属性

对象里每个属性都有自己的四个数据属性来描述它们的行为。

[[Configurable]]：表示属性是否可以通过 delete 删除并重新定义，是否可以修改它的特性，以及是否可以把它改为访问器属性。默认情况下，所有直接定义在对象上的属性的这个特 性都是 true；

[[Enumerable]]：表示属性是否可以通过 for-in 循环返回。默认情况下，所有直接定义在对象上的属性的这个特性都是 true；

[[Writable]]：表示属性的值是否可以被修改。默认情况下，所有直接定义在对象上的属性的 这个特性都是 true；

[[Value]]：包含属性实际的值。这就是前面提到的那个读取和写入属性值的位置。这个特性 的默认值为 undefined。

​ 如平常显示的声明一个对象的时候，[[Configurable]]、[[Enumerable]]和[[Writable]]都会被设置为 true，而[[Value]]特性会被设置为指定的值。比如：

let person = { 
 name: "Nicholas" 
};

我们可以通过defineProperty或create方法给属性设置，比如：

let obj = {};
Object.defineProperties(obj, {
    'property1': {
        value: 10,
        writable: true,			//该属性可以被修改
        enumerable: true,		//该属性可以被for-in循环返回
        configurable: false		//该属性不能被删除并重新定义
    },
    'property2': {
        value: 'Hello',
        writable: false
    }
});

可以通过getOwnPropertyDescriptors来查看对象属性的具体数据属性

//继上面代码块继续
Object.getOwnPropertyDescriptors(obj);
/** 输出如下
{
	property1:{
		configurable: false,
        enumerable: true,
        value: 10,
        writable: true
	},
	property2:{
        configurable: true,
        enumerable: true,
        value: "Hello",
        writable: false
	}
}
*/

2、create

作用：使用指定的原型对象及其属性去创建一个新的对象

let parent = {x : 1,y : 2};
let child = Object.create(parent,{
    z : {                           // z会成为创建对象的属性
        writable:true,
        configurable:true,
        value: "newAdd"
    }
});
console,log(child)	//{z: "newAdd"}	虽然打印的只有z属性，但是他的原型却是parent同样可以调用x和y属性
console.log(child.x,child.y)//1 2

3、assign

作用：该方法主要用于对象的合并，将源对象source的所有可枚举属性合并到目标对象target上,此方法只拷贝源对象的自身属性，不拷贝继承的属性

语法：Object.assign(对象，对象)；传入两个要合并的对象

let a = {a:'我',b:'你'};
let b = {c:'他'};
Object.assign(a,b)	//{a:'我',b:'你',c:'他'}	a对象被改变为返回的对象，b对象不变

4、keys

作用：返回一个由一个给定对象的自身可枚举属性组成的数组，也就是说返回对象的键组成的数组

let arr = ["a", "b", "c"];
console.log(Object.keys(arr));	// ['0', '1', '2']
let obj = { foo: "bar", baz: 42 },
console.log(Object.keys(obj));	// ["foo","baz"]

5、values

作用：方法返回一个给定对象自己的所有可枚举属性值的数组，也就是说返回对象值组成的数组

let obj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(obj)); // ['b', 'c', 'a']
let a = { a: '你', b: '我', c: '他' };
console.log(Object.values(a)); // ['你', '我', '他']

6、entries

作用：返回一个给定对象自身可枚举属性的键值对数组，也就是说返回由对象的键值组成的键值对数组

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
const a = {'w','b','c'};
console.log(Object.entries(a));	//[ ['0','w'],['1','b'],['2','c'] ]

7、is

作用：判断两个值是否相同。

Object.is('foo', 'foo');     // true
Object.is(window, window);   // true

Object.is('foo', 'bar');     // false
Object.is([], []);           // false

var test = { a: 1 };
Object.is(test, test);       // true

Object.is(null, null);       // true

// 特例
Object.is(0, -0);            // false
Object.is(-0, -0);           // true
Object.is(NaN, 0/0);         // true

8、freeze

作用：冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说，这个对象永远是不可变的。该方法返回被冻结的对象。

**Object.isFrozen() **判断一个对象是否被冻结

let obj = {
    prop: function() {},
    foo: 'bar'
};
Object.freeze(obj);
Object.isFrozen(obj); // === true
// 现在任何改变都会失效
obj.foo = 'quux'; 
// 静默地不添加此属性
obj.quaxxor = 'the friendly duck';

console.log(obj)	//{prop: function() {},foo: 'bar'};

9、preventExtensions

作用：对象不能再添加新的属性。可修改，删除现有属性，不能添加新属性。

let obj = {
    name :'chen',
    age : 22 ,
    sex : 'male'
}

obj = Object.preventExtensions(obj);
console.log(obj);    // {name: "chen", age: 22, sex: "male"}
obj.name = 'haha';
console.log(obj)     // {name: "haha", age: 22, sex: "male"}
delete obj.sex ;
console.log(obj);    // {name: "haha", age: 22}
obj.address  = 'china';
console.log(obj)     // {name: "haha", age: 22}

四、数组常用属性和方法

1、flat

作用：数组扁平化

语法：.flat(Infinity)，数组自带的扁平化方法,flat的参数代表的是需要展开几层，如果是Infinity的话，就是不管嵌套几层，全部都展开

const arr = [1,[2,[3,[4,5]]],6];
console.log(arr.flat(Infinity));	//[1,2,3,4,5,6]

2、concat

作用：合并数组

语法：.concat(数组,数组,…)

let a = [1,2,3];
let b = ['q','w','c'];
let c = ['我','你','他'];
a.concat(b,c);	//[1,2,3,'q','w','c','我','你','他']

3、every

作用：用于检测数组中的所有元素是否都满足指定条件（该条件为一个函数）

语法：.every(function(currentValue,index,arr){ return 具体条件; })

let arr = [1000, 2000, 3000];
let flag = arr.every(function (current, index, lists) {
   	console.log(current,'----',index,'-----',lists);//1000 '----' 0 '-----'[1000, 2000, 3000]
    return current > 2000;//数组中的每个元素的值都要大于2000的情况,最后才返回true
})

4、filter

作用：过滤数组

语法：.filter(val=>{ return 具体判断; })

let a = [1,2,3,4,5,6];
a.filter(val=>{
    return val>3
});
//[4, 5, 6]

5、push

作用：往数组最后追加一跳数据

语法：.push(对象)

let a = ['w','a','s','d'];
a.push({title:'新元素'});//['w','a','s','d',{title:'新元素'}]

6、pop

作用：删除数组中最后一个元素,返回值就是删除的这个值

let a = ['w','a','s','d'];
a.pop();// 输出d
console.log(a);//['w','a','s'];

7、shift

作用：删除数组中第一个元素,返回值就是删除的这个值

let a = ['w','a','s','d'];
a.shift(); //输出w
console.log(a)//['a','s','d'];

8、unshift

作用：向数组的第一个元素前面插入一个新的元素,----返回值是插入后的长度

let a = ['a','s','d'];
a.unshift('w');//输出 4
console.log(a);//['w', 'a', 's', 'd']

9、forEach

作用：循环数组遍历出每个元素

let a = ['w', 'a', 's', 'd'];
a.forEach(val=>{
    console.log(val) //第一遍输出w，第二遍输出a,...
})

10、indexOf

作用：查找数组中的数据，返回的是索引,没有则是-1

let a = ['w', 'a', 's', 'd'];
a.indexOf('s');//输出2

11、join

作用：把数组组合成字符串，默认不传参数，使用逗号分隔，传入什么以什么分隔

let a = ['w', 'a', 's', 'd'];
a.join();//'w,a,s,d'
a.join('|');//'w|a|s|d'

12、map

作用：数组中的每个元素都要执行这个函数，也是用于遍历循环数组

var array1 = [1,4,9,16];
const map1 = array1.map(x => x *2);
console.log(map1);//[2,8,18,32]

13、reverse

作用：反转数组

let a = ['w', 'a', 's', 'd'];
a.reverse(); //['d', 's', 'a', 'w']

14、sort

作用：数组排序，参数也可以使用函数

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();//Apple,Banana,Mango,Orange

var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});//1,5,10,25,40,100
points.sort(function(a,b){return b-a});//[100, 40, 25, 10, 5, 1]

15、slice

作用：把截取的数组的值放在一个新的数组中,但是不包含结束的索引对应的元素值

语法：.arr.slice(开始的索引,结束的索引)

let a = ['w', 'a', 's', 'd'];
a.slice(1,2);//输出['a']

16、splice

作用：一般是用于删除数组中的元素,或者是替换元素,或者是插入元素

语法：.splice(开始的位置,要删除的个数,替换的元素的值);

//添加
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");//输出["Apple"]，返回的是被删除的内容
console.log(fruits);//[Banana,Orange,Lemon,Kiwi,Mango]
//删除
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,2);//输出['Orange', 'Apple']，因为删除的是下标为1和2的所以返回的是被删除的内容
console.log(fruits);//输出['Banana', 'Mango']

五、防抖实现

<template>
    <div> 
        <input v-model="answer" @keyup="change" />
    </div>
</template>
<script>
    export default {
        name: "",
        data() {
            answer: "",
            timeout: null
        },
        method: {
            change() {
                if(this.timeout){
                    clearTimeout(this.timeout)
                }
                this.timeout = setTimeout(() => {
                    console.log(this.answer)
                }, 500);
            }
        }
    }
</script>

适用场景每间隔四秒输出一次

let promiseTasek = (num) => {
    return new Promise((resolve, rejece) => {
        setTimeout(() => {
            console.log(num)
            resolve(true)
        }, 4000)
    })
}
function toTaskByForEach() {
    const arr = [1, 2, 3, 4, 5, 6]
    arr.reduce(
        (pre, item) => pre.then(() => promiseTasek(item)),
        Promise.resolve()
    )
}

toTaskByForEach()