puddlejumper26 commented 3 years ago

Array 1-20	21-40
Generator 1-20
Traverse 1-20
CSS 1-20
Object 1-20
Algorithms 1-20
Concepts 1-20

puddlejumper26 commented 3 years ago

Array 1-20

1

❓

语句 var arr=[a,b,c,d];执行后，数组 arr 中每项都是一个整数，下面得到其中最大整数语句正确的是哪几项？
A.Math.max(arr)
B.Math.max(arr[0], arr[1], arr[2], arr[3])
C.Math.max.call(Math, arr[0], arr[1], arr[2], arr[3])
D.Math.max.apply(Math,arr)

🔑 BCD 因为函数 Math.max(x);的参数是 Number 类型，可以使小数，整数，正数，负数或者是0.如果不是上面所述类型就会返回 NaN. 📚

func . call (this, arg1, arg2); func . apply (this, [arg1, arg2]); 其中 this 是你想指定的上下文，他可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象)，call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。 call(), apply(), bind()　　

2

❓ 定义一个 log 方法，让它可以代理 console.log 方法，常见的解决方法是：

function log(msg)　{
  console.log(msg);
}
log(1);    //1
log(1,2);    //1

🔑

但是当传入参数的个数是不确定的时候，上面的方法就失效了
使用 apply 或者 call，注意这里传入多少个参数是不确定的，所以使用apply是最好的
```
function log(arguments){
console.log.apply(console, arguments);
};
log(1);    //1
log(1,2);    //1 2
```

3

❓

和上一题使用同一个前提
给每一个 log 消息添加一个"(app)"的前辍，比如：
```
log("hello world");    //(app)hello world
```
🔑
arguments参数是个伪数组，通过 Array.prototype.slice.call 转化为标准数组
```
function log(arguments){
var args = Array.prototype.slice.call(arguments);
args.unshift('(app)');

console.log.apply(console, args);
};
```
📚

Javascript中存在一种名为伪数组的对象结构。比较特别的是 arguments 对象，还有像调用 getElementsByTagName , document.childNodes 之类的，它们返回NodeList对象都属于伪数组。不能应用 Array下的 push , pop 等方法。Array.prototype.slice.call 转换为真正的数组的带有 length 属性的对象，这样 domNodes 就可以应用 Array 下的所有方法了. var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"))

4

❓

删除给定数组中的第二项和第三项，并且在得到的新的数组中第二项后面添加一个新的值：
arrB 中的 1,2,3 应该填写的信息或者值是什么
```
var arrA = ['a','b','c','d','e'];
var arrB = arrA. 1 ( 2 , 3 ,'newvalue')
```
🔑 1 --> slice 2 --> 1 3 --> 2

5

❓ js 数组去重 🔑 📚

有两个地方需要注意： 1、返回值是否是当前引用， 2、“重复”的判断条件。
Array.prototype.uniq = function () {
    // 长度只有 1，直接返回当前的拷贝
    if (this.length <= 1) {
        return this.slice(0);
    }
    var aResult = [];
    for (var i = 0, l = this.length; i < l; i++) {
        if (!_fExist(aResult, this[i])) {
            aResult.push(this[i]);
        }
    }

    return aResult;
    // 判断是否重复
    function _fExist(aTmp, o) {
        if (aTmp.length === 0) {
            return false;
        }
        var tmp;
        for (var i = 0, l = aTmp.length; i < l; i++) {
            tmp = aTmp[i];
            if (tmp === o) {
                return true;
            }

            // NaN 需要特殊处理
            if (!o && !tmp && tmp !== undefined && o !== undefined && isNaN(tmp) &&isNaN(o)) {
                return true;
            }
        }
        return false;
    }
}

6

❓ 🔑 📚

7

❓ 🔑 📚

7

❓ 🔑 📚

8

❓ 🔑 📚

9

❓ 🔑 📚

⬆️

puddlejumper26 commented 3 years ago

Generator 1-20

