欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript零碎知识点

程序员文章站 2024-01-29 19:40:22
...
  1. 数组:methods

    • Array.from():从一个类似数组或可迭代对象中创建一个新的数组实例
      Array.from('foo'); // ['f','o','o']
      Array.from( [1,2,3], x => x+x );// [2,4,6]
      Array.from( arraylike, mapFn )
      
      数组去重合并:
      function combine(){ 
        let arr = [].concat.apply( [], arguments);  // 数组合并
        return Array.from( new Set(arr) );  // 数组去重
      } 
      var m = [1, 2, 2], n = [2,3,3]; 
      console.log(combine( m, n )); // [1,2,3]
      
    • Array.isArray():用于确定传递的值是否是一个Array
      Array.isArray([1,2,3]); // true
    • Array.of():创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型
      与Array的区别:
      Array.of(7); // [7]
      Array(7); // [ , , , , , , ]--7个undefined
      Array.of(1,2,3) === Array(1,2,3) // [1,2,3]
      
    • Array.concat():用于合并两个或多个数组。不会更改 现有数组,返回一个 数组
      var a = ['a','b'], b = ['c','d'];
      a.concat(b) // ['a','b','c','d']
      a.concat(b,c,d…)
      
    • Array.prototype.copyWithin():浅复制数组的一部分到同一个数组的另一个位置,并返回它,而不修改其大小。(改变数组)
      arr.copyWithin( target, start, end ) // start = 0, end = arr.length
      var arr = [1,2,3,4,5]
      arr.copyWithin(0,3,4) // [4,2,3,4,5]
      arr.copyWithin(1,3) // [4,4,5,4,5]
      
    • Array.prototype.entries():返回一个新的Array Iterator对象,该对象包含数组中每个牵引的键/值对
      var arr = ['a','b','c']
      var it = arr.entries()
      it.next().value // [0,'a']
      it.next().value // [1,'b']
      
    • Array.prototype.every():测试数组的所有元素是否通过了指定函数的测试(对数组中对每一项运行给定函数,如果该函数对每一项都返回true,则返回true)
      function isBig (value) { return value > 40; }
      var arr = [39,40,41];
      arr.every(isBig) // false
      
    • Array.prototype.fill():用一个固定值填充一个数组中从起始索引到终止索引内的全部元素,不包括终止索引。(修改数组)
      arr.fill( value, start, end ) // start = 0, end = arr.length
      var arr = [1,2,3,4]
      arr.fill(0,2,4) // [1,2,0,0]
      arr.fill(5,1) // [1,5,5,5]
      arr.fill(6) // [6,6,6,6]
      
    • Array.prototype.filter():创建一个 数组,其包含通过所提供函数实现的测试的所有元素(对数组中对每一项运行给定函数,返回该元素中会返回true的项组成的数组)
      var words = ['limit','present']
      const result = words.filter( word => word.length > 6 ) // ['present']
      
    • Array.prototype.find():返回数组中满足给定函数的第一个元素的值,否则为undefined
      var arr = [5,12,18]
      var found = arr.find( function(element) { return element > 10; }) // 12
      
    • Array.prototype.findIndex():返回数组中满足给定函数的第一个元素的索引,否则返回-1
      arr.findIndex( function(element) { return element > 10 }) // 1
      
    • Array.prototype.forEach():对数组中的每个元素执行一次给定函数,没有返回值
      arr.forEach( function(value) { console.log(value) }) // 5 12 18
      array.forEach( callback( currentValue, index, array ) {…}, this)
      currentValue:数组中正在处理的当前元素
      index:数组中正在处理的当前元素的索引
      array:forEach()正在操作的数组
      
    • Array.prototype.includes():用来判断一个数组是否包含一个指定的值,包含返回true,不包含返回false
      arr.includes( searchElement, fromIndex ) // fromIndex = 0
      var arr = ['cat','dog','bat']
      arr.includes('cat') // true
      arr.includes('at') // false
      
    • Array.prototype.indexOf():返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1
      arr.indexOf( searchElement, fromIndex ) // fromIndex = 0
      var arr = ['cat','dog','bat']
      arr.indexOf('cat') // 0
      arr.indexOf('bat',2) // 2
      arr.indexOf('at') // -1
      
    • Array.prototype.join():将一个数组(类数组对象)的所有元素连接成一个字符串并返回这个字符串。(不修改数组)
      var arr = ['a','b','c']
      arr.join() // a,b,c—默认为','
      arr.join('') // abc
      arr.join('-') // a-b-c
      
    • Array.prototype.keys():返回一个包含数组中每个索引键的Array Iterator对象
      var arr = ['a','b','c']
      var it = arr.keys()
      for(let key of it){
        console.log(key) // 0 1 2
      }
      
    • Array.prototype.lastIndexOf():返回指定元素在数组中的最后一个索引,不存在返回-1,从后向前查
      arr.lastIndexOf( searchElement, fromIndex ) // fromIndex = arr.length - 1
      var arr = [1,2,3,1]
      arr.lastIndexOf(1) // 3
      
    • Array.prototype.map():创建一个 数组,对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
      var newArr = arr.map(function callback( currentValue, index, array ) { return … })
      //currentValue:callback数组中正在处理的当前元素
      //index:callback数组中正在处理的当前元素的索引
      //array:callback map方法被调用的数组中
      var arr = [1,2,3,4]
      const map1 = arr.map( x => x*2 ); // [2,4,6,8]
      console.log(arr) // [1,2,3,4]
      
    • Array.prototype.pop():从数组中删除最后一个元素,并返回该元素的值。更改数组长度
      var arr = ['a','b','c']
      arr.pop() // 'c',若当前数组为空时,返回undefined
      console.log(arr) // ['a','b']
      
    • Array.prototype.push():将一个或多个元素添加到数组的末尾,并返回新数组的长度
      var arr = ['a','b','c'], arr2 = ['e','f']
      arr.push('d') // 4
      console.log(arr) // ['a','b','c','d']
      Array.prototype.push.apply( arr, arr2 ) // 合并两个数组
      console.log(arr) // ['a','b','c','d','e','f']—arr太大时不要用,因为一个函数能接受的参数个数有限
      
    • Array.prototype.reduce():对累计器和数组中的每个元素(从左到右)应用一个函数,将其简化为单个值
      arr.reduce( function( accumulator, currentValue, currentIndex, array ) { return … }, initialValue )
      //accumulator:累计器,第一次将第一个数或initialValue(优先)作为accumulator,之前为运行一次function的结果
      //currentValue:当前值
      //其余可选
      const arr = [1,2,3,4]
      const reducer = ( acc, currentValue) => acc + currentValue
      console.log(arr.reduce(reducer)) // 10
      console.log(arr.reduce(reducer), 5) // 15,第一次acc为5
      
      将二维数组转一维数组
      var flattened = [[0,1],[2,3],[4,5]].reduce(
        function (a,b) {
          return a.concat(b)
        }, [])
      箭头简化=> var flat = [[0,1],[2,3],[4,5]].reduce((cacc, cur) => acc.concat(cur),[])
      
      计算数组中每个元素出现都次数
      var names = ['A','B','T','B','A'];
      var countedNames = names.reduce( function( allNames, name) {
        if(name in allNames){
          allNames[name]++
        } else {
          allNames[name] = 1
        }
        return allNames
      }, {})
      console.log(countedNames) // {'A': 2, 'B': 2, 'T': 1}
      
    • Array.prototype.reduceRight():与reduce()一样,只是从右到左
      const arr = [[0,1],[2,3]].reduceRight( (acc, cur ) => acc.concat(cur))
      console.log(arr) // [2,3,0,1]
      
    • Array.prototype.reverse():将数组中元素的位置颠倒,反转数组。(修改数组)
      var arr = ['a','b','c']
      arr.reverse() // ['c','b','a']
      
    • Array.prototype.shift():从数组中删除第一个元素,并返回该元素的值。更改数组长度,数组为空返回undefined
      var arr = [1,2,3]
      arr.shift() // 1
      console.log(arr) // [2,3]
      
    • Array.prototype.slice():返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象,且原始数组不会被修改
      arr.slice() // [0,end]
      arr.slice(begin) // [begin,end]
      arr.slice(begin,end) // [begin,end]
      var arr = ['a','b','c','d']
      arr.slice(2) // ['c','d']
      arr.slice(1,3) // ['b','c']
      console.log(arr) // ['a','b','c','d']
      
    • Array.prototype.some(): 对数组中的每一项运行给定的函数,如果该函数对任意一项返回true,则返回true。(不改变数组)对于放在空数组上的任何条件都返回false
      arr.some( function( currentValue, index, array ) { return … })
      var arr = [1,2,3]
      arr.some(function(element){ return element % 2 === 0 }) // true
      
    • Array.prototype.sort():使用就地算法对数组中对元素进行排序,并返回数组。(修改数组)排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点
      arr.sort() // 默认排序
      arr.sort(compareFunction) // 按函数指定顺序排序
      var arr = [1,30,4,21]
      arr.sort() // [1,21,30,4] === arr
      function compareNumber(a,b) { return a-b }
      arr.sort(compareNumber) // [1,4,21,30]
      
    • Array.prototype.splice():通过删除现有元素或新增新元素来更改一个数组的内容
      arr.splice( start, deleteCount, item1, item2…)
      //start:指定修改开始的位置(从0开始),若超过arr.length,则从数组末尾开始;若负数的绝对值大于arr.length,则从0项开始
      //deleteCount:整数,要删除的元素的**个数**,0不移除,deleteCount = arr.length - start
      //item:要添加到数组的元素
      返回由被删除得元素组成得一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除的元素,则返回空数组。
      var arr = [1,2,3,4,5,6]
      arr.splice(1,0,10) // [1,10,2,3,4,5,6]
      arr.splice(4,1,20) // [1,10,2,3,20,5,6]
      arr.splice(6,1) // [1,10,2,3,20,5]
      
    • Array.prototype.toLocaleString():返回一个字符串表示数组中的元素。数组中的元素将使用各自的toLocaleString方法转成字符串,这些字符串将使用一个特定语言环境的字符串隔开
      arr.toLocaleString( locales, options )
      var arr = [1,'a',new Data('21 Dec 1997 14:12:00 UTC')]
      arr.toLocaleString('en',{ timeZone: 'UTC'}) // '1,a,12/21/1997,2:12:00 PM'
      
    • Array.prototype.toString():返回一个字符串,表示指定的数组及其元素
      var arr = [1,2,'a','1a']
      arr.toString() // '1,2,a,1a'
      
    • Array.prototype.unshift():将一个或多个元素添加到数组的开头,并返回新数组的长度,修改数组
      var arr = [1,2,3]
      arr.unshift(4,5) // 5
      console.log(arr) // [4,5,1,2,3]
      
    • Array.prototype.values():返回一个新的Array Iterator对象,该对象包含数组每个索引的值
      const arr = ['a','b','c']
      const it = arr.values()
      for(const value of it){ console.log(value) } // 'a' 'b' 'c'
      
  2. 函数:methods

    • Function.prototype.apply():调用一个具有给定this值的函数及一个数组参数
      func.apply( thisArg, argsArray )
      //thisArg:在func函数运行时使用的this值。若在非严格模式下,指定为null或undefined时,会自动替换为指向全局对象,原始值会被包装
      var arr = [1,2,3]
      var max = Math.max.apply(null,arr) // 3
      
    • Function.prototype.bind():创建一个新的函数,当这个函数被调用时其this值为提供的值
      this.x = 9
      var module = {
        x: 81,
        getX: function(){ return this.X }
      }
      module.getX() // 81
      var retrieveX = module.getX
      retrieveX() // 9,this指向全局作用域
      var boundX = retrieveX.bind(module) // 返回新函数
      boundX() // 81
      function list(){ return Array.prototype.slice.call(arguments); }
      var list1 = list(1,2,3) // [1,2,3]
      var lead = list.bind(undefined,37)
      var list2 = lead() // [37]
      var list3 = lead(1,2,3) // [37,1,2,3]
      
    • Function.prototype.call():调用一个函数,其具有一个指定的this值和分别提供的多个参数(参数列表)
      function Product(name, price) { this.name = name; this.price = price }
      function Food(name, price) { Product.call(this, name, price); this.category = 'food'; }
      console.log( new Food('cheese', 5).name ) // cheese
      ----------------------------------------------------
      function greet() {
        var reply = [this.person, 'is', this.role].join(' ')
        console.log(reply)
      }
      var i = { person: 'YK', role: 'student' }
      greet.call(i) // YK is student
      
  3. 对象:methods

    • Object.assign():用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它返回目标对象
      const obj1 = { a: 1, b: 2, c: 3 }
      const obj2 = Object.assign( {c: 4, d: 5}, obj1 )
      console.log(obj2.c, obj2.d) // 3 5
      var copy = Object.assign( {}, obj )
      var obj = Object.assign( o1, o2, o3 ) // o1也会被改变,且会合并相同属性
      

  1. 几种判断JavaScript中数据类型的方法:

    • a: string, b: Array, c: Function, d: Number
    • 1⃣️ typeofalert( typeof 'a' ) // string 注:null也是object
    • 2⃣️ instanceof—判断已知对象的方法:b instanceof Array // true
    • 3⃣️ constructor—对已知对象:c.constructor === Function // true
    • 4⃣️ prototypeObject.prototype.toString.call(d) // [object Number] (区分大小写)
    • 5⃣️ jQuery.type()jQuery.type(undefined) // undefined
  2. 异步编程有几种方法?

    1⃣️回调函数 2⃣️事件监听 3⃣️Promise 4⃣️Generation 5⃣️async/await
  3. 前后端实现通信方式:

    • 1⃣️ AJAX:(同源限制)
    • 2⃣️ EventSource:SSE(服务端退缩)技术,从HTTP演变而来
    • 3⃣️ WebSocket:客户端和服务端的双向长连接通信
    • 4⃣️ navigator.sendBeacon:全新异步数据上报API,专门做数据采集,在合适时间上报。典型场景:无阻塞的方式对出栈行为进行采集
    • 5⃣️ 服务端渲染
    • 6⃣️ Web socket
  4. 页面呈现流程:

    JavaScript零碎知识点
    页面呈现流程图
  5. 回流与重绘:

    • ★回流:当render tree中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变而需要重新构建。(每个页面至少需要一次回流,就是在页面第一次加载的时候)
    • 重绘:当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观、风格而不影响布局的,比如:background-color。(在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重绘构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程称为重绘)
    • 注:回流必定引起重绘,而重绘不一定引起回流。回流比重绘代价更高
    • 当页面布局和几何属性改变时就需要回流。下述为发生浏览器回流的情况:
      • 1⃣️添加或者删除可见的DOM元素
      • 2⃣️元素位置改变
      • 3⃣️元素尺寸改变—边距、填充、边框、宽度和高度
      • 4⃣️内容改变—比如文本改变或者图片大小改变而引起的计算值宽度和高度改变
      • 5⃣️页面渲染初始化
      • 6⃣️浏览器窗口尺寸改变—resize事件发生时
    • 浏览器优化操作:浏览器会维护1个队列,把所有会引起回流、重绘的操作放在这个队列,等队列操作达到一定数量或一定时间间隔,浏览器就会flush队列,进行一个批处理,使多次回流重绘变成一次回流重绘
    • 有时当你向浏览器请求一些style信息时,就会强制浏览器flush队列,如:
      • 1⃣️offsetTop、offsetLeft、offsetWidth、offsetHeight
      • 2⃣️scrollTop、scrollLeft、scrollWidth、scrollHeight
      • 3⃣️clientTop、clientLeft、clientWidth、clientHeight
      • 4⃣️Width、Height
      • 5⃣️请求getComputedStyle()或IE的currentStyle
      • 注:给最新最精确的值,所以需要强制flush队列
  6. 如何减少回流重绘?

    减少对render tree的操作(合并多次对DOM和样式对修改),减少对一些style信息对请求,等
    • 1⃣️直接改变className,避免逐项更改样式
    • 2⃣️避循环操作DOM,创建一个documentFragmentdiv,在它上面应用所有DOM操作,最后再把它添加到window.doccument(也可以在一个display: none元素上操作,最终把它显示出来。因为display: none上的DOM操作不会引发回流和重绘)(还可以使用cloneNode(true or false)eplaceChild技术,引发一次回流和重绘)
    • 3⃣️避免循环读取offsetLeft等属性。在循环之前把它们存起来。(别常访问flush队列属性)
    • 4⃣️绝对定位具有复杂动画的元素。绝对定位使它脱离文档流,否则会引起父元素及后续元素大量的回流。(使用CSS3的transition也可以获得不错的性能)
  7. HTML5新特性:

    • 语义:<section>、<article>、<nav>、<header>、<main>、<aside>、<footer>
    • 通信:
      • 1⃣️Web Sockets—允许页面与服务器建立持久连接并可交换非HTML数据
      • 2⃣️indexedDB—在浏览器中存储大量结构化数据,并能使用索引高性能检索
    • 多媒体:
      • 1⃣️<audio>、<video>
      • 2⃣️WebRTC—即时通信
      • 3⃣️Camera API
    • 3D、图像&效果:
      • 1⃣️Canvas
      • 2⃣️WebGL(使用canvas)—three.js
      • 3⃣️SVG
    • 性能&集成:
      • 1⃣️Web Workers
      • 2⃣️XMLHttpRequest Level 2
      • 3⃣️History API
      • 4⃣️拖放
    • 设备访问:
      • 1⃣️地理位置定位
      • 2⃣️检测设备方向
  8. CSS3新特性:

    • CSS3选择器:[attribute ^=value]a[href ^= "https"]{}:选择该属性以特定值开头的元素
      [attribute $=value]:选择该属性以特定值结尾的元素
      [attribute *=value]:选择该属性中出现特定值的元素
      :first-of-type // :last-of-type // :only-of-type
      :only-child // :nth-child(n)
      :root <=> html{} // :not
    • @Font-face特性:加载字体样式,可加载服务器端字体文件
    • 圆角:border-radius
    • 阴影:shadow( text-shadow/box-shadow)
    • CSS3的渐变效果:linear
    • 对象变化时的过度效果:transition( duration、delay…)
    • 2D转换效果:transform(translate(水平移动)、rotate(旋转)、scale(伸缩)、skew(倾斜))
    • 动画效果:Animation
      ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
      更新于2019-01-22-15:24,以上皆为日常笔记,如有问题还望大家多多指正!