JavaScript零碎知识点

  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. 页面呈现流程:
    页面呈现流程图

  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,以上皆为日常笔记,如有问题还望大家多多指正!
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容