javascript 中的零碎知识不要太多

如题,读小红书时,说到的特殊字面量、特殊返回值、特殊属性等特殊情况太多了,我这脑子能记住就见鬼了。比如:

javascript 包含以下几个部分


  • 核心(ECMAScript)-- 核心功能
  • 文档对象模型(DOM)-- 与网页内容交互
  • 浏览器对象模型 (BOM)-- 与浏览器交互

script元素


包含8个属性,均是可选的,其中 :

  • asyncdefer 两个属性在下载时异步,在执行时阻塞,defer可延时执行,仅用在外部文件;
  • type 默认值是 text/javascript ,可以不写;
  • 为避免延迟和白屏,一般放在上面;

文档模式


HTML5以前有很多文档模式:标准模式和混杂模式;
HTML5以后,都用一种,且每个页面都要写,如下:


区分大小写


ECMAScript中的一切都区分大小写,不论是变量、函数名还是操作符;
即:变量test和变量Test是两个不同变量;

标识符


所谓标识符,就是变量、函数、属性或参数的名称;

规范

  • 首字符必须是字母、下划线(_)和美元符($);
  • 其他字符可以是字母、下划线、美元符和数字,因为数字开头会引起歧义;
  • 命名方式是驼峰大小写形式(不是强制的),如:strNamemyCar等;
  • 关键字、保留字、truefalsenull不能作标识符;

变量声明


变量可以保存任何类型的数据,变量声明用:var 、let 和 const;

注意

  • var 声明的作用域;在函数内声明的var,在函数执行完后会被销毁;函数作用域;
  • var 声明提升,所以多处声明会在作用域顶部自动合并;
  • let 声明的范围是块作用域,且不会提升;
  • let 在同作用域中不允许二次声明 会报: SyntaxError ;
  • let 在全局声明的变量不会成为window对象的属性,var声明的会(window.name);
  • const 声明时就要初始化变量,且不能修改;如果声明的是对象,那么修改对象的属性又是可以的;
  • const 不能用来声明迭代变量(因为迭代变量会自增)

所以,声明风格

  • 不使用var ;用let 和 const 足够了;
  • 优先使用 const ,let 次之;const强制保持变量不变,需要变量迭代时再使用let;

数据类型


ECMAScript 的数据类型很灵活,一种数据类型可以当作多种数据类型来使用,灵活反而容易糊涂;

  • 六种简单数据类型:UndefinedNullBooleanNumberStringSymbol(符号);
  • 一种复杂数据类型:Object(对象);

分解

  • Undefined 类型只有一个值,就是特殊值:undefined,使用var和let 声明了变量又没初始化时,就是这个值;没有声明的变量输出会报错,所以建议变量都要声明;
  • Null 类型也只有一个值,就是特殊值:null;null值表示一个空对象指针,所以 typeof(null) 返回 objectundefinednull 派生而来,所以 (null == undefined) 返回 true
  • undefined 和 null 都是假值, Boolean(undefined)Boolean(null) 都是 false
  • Boolean 类型有两个字面值:truefalse;任何数据类型的都能调用 Boolean(),除了上面的 undefinednull外,''(空字符串)、0和NaN 调用 Boolean()时都为 false,其他都为 true
  • Number类型表示整数和浮点数;3.125e7 是科学记数法;用二进制计算浮点数会不精确,导致 0.1+0.2不等于 0.3;有个特殊的数值是NaN(意思是:Not a Number,即不是数值,例如:0/0 返回 NaN,而 5/0 返回 Infinity,即无穷),NaN不等于自身,即 (NaN == NaN) 返回 false
  • 数值转换函数有三个: Number()parseInt()parseFloat;用法上有细微且明显的区别;
  • String类型表示 Unicode 字符序列,可用双引号("")、单引号(‘’)和反引号(``)标示;字符串一旦创建就不可变,要修改变量中的字符串值,须先销毁原始字符串,后将新值保存到该变量;
  • 字符串转换有两种方式:第一种是 toString() 方法 ,形如:abc.toString(),几乎所有值都有 toString()方法,除了 nullundefined;第二种是 String() 函数,使用时,如果当前值有 toString()方法就调用该方法 ,如果没有,如 nullundefined,则返回 nullundefined
  • symbol符号,符号是原始值,且符号实例是唯一、不可变的。符号的用途是确保对象属性使用唯一标识符,不会发生属性冲突的危险。这个类型不太好理解。
  • Object类型,ECMAScript 中的对象是一组数据和功能的集合(很抽象);用 new 操作符来创建;通过创建 Object类型的实例来创建对象,然后再给对象添加属性和方法,形如:let o= new Object();
  • Object 是派生其他对象的基类,Object类型的所有属性和方法在派生的对象上同样存在,这些属性和方法是:constructorhasOwnProperty()isPrototypeOf()propertyIsEnumerable()toLocalString()toString()valueOf();因为Object是所有对象的基类,所以任何对象都有这些属性和方法。

操作符


