JS01 第一天

最新推荐文章于 2022-10-17 20:13:44 发布

ฅ逸魚

最新推荐文章于 2022-10-17 20:13:44 发布

阅读量242

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47186832/article/details/110205446

版权

1、ng-style是做什么用的？

解析1：
- ng-style用来绑定元素的css样式
  - ng-style 指令为 HTML 元素添加 style 属性。
  - ng-style 属性值必须是对象，表达式返回的也是对象。
    - 对象由 CSS 属性和值组成，即 key=>value 对。
  - 其表达式的返回值为一个js对象，键为css样式名，值为该样式对应的合法取值。

解析2：

ng-class用来给元素绑定类名, ng-show和ng-hide表示元素显隐控制


<!--使用AngularJS添加样式，使用 CSS key=>value 对象格式:-->

<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-style="myObj">菜鸟教程</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myObj = {
"color" : "white",
"background-color" : "coral",
"font-size" : "60px",
"padding" : "50px"
}
});
</script>
</body>

2、下面这段JS程序的执行结果是：

var user = {
 count : 1,
 getCount: function(){
  return this.count;
 }
}
var func = user.getCount
console.log(func())

// 答案：
// undefined

解析1：
- ```
// 1.调用对象未声明的属性会undefined
    var user={};
    console.log(user.name);//undefined
    
    // 2.使用未赋值只声明的基本数据类型会undefined
    var one;
    console.log(one);//undefined
    
    // 3.使用未声明的变量会报错
    console.log(two);//new_file.html:15 Uncaught ReferenceError: two is not defined
```
  在本题中，this指向的是window （因为func=user.getCount只是保存了getCount函数，并没有执行，该函数是在console里面执行，func()就相当于user.getCount()，一看是像user调用，其实func()就相当于一个全局的函数，实际上是window.func() ,也就是window.user.getCount()） , window 对象已经自动被浏览器声明了，只是还没有声明count属性，所以也是undifne
解析2：
- 因为在函数调用时，this才会发生绑定，而且是谁调用this，this就指向谁。
- 在本题中，func的运行环境是全局，因此this指向全局对象。
- 如果去掉this，那只是在全局调用了一个没有声明局部变量的方法。引用它就会报错。
解析3：
- user的属性count是在对象（object）上而不是在函数getCount上；
- 而user.getCount返回的是一个函数（function），函数体return this.cout，此时的this未指定；
- 把user.getCount赋值给func变量，调用console.log(func())，还是未指定this，默认this指向全局；
- 全局中没有变量count，所以返回的count是未声明变量undefined。

解析4：

var user = {
    count : 1,
    getCount : function(){
        return this.count;
    }
}
var func = user.getCount
console.log(func())

// undefined


var user = {
    count : 1,
    getCount : function(){
        return this.count;
    }
}
console.log(user.getCount())

// 1

// 所以题目中（如图1）返回undefined是因为指向的是window对象，而一个对象还没有声明的属性就是undefined，这一点和直接定义变量略微有些不一样


var t;
//undefined
var t = {};
console.log(t.count);
//undefined

3、代码执行后，输出变量a的值为？（）

function test(a){
a=a+10;
}
var a=10;
test(a);
console.log(a);

// 答案：
// 10

解析1：
- 当传入参数的为基本类型(number, string, boolean)时，传入实际值
- 当传入参数为引用类型时，传入内存地址，对形参的修改，相当于对原值的修改
- ```
function test(a, b){
a=a+10;
b.name = 'xiaohong'
}
var a=10;
var b = {'name': 'xiaoming'}
console.log(b.name) // 'xiaoming'
test(a, b);
console.log(a); // 10
console.log(b.name) // 'xiaohong'
```
解析2：
- 通过值传递参数
  - 函数中调用的参数是函数的隐式参数。
  - JavaScript 隐式参数通过值来传递：函数仅仅只是获取值。
  - 如果函数修改参数的值，不会修改显式参数的初始值（在函数外定义）。
  - 隐式参数的改变在函数外是不可见的。
  - 所以这个地方不会修改a的值。
  - 但是，如果这个地方传入的是对象，修改的是对象某个属性的值，那么就会修改a对象的值了。
