JavaScript零碎知识点

程序员文章站 2024-01-29 19:40:22

...

数组：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'

函数：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

对象：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也会被改变，且会合并相同属性

几种判断JavaScript中数据类型的方法：
- a: string, b: Array, c: Function, d: Number
- 1⃣️ typeof：alert( typeof 'a' ) // string 注：null也是object
- 2⃣️ instanceof—判断已知对象的方法：b instanceof Array // true
- 3⃣️ constructor—对已知对象：c.constructor === Function // true
- 4⃣️ prototype：Object.prototype.toString.call(d) // [object Number] (区分大小写)
- 5⃣️ jQuery.type()：jQuery.type(undefined) // undefined
异步编程有几种方法？
1⃣️回调函数 2⃣️事件监听 3⃣️Promise 4⃣️Generation 5⃣️async/await
前后端实现通信方式：
- 1⃣️ AJAX：(同源限制)
- 2⃣️ EventSource：SSE(服务端退缩)技术，从HTTP演变而来
- 3⃣️ WebSocket：客户端和服务端的双向长连接通信
- 4⃣️ navigator.sendBeacon：全新异步数据上报API，专门做数据采集，在合适时间上报。典型场景：无阻塞的方式对出栈行为进行采集
- 5⃣️ 服务端渲染
- 6⃣️ Web socket
页面呈现流程：

页面呈现流程图
回流与重绘：
- ★回流：当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队列
如何减少回流重绘？
减少对render tree的操作(合并多次对DOM和样式对修改)，减少对一些style信息对请求，等
- 1⃣️直接改变className，避免逐项更改样式
- 2⃣️避循环操作DOM，创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.doccument(也可以在一个display: none元素上操作，最终把它显示出来。因为display: none上的DOM操作不会引发回流和重绘)(还可以使用cloneNode(true or false)和eplaceChild技术，引发一次回流和重绘)
- 3⃣️避免循环读取offsetLeft等属性。在循环之前把它们存起来。(别常访问flush队列属性)
- 4⃣️绝对定位具有复杂动画的元素。绝对定位使它脱离文档流，否则会引起父元素及后续元素大量的回流。(使用CSS3的transition也可以获得不错的性能)
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⃣️检测设备方向
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，以上皆为日常笔记，如有问题还望大家多多指正！

上一篇： iOS零碎知识点

下一篇： Base64编码解码

JavaScript零碎知识点

数组：methods

函数：methods

对象：methods

几种判断JavaScript中数据类型的方法：

异步编程有几种方法？

前后端实现通信方式：

页面呈现流程：

回流与重绘：

如何减少回流重绘？

HTML5新特性：

CSS3新特性：

HTML 单击超链接执行javascript事件

PyTorch常用知识点

iOS零碎知识点

Javascript关于函数的那些事

JavaScript零碎知识点

HTML零碎知识点

iOS零碎知识点

JavaScript设计模式之装饰者模式定义与应用示例

线程知识点

JavaScript对象的类型转换