1

❓


有以下 ES6 代码
function * gen() {
yield 1;
yield 2;
yield 3;
}
下面选项描述正确的是哪个？
A.gen()执行后返回 2
B.gen()执行后返回 undefined
C.gen()执行后返回一个 Generator 对象
D.gen()执行后返回 1

🔑 C 这是 ES6 的新 feature, function 后面带 * 的叫做 generator function, 函数运行时,返回一个迭代器

⬆️

puddlejumper26 commented 3 years ago

Traverse 1-20

1

❓ 写一个 traverse 函数，输出所有页面宽度和高度大于 50 像素的节点。 🔑

<script language="javascript">
  function traverse() {
     var arr = [];
     var elements = [];
     if (document.all) {
         elements = document.all;
     } else {
        elements = document.getElementsByTagName("*");
    }

   //console.log(elements.length);
   for (var i = 0; i < elements.length; i++) {
            var ele = elements[i];
            //console.log(ele.tagName);
           //width 返回的是字符串 offsetWidth 返回的是带边框的 Number 型的数字
           var width = parseFloat(ele.style.width) || ele.offsetWidth;
           //console.log(width);
           var height = parseFloat(ele.style.height) || ele.offsetHeight;
          //console.log(height);
         if (width > 50 && height > 50) {
                arr.push(elements[i].tagName);
          }
    }
    return arr;
}

window.onload=function() //注意 onload 的使用方式
{
   console.log(traverse());
   console.log("a");
   console.log('a');
}

</script>

🔑

链接：https://www.nowcoder.com/questionTerminal/448399736ff34b9399d04ca6ca94567e
来源：牛客网

function traverse(){
    return Array.prototype.filter.call(document.querySelectorAll('body *'), function(node){
        return node.offsetWidth > 50 && node.offsetHeight > 50;
    });
}

2

❓ 使用 for ... in 循环数组中的元素会枚举原型链上的所有属性，过滤这些属性的方式是使用 ? 函数 🔑 答案： hasOwnProperty 📚

for ... in以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

for ... in是为遍历对象属性而构建的，不建议与数组一起使用，
数组可以用Array.prototype.forEach()和for ... of
var obj = {a:1, b:2, c:3};

for (var prop in obj) { console.log("obj." + prop + " = " + obj[prop]); }

// Output: // "obj.a = 1" // "obj.b = 2" // "obj.c = 3"

> - `hasOwnProperty()` 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性
```ts
const object1 = {};
object1.property1 = 42;
console.log(object1.hasOwnProperty('property1'));
// expected output: true
console.log(object1.hasOwnProperty('toString'));
// expected output: false
console.log(object1.hasOwnProperty('hasOwnProperty'));
// expected output: false

⬆️

puddlejumper26 commented 3 years ago

CSS 1-20

1

❓ 请写一个表格以及对应的 CSS，使表格奇数行为白色背景，偶数行为灰色背景，鼠标移上去时为黄色背景。 🔑

<table class="table">
   <tr><td>第一行</td></tr>
   <tr><td>第二行</td></tr>
   <tr><td>第三行</td></tr>
   <tr><td>第四行</td></tr>
</table>
<style>
   .table tr:nth-child(odd){
      background-color:white;
   }
   .table tr:nth-child(even){
      background-color:gray;
   }
   .table tr:hover{
     background-color:yellow;
   }
</style>

2

❓ 下面关于 CSS 布局的描述，不正确的是？ A.块级元素实际占用的宽度与它的 width 属性有关； B.块级元素实际占用的宽度与它的 border 属性有关； C.块级元素实际占用的宽度与它的 padding 属性有关； D.块级元素实际占用的宽度与它的 background 属性有关。 🔑 D

⬆️

puddlejumper26 commented 3 years ago

Object 1-20

1

❓

在空白处填入适当的代码使输出结果成立
```
function showMoney( ) {
  <空白处>
};
```

var personA = new Object; var personB = new Object; personA.money= "100"; personB.money= "150"; personA.showMoney= showMoney; personB.showMoney= showMoney; //输出结果： personA.showMoney( ); //"100" personB.showMoney( ); //"150"

🔑 
return this.money;

personA;
//
{
   money:"100",
   showMoney:f showMoney {...}
}

# 2
❓ 
输出对象中值大于 2 的 key 的数组
```ts
var data = {a: 1, b: 2, c: 3, d: 4};
Object.keys(data).filter(function(x) { return 1 ;})

