奇舞 JavaScript (笔记)

1: typeof bar === ‘object ’ 检查bar 是不是对象的可靠方法

var let = null;
typeof bar === 'object' // true
(bar !== null) && (typeof bar === 'object')
(bar !== null)&& ((typeof bar === 'object') || (typeof bar === 'function'))
bar !== null && (typeof bar === 'object') && (toString.call(bar) !== "[object Array]")
    (bar !== null) && (bar.constructor === Object)   // 如果是对象为true
    (bar !== null) && (bar.constructor === Array)    // 如果是数组为true
    (bar !== null) && (bar.constructor === Function) // 如果是函数为true
//ES5 检测数组
Array.isArray(bar)

2 :下面代码输出到控制台是什么

(function(){
  var a = b = 3;
})();
console.log("a defined? " + (typeof a !== 'undefined')); //fasle
console.log("b defined? " + (typeof b !== 'undefined')); //true 

3 :下面的代码将输出到控制台的是什么?

var myObject = {
    foo: 'bar',
    func: function() {
        var self = this;
        console.log("outer func: this.foo = " + this.foo);// bar
        console.log("outer func: this.foo = " + self.foo); // bar 
        (function() {
            console.log("outer func: this.foo = " + this.foo); // undefined
            console.log("outer func: this.foo = " + self.foo); // bar
        }());
    }
}

myObject.func();

4: 在功能块中 封装javaScript 源文件的全部内容的重要性和原因?

这种技术在文件内容周围创建一个闭包,这可能最重要创建一个是有名称空间,从从而有助于不同javaScript 模块和库之间的名称冲突

(function($){ /* jQuery plugin code referencing $ */ }(jQuery));

5 : 在javaScript 源文件的开头包含’use strict’ 的意义和好处

  1. 调试更加方便
  2. 防止意外全局
  3. 消除隐藏威胁
  4. 不允许重复参数值
  5. 抛出无效的错误删除符

6:考虑下面的两个函数 他们都会返回相同的值吗?为什么?

// 注意看代码格式
function foo1(){
  return {
      bar: "hello"
  };
}



function foo2(){
  return
  {
      bar: "hello"
  };
} 

7 : 什么是NaN 它的类型是什么?如何可靠地测试一个值是否等于NaN?

// ES6提供了一个新的Number.isNaN()函数
typeof NaN === 'number' // true
NaN === NaN             // false
isNaN(NaN)              // true

8: 下面的代码输出什么? 解释你的答案

0.1 + 0.2 //0.30000000000000004
0.1 + 0.2 == 0.3 // fasle
// JavaScript中的数字全部用浮点精度处理
一个典型方案 是比较两个数字与特殊常数Number.EPSILON 之间的绝对差值
function areTheNumbersAlmostEqual(num1, num2) {
    return Math.abs( num1 - num2 ) < Number.EPSILON;
}
areTheNumbersAlmostEqual(0.1 + 0.2, 0.3) //true 还是不太理解还是拥抱ES6
//在ECMAScript规范中,整数只在概念上存在;即数值始终作为浮点值存储。
ES6 之间的解决方案
方案1function isInteger(x) { return (x ^ 0) === x; }
方案2function isInteger(x) { return Math.round(x) === x; }
方案3function isInteger(x) { return (typeof x === 'number') && (x % 1 === 0); }
方案4function isInteger(x) { return parseInt(x, 10) === x; }
ES6 解决方案 : Number.isInteger()

9: 执行下面的代码时 ,按什么顺序将数字1-4 记录到控制台

(function() {
    console.log(1);
    setTimeout(function() {console.log(2);}, 1000);
    setTimeout(function() {console.log(3);}, 0);
    console.log(4);
}())
// 1423

10: 编写一个简单的函数(少于160个字符),返回一个布尔值,指示字符串是否是palindrome

function isPalindrome(str) {
  str = str.replace(/\W/g, '').toLowerCase();
  return (str == str.split('').reverse().join(''))
}
isPalindrome("level") //true
isPalindrome("levels") // false

11: 写一个sum方法, 当时用sum 下面的语言 调用时刻它将正常工作

function sum(x) {
    if (arguments.length == 2) {
        return arguments[0] + arguments[1];
    } else {
        return function(y) { return x + y };
    }
}

function sum (x ,y) {
    if ( y !== undefined) {
        return x +  y;
    }else {
        return function(y) { return  x + y};
    }
}

12: 考虑下面的代码片段

for (var i = 0; i < 5; i++) {
    var btn = document.createElement('button');
    btn.appendChild(document.createTextNode('Button' + i));
    btn.addEventListener('click', function() {
        console.log(i);
    });
    document.body.appendChild(btn);
}
//当用户点击“按钮4”时,什么被记录到控制台?为什么? // 5