- 通过对象传递参数
  - 在JavaScript中，可以引用对象的值。
  - 因此我们在函数内部修改对象的属性就会修改其初始的值。
  - 修改对象属性可作用于函数外部（全局变量）。
  - 修改对象属性在函数外是可见的。

解析3：

var a = 10;
    function test(b) {
      a = b + 10;
    }
    test(a);
    console.log(a);  //a的值为20


 var a = 10;
    function test(b) {
      var a = b + 10;
    }
    test(a);
    console.log(a); //a的值为10

解析4：


function test(a){
	a=a+10;
}
var a=10;
test(a);
console.log(a);
//10
---------------------------------------------------------------------
function test(s){
console.log(s)//undefind
a=s+10;
}
test(a);
var a=10;
console.log(a);//10
---------------------------------------------------------------------
function test(s){
	a=s+10;
}
var a=10;
test(a);
console.log(a);

4、控制台打印结果？

for(let i=0;i<2;i++){
setTimeout(function(){
console.log(i)
},100
);
}
for(var i=0;i<2;i++){
setTimeout(function(){
console.log(i)
},100
);
}

// 答案：
// 0 1 2 2

解析1：
- Js是单线程的，Settimeout是异步宏任务，所以代码执行遇到异步的，就放在事件队列中的，等线程中的任务执行完后才会执行事件队列中的任务。
- let是es6中声明变量的方式，有自己的作用域块，可以放变量，所以let绑定for循环时，每个i都有自己的值. 在这个for循环中就是满足一次条件向事件队列中添加一个打印i的事件，且每个事件中的i有自己的值
- Var没有作用域块，for循环的变量就会后一个覆盖前一个，当循环完毕时i就只有一个值，又因为for循环的判断条件是不满足跳出，所以i最后是2而不是1
- 这些完了后执行事件队列中的任务，就打印了0122
解析2：
- 第一个
  - let将i绑定到for循环快中，事实上它将其重新绑定到循环体的每一次迭代中，确保上一次迭代结束的值重新被赋值。
  - setTimeout里面的function()属于一个新的域，通过 var 定义的变量是无法传入到这个函数执行域中的，通过使用 let 来声明块变量，这时候变量就能作用于这个块，所以 function就能使用 i 这个变量了；
  - 输出为0,1.
- 第二个
  - settimeout是异步执行，1s后往异步任务队列里面添加一个任务，只有同步的全部执行完，才会执行异步任务队列里的任务，当主线执行完成后，i是2，所以此时再去执行任务队列里的任务时，所以输出两次2.
解析3：
- 第二个形成了闭包，for循环执行后i为2，当定时器回调函数执行是i就为2了;
- let存在变量提升，但不存在初始化，因此生成暂时性死区，不存在闭包，所以两次执行结果为0，1

解析4：

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

主要说一下第二个for循环，var定义的 i 是全局变量，因为 setTImeout()是异步执行的，也就是说：
for(var i=0;i<2;i++){
setTimeout(function(){
console.log(i)
},100
);
}
上面这段代码，可以这么理解
for(var i=0;i<2;i++){
//这里当 i = 2的时候，跳出循环，因为用var定义，是全局变量（ i = 2）
}
setTimeout(function(){
//根据全局变量，此时 i = 2 ; 因为for循环有两次，所以打印两次2 ，
console.log(i)
},100
);

打印两次的原因,可以这样理解
for(var i=0;i<2;i++){ 
//同步的循环执行完后，得到 i = 2 , 然后再执行异步的循环
setTimeout(function(){
      i = 2 ； // 拿到全局声明变量 i = 2 ;
      // 异步函数第一次执行循环，得到全局变量 i 的值为 2 
      // 异步函数第二次执行循环，得到全局变量 i 的值也为 2 
      console.log(i)
},100
);
}
所以：最终结果为：0    1    2    2


