JavaScript的零碎点

苏图
275 阅读7分钟
  1. {}=={}; 结果为false。
   undefined == null;  //true
   undefined === null; //false
   +0 === -0           //true  
   Object.is(+0,-0)    //false
   NaN === NaN         //false
   Object.is(NaN,NaN)  //true
  1. NaN == NaN; 结果为false
  2. JavaScript执行上下文：可以看做是代码的执行环境，他决定这代码的作用域。分为三种：全局环境、函数环境、Eavl环境。
  3. 被Boolean()转换为false的有：""、0、NaN、null、undefined
  4. switch(num)中的num和case处的数值的匹配必须是全等的
let num = 2;
swithc(num){
    case 1:
    //TODO
    case 2:
    //TODO
}

简单类型(值类型/基本数据类型)：存储时变量存储的是值本身

  • string,number,Boolean,undefined,null(这个typeof(null)为object)

复杂数据类型(引用类型)：在存储时变量存储的仅仅是地址引用

  • 通过new关键字创建的对象(系统对象，自定义对象)，如Object,Array,Date

090eb48bd78d69f8ae96d9fff57843b.png

  1. 可以用 + 来巧妙地将字符串转化为数字

image.png

  1. 保持2位数，不需要手动判断再补0，比如时分秒的情况。
    00${hours}.slice(-2)
    先补上，在从后面截取两位

  2. parsInt针对的是字符串值，传递非字符串参数首先会被强制类型转换为字符串

  3. 事件 阻止默认事件：
    e.preventDefault()
    e.returnValue = false (IE)
    阻止冒泡:
    e.stopProagation()
    e.cancelBubble() (IE)

onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后，产生该文件
onchange:当文字值改变时，产生该事件
onselect:当文字加亮后，产生该事件
onClick：当组件被点击时产生的事件

  1. 可选链（?.）:防止值为undefined和null时报错 let arr = res && res.data && res.data.list

可选链的写法： let arr = res?.data?.list

  1. 空值运算符（??=）.当??=左边的值为空的时候，就会将右边的值赋给它
let name = '狗蛋';
let newName = '张三'
let num = null;
let newNum = '123'
name ??= newName;  // b ='狗蛋'
num ??= newNum  // c = '123'
  1. JavaScript全局属性
6（编码相关）+ 2（数据处理）+ 4（数字相关）+ 2（其他）
编码相关：
    escape()、unescape()、encodeURI()、decodeURI()、
    encodeURIComponent()、decodeURIComponent()
数据处理：
    Number()、String()
数字相关：
    isFinite()、isNaN()、parseFloat()、parseInt()
特殊：
    eval()

image.png

  1. 一些内部对象

Navagator：提供有关浏览器的信息
Window：Window对象处于对象层次的最顶层，它提供了处理Navagator窗口的方法和属性
Location：提供了与当前打开的URL一起工作的方法和属性，是一个静态的对象
History：提供了与历史清单有关的信息
Document：包含与文档元素一起工作的对象，它将这些元素封装起来供编程人员使用

一些参考的demo

  1. 正则一些符号：
* ：出现零到多次
+： 出现一到多次
？：出现零次或者一次
 .  : 除了\n以外的任意字符
{n} : 出现n次
{n,} : 出现n到多次
{n,m} : 出现n到m次
  1. JavaScript内置的可迭代对象： 一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）
  • Array
  • Map
  • Set
  • String
  • TypedArray
  • 函数的 arguments 对象
  • NodeList 对象

阮一峰-默认-Iterator-接口

  1. js内置对象
内置对象
Arguments函数参数集合
Array数组
Boolean布尔对象
Date日期对象
Error异常对象
Function函数构造器
Math数学对象
Number数值对象
Object基础对象
RegExp正则表达式
String字符串对象
  1. 数组的一些API arr.filter()用于筛选出满足要求的数组元素，并返回新的数组；

arr.some()用于检测数组是否有满足条件的元素，只要存在元素满足要求，则返回true，否则返回false；

arr.every()用于检测数组的所有元素是否都满足条件，都满足条件时返回true，否则返回false；

arr.map()会对数组中每个元素进行单独判断，返回true或者false，作为新数组的元素

牛客试题例子

# ES5新增方法：forEach，filter，some，map的用法和区别

  1. +new Array(017)，输出为：NaN 017，八进制，转为15，所以创建长度为15的数组，“+”又转为数字，结果就为NaN了
  1. 循环方法的遍历时的比较（待测试） let array = [,1,,2,,3]; array = array.map((i) => ++i)