期待输出： [“c” ,” d” ] 🔑 data[x] > 2

3

❓ 填写内容让下面代码支持 a.name = “name1” ; b.name = “name2” ;

function obj(name){
        _1_
}
obj. _2_ = "name2";
var a = obj("name1");
var b = new obj;

🔑 1 if (name) { this.name = name; } return this; 2 prototype.name

⬆️

puddlejumper26 commented 3 years ago

Algorithms 1-20

1

❓

写一个求和的函数 sum，达到下面的效果

// Should equal 15
sum(1, 2, 3, 4, 5);
// Should equal 0
sum(5, null, -5);
// Should equal 10
sum('1.0', false, 1, true, 1, 'A', 1, 'B', 1, 'C', 1, 'D', 1, 'E', 1, 'F', 1, 'G', 1);
// Should equal 0.3, not 0.30000000000000004
sum(0.1, 0.2);

🔑

function sum() {
    var nResult = 0;
    for (var i = 0, l = arguments.length; i < l; i++) {
        nResult += window.parseFloat(arguments[i]) || 0;
    }
    return nResult.toFixed(2) * 1000 / 1000;
}

2

❓ 请实现一个 fibonacci 函数，要求其参数和返回值如下所示： /* @desc: fibonacci @param: count {Number} @return: result {Number} 第 count 个 fibonacci 值，计数从 0 开始 fibonacci 数列为： [1, 1, 2, 3, 5, 8, 13, 21, 34 „] 则 getNthFibonacci(0)返回值为 1 则 getNthFibonacci(4)返回值为 5 */ function getNthFibonacci(count) { }

🔑

function getNthFibonacci(count) {
      if (count <= 1) {
           return 1;
      }
      return getNthFibonacci(count - 1) + getNthFibonacci(count - 2);
}

3

❓ javascript 语言特性中，有很多方面和我们接触的其他编程语言不太一样，比如说， javascript 语言实现继承机制的核心就是_1_，而不是 Java 语言那样的类式继承。 Javascript 解析引擎在读取一个 Object 的属性的值时，会沿着 _2_向上寻找，如果最终没有找到，则该属性值为 _3_ ；如果最终找到该属性的值，则返回结果。与这个过程不同的是，当 javascript 解析引擎执行“给一个 Object 的某个属性赋值”的时候，如果当前 Object 存在该属性，则改写该属性的值，如果当前的 Object 本身并不存在该属性，则赋值该属性的值。 🔑 prototype / 原型链 / undefined

⬆️

puddlejumper26 commented 3 years ago

1-20 Concepts

1

❓ javascript 语言特性中，有很多方面和我们接触的其他编程语言不太一样，比如说， javascript 语言实现继承机制的核心就是_1_，而不是 Java 语言那样的类式继承。 Javascript 解析引擎在读取一个 Object 的属性的值时，会沿着 _2_ 向上寻找，如果最终没有找到，则该属性值为 _3_ ；如果最终找到该属性的值，则返回结果。与这个过程不同的是，当 javascript 解析引擎执行“给一个 Object 的某个属性赋值”的时候，如果当前 Object 存在该属性，则改写该属性的值，如果当前的 Object 本身并不存在该属性，则赋值该属性的值。 🔑 prototype / 原型链 / undefined

2

❓ js 如何获取和设置 cookie？ 🔑

