写在前面的话

大厂里考查的JavaScript基础会居多~

而其中的各种框架，只是基于基础知识上盖房子的方法；

（一）如何使用Canvas和svg去画一个圆型？

1、canvas绘制圆形

<canvas id="mycanvas"></canvas>

 var mycanvas = document.getElementById("mycanvas");

    var context = mycanvas.getContext("2d");

    context.beginPath();

    context.arc(60, 60, 50, 0, 2*Math.PI, true);

    context.stroke();

2、svg绘制圆形

<svg>

  <circle cx="200" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />

</svg>

（二）JS深度克隆的方法

function deepClone(obj) {

    let newObj = Array.isArray(obj) ? [] : {}

    if(obj &&typeofobj ==="object") {

        for(let keyin obj) {

            if (obj.hasOwnProperty(key)) {

                newObj[key] = (obj &&typeofobj[key] ==='object') ? deepClone(obj[key]) : obj[key];

            }

        }

    }

    return newObj

}

const newObj = deepClone(oldObj));

（三）请至少举出3种数组去重的方法，并描述它们的差异

1、用set方法

function unique10(arr) {

            //Set数据结构，它类似于数组，其成员的值都是唯一的

            return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组

        }

        console.log(unique10([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4]));

        // 结果是[1, 2, 3, 5, 6, 7, 4]

2、hasOwnProperty

function unique(arr) {

var obj = {};

return arr.filter(function(item, index, arr){

return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)

})

}

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

console.log(unique(arr))

//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}] //所有的都去重了

3、利用includes

function unique(arr) {

if (!Array.isArray(arr)) {

console.log('type error!')

return

}

var array =[];

for(var i = 0; i < arr.length; i++) {

if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值

  array.push(arr[i]);

}

}

return array

}

var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

console.log(unique(arr))

//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}] //{}没有去重

参考链接：

https://www.w3school.com.cn/tags/html_ref_canvas.asp

https://www.jb51.net/article/176903.htm