自省JS-5

发表于 | 分类于 ， ，

函数声明和函数表达式区别

  • 函数声明会被变量提升到顶部作用域
  • 函数表达式只有执行到此处才会赋值,执行必须在表达式之后
  • 函数声明必须有函数名

document.write和innerHTML区别

  • document.write:将需要展示的内容添加到一个文档模型(DOM)里,会造成页面重绘
  • innerHTML: 设置或获取HTML某个元素中的内容.只会对影响的DOM元素重绘

将多维数组降维

1
2
3
4
5
6
7
function deepFlat(arr = []) {
  return arr.reduce(
    (pre, cur) =>
      Array.isArray(cur) ? pre.concat(deepFlat(cur)) : pre.concat(cur),
    []
  );
}

全屏和退出全屏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//全屏
function fullScreen() {
    let el = document.documentElment;
    //w3c
    if(el.requestFullScreen) {
        el.requestFullScreen();
    }
    //Firefox
    if(el.mozRequestFullScreen) {
        el.mozRequestFullScreen();
    }
    //Chrome
    if(el.webkitRequestFullScreen) {
        el.webkitRequestfull
    }
    //IE
    if(el.msRequestFullScreen) {
        el.msRequestFullScreen();
    }
}

//退出全屏
function exitFullScreen() {
    if(document.exitFullscreen) {
        document.exitFullscreen();
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    } else if(document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

常用字符串函数

  • charAt:返回指定位置的字符,
  • concat:连接字符串,
  • includes:是否包含某个字符串
  • startWith,endWith:是否已给定字符开头或结尾,
  • indexOf,lastIndexOf:查找字符串第一次/最后一次出现的位置,找不到返回-1
  • split:转化成数组,
  • slice:截取范围内字符串,并返回,不会改变原字符串
  • substr(开始位置,截取长度):截取字符串,MDN已不推荐使用
  • substring(开始位置,结束的索引(不包含)):截取字符串
  • toUpperCase: 转化大写 toLowerCase:转化为小写

substr(start,length),slice(beginIndex[,endIndex]),substring(beginIndex[,endIndex]) 区别

参数为正

  • slice,substring从开始索引,到结束索引截取
  • substr从开始索引,到需要截取的字符长度截取

参数为负

  • substr:
    • 如果为负值，则被看作 strLength +start，其中strLength` 为字符串的长度,
    • 第二个参数0或者负,则返回空字符串
  • slice:
    • 任何一个参数如果值为负数，会被当做 strLength + beginIndex/endIndex 看待，这里的strLength 是字符串的长度
  • substring:
    • 如果任一参数小于 0 或为 NaN，则被当作 0,
    • 如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样
1
2
3
4
5
6
7
8
var str = 'hello world'; //strLength = 11
console.log(str.slice(-3)); // rld 等价于 slice(8)
console.log(str.substring(-3));// hello world 等价于substring(0)
console.log(str.substr(-3));// rld 等价于 substr(8)

console.log(str.slice(3, -4)); // lo w 等价于 slice(3,7)
console.log(str.substring(3, -4)); // hel 等价于 substring(3,0)->substring(0,3)
console.log(str.substr(3, -4));// ""(空字符串)

简述ajax请求步骤

  • 创建ajax请求 let xhr = new XMLHttpRequest()
  • 连接服务器 xhr.open("GET","url",true)
  • 发送请求 xhr.send()
  • 接受响应 xhr.onreadychange = function () {}

ajax请求状态

状态码 状态常量 描述
0 XMLHttpRequest.UNSENT 代理被创建，但尚未调用 open() 方法。
1 XMLHttpRequest.OPENED open() 方法已经被调用
2 XMLHttpRequest.HEADERS_RECEIVED send() 方法已经被调用，并且头部和状态已经可获得。
3 XMLHttpRequest.LOADING 下载中； responseText 属性已经包含部分数据
4 XMLHttpRequest.DONE 下载操作已完成。

函数执行过程

  • 当执行一个函数时,会先创建一个执行上下文,然后将函数放到函数栈的顶部
  • 执行函数,如果函数中还有其他函数,则将遇到的函数放到函数栈的顶部,执行该函数
  • 当某个函数执行完毕后,该函数出栈,执行上一个函数,一次循环,最终最初执行的函数出栈

异步编程的方式

  • 回调函数
  • Promise
  • async/await

复制粘贴

1
2
3
4
5
6
7
8
9
10
const copyText = elementValue => {
    //创建一个text的input
    let el = document.createElement('input');
    el.setAttribute('type','text');
    //将要复制的值写入新创建的input
    el.value = elementValue;
    //选中input 执行js复制命令
    el.select()
    document.execCommand('copy');
}

ES5,ES6,ES7区别

ES5

  • 严格模式
  • JSON API
  • object Api
  • Array Api

ES6

  • 引入类
  • 模块化
  • 箭头函数
  • 函数参数默认值
  • 模板字符串
  • 解构赋值
  • Promis
  • let,const

ES7

  • Array.prototype.includes
  • 指数运算符 **

onload和onDOMContentLoaded

  • onload:在页面资源全部加载完成后触发
  • domContentLoaded:在DOM节点加载完成就触发,不需要等待样式,图片等

btoa和atob

  • btoa base64编码

  • atob base64解码

  • atob和btoa不能编码Unicode字符

  • 可以通过encodeURIComponent编码,在base64

    1
    2
    3
    4
    5
    6
    7
    8
    const string = "我爱中国";
    const encodeString = btoa(encodeURIComponent(string));
    const decodeString = decodeURIComponent(atob(encodeString));

    console.log(encodeString,"编码");
    console.log(decodeString,"解码");
    //JUU2JTg4JTkxJUU3JTg4JUIxJUU0JUI4JUFEJUU1JTlCJUJE 编码
    //我爱中国 解码

获取当前的url和来源的url

  • window.location.href:当前url
  • window.referrer: 来源url

document.getElelmentById和document.querySelector区别

getElementById 获取的是动态集合,querySelecto或querySelectorAll获取的是静态集合。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

var ul = document.getElementById('ul'),
     liCollection = document.getElementsByTagName("li");
for(var i = 0; i < 5 ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log(liCollection.length);  //li增加了,长度就会变

var ul = document.getElementById('ul'),
    liCollection = document.querySelectorAll("li");
for(var i = 0; i < liCollection.length ; i++){
     ul.appendChild(document.createElement("li"));
}
console.log(liCollection.length);  //3 新增的li,无法获得

原生获取DOM元素方法

  • document.getElementById:通过ID获取
  • document.getElementsByName: 通过nam属性名
  • document.getElementsByClassName:通过类名
  • document.getElementsByTagName:通过标签名
  • document.querySelector:通过标签名,返回匹配的第一个
  • document.querySelectorAll:通过标签名,返回集合
  • document.body: 获取body
  • document.documentElement:获取HTML

console.log结果可信吗

  • 一般对于基本类型number、string、boolean、null、undefined的输出是可信的。但对于Object等引用类型来说,会有些不一样
  • 不展开对象看时，console.log()是按照代码执行顺序，同步地输出了对象当时的快照。所以我们看到的是预期的值。
  • 展开对象时，它其实是重新去内存中读取对象的属性值，此时对象属性已被更改，所以展开对象后，可能看到的不是预期值了