CSS、JS遗忘知识查漏补缺

是吃货不是贝爷

已于 2023-05-19 10:13:39 修改

阅读量116

点赞数

分类专栏： javascript 文章标签： javascript css 1024程序员节

于 2022-10-14 11:52:57 首次发布

本文链接：https://blog.csdn.net/q4451728/article/details/127317793

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JS

undefined、null

undefined和数字相加为NaN，而和字符串xxx相加变为undefinedxxx
null和和数字x相加为数字x（null自动为0），而和字符串xxx相加变为nullxxx
typeof null值为Object。null是一个只有一个值的特殊类型。表示一个空对象引用。
boolean的true和false在加法运算中true当1，false当0

parseInt

包含数字字母的情况

var str1 = '24num';
console.log(str1);//24
var str2 = 'num24';
console.log(str2);//NaN

Boolean

能被转化为boolean(false)的五种情况

console.log(Boolean(""));//false
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false

其他就都是true了

hasOwnProperty

xxxhasOwnProperty(‘yyy’)报错，改为Object.prototype.hasOwnProperty.call(xxx, “yyy”)

prompt

可以进行输入并接受

var num = prompt('输入数字');
console.log(num);

浮点数计算

尽量避免浮点数参与计算，因为会丢失精度

var num = 0.1 + 0.2;   //0.30000...4丢失精度
console.log(num == 0.3); //false

arguments

arguments是伪数组，存储的是用户传的实参，如fn(1,2,3)中的1,2,3，可以得到length，但是不可以直接调用数组的方法，可以利用索引来获取相应的值。

https://blog.csdn.net/haotian1997/article/details/114731981

局部变量和全局变量

局部变量在函数执行完毕就会销毁，而全局变量在浏览器关闭时候才销毁。

构造函数以及new关键字

function Star(){
	this.name = name;
	this.sing = function(a){
		console.log(a);
	}
}
let sly = new Star('某某某');
sly.sing(1);

new在执行的时候：
1.在内存中创建一个空对象；
2.让this指向这个这个新的对象；
3.执行构造函数里面的代码，给这个新对象添加属性和方法；
4.返回这个对象（所以构造函数内不需要return）

遍历对象

function Star(){
	this.name = name;
	this.sing = function(a){
		console.log(a);
	}
}
let sly = new Star('某某某');
for(let k in sly) {
	console.log(k);	//name，sing
	console.log(sly[k]);	//'某某某',f...
}

MDN文档

https://developer.mozilla.org/zh-CN/

日期date

获取毫秒有三个方法

var date = new Date();
console.log(date.valueOf());	//1
console.log(date.getTime());	//2
var date1 = +new Date();
console.log(date1);		//3
console.log(Date.now());		//4

数组

判断是否为数组

var arr = [1,2,3];
console.log(arr.instanceOf Array)//1
console.log(Array.isArray(arr))//2
//Array.isArray优于instanceOf，因为前者可以检测iframes

将数组转化为字符串

var arr = [1,2,3];
console.log(arr.toString())//输出为1,2,3
console.log(arr.join())//输出为1,2,3
console.log(arr.join("-"))//输出为1-2-3

reduceRight

reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
注意: reduce() 对于空数组是不会执行回调函数的。

CSS

@keyframes

动画循环效果，可以与animate结合使用

html文件

<!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">
    <link type="text/css" rel="styleSheet" href="keyframes.css" />
    <title>Document</title>
</head>

<body>
    <div class="box"></div>
</body>

</html>

css文件

@keyframes spin {
    0% {
        width: 400px;
        height: 400px;
        background-color: aqua;
        /*0度*/
        transform: rotate(0deg);
    }

    100% {
        width: 100px;
        height: 100px;
        background-color: green;
        /*360度*/
        transform: rotate(360deg);
    }
}

.box {
	/*infinite为无限循环，如果要特定次数的话就设定为相应的数字；
	linear就是变换速度变为匀速
	alternate就是交替循环过程*/
    animation: spin 1s infinite linear alternate;
    width: 400px;
    height: 400px;
    background-color: gold;
}

变量提升和函数提升

1.JS引擎运行JS分为两步：预解析和代码执行
（1）预解析JS引擎会把JS里面所有的var和function提升到当前
（2）代码执行，按照代码书写的顺序从上往下执行
2.预解析分为变量预解析（变量提升）和函数预解析（函数提升）
（1）变量提升，就是把所有的变量声明提升到当前的作用域最前面，不提升赋值操作。
（2）函数提升，就是把所有的函数声明提升到当前作用域的最前面，不调用函数。

f1();
console.log(c);
console.log(b);
console.log(a);

function f1() {
	var a = b = c = 9;
	//相当于 var a = 9; b = 9; c = 9;可以看到b和c前面没有var，当全局变量看
	console.log(a);
	console.log(b);
	console.log(c);
}

//提升完毕
function f1() {
	var a;
	a = b = c = 9;
	console.log(a);
	console.log(b);
	console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);//a为局部，报错
结果就是 99999报错

display: flex

https://blog.csdn.net/weixin_41044151/article/details/114071215

ES6

动态比较对象

this.info = {…this.info,…dataObj}
将info和dataObj进行动态比对，如果是info内有，dataObj内没有的属性，就不变化，其他的替换成dataObj的。

解构赋值

https://www.jianshu.com/p/d4a3baeac680

是吃货不是贝爷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS、JS遗忘知识查漏补缺

xxxhasOwnProperty(‘yyy’)报错，改为Object.prototype.hasOwnProperty.call(xxx, “yyy”)null和和数字x相加为数字x（null自动为0），而和字符串xxx相加变为nullxxx。undefined和数字相加为NaN，而和字符串xxx相加变为undefinedxxx。boolean的true和false在加法运算中true当1，false当0。动画循环效果，可以与animate结合使用。
复制链接

扫一扫