ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

xx技术2023前端开发卷A

2022-09-05 21:00:39  阅读:212  来源: 互联网

标签:console log sangfor new xx 2023 Sangfor 前端开发 name


xx技术2023前端开发卷A

选择

  1. 以下哪种情况会导致浏览器报HTTPS证书告警()
  • 网站的https安全证书确实已经过期,根据https安全证书签发国际标准,https安全证书颁发不能超过两年。
  • 当前电脑系统时间错误,所有的http安全证书都有颁发日期和截止日期,电脑系统时间在证书有效时间区间之外有可能导致浏览器提示网站https安全证书已过期或还未生效。
  • 当前站点外链网站的https证书过期:需要网站所有者撤销外链或者外链网站所有者到CA机构替换或续费证书。

解释:

  1. 私有CA颁发的证书

  2. 站点的端口与证书颁发的端口不同

  3. 站点的域名和证书颁发的域名不同

  4. 自签名证书

  5. 过期证书

  1. 代码执行正确的是()
Function.prototype.sangfor = function () {
  return Function.prototype.call.bind(this);
};
console.log(Array.prototype.push.sangfor()([], 0, 1, 2));

输出:3

  1. 以下代码执行正确的是()
let arr = ['a', 'b'];
for (let key in arr) {
  console.log(key);
}

for (let key of arr) {
  console.log(key);
}

输出:0,1,a,b

解释:

  • for in 语句循环遍历对象的属性,每次迭代返回一个,键用来访问键的值。

  • for of语句循环遍历可迭代对象的值。可以循环遍历数组,字符串,映射,节点列表

  1. 代码执行后输出结果正确的是()
let Base = {
  name: 'base'
};

let A = function () {
  this.name = 'a';
}

A.prototype = Object.create(Base);

let a = new A();

Base.name = 'new_name';
console.log(a.name);

delete a.name;
console.log(a.name);

输出:a new_name

解释:

参考文章

  1. 声明对象Base,属性为name,值为'base'
  2. 定义一个函数,将该函数赋给变量A.
  3. 给A添加对象原型,并使用Object.create(Base)创建了一个新对象,并继承Base对象。也就是说 A.prototype.__proto__ = Base;
    • new Object() 通过构造函数来创建对象, 添加的属性是在自身实例下。
    • Object.create() es6创建对象的另一种方式,可以理解为继承一个对象, 添加的属性是在原型下。’
  4. 而使用new A来定义a,A中的方法会改变当前值将name的值改为a,所以第一个会输出a,删除a.name后,根据原型链,会从它的父类上找name属性,这时由于执行了Base.name = 'new_name';所以会输出new_name而不是base

逐句输出看一下:

let Base = {
  name: 'base'
};

console.log(Base);  1

let A = function () {
  this.name = 'a';
}

console.log(A);    2

//参数赋值到目标对象的原型上
A.prototype = Object.create(Base);

console.log(A.prototype);   3


let a = new A();

console.log(a);   4

Base.name = 'new_name';
console.log(a.name);   5

delete a.name;
console.log(a.name);   6

Snipaste_2022-09-04_21-33-49

  1. 以下代码执行结果正确的是()
function Sangfor(name) {
  return this.name = name;
}

console.log([0, "0", [], {}, null].map(i => typeof new Sangfor(i).name));

输出:[ 'number', 'string', 'undefined', 'undefined', 'object' ]

解释:

参考文章

  • 熟悉map函数的使用。map函数常用来修改数组
  • map()方法是JavaScript的Array的一个方法,它会返回一个新数组.这里需要注意:1. map()函数不会对空数组进行检测;2.map()函数不会改变原始数组,它会形成一个新数组。
  • array.map(function(currentValue, index, arr), thisIndex):
    • function(currentValue, index, arr)必须:为一个函数,数组中的每个元素都会执行这个函数。
        1. currentValue:必须。表述当前元素的的值(item)
        2. index:可选。当前元素的索引也就是第几个数组元素。
        3. arr:可选。当前元素属于的数组对象
    • thisValue:可选。对象作为该执行回调时使用,传递给函数,用作"this"的值
  • 所以这里其实是使用map函数前的数组[0, "0", [], {}, null]中的每个元素执行i => typeof new Sangfor(i).name)方法,这里用了ES6的箭头函数,原来的样子是这样的。
function hanshu(i) {
  return typeof new Sangfor(i).name;
}

如果只执行:console.log([0, "0", [], {}, null].map(i => i));

返回原数组:[ 0, '0', [], {}, null ]

我们输出样例看一下:

