js之常识-细节

最新推荐文章于 2022-08-16 11:52:46 发布

小白Hard

最新推荐文章于 2022-08-16 11:52:46 发布

阅读量180

点赞数

分类专栏： js 文章标签： js es6

本文链接：https://blog.csdn.net/lly193426/article/details/107967970

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

JS组成的三部分：ECMAScript (ES3/ES6~9) 定义了JS的语法规范
DOM（document object model) 文档对象模型，提供对应的属性和方法，可以让JS操作页面中的DOM元素。
BOM（browser object model) 浏览器对象模型，提供操作浏览器的属性和方法。
JS中创建变量：ES3 var
ES6 let / const（常量）
function创建函数
class 类名（首字母大写）
import/require导入模块
js中的注释：ctrl+/ 单行注释 shift+alt+A 批量注释（块注释）
浏览器常用的输出方式：
控制台输出的：console.log()、console.dir()输出一个对象的详细键值对信息
console.table()把一个多维JSON数组在控制台按照表格的方式呈现出来
console.time()计算某一程序消耗的时间
console.warn()输出警告信息
============================
console.log()可以一次输出多个值，但是console.dir()只能输出一个值
window提示框
alert/confirm/prompt——在confirm的基础上多了一个输入框，输出转化为字符串。输出的内容是字符串
向页面指定容器添加内容
document.write()，在页面中写入信息，输出的结果是字符串
innerHTML、innerText、value
JS中的数据类型：基本数据类型（值类型/原始值）
数字 number
字符串 string
布尔 boolean
空对象指针 null
未定义 undefined
es6新增的唯一值类型 symbol
bigint
引用数据类型
对象数据类型
普通对象{}
数组对象[]
正则对象 /^$/
日期对象 new Date
数学函数对象 Math
函数数据类型
Number数据类型
验证一个数字是不是有效数字使用isNaN:console.log(isNaN(NaN)); 结果为true
Number可以把其他数据类型“强制”转换为数字类型，把字符串转换为数字，一旦字符串中出现非有效数字，则结果为NaN,只有有有效数字，才能转换为具体数字。
console.log(Number(null)); //0
console.log(Number(undefined)); //NaN
对象和函数都是先变为字符串，然后在转换为数字。{}——“[object Object]”
[]—— ’ '——0
parseInt/parseFloat从字符串最左边开始查找，把找到的有效数字转换为数字，一直遇到一个非有效字符为止，则结束查找。
获取所有属性名，console.log(Object.keys(obj));

let n={x:100};
let m=[10,20];
let obj={};
obj[n]="珠峰";  //{”[object Object]":"珠峰"}
obj[m]="培训";   //{"10,20":"培训"}
console.log(obj);

数据类型检测
代码运行机制
console.log(alert(1)); //结果为先弹出一个对话框1，然后控制台输出undefined。
条件，三元运算符：

let x=10;
if(x>=10){
x++;
console.log(x)
}
//改为三元运算符
x>=10?(x++,cosoloe.log(x)):null;

a++ 指的是Number(a)+1 a+=1 a=a+1;
每一个case比较的时候都是===进行比较
换肤案例

<body style="background-color: white;">
    <button id="changeBtn">点击按钮变化颜色，红->蓝->绿->白</button>
    <script>
        let body=document.body;
        let changeBtn=document.getElementById("changeBtn");
        let arr=["red","blue","green","white"];
        let index=-1;
        changeBtn.onclick=function () {
            index++;
            if(index>arr.length-1){
                index=0;
            }
            body.style.backgroundColor=arr[index];
        };
    </script>
</body>

判断闰年还是平年

<body>
    <input type="text" id="inpBox">
    <button id="submit">提交</button>
    <script>
        let inpBox=document.getElementById("inpBox"),
            submit=document.getElementById("submit");      
        submit.onclick=function () {
            let val=inpBox.value;
                val=Number(val);
                if(isNaN(val)||val<1000||val>9999){
                    alert("请输入有效数字");
                    return;
                }
                if((val%4==0 && val%100==0)||val%400==0){
                    alert(`${val}是闰年`);
                }
                else{
                    alert(`${val}是平年`);
                }
        }
    </script>
 </body>