JavaScript前端面试(1)

1、数组去重

// 原生写法


var shuffle_array = [1, 2, 1, 2, 3, 4, 1, 2, 3, 9, 8, 7, 7];
    // 数组去重
    function Toralds (arr) {
        for (var i = 0; i < arr.length - 1; i ++) {
            for (var j = i + 1; j < arr.length; j ++) {
                if (arr[i] == arr[j]) {
                    arr.splice(j, 1);
                    j --;
                }
            }
        }
        return arr;
    }
    console.log(Toralds(shuffle_array));


// ES6数据结构 Set 写法 
var shuffle_array = [1, 2, 1, 2, 3, 4, 1, 2, 3, 9, 8, 7, 7];
var new_array = new Set(shuffle_array);
console.log(new_array);
// 因为去重过后Set数据结构并不是Array类型
// 进行Array转换（使用Array.from）
console.log(Array.from(new_array));


//1） Set add方法：

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
console.log('added:', set1) // added: Set {1, 2, 3}

//2） 删除Set中的元素

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
set1.delete(1)
console.log('deleted:', set1) // deleted: Set { 2, 3 }

//3） 判断某个元素是否存在(返回布尔值)

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
set1.delete(1)
console.log('has(1):', set1.has(1)) // false
console.log('has(2):', set1.has(2)) // true

// 5）清除Set中的所有元素

let set1 = new Set()
set1.add(1)
set1.add(2)
set1.add(3)
set1.clear()
console.log('cleared:', set1) // cleared: Set {}


// 6) 遍历

可以使用Set实例对象的keys()，values()，entries()方法进行遍历。

由于Set的键名和键值是同一个值，它的每一个元素的key和value是相同的，所有keys()和values()的返回值是相同的，entries()返回的元素中的key和value是相同的。

let set5 = new Set([4, 5, 'hello'])
console.log('iterate useing Set.keys()')
for(let item of set5.keys()) {
  console.log(item)
}
// iterate useing Set.keys()
// 4
// 5
// hello

console.log('iterate useing Set.values()')
for(let item of set5.values()) {
  console.log(item)
}

// iterate useing Set.values()
// 4
// 5
// hello

console.log('iterate useing Set.entries()')
for(let item of set5.entries()) {
  console.log(item)
}

// iterate useing Set.entries()
// [ 4, 4 ]
// [ 5, 5 ]
// [ 'hello', 'hello' ]

 

2、前端跨域问题的解决办法

跨域:即请求的地址与被请求的地址协议头、域名、端口有一个不一样就叫跨域

1.JSONP：即 JSON with Padding

因为html <img> <link> <script> 等一些标签不存在跨域问题，所有可以直接使用<script>标签引用跨域服务器的JS文件，然后跨域服务器的JS文件进行相应的操作过后返回。

 

3、有三个标签根据点击不同标签显示不同图片

<a href="javascript:;" index="1">第一张图片</a>
<a href="javascript:;" index="2">第二张图片</a>
<a href="javascript:;" index="3">第三张图片</a>
<img src="" width="200px;" height="200px;" />


var additionally = document.getElementsByTagName('a');
    var img = document.getElementsByTagName('img')[0];
    for (var i = 0; i < additionally.length; i ++) {
        additionally[i].onclick = function () {
            this.setAttribute('src', './statics/images/pricute' + this.getAttribute('index') + './jpg');
        }
    }

 4、ES6中的 let 和 var 的区别

1）通过var定义的变量，作用域是整个封闭函数，是全域的 。通过let定义的变量，作用域是在块级或是子块中。

2）let不允许在相同作用域内，重复声明同一个变量。

 

5、以下代码的打印结果

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

// 结果:  10个10；

HR问： 如何改变结果为0~10？答： 使用闭包 或者 let改变作用域

1）使用闭包：

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

2）使用 let:

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

补充: 利用setTimeout的第三个参数

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