console.log(typeof new Sangfor(0).name);
console.log(typeof new Sangfor("0").name);
console.log(typeof new Sangfor([]).name);
console.log(typeof new Sangfor({}).name);
console.log(typeof new Sangfor(null).name);

console.log("---------------------");
console.log(new Sangfor(0).name);
console.log(new Sangfor("0").name);
console.log(new Sangfor([]).name);
console.log(new Sangfor({}).name);
console.log(new Sangfor(null).name);

console.log("----------------");
console.log(new Sangfor(0));
console.log(new Sangfor("0"));
console.log(new Sangfor([]));
console.log(new Sangfor({}));
console.log(new Sangfor(null));

输出:

Snipaste_2022-09-04_22-14-16

  1. 以下代码执行后输出描述正确的是()
let obj = {
  sangfor: 100,
  log() {
    sangfor = 200;
    console.log(this.sangfor);
  }
}
obj.log();
let { log } = obj;
log()

解释:

  1. 调用obj.log();:调用谁,this就指向谁,所以此时输出为obj.sangfor,值为100。
  2. 使用解构赋值,单独将log()方法从obj对象中提取出来,此时调用log,this指向的就是log本身,输出log.sangfor,值为200
  1. 以下正则表达式可以匹配从1~64的数字的有,即1 2 3 ...63 64()
  • 正则一

Snipaste_2022-09-04_22-31-54

  • 正则二

Snipaste_2022-09-04_22-39-09

  • 正则三

Snipaste_2022-09-04_23-03-47

  • 正则表达式四

Snipaste_2022-09-05_17-58-04

  • 正则表达式五

Snipaste_2022-09-05_18-02-46

第五种明显不能匹配像10,20这样的数据

解释:

参考文章

  1. 以下代码执行后输出结果正确的是()
function fn(a = 1) {
  console.log(a);
}

fn();
fn(undefined);
fn(null);
fn(false);

输出:1 1 null false

解释:

函数fn在定义时就给a一个默认值a=1,也就是说如果没有给a赋值的话,就会输出1。所以fn()会输出1,同时fn(undefined),说明此时函数的实参被定义了但没有赋值,所以还是会默认输出初始值1。

  1. 对于以下HTTP请求,存在哪些安全隐患()

Snipaste_2022-09-05_08-35-36

  1. CSRF攻击:
  • 用户登录了受信任的网站,并在本地生成了 cookie。
  • 在不退出登录的情况下,访问了危险网站。
  • 危险网站会发出一个请求到受信任的网站,受信任的网站不知道请求是用户访问的还是危险网站访问的,由于浏览器会自动带上用户 cookie,所以受信任的网站会根据用户的权限处理危险网站所发出的请求,达到了模拟用户操作的目的。
  1. XSS攻击

链接

  1. 命令注入

链接

  1. 会话令牌可以预测

链接

  1. 以下判断变量sangfor是否为数组的方法,正确的有()

解释:

打印出来查看

var sangfor = [1, 2, 3, 4, 5]
console.log(Array.isArray(sangfor));
console.log(sangfor instanceof Array);
console.log(typeof sangfor === `array`);
console.log(Object.prototype.toString.call(sangfor) === `[Object Array]`);
console.log(Object.prototype.toString.bind(sangfor)() === `[Object Array]`);
console.log(Object.prototype.toString.apply(undefined, [sangfor]) === `[object Array]`);

输出:

true
true
false
false
false
false

  1. 关于内容安全策略(Content security policy CSP), 以下描述正确的是()

可以预防xss攻击

可以控制图片等资源的加载

  1. 下面< div >的真实宽度为
<style>
    .cls0.cls1 {
        width: 200px;
    }

    div#id {
        width: 300px;
    }

    #id.cls0 {
        width: 400px;
    }

    div.cls0 {
        width: 500px;
    }
</style>
<div id="id" class="cls0 cls1" style="width: 100px;"></div>

实际操作后,div的宽度是100px,也就是行内样式的权重是最大的。

解释:

权重计算图

  • .cls0.cls1:0,0,2,0
  • div#id:0,1,0,1
  • id.cls0:0,1,1,0

  • div.cls0:0.0.1.1
  • 行内:1.0.0.0

可以看到行内的权重最大。

  1. 关于HTML中嵌入的< script >标签在加载并执行时,以下说法正确的是:()

解释:

参考文章

浏览器加载图

  1. 以下表达式为真的有()

解释:

console.log(null === null);

console.log(undefined === undefined);

console.log(Symbol.for('a') === Symbol.for('a'));