方案一: 
for (var i = 0; i < 5; i++) {
    var btn = document.createElement('button');
    btn.appendChild(document.createTextNode('Button' + i));
    (function(i) {
        btn.addEventListener('click', function() {
            console.log(i);
        });
    })(i)
    document.body.appendChild(btn);
}
方案2for (var i = 0; i < 5; i++) {
    var btn = document.createElement('button');
    btn.appendChild(document.createTextNode('Button' + i));
    btn.addEventListener('click', function(i) {
        return function() { console.log(i); }
    }(i));
    document.body.appendChild(btn);
}
方案3for (let i = 0; i < 5; i++) {
    var btn = document.createElement('button');
    btn.appendChild(document.createTextNode('Button' + i));
    btn.addEventListener('click', function() {
        console.log(i);
    });
    document.body.appendChild(btn);
}

13: 假设d是范围内的’空对象’

var d = {};

['zebra', 'horse'].forEach(function(k) {
    d[k] = undefined;
});

console.log(d); // d{zebra: undefine , horse : undefined}

14: 下面代码将输出到控制台,为什么?

var arr1 = "john".split('');
var arr2 = arr1.reverse();
var arr3 = 'jones'.split('');
arr2.push(arr3);

console.log('array1 :length ' + arr1.length + ' last= ' + arr1.slice(-1)); // 5 [j,o,n,e,s]
console.log('array2: length ' + arr2.length + ' last= ' + arr2.slice(-1)); // 5 [j,o,n,e,s]
//调用数组对象的reverse()方法不仅以相反的顺序返回数组,它还颠倒了数组本身的顺序
//reverse()方法返回对数组本身的引用

15:下面的代码将输出到控制台,为什么?

console.log(1 + '2' + '2'); // 122
console.log(1 + +'2' + '2'); //32
console.log(1 + -'1' + '2'); // 02
console.log(+'1' + '1' + '2'); // 112  number
console.log('A' - 'B' + '2'); //NaN2
console.log('A' - 'B' + 2); // NaN
// 记得处理一元操作符号

16: 如果数组列表太大,以下递归代码将导致溢出,如何解决这个问题 仍然保留递归模式

var list = readHugeList();
var nextListItem = function() {
    var item = list.pop();
    if (item) {
        // process the list item...
        nextListItem();
    }
};


//通过修改nextListItem函数可以避免潜在的堆栈溢出
var list = readHugeList();
var nextListItem = function() {
    var item = list.pop();
    if (item) {
        // process the list item...
        setTimeout(nextListItem(), 0)
    }
};
//堆栈溢出被消除,因为事件循环处理递归,而不是调用堆栈

17: 什么是javaScript 中的’闭包’
1: 变量在自己范围内
2:封闭函数范围内的变量
3:全局变量

var globalVar = 'xyz';

(function outerFunc(outerArg) {
    var outerVar = 'a';
    (function innerFunc(innerArg) {
        var innerVar = 'b';
        console.log('outerArg=' + outerArg);
        console.log('innerArg=' + innerArg);
        console.log('outerVar=' + outerVar);
        console.log('innerVar=' + innerVar);
        console.log('globalVar=' + globalVar);
    })(456)
})(123)

18: 以下代码输出是什么

for (var i = 0; i < 5; i++) {
    setTimeout(function() { console.log(i); }, 20);
}
方案一: 
for (let i = 0; i < 5; i++) {
    setTimeout(function() { console.log(i); }, 20);
}

19: 以下几行代码输出到控制台

console.log('0 || 1 = ' + (0 || 1)); // 1
console.log('1 || 2 = ' + (1 || 2)); // 1
console.log('0 && 1 = ' + (0 && 1)); // 0
console.log('1 && 2 = ' + (1 && 2)); // 2

20: 下面代码执行时输出的是什么? 说明

console.log(false == '0'); //true
console.log(false === '0'); //false

21: 以下代码输出的是是什么 ?为什么?

var a = {},
    b = { key: 'b' },
    c = { key: 'c' }

    a[b] = 123;
    a[c] = 456;
    console.log(a[b]); //456
//原因如下:设置对象属性时,JavaScript会隐式地将参数值串联起来

22: 以下代码输出到控制台

console.log((function f(n) { return (n > 1) ? n * f(n - 1) : n })(10))

f(1): returns n, which is 1
f(2): returns 2 * f(1), which is 2
f(3): returns 3 * f(2), which is 6
f(4): returns 4 * f(3), which is 24
f(5): returns 5 * f(4), which is 120
f(6): returns 6 * f(5), which is 720
f(7): returns 7 * f(6), which is 5040
f(8): returns 8 * f(7), which is 40320
f(9): returns 9 * f(8), which is 362880
f(10): returns 10 * f(9), which is 3628800

23 :考虑下面的代码片段。控制台的输出是什么,为什么?

(function(x) {
    return (function(y) {
        console.log(x);
    })(2)
})(1);//1