// 创建 cookie
function setCookie(name, value, expires, path, domain, secure) {
    var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    if (expires instanceof Date) {
        cookieText += '; expires=' + expires;
    }
    if (path) {
        cookieText += '; expires=' + expires;
    }
    if (domain) {
       cookieText += '; domain=' + domain;
   }
   if (secure) {
       cookieText += '; secure';
   }
   document.cookie = cookieText;
}
// 获取 cookie
function getCookie(name) {
    var cookieName = encodeURIComponent(name) + '=';
    var cookieStart = document.cookie.indexOf(cookieName);
    var cookieValue = null;
    if (cookieStart > -1) {
        var cookieEnd = document.cookie.indexOf(';', cookieStart);
       if (cookieEnd == -1) {
           cookieEnd = document.cookie.length;
        }
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart +
               cookieName.length, cookieEnd));
    }
    return cookieValue;
}
// 删除 cookie
function unsetCookie(name) {
    document.cookie = name + "= ; expires=" + new Date(0);
}

https://www.runoob.com/js/js-cookies.html

3

❓ 请说说 cache-control 是怎么回事？ 🔑 网页的缓存是由 HTTP 消息头中的“Cache-control”来控制的，常见的取值有 private、no-cache、 max-age、 must-revalidate 等，默认为 private Expires 头部字段提供一个日期和时间，响应在该日期和时间后被认为失效。允许客户端在这个时间之前不去检查（发请求），等同 max-age 的效果。但是如果同时存在，则被Cache-Control 的 max-age 覆盖。

Expires = "Expires" ":" HTTP-date 例如： Expires: Thu, 01 Dec 1994 16:00:00 GMT （必须是 GMT 格式）如果把它设置为-1，则表示立即过期

Expires 和 max-age 都可以用来指定文档的过期时间，但是二者有一些细微差别

1.Expires 在 HTTP/1.0 中已经定义， Cache-Control:max-age 在 HTTP/1.1 中才有定义，为了向下兼容，仅使用 max-age 不够。

Expires 指定一个绝对的过期时间(GMT 格式),这么做会导致至少 2 个问题： 2.1 客户端和服务器时间不同步导致 Expires 的配置出现问题。 2.2 很容易在配置后忘记具体的过期时间，导致过期来临出现浪涌现象
max-age 指定的是从文档被访问后的存活时间，这个时间是个相对值(比如:3600s)，相对的是文档第一次被请求时服务器记录的 Request_time(请求时间)
Expires 指定的时间可以是相对文件的最后访问时间(Atime)或者修改时间(MTime)，而 max-age 相对对的是文档的请求时间(Atime)
如果值为 no-cache,那么每次都会访问服务器。如果值为 max-age，则在过期之前不会重复访问服务器。

4

❓ 你了解 HTTP 状态码吗，请随便介绍一下 🔑 100 Continue 继续，一般在发送 post 请求时，已发送了 http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息 200 OK 正常返回信息 201 Created 请求成功并且服务器创建了新的资源 202 Accepted 服务器已接受请求，但尚未处理 301 Moved Permanently 请求的网页已永久移动到新位置 302 Found 临时性重定向 303 See Other 临时性重定向，且总是使用 GET 请求新的 URI 304 Not Modified 自从上次请求后，请求的网页未修改过 400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求 401 Unauthorized 请求未授权 403 Forbidden 禁止访问 404 Not Found 找不到如何与 URI 相匹配的资源 500 Internal Server Error 最常见的服务器端错误 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）

# ❓ 🔑

⬆️

puddlejumper26 commented 3 years ago

1-20

1

❓

🔑

⬆️

puddlejumper26 commented 3 years ago

1-20

1

❓

🔑

puddlejumper26 / blogs

JS Excercises 700 #179

Array 1-20

1

2

3

4

5

6

7

7

8

9

Generator 1-20

1

Traverse 1-20

1

2

CSS 1-20

1

2

Object 1-20

1

3

Algorithms 1-20

1

2

3

1-20 Concepts

1

2

3

4

1-20

1

1-20

1