console.log(NaN === NaN);

true
true
true
false

es6 Symbol.for(),Symbol.keyFor()

注意的是:Symbol.for()于Symbol()是不同的,它们的区别是,前者会被登记在全局环境中供搜索,后者不会。

Symbol.for("bar") === Symbol.for("bar")
// true
Symbol("bar") === Symbol("bar")
// false
  1. 以下方法可以有效防止WEB站点被中间人攻击的方式有()
  1. 确保当前你所访问的网站使用了HTTPS
  2. 如果你是一个网站管理员,你应当执行HSTS协议
  3. 不要在公共Wi-Fi上发送敏感数据
  4. 如果你的网站使用了SSL,确保你禁用了不安全的SSL/TLS协议。
  5. 不要点击恶意链接或电子邮件。
  1. 在chrom下面,默认1rem等于多少px

解释:默认16px

  1. 以下代码可以把字符串"1.20"转换成数字1.2的有()

解释:

文章链接

console.log(+"1.20");
console.log(Number("1.20"));
console.log(parseFloat("1.20"));
console.log(parseInt("1.20"));

输出:

1.2
1.2
1.2
1

parseInt()解析一个字符串并返回一个整数。允许空格。仅返回第一个数字。

Number()可用于将 JavaScript 变量转换为数字。我们可以用它来转换字符串数字。

parseFloat()解析一个字符串并返回一个数字。允许空格。仅返回第一个数字。

一元加号运算符 ( +) 在其操作数之前并计算其操作数,但如果尚未将其转换为数字,则尝试将其转换为数字。

  1. 以下代码执行后,输出结果正确的是()
let xx = {
  sangfor: 100
}

Object.defineProperty(xx, 'sangfor', {
  get() {
    return 200;
  }
})
xx.sangfor = 300;
console.log(xx.sangfor);

解释

文章链接

输出为:200

  1. 以下代码执行正确的是()
{ var a = 0 }
{ let b = 0 }
{ let a = 1 }
{ var b = 1 }
console.log(a, b);

解释

输出为:0 1

let定义的变量不会提升作用域,使用var定义的变量会提升作用域.

  1. 以下代码输出描述正确的是()
function Sangfor() { }
Sangfor.prototype.name = 100
let a = new Sangfor();
console.log(a.name); //100
Sangfor.prototype.name = 200
console.log(a.name); //200
Sangfor.prototype = { name: 300 }
console.log(a.name); //300

解释:

输出:100 200 300

  1. 以下方法可以把一个宽高都是100px的div变成一个圆的有:()

50%,200%,100%都可以变成一个圆形

因为四个角都要满足要求(一般是50%,超过有效范围之后,就没有效了,就表现为最大有效值的表现形式)

  1. 以下代码执行后输出结果正确的是()
let oo = {
  get Sangfor() {
    console.log("get");
  },
  set Sangfor(v) {
    console.log('set');
  }

}

oo.Sangfor = '100';
console.log(oo.Sangfor);

解释

输出:

set
get
undefined

  1. 关于XMLHTTPRequest同源策略,下面描述正确的是()

解释:

同源策略:域名,端口号,协议相同

  1. 在chrome下面,可以把一个< button> 设置成disabled的方法有()

解释:

  1. button.setAttribute('disable', true) // 有效

  2. button.disable = true    // 有效

  3. button.enable = false    // html的button目前暂时没有发现enable属性

  1. 以下哪种方式可以阻止javascript获取cookie中的内容()

解释:

如果您在cookie中设置了HttpOnly属性,那么通过js脚本将无法读取到cookie信息,这样能有效的防止XSS攻击

Secure属性是说如果一个cookie被设置了Secure=true,那么这个cookie只能用https协议发送给服务器,用http协议是不发送的。换句话说,cookie是在https的情况下创建的,而且他的Secure=true,那么之后你一直用https访问其他的页面(比如登录之后点击其他子页面),cookie会被发送到服务器,你无需重新登录就可以跳转到其他页面。但是如果这是你把url改成http协议访问其他页面,你就需要重新登录了,因为这个cookie不能在http协议中发送.

所以和设不设置path,domain无关吧,如有错误感谢指出.

  1. 以下代码输出结果正确的是()
let x = {
  toString() {
    return 20;
  },
  valueOf() {
    return '30'
  }
}

console.log(x == '20');
console.log(x == 30);

解释:

输出: false true

let x = {
  toString() {
    console.log('toString');
    return 20;
  },
  valueOf() {
    console.log('valueof');
    return '30'
  }
}