可用于操作数据值的操作符,包括数学操作符、位操作符、关系操作符和相等操作符;
操作符可用于各种值,包括:字符串、数值、布尔值甚至是对象;
在应用给对象时,操作符会调用 valueOf()toString()方法来取得可以计算的值;

分解

  • 一元操作符:前缀,++num 、--num;后缀,num++ 、num--;后缀在混合计算时的递增(或递减)会先计算后递增(或递减);
  • 一元加和减:+还有拼接的意思;- 取负值;运算非数值时会先转换数据类型;
  • 位操作符:按位非(~)、按位与(&)、按位或(|)、按位异或(^)、左移(<<)和右移(>>>>>);
  • 布尔运算符:逻辑非(!)、逻辑与(&&)、逻辑或(||),优先级 ! > &&> ||;有短路操作的情形;
  • 乘性操作符:乘法操作符(*)、除法操作符(/)、取模操作符(%)和指数操作符(**);
  • 关系操作符:大于(>)、小于(<)、小于等于(<=)、大于等于(>=)这些操作符返回布尔值;
  • 相等操作符:等于(==)、不等于(!=)、全等(===)和不全等(!==);
  • 条件操作符:(?:),如:let max = (num1 > num2) ? num1 : num2;
  • 赋值操作符:赋值号 =+=-=*=/=%=等等;
  • 逗号操作符:let num1 = 1, num2 = 2, num3 = 3;

操作符的优先级

运算优先级从上往下,其中逻辑运算符 !的优先级更高,且&&优先级高于||

  • 1,()优先级最高;
  • 2,一元运算符:++--!;
  • 3,算数运算符:先*/%,后+-
  • 4,关系运算符:><>=<=
  • 5,相等运算符:=====!=!==
  • 6,逻辑运算符:先&&,后||
  • 7,赋值运算符:=

if 语句: if -- else if -- else


只有一行代码也要用语句块;

if (i > 25) { 
 console.log("Greater than 25."); 
} else if (i < 0) { 
 console.log("Less than 0."); 
} else { 
 console.log("Between 0 and 25, inclusive."); 
}

do while 语句


是一种后测试循环语句(至少执行一次),即循环体中的代码执行后才会对退出条件进行求值;

let i = 0;
do{
i+=2;
}while(i<10)

while 语句


是先测试循环语句,即先检测退出条件,再执行循环内的代码;

let i = 0; 
while(i<10){
  i+=2; 
}

for 语句

先测试语句,增加了进入循环之前的初始化代码,和循环执行后要执行的表达式;

const count = 10;
for(let i=0; i

无法通过while实现的逻辑,也无法使用for实现;

for - in


用于枚举对象中的非符号键属性;

for(const propName in window){
  console.log(propName);  //  多达224个
}
  • ECMAScript 中对象的属性是无序的,所有可枚举的属性都返回一次,但顺序因浏览器而异;
  • 循环要迭代的变量是 nullundefined ,则不执行循环体;

for - of

用于遍历可迭代对象的元素;

for (const el of [1,2,3,4]){
  console.log(el); // 1,2,3,4
}

上面例子,显示当前数组所有元素,for-of循环会按照可迭代对象的 next() 方法产生值的顺序迭代元素。

break 和 continue 语句


break 立即退出循环,强制执行循环后的下一条语句;
continue 立即退出循环,但会再次从循环顶部开始执行;

先看break实例

let num = 0;
for (let i = 1; i < 10; i++) {
  if (i % 5 == 0) {
    break;
  }
  num++
}
console.log(num);  // 4

再看continue实例

let num = 0;
for (let i = 1; i < 10; i++) {
  if (i % 5 == 0) {
    continue;
  }
  num++
}
console.log(num);  // 8

switch语句


case 控制分支条件,break跳出switch语句;如果没有break,代码会继续匹配下一个条件;default 关键字是在条件都不满足时指定默认执行的语句。

swicth(i){
  case 25:
    console.log('25');
    break;
  case 35:
    console.log('35');
    break;
  case 45:
    console.log('45');
    break;
  defalut:
    cosole.log('other');
}

注意

  • 最好给每个条件后加 break语句,否则会连续匹配多个条件,除非确实需要这样;
  • switch 条件的值,可以不是数值,可以是所有数据类型,如:字符串甚至对象;
  • switch 语句在比较条件时使用全等操作符,因此不会强制转换数据类型;

函数


可以封装语句,可在任何地方、任何时间执行;

function sayHi(name,msg){
  console.log('hello' + name + ',' + msg);
}
sayHi('Jack','How r u today?')
function sum(num1,num2){
  return num1 + num2;
}
const res = sum(5,10); // 15

注意

  • 碰到 return语句,函数会立即停止执行并退出,因此return 语句后面的代码不会执行;
  • 最佳实践是要么有返回值,要么没有返回值,在某个条件下返回值的函数会带来麻烦;
  • 不返回值的函数,实际上会返回特殊值: undefined;

你可能感兴趣的:(javascript 中的零碎知识不要太多)