24: 以下代码将输出到控制台什么,为什么?

//this 永远指向调用者 或者全局window对象
var hero = {
    _name: 'Jhon Doe',
    getSecretIdentity: function() {
        return this._name;
    }
}
var stoleSecretIdentity = hero.getSecretIdentity;
console.log(stoleSecretIdentity()) // undefined
console.log(hero.getSecretIdentity()); // 'Jhon'

25: 创建一个函数,给定页面上的DOM元素,将访问元素本身及其所有后代(不仅仅是它的直接子元素)。对于每个访问的元素,函数应该将该元素传递给提供的回调函数

1:一个DOM元素
2:一个回调函数(以DOM元素作为参数)

function Traverse(p_element, p_callback) {
    p_callback(p_element);
    var list = p_element.children;
    for (var i = 0; i < list.length; i++) {
        Traverse(list[i], p_callback);
    }
}
// 一点一点思考以下 还不错

27:在javaScript 中测试您的这些知识:以下代码输出的是什么?

var length = 10;

function fn() {
    console.log(this.length);
}

var obj = {
    length: 5,
    method: function(fn) {
        fn();
        arguments[0]();
    }
};
obj.method(fn, 1);// 10  2
//因此arguments0只不过是调用fn()。在fn里面,这个函数的作用域成为参数数组

28: 考虑下面的代码,输出的是什么,为什么?

(function() {
    try {
        throw new Error();
    } catch (x) {
        var x = 1,
            y = 2;
        console.log(x);
    }
    console.log(x);
    console.log(y);
    // 1 undefined 2
})()
//错误的标识符只在catch块内部可见

29: 这段代码的输出是什么?

var x = 21;
var girl = function() {
    console.log(x);
    var x = 20
}
girl(); //undefined

//查是否存在本地x变量但尚未声明它,因此它不会查找全局变量

30: 你如何克隆一个对象?

var obj = { a: 1, b: 2 };
var objclone = Object.assign({}, obj);
//Object.assign 只会进行浅拷贝 ,这意味着嵌套的对象不会被复制。他们仍然引用与原始相同的嵌套对象
let obj = {
    a: 1,
    b: 2,
    c: {
        age: 30
    }
};
var objclone = Object.assign({}, obj);
console.log('objclone: ', objclone);
obj.c.age = 45;
console.log('After Change - obj: ', obj); // 45 - This also changes
console.log('After Change - objclone: ', objclone); // 45

31: 此代码将打印什么?

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, i * 1000)
}
// 0 1 2 3 4 

32 : 以下几行输出什么,为什么?

console.log(1 < 2 < 3); // true
console.log(3 > 2 > 1); // false
//它比较从左到右

33: 如何在数组的开头添加元素? 最后如何添加一个?

var myArray = ['a','b','c','d'];
myArray.push('end');
myArray.unshift('start');
console.log(myArray); // ["start", "a", "b", "c", "d", "end"]

//方案2: 使用ES6 可以使用扩展运算符

var myArray = ['a','b','c','d'];
myArray = ['start', ...myArray];
myArray = [...myArray, 'end'];
console.log(myArray); // ["start", "a", "b", "c", "d", "end"]

//或者

var myArray = ['a', 'b', 'c', 'd'];
myArray = ['start', ...myArray, 'end'];
console.log(myArray); // ["start", "a", "b", "c", "d", "end"]

34: 想象以下你有这样的代码:

var a  = [1, 2, 3];

这样会导致崩溃吗?

a[10] = 99; //它不会崩溃。 JavaScript引擎将使阵列插槽3至9成为“空插槽”。

这个输出的是什么?

console.log(a[6]); //undefined
//在这里,a [6]将输出未定义的值,但时隙仍为空,而不是未定义的。在某些情况下,这可能是一个重要的细微差别

//情况如下
var b = [undefined];
b[3] = 1;
console.log(b) // length =4 [undefined, empty × 2, 1]
console.log(b.map(e => 7)) // length=4   [7, empty × 2, 7

35: typeof undefined == typeof NULL 的值是什么?

该表达式将被评估为true,因为NULL将被视为任何其他未定义的变量。
//注意:JavaScript区分大小写,我们在这里使用NULL而不是null。

36: 代码返回后是什么?

    console.log(typeof typeof 1); // string;
    //typeof 1将返回“number”,typeof“number”将返回字符串。

37: 以下代码输出的是什么?为什么?

var b = 1;
function outer() {
    var b =2 ;
    function inner(){
        b++;
        var b = 3;
        console.log(b)
    }
    inner();
}
outer(); //3

//变量提升的过程
function inner () {
    var b; // b is undefined
    b++; // b is NaN
    b = 3; // b is 3
    console.log(b); // output "3"
}
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013165804/article/details/80340777
个人分类: js
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

奇舞 JavaScript (笔记)

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