// 错了吧，第一个i是let，出了作用域就销毁了。
// 第二个for循环里，循环两次，因为setTimeout() 是异步的，所以每次循环输出的 i 值都是2
// 第二个for 里面的var i 是局部变量吧。

5、在JavaScript中，调用对象属性的描述中，以下代码错误的是（）

例如：调用对象obj的arr属性。
A. obj["arr"]
B. obj["a"+"r"+"r"]
C. obj{"arr"}
D. obj.arr

答案:
C. obj{"arr"}

解析：
- 访问obj的方式有两种
  - 点的方式obj.arr;
  - 中括号的方式obj["arr"];

6、下面有关JavaScript中 call和apply的描述，错误的是？

A. apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入

B. call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性

C. 两者传递的参数不同，call函数第一个参数都是要传入给当前对象的对象，apply不是

D. call传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

答案：

C. 两者传递的参数不同，call函数第一个参数都是要传入给当前对象的对象，apply不是

解析1：
- apply和call传入的第一个参数都是需要指向的对象，也就是传入给当前函数的对象
- 对于剩余参数，apply传入的是一个参数列表，也就是数组，而call传入的是一个一个的参数。

解析2：

函数还有两个方法：apply()和call()。

这两个方法都会以指定的this值来调用函数，即会设置调用函数时函数体内this对象的值。
apply()方法接收两个参数：函数内this的值和一个参数数组。
第二个参数可以是Array的实例，但也可以是arguments对象。来看下面的例子：

function sum(num1, num2) {
  return num1 + num2;
}

function callSum1(num1, num2) {
  return sum.apply(this, arguments); // 传入arguments对象
}

function callSum2(num1, num2) {
  return sum.apply(this, [num1, num2]); // 传入数组
}

console.log(callSum1(10, 10));  // 20
console.log(callSum2(10, 10));  // 20

// 在这个例子中，callSum1()会调用sum()函数，将this作为函数体内的this值（这里等于window，因为是在全局作用域中调用的）传入，同时还传入了arguments对象。callSum2()也会调用sum()函数，但会传入参数的数组。这两个函数都会执行并返回正确的结果。

// 注意 在严格模式下，调用函数时如果没有指定上下文对象，则this值不会指向window。除非使用apply()或call()把函数指定给一个对象，否则this的值会变成undefined。

// call()方法与apply()的作用一样，只是传参的形式不同。第一个参数跟apply()一样，也是this值，而剩下的要传给被调用函数的参数则是逐个传递的。换句话说，通过call()向函数传参时，必须将参数一个一个地列出来，比如：

function sum(num1, num2) {
  return num1 + num2;
}

function callSum(num1, num2) {
  return sum.call(this, num1, num2);
}

console.log(callSum(10, 10)); // 20


//这里的callSum()函数必须逐个地把参数传给call()方法。结果跟apply()的例子一样。到底是使用apply()还是call()，完全取决于怎么给要调用的函数传参更方便。如果想直接传arguments对象或者一个数组，那就用apply()；否则，就用call()。当然，如果不用给被调用的函数传参，则使用哪个方法都一样。

// apply()和call()真正强大的地方并不是给函数传参，而是控制函数调用上下文即函数体内this值的能力。考虑下面的例子：

window.color = 'red';
let o = {
  color: 'blue'
};

function sayColor() {
  console.log(this.color);
}

sayColor();             // red

sayColor.call(this);    // red
sayColor.call(window);  // red
sayColor.call(o);       // blue

//这个例子是在之前那个关于this对象的例子基础上修改而成的。同样，sayColor()是一个全局函数，如果在全局作用域中调用它，那么会显示"red"。这是因为this.color会求值为window.color。如果在全局作用域中显式调用sayColor.call(this)或者sayColor.call(window)，则同样都会显示"red"。而在使用sayColor.call(o)把函数的执行上下文即this切换为对象o之后，结果就变成了显示"blue"了。