ES5：

  • orEach(), filter(), reduce(), every() 和some()都会跳过空位。

  • map()会跳过空位，但会保留这个值

  • join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。

  • ES6 中都会将空位当做undefined

function fn(){

   console.log(1);

}

console.log(typeof []);//object

console.log(typeof '[]');//string

console.log(typeof 1);//number

console.log(typeof true);//boolean

console.log(typeof null);//object

console.log(typeof undefined);//undefined

console.log(typeof {id:2});//object

console.log(typeof fn);//function
  1. string 和 String 字符串有length，是装箱有关，最后还是基本类型
let str = String('xxx')
str instanceof String    //false
let str1 = new String("sdf")
str1 instanceof String  //true
typeof str1            //'object'

  1. 正则 \d      匹配一个数字字符。等价于 [0-9]。
    \D     匹配一个非数字字符。等价于 [^0-9]。
    \f       匹配一个换页符。等价于 \x0c 和 \cL。
    \n      匹配一个换行符。等价于 \x0a 和 \cJ。
    \r       匹配一个回车符。等价于 \x0d 和 \cM。
    \s      匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。
    \S      匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。
    \t       匹配一个制表符。等价于 \x09 和 \cI。
    \v      匹配一个垂直制表符。等价于 \x0b 和 \cK。
    \w     匹配字母、数字、下划线。等价于'[A-Za-z0-9_]'。
    \W    匹配非字母、数字、下划线。等价于 '[^A-Za-z0-9_]'。

  2. this指向

  • 函数调用时，指向window,严格模式下指向undefined
  • 以方法调用时，指向调用该方法的对象
  • 使用new创建一个对象时，指向该对象
  • call,apply ,bind可以改变this指向 区别，传参不同
  1. 不支持冒泡的事件

①focus
②blur
③mouseenter
④mouseleave
⑤load
⑥unload
⑦resize

  1. 对数值使用方法 2.toString()将会优先将小数点解析为数字小数点
    以下写法可以规避这种情况
(2).toString()
2 .toString()
2..toString()
  1. 关于delete： 一、delete是干什么的：
  • delete 操作符用于删除对象的某个属性；如果没有指向这个属性的引用，那它最终会被释放。

二、delete使用要注意什么：

  • 如果你试图删除的属性不存在，那么delete将不会起任何作用，但仍会返回true

  • 如果对象的原型链上有一个与待删除属性同名的属性，那么删除属性之后，对象会使用原型链上的那个属性（也就是说，delete操作只会在自身的属性上起作用）

  • 任何使用 var 声明的属性不能从全局作用域或函数的作用域中删除。在eval()函数中可以被删除。

    • 这样的话，delete操作不能删除任何在全局作用域中的函数（无论这个函数是来自于函数声明或函数表达式）
    • 除了在全局作用域中的函数不能被删除，在对象(object)中的函数是能够用delete操作删除的。

  • 任何用let或const声明的属性不能够从它被声明的作用域中删除。

  • 不可设置的(Non-configurable)属性不能被移除。这意味着像Math, Array, Object内置对象的属性以及使用Object.defineProperty()方法设置为不可设置的属性不能被删除

  • 未使用var申明的全局变量可以被删除

引自：MDN developer.mozilla.org/zh-CN/docs/…

摘自牛客

  1. 在ECMAScript6 中,Promise的状态
  • 1.一个promise可能有三种状态：等待（pending）、已完成（fulfilled又称resolved）、已拒绝（rejected）
  • 2.一个promise的状态只可能从“等待”转到“完成”态或者“拒绝”态，不能逆向转换，同时“完成”态和“拒绝”态不能相互转换
  • 3.promise必须实现then方法（可以说，then就是promise的核心），而且then必须返回一个promise，同一个promise的then可以调用多次，并且回调的执行顺序跟它们被定义时的顺序一致
  • 4.then方法接受两个参数，第一个参数是成功时的回调，在promise由“等待”态转换到“完成”态时调用，另一个是失败时的回调，在promise由“等待”态转换到“拒绝”态时调用。同时，then可以接受另一个promise传入，也接受一个“类then”的对象或方法，即thenable对象。 来自牛客题

  1. arguments是函数（除了箭头函数外）的内置对象，它是一个伪数组；用于获取函数的全部参数

  2. JavaScript中0/0的结果是NAN

  3. 严格模式

  • this指向undefined
  • 变量必须先声明再复制，且不允许删除变量或(对象)函数
  • 函数不许重名参数
  • 立即执行函数的this指向取决于上下环境
  • 构造函数的this指向实例对象
avatar
文章
阅读
粉丝