js 学习【一】

阳光穿透心脏的1/2处 2023-06-06 03:31 4阅读 0赞

### 数组求和 ###

let arr = [1, 2, 3, 4, 5]
    let arr2 = eval(arr.join('+'))
    
    console.log(arr2)  //15

### 数组完全展开 ###

function myFlat(arr) {
      while (arr.some(t => Array.isArray(t))) {
       	arr = ([]).concat.apply([], arr);
      }
      return arr;
    }
    var arr2 = [1, [2, 3, [4]], 5, 6, [7, 8], [[9, [10, 11], 12], 13], 14];  
    console.log(myFlat(arr2)) //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

### 解决键盘弹出后挡表单的问题 ###

### 移动端打开指定App或者下载App ###

navToDownApp() {
          let u = navigator.userAgent
          if (/MicroMessenger/gi.test(u)) {
            // 如果是微信客户端打开，引导用户在浏览器中打开
            alert('请在浏览器中打开')
          }
          if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
            // Android
            if (this.openApp('en://startapp')) {
              this.openApp('en://startapp') // 通过Scheme协议打开指定APP
            } else {
              //跳转Android下载地址
            }
          } else if (u.indexOf('iPhone') > -1) {
            if (this.openApp('ios--scheme')) {
              this.openApp('ios--scheme') // 通过Scheme协议打开指定APP
            } else {
              // 跳转IOS下载地址
            }
          }
        },
        openApp(src) {
          // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
          // 否则打开a标签的href链接
          let ifr = document.createElement('iframe')
          ifr.src = src
          ifr.style.display = 'none'
          document.body.appendChild(ifr)
          window.setTimeout(function() {
            // 打开App后移出这个iframe
            document.body.removeChild(ifr)
          }, 2000)
        }

### 数组去重 ###

var array = [1, 2, 1, 1, '1'];
      function unique(array) {
        var obj = {};
        return array.filter(function(item, index, array){
          return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
        })
      }
      console.log(unique(array))  //[1, 2, "1"]

## 交换数组指定位置元素位置 ##

var array = [1, 2, 3, 4];
     // x , y是要交换元素的位置(index+1)
    function arrIndexExchange(array, x, y){
        array.splice(x - 1, 1, ...array.splice(y - 1, 1, array[x - 1]));
        return array;
    };
    console.log(arrIndexExchange(array, 1, 4)) //[4, 2, 3, 1]

### 输出是什么 ###

function sayHi() {
      console.log(name)
      console.log(age)
      var name = 'Lydia'
      let age = 21
    }
    
    sayHi()  // undefined 和 ReferenceError

在函数内部，我们首先通过 var 关键字声明了 name 变量。这意味着变量被提升了（内存空间在创建阶段就被设置好了），直到程序运行到定义变量位置之前默认值都是 undefined。因为当我们打印 name 变量时还没有执行到定义变量的位置，因此变量的值保持为 undefined。

通过 let 和 const 关键字声明的变量也会提升，但是和 var 不同，它们不会被初始化。在我们声明（初始化）之前是不能访问它们的。这个行为被称之为暂时性死区。当我们试图在声明之前访问它们时，JavaScript 将会抛出一个 ReferenceError 错误。

### 输出是什么 ###

for (var i = 0; i < 3; i++) {
      setTimeout(() => console.log(i), 1)
    }
    
    for (let i = 0; i < 3; i++) {
      setTimeout(() => console.log(i), 1)
    }
    
    // 3 3 3 和 0 1 2

由于 JavaScript 的事件循环，setTimeout 回调会在遍历结束后才执行。因为在第一个遍历中遍历 i 是通过 var 关键字声明的，所以这个值是全局作用域下的。在遍历过程中，我们通过一元操作符 ++ 来每次递增 i 的值。当 setTimeout 回调执行的时候，i 的值等于 3。

在第二个遍历中，遍历 i 是通过 let 关键字声明的：通过 let 和 const 关键字声明的变量是拥有块级作用域（指的是任何在 \{\} 中的内容）。在每次的遍历过程中，i 都有一个新值，并且每个值都在循环内的作用域中。

### 输出是什么 ###

const shape = {
      radius: 10,
      diameter() {
        return this.radius * 2
      },
      perimeter: () => 2 * Math.PI * this.radius
    }
    
    shape.diameter()
    shape.perimeter()  //20 and NaN

注意 diameter 的值是一个常规函数，但是 perimeter 的值是一个箭头函数。

对于箭头函数，this 关键字指向的是它当前周围作用域（简单来说是包含箭头函数的常规函数，如果没有常规函数的话就是全局对象），这个行为和常规函数不同。这意味着当我们调用 perimeter 时，this 不是指向 shape 对象，而是它的周围作用域（在例子中是 window）。

在 window 中没有 radius 这个属性，因此返回 undefined。

### 输出是什么？ ###