//使用call()或apply()的好处是可以将任意对象设置为任意函数的作用域，这样对象可以不用关心方法。在前面例子最初的版本中，为切换上下文需要先把sayColor()直接赋值为o的属性，然后再调用。而在这个修改后的版本中，就不需要这一步操作了。

7、以下哪个是错误的

A. iframe是用来在网页中插入第三方页面，早期的页面使用iframe主要是用于导航栏这种很多页面都相同的部分，这样在切换页面的时候避免重复下载

B. iframe的创建比一般的DOM元素慢了1-2个数量级

C. iframe标签会阻塞页面的的加载

D. iframe本质是动态语言的Incude机制和利用ajax动态填充内容

答案：

D. iframe本质是动态语言的Incude机制和利用ajax动态填充内容

解析1：
- 1、创建比一般的 DOM 元素慢了 1-2 个数量级
  - iframe 的创建比其它包括 scripts 和 css 的 DOM 元素的创建慢了 1-2 个数量级，使用 iframe 的页面一般不会包含太多 iframe，所以创建 DOM 节点所花费的时间不会占很大的比重。但带来一些其它的问题：onload 事件以及连接池（connection pool）
- 阻塞页面加载
  - 及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止，告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后，它给用户的感觉就是这个网页非常慢。
  - window 的 onload 事件需要在所有 iframe 加载完毕后（包含里面的元素）才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况
- 唯一的连接池
  - 浏览器只能开少量的连接到 web 服务器。比较老的浏览器，包含 Internet Explorer 6 & 7 和 Firefox 2，只能对一个域名（hostname）同时打开两个连接。这个数量的限制在新版本的浏览器中有所提高。Safari 3+ 和 Opera 9+ 可同时对一个域名打开 4 个连接，Chrome 1+, IE 8 以及 Firefox 3 可以同时打开 6 个
  - 绝大部分浏览器，主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要，这当然是很好的。但通常情况下，iframe 里的内容是没有主页面的内容重要的。这时 iframe 中用光了可用的连接就是不值得的了。一种解决办法是，在主页面上重要的元素加载完毕后，再动态设置 iframe 的 SRC。
- 不利于 SEO
  - 搜索引擎的检索程序无法解读 iframe。另外，iframe 本身不是动态语言，样式和脚本都需要额外导入。综上，iframe 应谨慎使用。

8、angularjs1中服务的正确写法是？

A. ng-service
B. ng-server
C. ng-command
D. ng-class

答案：

A. ng-service

解析
- service是服务的意思，server是服务器，伺候者，发球员。
- 通过字面意思可以做出选择，容易错选B。

9、输出结果:

(function() {
      var a = b = 5;
  })();   
console.log(b);
console.log(a);

// 答案：
// 5，Uncaught ReferenceError: a is not defined

解析1：
- 第一个考点在于var a=b=5相当于拆解成var a=b; b=5; 然后，b=5前面没有var，相当于声明为全局变量（这种方式在严格模式下会报错，此题不考虑)。
- 所以就相当于：
  - var b; (fun…{ var a=b; b=5; })(); console.log(b); //5 console.log(a); //报错
  - 此处报错也就是另一个考点，a声明的是函数的局部变量，在函数结束是就销毁了，所以在全局下找不到a，于是报错。
解析2：
- var操作符
  - 使用var操作符定义的变量将成为该变量的作用域中的局部变量，如果在函数中使用var定义一个变量，那么这个变量在函数退出后就会被销毁；
  - 省略var操作符会创建一个全局变量，但在局部作用域中定义的全局变量很难维护，也会由于相应变量不会马上就有定义而导致不必要的混乱，给未经声明的变量赋值在严格模式下会导致抛出Reference错误，所以不推荐使用。
  - ```
  function noVar(){
  message="global var";//全局变量
  }
  noVar();
  console.log(message);
  
  // 其中：
  var a=b=1;>> var a=b;b=1;
  首先使用var初始化变量a赋值为b，b未定义，a=undefined；省略var初始化变量b为全局变量，b=1。
```

