每日思考（2020/03/07）

题目概览

• src、href、link的区别是什么？
• 用css画一个太阳
• 实现一个flattenDeep函数，把多维数组扁平化

题目解答

src、href、link的区别是什么？

• href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。例如：

  <link href="reset.css" rel=”stylesheet“/>

  浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。

• src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素

  <script src="script.js"></script>

  当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因

• link和@import的区别
  • link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
  • link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
  • link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持
  • ink支持使用Javascript控制DOM去改变样式；而@import不支持

用css画一个太阳

 <div class="sun">
   <div class="sun-light sl1"></div>
   <div class="sun-light sl2"></div>
   <div class="sun-light sl3"></div>
   <div class="sun-light sl4"></div>
   <div class="sun-light sl5"></div>
   <div class="sun-light sl6"></div>
   <div class="sun-light sl7"></div>
   <div class="sun-light sl8"></div>
</div>

// css
.sun {
  margin: 200px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: red;
  box-shadow: 0 0 21px #fe9e9e;
  position: relative;
}
// 光线的宽高据 sun-body 而动
.sun-light {
  width: 100px;
  height: 6px;
  background: yellow;
  position: absolute;
  left: 0;
  top: 0;
}
.sl1 {
  left: 50px;
  top: -58px;
  transform: rotate(90deg);
}
.sl2 {
  top: -14px;
  left: 160px;
  transform: rotate(-45deg);
}
.sl3 {
  top: 97px;
  left: 205px;
}
.sl4 {
  top: 206px;
  left: 160px;
  transform: rotate(45deg);
}
.sl5 {
  top: 252px;
  left: 50px;
  transform: rotate(90deg);
}
.sl6 {
  top: 206px;
  left: -60px;
  transform: rotate(-45deg);
}
.sl7 {
  top: 97px;
  left: -105px;
}
.sl8 {
  top: -14px;
  left: -60px;
  transform: rotate(45deg);
}

实现一个flattenDeep函数，把多维数组扁平化

// 多维数组扁平化 
var arr=[1,2,[3,4,[5,6,7]],9,[10,11]]
// 方法一  循环数组+递归调用
function steamroller (arr){
  // 1.创建一个新数组，保存扁平后的数据
  var newArr=[];
  // 2.for循环原数组
  for(var i=0;i<arr.length;i++){
    if(Array.isArray(arr[i])){
      // 如果是数组，调用steamroller 将其扁平化
      // 然后在push 到newArr中
      newArr.push.apply(newArr,steamroller(arr[i]))
    }else {
      // 反之 不是数组，直接push进newArr
      newArr.push(arr[i])
    }
  }
  // 3.返回新的数组
  return newArr
}
console.log(steamroller(arr)) // [ 1, 2, 3, 4, 5, 6, 7, 9, 10, 11 ]

// 方法二  利用apply+some
// 利用arr.some判断当数组中还有数组的话，递归调用steamroller2扁平函数(利用apply扁平), 用concat连接，最终返回arr;
function steamroller2(arr){
  while(arr.some(item=> Array.isArray(item))){
    arr=[].concat.apply([],arr)
  }
  return arr
}
console.log(steamroller2(arr))

// 方法三   reduce方法
// 当数组中还有数组的话，递归调用steamroller3扁平函数(利用reduce扁平), 用concat连接，最终返回arr.reduce的返回值;
function steamroller3(arr){
  return arr.reduce((prev,next)=>{
    return prev.concat(Array.isArray(next)?steamroller3(next):next)
  },[])
}
console.log(steamroller3(arr))

// 方法四   es6 展开运算符
// 利用arr.some判断当数组中还有数组的话，递归调用flatten扁平函数(利用es6展开运算符扁平), 用concat连接，最终返回arr;

function steamroller4(arr){
  while(arr.some(item=> Array.isArray(item))){
    // arr=[].concat.apply([],arr)
    arr=[].concat(...arr)
  }
  return arr
}
console.log(steamroller4(arr))