+true;
    !"Lydia";
    
    //1 and false

一元操作符加号尝试将 bool 转为 number。true 转换为 number 的话为 1，false 为 0。

字符串 'Lydia' 是一个真值，真值取反那么就返回 false。

### 哪一个是无效的？ ###

const bird = {
      size: 'small'
    }
    
    const mouse = {
      name: 'Mickey',
      small: true
    }
    
    A: mouse.bird.size
    B: mouse[bird.size]
    C: mouse[bird["size"]]
    D: All of them are valid
    
    //A: mouse.bird.size

在 JavaScript 中，所有对象的 keys 都是字符串（除非对象是 Symbol）。尽管我们可能不会定义它们为字符串，但它们在底层总会被转换为字符串。

当我们使用括号语法时（\[\]），JavaScript 会解释（或者 unboxes）语句。它首先看到第一个开始括号 \[ 并继续前进直到找到结束括号 \]。只有这样，它才会计算语句的值。

mouse\[bird.size\]：首先计算 bird.size，这会得到 small。mouse\["small"\] 返回 true。

然后使用点语法的话，上面这一切都不会发生。mouse 没有 bird 这个 key，这也就意味着 mouse.bird 是 undefined。然后当我们使用点语法 mouse.bird.size 时，因为 mouse.bird 是 undefined，这也就变成了 undefined.size。这个行为是无效的，并且会抛出一个错误类似 Cannot read property "size" of undefined。

### 输出什么? ###

console.log(Number(2) === Number(2))
    console.log(Boolean(false) === Boolean(false))
    console.log(Symbol('foo') === Symbol('foo'))

*  A: `true`, `true`, `false`
 *  B: `false`, `true`, `false`
 *  C: `true`, `false`, `true`
 *  D: `true`, `true`, `true`

每个`Symbol`都是完全唯一的。传递给`Symbol`的参数只是给`Symbol`的一个描述。 `Symbol`的值不依赖于传递的参数。 当我们测试相等时，我们创建了两个全新的符号：第一个`Symbol（'foo'）`，第二个`Symbol（'foo'）`, 这两个值是唯一的，彼此不相等，因此返回`false`。

### 以下是个纯函数么? ###

function sum(a, b) {
      return a + b;
    }

*  A: Yes
 *  B: No

答案: A

纯函数一种若输入参数相同，则永远会得到相同输出的函数。

`sum`函数总是返回相同的结果。 如果我们传递`1`和`2`，它将总是返回`3`而没有副作用。 如果我们传递`5`和`10`，它将总是返回`15`，依此类推，这是纯函数的定义。

### 输出什么? ###

const myLifeSummedUp = ["☕", "?", "?", "?"]
    
    for (let item in myLifeSummedUp) {
      console.log(item)
    }
    
    for (let item of myLifeSummedUp) {
      console.log(item)
    }

*  A: `0` `1` `2` `3` and `"☕"` `"?"` `"?"` `"?"`
 *  B: `"☕"` `"?"` `"?"` `"?"` and `"☕"` `"?"` `"?"` `"?"`
 *  C: `"☕"` `"?"` `"?"` `"?"` and `0` `1` `2` `3`
 *  D: `0` `1` `2` `3` and `{0: "☕", 1: "?", 2: "?", 3: "?"}`

答案: A

通过`for-in`循环，我们可以遍历一个对象**自有的**、**继承的**、**可枚举的**、**非Symbol的**属性。 在数组中，可枚举属性是数组元素的“键”， 即它们的索引。 类似于下面这个对象：

`{0: "☕", 1: "?", 2: "?", 3: "?"}`

其中键则是可枚举属性，因此 `0`，`1`，`2`，`3`被记录。

通过`for-of`循环，我们可以迭代**可迭代对象**（包括 `Array`，`Map`，`Set`，`String`，`arguments`等）。当我们迭代数组时，在每次迭代中，不同属性的值将被分配给变量`item`, 因此`“☕”`，`“?”`，`“?”`，`“?”`被打印。

### 输出什么? ###

const list = [1 + 2, 1 * 2, 1 / 2]
    console.log(list)

*  A: `["1 + 2", "1 * 2", "1 / 2"]`
 *  B: `["12", 2, 0.5]`
 *  C: `[3, 2, 0.5]`
 *  D: `[1, 1, 1]`

答案: C

数组元素可以包含任何值。 数字，字符串，布尔值，对象，数组，`null`，`undeifned`, 以及其他表达式，如日期，函数和计算。