解析3：
- var=a=b=5;其中var a表示a为当前作用域的全局变量，b=5并没有定义为当前作用域的全局变量，它会申明提前在全局作用域中。
- ```
var b=5;
(function() {
      var a = b ;
  })();
```
解析4：
- 使用 var操作符定义的变量将成为该作用域中的局部变量；
- 省略 var操作符会创建一个全局变量，但在局部作用域中定义的全局变量很难维护，也会由于相应变量不会马上就有定义而导致不必要的混乱，给未经声明的变量赋值在严格模式下会导致抛出Reference错误，所以不推荐使用。
  - ```
  var a=b=5;
  // 相当于
  b=5;
  var a=b;
  
  // 另外扩展个全局变量的问题：
  function foo(){
  a=1;
  }
  console.log(a);  // Uncaught ReferenceError: a is not defined
  
  function foo(){
  a=1;
  }
  foo();
  console.log(a);  //1
```

解析5：

(function() {
          var a = b = 5;
      })();   
    变为
(function() {
      var a = b ;b= 5;
  })(); 
// 最后为
var b=5;
(function() {
      var a = b;
  })();   
// 而这里a因为是在函数内，所以函数运行后会自动销毁变量a;
-----------------------------------
// 相当于等价于一下代码：
var b=5；
console.log(b);//5
console.log(a);//此时的a是没有被声明的，所以结果为 Uncaught ReferenceError: a is not defined

解析6：

var x;
// 默认返回值 undefined
x
// undefined，如果没有给变量赋值，则为其赋值为默认值 undefined

var y = null;
// 默认返回值 undefined
y
// null，表示给变量赋值为空值 null

x == y
// true，值的意义都是都是空值
x === y
// false，值的意义相等，但是基本数据类型不同 (undefined, null)

x == false;
// false，值的意义不同，基本数据类型也不同
y == false;
// false，值的意义不同，基本数据类型也不同
z = `z`;
// "z"
z;
// "z"

解析7：

// 第一步:在全局作用域 var c=d=10;
        // // var c=d=10;
        // // 相当于
        // var c;
        // d=10;
        // c=d;
        // console.log(c);//10
        // console.log(d);//10
        
        // 第二步:在全局作用域没有报错,但是在函数作用域会报错
        var b;//在函数内部直接使用 b=5;就相等于 还要在函数外部使用var b
        function one(){
            // var a=b=5;
            // 相等于
            var a;
            b=5;//相当于定义了全局变量
            a=b;//从右开始赋值,所以是先 b=5,再 a=b
            // console.log(a);//在函数内部可以访问到a变量为5
        }
        // one();
        // console.log(b);
        // console.log(a);//但是在函数外部访问函数内定义的a变量却报错,所以我们之前记错啦!
        // var声明的变量可以在块作用域外访问到,但是不可以在函数作用域外部访问到
        
        // 第三步:在块级作用域
        {
            var e=f=20;
        }
        console.log(e);//20
        console.log(f);//20
        // 在全局作用域访问var声明的变量没有错

10、在日常生活中，往往需要注册很多的账户，而账户名通常是由字母、数字、下划线组成的字符，怎样才能知道自己注册的账号是合法的（）

// A.
var filt=/^[a-zA-Z_0-9]+$/;
if(!filt.test(str))
{
alert("账号只包含字母、数字、下划线");
}

// B.
var filt=/^[a-zA-Z0-9_]+$/;
if(!filt.test(str))
{
alert("账号只包含字母、数字、下划线");
}

// C.
var filt=/^[_a-z0-9]+$/;
if(!filt.test(str))
{
alert("账号只包含字母、数字、下划线");
}

// D.
var filt=/^[a-z_0-9]+$/;
if(!filt.test(str))
{
alert("账号只包含字母、数字、下划线");
}

// 答案：
// A、B