console.log(x == '20');
console.log(x == 30);

添加标记,查看在做判断时,valueOf函数在被调用,所以返回false true

  1. 关于Http响应头部中的Content-Length以下描述正确的是()

解释:

参考文章

Content-Length首部指示出报文中实体主体的字节大小。这个大小是包含了所有内容编码的, 比如,对文本文件进行了gzip压缩的话,Content-Length首部指的就是压缩后的大小而不是原始大小。

  1. 以下代码输出结果正确的是()
var sangfor = NaN;
function sangfor() { };

if (typeof sangfor == 'number') {
  console.log(100);
} else if (typeof sangfor === 'function') {
  console.log(200);
} else if (typeof sangfor === 'object') {
  console.log(300);
} else {
  console.log(400);
}

解释:

JS编程时应该尽量避免变量名和函数名同名,否则会发生相互覆盖的问题.从实际测试效果来看,这种覆盖可以分为两种情况:

  • 定义变量时只使用var定义变量,不分配变量初始值,此时函数的优先级更高,函数会覆盖变量;
  • 定以变量时为变量指定了初始值,此时变量的优先级更高,变量会覆盖函数.

所以记住了,在有同名函数的情况下,变量不赋值,函数覆盖变量

所以记住了,在有同名函数的情况下,变量赋值,变量覆盖函数

所以这里typeof sangfor其实是上面的sangfor变量

  1. 以下表达式为真的是()
console.log(null == undefined); //true
console.log(null == 0); //false
console.log([] == []); //false
console.log([] == false); //true
console.log(NaN == false); //false
console.log(undefined == "0"); //false

解释:

输出查看结果:

true
false
false
true
false
false

  1. 以下那个接口可以查看服务器是否开放某个端口()

解释:

查看服务器开放的某个端口的 netstat

算法

  1. 实现16进制颜色格式于rgb颜色格式的转换

Snipaste_2022-09-03_19-25-04

/**
 * 实现16进制颜色格式于rgb颜色格式的转换
 * 16进制颜色格式支持大小写,例如:#FFCCDD
 * 16进制颜色格式,例如:#FFCCDD
 * 输入需要支持的16进制颜色缩写,例如:#ccc
 * 输出描述:输入16进制颜色格式,输出rgb颜色格式
 * 输入
 * #FFFFFF
 * 输出
 * rgb(255, 255, 255)
 * 
 * 输入:
 * #1234567
 * 输出:
 * #1234567
 */
function transite() {
  var inputColor = input("请输入颜色");

  if (inputColor.length > 7 || inputColor.length < 4) {
    console.log(inputColor);
    return inputColor;
  } else if (inputColor.length == 7) {
    var rgb1 = parseInt("0x" + inputColor.slice(1, 3));
    var rgb2 = parseInt("0x" + inputColor.slice(3, 5));
    var rgb3 = parseInt("0x" + inputColor.slice(5, 7));
    console.log(`rgb(${rgb1}, ${rgb2}, ${rgb3})`);

    return `rgb(${rgb1}, ${rgb2}, ${rgb3})`;
  } else {
    var substring = '#';
    for (var i = 1; i < inputColor.length; i++) {
      substring += `${inputColor.charAt(i)}${inputColor.charAt(i)}`
    }
    var rgb4 = parseInt("0x" + substring.slice(1, 3));
    var rgb5 = parseInt("0x" + substring.slice(3, 5));
    var rgb6 = parseInt("0x" + substring.slice(5, 7));
    console.log(`rgb(${rgb4}, ${rgb5}, ${rgb6})`);
    return `rgb(${rgb4}, ${rgb5}, ${rgb6})`
  }
}

transite()
  1. 青蛙过河

403. 青蛙过河

  1. 在一组文件路径集合中,找出那些存在子路径的集合返回

输入描述:

每个路径只由/ 和 小写字母结合,且不会出现多个/重叠的情况

所有路径都以/ 开头,不以 / 结尾, 而且不会出现单个的 / ,都会组合字母

多个以逗号,分隔

输出描述:

输出多个结果使用逗号, 分隔

输出结果需要与原输入顺序一致

不存在时输出false

示例:

输入:

/a,/a/b,/a/c,/b/c,/b/c/d,/b/cf

输出:

/a,/b/c

说明:

因为有/a及/a/b,所以/a存在子路径;同理有/b/c及/b/c/d,/b/c也存在子路径./b/cf则不存在任何子路径不满足条

件.

Snipaste_2022-09-03_19-48-36

Snipaste_2022-09-03_19-48-45

选择题代码