元素将等于返回的值。 `1 + 2`返回`3`，`1 * 2`返回'2`，'1 / 2`返回`0.5`。

### 输出什么? ###

function sayHi(name) {
      return `Hi there, ${name}`
    }
    
    console.log(sayHi())

*  A: `Hi there,`
 *  B: `Hi there, undefined`
 *  C: `Hi there, null`
 *  D: `ReferenceError`

答案: B

默认情况下，如果不给函数传参，参数的值将为`undefined`。 上述情况，我们没有给参数`name`传值。 `name`等于`undefined`，并被打印。

在ES6中，我们可以使用默认参数覆盖此默认的`undefined`值。 例如：

`function sayHi（name =“Lydia”）{...}`

在这种情况下，如果我们没有传递值或者如果我们传递`undefined`，`name`总是等于字符串`Lydia`

### 输出什么? ###

const person = {
      name: "Lydia",
      age: 21
    }
    
    let city = person.city
    city = "Amsterdam"
    
    console.log(person)

*  A: `{ name: "Lydia", age: 21 }`
 *  B: `{ name: "Lydia", age: 21, city: "Amsterdam" }`
 *  C: `{ name: "Lydia", age: 21, city: undefined }`
 *  D: `"Amsterdam"`

答案: A

我们将变量`city`设置为等于`person`对象上名为`city`的属性的值。 这个对象上没有名为`city`的属性，因此变量`city`的值为`undefined`。

请注意，我们没有引用`person`对象本身，只是将变量`city`设置为等于`person`对象上`city`属性的当前值。

然后，我们将`city`设置为等于字符串`“Amsterdam”`。 这不会更改person对象：没有对该对象的引用。

因此打印`person`对象时，会返回未修改的对象。

### 输出什么? ###

function checkAge(age) {
      if (age < 18) {
        const message = "Sorry, you're too young."
      } else {
        const message = "Yay! You're old enough!"
      }
    
      return message
    }
    
    console.log(checkAge(21))

*  A: `"Sorry, you're too young."`
 *  B: `"Yay! You're old enough!"`
 *  C: `ReferenceError`
 *  D: `undefined`

答案: C

`const`和`let`声明的变量是具有**块级作用域**的，块是大括号（`{}`）之间的任何东西, 即上述情况`if / else`语句的花括号。 由于块级作用域，我们无法在声明的块之外引用变量，因此抛出`ReferenceError`。

### 输出什么? ###

console.log("I want pizza"[0])

*  A: `"""`
 *  B: `"I"`
 *  C: `SyntaxError`
 *  D: `undefined`

答案: B

可以使用方括号表示法获取字符串中特定索引的字符，字符串中的第一个字符具有索引0，依此类推。 在这种情况下，我们想要得到索引为0的元素，字符`'I'`被记录。

请注意，IE7及更低版本不支持此方法。 在这种情况下，应该使用`.charAt（）`

### 输出什么? ###

function sum(num1, num2 = num1) {
      console.log(num1 + num2)
    }
    
    sum(10)

*  A: `NaN`
 *  B: `20`
 *  C: `ReferenceError`
 *  D: `undefined`

答案: B

您可以将默认参数的值设置为函数的另一个参数，只要另一个参数定义在其之前即可。 我们将值`10`传递给`sum`函数。 如果`sum`函数只接收1个参数，则意味着没有传递`num2`的值，这种情况下，`num1`的值等于传递的值`10`。 `num2`的默认值是`num1`的值，即`10`。 `num1 + num2`返回`20`。

如果您尝试将默认参数的值设置为后面定义的参数，则可能导致参数的值尚未初始化，从而引发错误。比如：

function test(m = n, n = 2) {
       console.log(m, n)
    }
       test() // Uncaught ReferenceError: Cannot access 'n' before initialization
       test(3) // 3 2
       test(3, 4) // 3 4

### 输出什么? ###

let newList = [1, 2, 3].push(4)
    
    console.log(newList.push(5))

*  A: `[1, 2, 3, 4, 5]`
 *  B: `[1, 2, 3, 5]`
 *  C: `[1, 2, 3, 4]`
 *  D: `Error`

答案: D

`.push`方法返回数组的长度，而不是数组本身！ 通过将`newList`设置为`[1,2,3].push(4)`，实际上`newList`等于数组的新长度：`4`。

然后，尝试在`newList`上使用`.push`方法。 由于`newList`是数值`4`，抛出TypeError。

###    输出什么? ###

function giveLydiaPizza() {
      return "Here is pizza!"
    }
    
    const giveLydiaChocolate = () => "Here's chocolate... now go hit the gym already."
    
    console.log(giveLydiaPizza.prototype)
    console.log(giveLydiaChocolate.prototype)

*  A: `{ constructor: ...}` `{ constructor: ...}`
 *  B: `{}` `{ constructor: ...}`
 *  C: `{ constructor: ...}` `{}`
 *  D: `{ constructor: ...}` `undefined`

答案: D

常规函数，例如`giveLydiaPizza`函数，有一个`prototype`属性，它是一个带有`constructor`属性的对象（原型对象）。 然而，箭头函数，例如`giveLydiaChocolate`函数，没有这个`prototype`属性。 尝试使用`giveLydiaChocolate.prototype`访问`prototype`属性时会返回`undefined`。