js基础知识03

最新推荐文章于 2022-11-23 17:32:46 发布

fdt丶

最新推荐文章于 2022-11-23 17:32:46 发布

阅读量285

点赞数

分类专栏： js基础(未更完) 文章标签：其他数据库网络

本文链接：https://blog.csdn.net/Int321/article/details/123892417

版权

js基础(未更完) 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.面试题

js所有的赋值都是关联，不是拷贝

1

        //1.写出下面结果输出的答案
        let a = {
            n: 1
        };
        
        let b = a;
        a.x = a = {
            n: 2
        };
        console.log(a.x); // undefined
        console.log(b);  // {n: 1, x:{n:2}}

1.1.堆的嵌套，会导致内存溢出

//变式：
let a = { n: 1 }
let b = a;
a.x = b;
console.log(a);//{n: 1, x: {…}} n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}}n: 1x: {n: 1, x: {…}

2.分别写出下列表达式输出的结果

var a = 'abc' + 123 + 456; //abc123456
var b = '456' - '123';  //333

var c = 100 + true + 21.2 + null + undefined + "Tencent" + [] + null + 9 + false;  //NaNTencentnull9false

//100 + true + 21.2 + null =122.2
//100 + true + 21.2 + null + undefined=NaN
console.log(a, b, c);

2.js数据类型检测（4种）

1.typeof（不是方法，不加小括号）

基于typeof检测出来的结果
1.首先是一个字符串
2.字符串中包含对应的类型

console.log(typeof 1); // 'number'
console.log(typeof NaN); // 'number'
typeof null //'object'
typeof undefined  //'undefined'

typeof [] // 'object'
typeof [1,2,3]   //'object'

typeof function(){}  //'function'

局限性

typeof null => "object"但是null并不是对象
基于typeof无法细分出当前值是普通对象还是数组对象等,因为只要是对象数据类型，返回的结果都是"object"

typeof面试题

typeof typeof typeof []   

typeof []   //'object'
typeof typeof [] 'string'==>typeof 'object'

输出结果是：'string’

因为typeof检测的结果都是字符串，所以只要两个及以上同时检测，最后结果必然是"string"

剩下的以后再讲。。。。。
2.instanceof :用来检测当前实例是否率属于某个类

3.constructor :基于构造函数检测数据类型（也是基于类的方式)

4.Object.prototype.toString.call()︰检测数据类型最好的办法

3.js中的操作语句

3.1判断

1.if/else if/esle

2.三元运算符条件？成立：不成立

条件?条件成立处理的事情:不成立处理的事情;
1.如果处理的事情比较多，我们用括号包起来，每一件事情用逗号分隔
2.如果不需要处理事情，可以使用null/undefined占位

3.switch case

1.每一种CASE情况结束后最好都加上BREAK(如果不加break，会全部执行)
2.default等价于else，以上都不成立干的事情
3.每一种case情况的比较用的都是===（绝对相等）

let score = 10;
let n = score / 10;
switch (n) {
    case 10:
    case 9: console.log("成绩为优" + score);
        break;
    case 8: console.log("成绩为良=" + score);
        break;
    case 6: console.log("成绩为及格=" + score);
        break;
    default: console.log("成绩不及格=" + score);

}

'5'==5 和 case '5'

switch ('5') {//会输出0000，此时case5 不等于5
    case 5: console.log(55555555);
        break;
    default: console.log(0000);
}


if('5'==5){  //'5'==5判断为true
'5'==5 先将字符串转化为数组在进行比较
}

3.2== 和 ===

== 相等：（‘5’ == 5）判断为真，(如果左右两边数据值类型不同，是默认先转换为相同的类型，然后比较

===绝对相等：（‘5’===5）判断为假，如果类型不一样，肯定不相等。

项目中为了严谨，推荐使用三个等于号

能用css写的就不要用js来写

练习1.鼠标滑过css实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>鼠标滑过</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            /*自绝父相*/
            box-sizing: border-box;
            /*C3新增，控制最终宽高*/
            margin: 20px auto;
            width: 200px;
            height: 40px;
            border: 1px solid pink;
            text-align: center;
            line-height: 40px;
        }


        .box .detail {
            position: absolute;
            /*自绝父相*/

            box-sizing: border-box;
            /*C3新增，控制最终宽高*/
            width: 500px;
            height: 100px;
            text-align: center;
            border: 1px solid lightcoral;
            left: -1px;
            top: 38px;
            display: none;      /*隐藏*/

            z-index: -1;/*优先展示*/

        }

        .box:hover{
            border-bottom-color:#FFF ;
        }
        .box:hover .detail {
            display: block;
        }
    </style>