// Function.prototype.sangfor = function () {
//   return Function.prototype.call.bind(this);
// };
// console.log(Array.prototype.push.sangfor()([], 0, 1, 2));

/**
 *
 */

// let arr = ['a', 'b'];
// for (let key in arr) {
//   console.log(key);
// }

// for (let key of arr) {
//   console.log(key);
// }


/**
 *
 */

// let Base = {
//   name: 'base'
// };

// console.log(Base);

// let A = function () {
//   this.name = 'a';
// }

// console.log(A);

// A.prototype = Object.create(Base);

// console.log(A.prototype.__proto__);

// let a = new A();

// console.log(a);

// Base.name = 'new_name';
// console.log(a.name);

// delete a.name;
// console.log(a.name);


/**
 *
 */


// function Sangfor(name) {
//   return this.name = name;
// }

// console.log([0, "0", [], {}, null].map(i => typeof new Sangfor(i).name));

// console.log([0, "0", [], {}, null].map(i => i));

// console.log(typeof new Sangfor(0).name);
// console.log(typeof new Sangfor("0").name);
// console.log(typeof new Sangfor([]).name);
// console.log(typeof new Sangfor({}).name);
// console.log(typeof new Sangfor(null).name);

// console.log("---------------------");
// console.log(new Sangfor(0).name);
// console.log(new Sangfor("0").name);
// console.log(new Sangfor([]).name);
// console.log(new Sangfor({}).name);
// console.log(new Sangfor(null).name);

// console.log("----------------");
// console.log(new Sangfor(0));
// console.log(new Sangfor("0"));
// console.log(new Sangfor([]));
// console.log(new Sangfor({}));
// console.log(new Sangfor(null));


/**
 *
 */


// let obj = {
//   sangfor: 100,
//   log() {
//     sangfor = 200;
//     console.log(this.sangfor);
//   }
// }
// obj.log();
// let { log } = obj;
// log()


// function fn(a = 1) {
//   console.log(a);
// }

// fn();
// fn(undefined);
// fn(null);
// fn(false);

// var sangfor = [1, 2, 3, 4, 5]
// console.log(Array.isArray(sangfor));
// console.log(sangfor instanceof Array);
// console.log(typeof sangfor === `array`);
// console.log(Object.prototype.toString.call(sangfor) === `[Object Array]`);
// console.log(Object.prototype.toString.bind(sangfor)() === `[Object Array]`);
// console.log(Object.prototype.toString.apply(undefined, [sangfor]) === `[object Array]`);


// console.log(null === null);
// console.log(undefined === undefined);
// console.log(Symbol.for('a') === Symbol.for('a'));
// console.log(NaN === NaN);


// console.log(typeof (+"1.20"));
// console.log(typeof (Number("1.20")));
// console.log(typeof (parseFloat("1.20")));
// console.log(typeof (parseInt("1.20")));

// let xx = {
//   sangfor: 100
// }

// Object.defineProperty(xx, 'sangfor', {
//   get() {
//     return 200;
//   }
// })
// xx.sangfor = 300;
// console.log(xx.sangfor);

// { var a = 0 }
// { let b = 0 }
// { let a = 1 }
// { var b = 1 }
// console.log(a, b);

// function Sangfor() { }
// Sangfor.prototype.name = 100
// let a = new Sangfor();
// console.log(a.name); //100
// Sangfor.prototype.name = 200
// console.log(a.name); //200
// Sangfor.prototype = { name: 300 }
// console.log(a.name); //300


// let oo = {
//   get Sangfor() {
//     console.log("get");
//   },
//   set Sangfor(v) {
//     console.log('set');
//   }
// }

// oo.Sangfor = '100';
// console.log(oo.Sangfor);


// let x = {
//   toString() {
//     console.log('toString');
//     return 20;
//   },
//   valueOf() {
//     console.log('valueof');
//     return '30'
//   }
// }

// console.log(x == '20');
// console.log(x == 30);


// var sangfor = NaN;
// function sangfor() { };

// if (typeof sangfor == 'number') {
//   console.log(100);
// } else if (typeof sangfor === 'function') {
//   console.log(200);
// } else if (typeof sangfor === 'object') {
//   console.log(300);
// } else {
//   console.log(400);
// }


console.log(null == undefined);
console.log(null == 0);
console.log([] == []);
console.log([] == false);
console.log(NaN == false);
console.log(undefined == "0");

标签:console,log,sangfor,new,xx,2023,Sangfor,前端开发,name
来源: https://www.cnblogs.com/liyublogs/p/16659576.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有