</head>

<body>

    <div class="box">
        <span>购物车</span>
        <div class="detail">购物车详情</div>
    </div>
</body>

</html>

练习2.鼠标点击js实现

传统基于操作DOM的方式实现业务需求
1．想操作谁就先获取谁
2．给某元素绑定某事件
3．在事件触发的时候修改元素的样式等

操作DOM：传统操作，JQ
操作数据：Vue，React

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>鼠标滑过</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            /*自绝父相*/
            box-sizing: border-box;
            /*C3新增，控制最终宽高*/
            margin: 20px auto;
            width: 200px;
            height: 40px;
            border: 1px solid pink;
            text-align: center;
            line-height: 40px;

            cursor: pointer;
            /*变小手*/
        }


        .box .detail {
            position: absolute;
            /*自绝父相*/

            box-sizing: border-box;
            /*C3新增，控制最终宽高*/
            width: 500px;
            height: 100px;
            text-align: center;
            border: 1px solid lightcoral;
            left: -1px;
            top: 38px;
            display: none;
            /*隐藏*/

            z-index: -1;
            /*优先展示*/

        }
    </style>



</head>

<body>

    <div class="box" id="box">
        <span>购物车</span>
        <div class="detail" id="detail">购物车详情</div>
    </div>
</body>

<script>
    //传统基于操作DOM的方式实现业务需求
    //1．想操作谁就先获取谁
    //2．给某元素绑定某事件
    //3．在事件触发的时候修改元素的样式等


    //1．document.getElementById([ID]):在整个文档中，通过元素的ID获取到当前这个元素对象
    let box = document.getElementById('box');
    let detail = document.getElementById('detail');


    //2.事件绑定 对象.onxxx=function(){}  (click/mousedown/keydown...)
    let flag = 0;
    box.onclick = function () {
        if (flag === 0) {
            //3．在事件触发的时候修改元素的样式等
            detail.style.display = 'block';    //.style方法操作元素的行内样式
            box.style.borderBottomColor = '#FFF'
            flag = 1;
        } else {
            //3．在事件触发的时候修改元素的样式等
            detail.style.display = 'none';   //这种方法操作元素的行内样式
            box.style.borderBottomColor = 'pink'
            flag = 0;

        }

    }


</script>

</html>

3.2循环

1.for循环
2. for in循环
3. for of循环（ES6新增）
4. while
5. do while

1.for循环

1.创建循环初始值
2.设置（验证）循环执行的条件
3.条件成立执行循环体中的内容
4.当前循环结束执行步长累计操作

        for(var i=0;i<5;i++){
            console.log(i); //0 1 2 3 4 
        }
        console.log(+i);//5

循环2次，结果为4


        for (var i = 10; i > 4; i -= 2) {
            if (i < 7) {
                i++;
            } else {
                i--;
            }
        }
        console.log(i);

continue和break的区别

continue结束本轮循环
break结束整个循环

      for (var i = 0; i < 10; i++) {
          if (i >= 2) {
              i += 2; 
              continue; //一趟循环结束
          }
          if (i >= 6) {
              i--;
              break;//所有循环结束
          }
          i++;
          console.log(i);  //1 
      }
      console.log(i);//11

判断输入数的符号

<!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">
    <title>Document</title>
</head>

<body>
    <input type="text" id="text1">
    <button id="btn1">判断</button>
</body>

<script>
    var text1 = document.getElementById('text1');
    var btn1 = document.getElementById('btn1');
    btn1.onclick = function () {
        //console.log(text1.value);
        var n = Number(text1.value)

        if (isNaN(n)) {//
            console.log('no');
        } else if (n > 0) {
            console.log('正数');
        } else if (n < 0) {
            console.log('负数');
        }
    }
</script>

</html>

2.for in循环

3.for of循环（ES6新增）

4.while

5.do while

fdt丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础知识03

这里写目录标题面试题11.1.堆的嵌套，会导致内存溢出2.分别写出下列表达式输出的结果面试题js所有的赋值都是关联，不是拷贝1 //1.写出下面结果输出的答案 let a = { n: 1 }; let b = a; a.x = a = { n: 2 }; console.log(a.x); // undefined
复制链接

扫一扫