>  기사  >  웹 프론트엔드  >  JavaScript를 사용할 때 알아야 할 작은 세부 사항

JavaScript를 사용할 때 알아야 할 작은 세부 사항

php中世界最好的语言
php中世界最好的语言원래의
2018-03-19 16:57:571124검색

이번에는 자바스크립트를 사용할 때 꼭 알아야 할 소소한 사항과 자바스크립트 사용 시 꼭 알아야 할 주의사항은 무엇인지, 실제 사례를 살펴보겠습니다.

break 문과 continue 문

break 문과 continue 문 모두 점프 기능이 있어 기존 순서에서 벗어나 코드를 실행할 수 있습니다.

break 문은 코드 블록이나 루프를 벗어나는 데 사용됩니다.

var i = 0;
while(i < 100) {
  console.log(&#39;i 当前为:&#39; + i);
  i++;
  if (i === 10) break;
}

continue 문은 이 주기를 즉시 종료하고 루프 구조의 선두로 돌아가서 다음 주기를 시작하는 데 사용됩니다.

var i = 0;
while (i < 100){
  i++;
  if (i % 2 === 0) continue;
  console.log(&#39;i 当前为:&#39; + i);
}

break 및 continue 문 외에도 실행을 계속하기 위해 호출된 함수에서 호출 함수로 돌아가는 것을 나타내는 return 문도 있습니다. 반환 후 매개 변수. 반환 후에는 함수가 종료되고 다음 명령문은 더 이상 실행되지 않습니다.

Label

JavaScript 언어에서는 명령문 앞에 레이블이 있으며 이는 위치 지정자와 동일하며 임의의 위치로 이동하는 데 사용됩니다. 프로그램, 레이블은 모든 식별자가 될 수 있지만 예약어는 될 수 없으며 명령문 부분은 모든 명령문이 될 수 있습니다.

태그는 일반적으로 특정 루프에서 벗어나기 위해 break 문 및 continue 문과 함께 사용됩니다.

top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) break top;
      console.log(&#39;i=&#39; + i + &#39;, j=&#39; + j);
    }
  }
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0

가변 호이스팅(Hoisting)

  1. 호이스팅의 범위는 기능 범위와 같습니다. 여기서는 함수 범위가 언급되지 않았지만 독자들에게 상기시키기 위해 언급한 다음 추가 논의를 위해 범위 부분에 링크할 수 있습니다.

  2. "호이스팅은 var에 의해 선언된 변수에만 유효합니다." 필연적으로 그렇습니다. 변수 선언의 호이스팅이 호이스팅의 전부는 아닙니다. JavaScript에는 범위 내에서 선언을 호이스팅하는 네 가지 방법이 있습니다(우선순위 순):

- this 및 인수와 같은 언어 정의 선언. this라는 변수는 언어에 의해 자동으로 정의된 선언이기 때문에 범위에서 재정의할 수 없으며 가장 높은 우선순위를 갖습니다. 즉, 맨 위로 끌어올려지며 누구도 재정의할 수 없습니다.

- 형식 매개변수. 형식 매개변수를 수정하기 위해 var를 사용할 필요는 없지만 형식 매개변수는 실제로 변수이며 자동으로 다음으로 높은 우선순위

- 함수 선언으로 승격됩니다. var 외에도 함수 선언은 새 이름을 정의할 수 있으며 처음 두 개에 이어 두 번째로 범위의 맨 위로 끌어올려집니다.

-마지막으로 이 기사에서 언급한 일반 변수가 있는데, 이는 선언된 변수입니다. var

정수 및 부동 소수점

JavaScript를 사용하면 내부적으로 모든 숫자는 64비트 부동 소수점 숫자, 심지어 정수로 저장됩니다. 그러므로 1과 1.0은 같고 같은 수이다.

즉, JavaScript 언어의 맨 아래에는 정수가 없으며 모든 숫자는 십진수(64비트 부동 소수점 숫자)입니다. 쉽게 혼동되는 점은 일부 작업은 정수로만 완료될 수 있다는 것입니다. 이때 JavaScript는 작업을 수행하기 전에 자동으로 64비트 부동 소수점 숫자를 32비트 정수로 변환합니다.

부동소수점 숫자는 정확한 값이 아니기 때문에 소수를 비교하고 연산할 때 특히 주의해야 합니다.

0.1 + 0.2 === 0.3
// false
0.3 / 0.1
// 2.9999999999999996
(0.3 - 0.2) === (0.2 - 0.1)
// false

정확도는 이진수 53자리까지만 가능합니다. 즉, 2의 53승 이하의 절대값, 즉 -253부터 253까지의 정수를 정확하게 표현할 수 있다는 뜻입니다.

Math.pow(2, 53)
// 9007199254740992
 
Math.pow(2, 53) + 1
// 9007199254740992
Math.pow(2, 53) + 2
// 9007199254740994
Math.pow(2, 53) + 3
// 9007199254740996
Math.pow(2, 53) + 4
// 9007199254740996

위 코드에서 값이 2보다 53제곱된 이후에는 정수 연산 결과에 오류가 표시되기 시작합니다. 따라서 2의 53승보다 큰 값은 정확도를 유지할 수 없습니다. 2의 53제곱은 16자리 십진수 값이므로 간단한 규칙은 JavaScript가 15자리 십진수를 정확하게 처리할 수 있다는 것입니다.

Math.pow(2, 53)
// 9007199254740992
// 多出的三个有效数字,将无法保存
9007199254740992111
// 9007199254740992000

표준에 따르면 64비트 부동 소수점 숫자의 지수 부분 길이는 11비트입니다. 즉, 지수 부분의 최대값은 2047(2의 11승 빼기 1)이라는 의미입니다. 즉, 64비트 부동 소수점 숫자의 지수 부분의 최대값은 2047이다. 그 절반을 나누어 음수를 표현한다면 자바스크립트가 표현할 수 있는 숫자 범위는 21024부터 2~1023(개방 범위)이다. ). 이 범위를 넘는 숫자는 표시할 수 없습니다.

숫자가 2의 1024제곱보다 크거나 같으면 "순방향 오버플로"가 발생합니다. 즉, JavaScript는 그렇게 큰 숫자를 표현할 수 없으며 Infinity가 반환됩니다.

Math.pow(2, 1024) // Infinity
Math.pow(2, -1075) // 0

parseInt()

자동으로 과학적 표기법으로 변환되는 숫자의 경우,parseInt는 과학적 표기법 표현을 문자열로 처리하므로 이상한 결과가 발생합니다.

parseInt(1000000000000000000000.5) // 1
// 等同于
parseInt(&#39;1e+21&#39;) // 1
parseInt(0.0000008) // 8
// 等同于
parseInt(&#39;8e-7&#39;) // 8

parseInt方法还可以接受第二个参数(2到36之间),表示被解析的值的进制,返回该值对应的十进制数。默认情况下,parseInt的第二个参数为10,即默认是十进制转十进制。

parseInt(&#39;1000&#39;, 2) // 8
parseInt(&#39;1000&#39;, 6) // 216
parseInt(&#39;1000&#39;, 8) // 512

isFinite()

isFinite方法返回一个布尔值,表示某个值是否为正常的数值。

isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(-1) // true

with语句

它的作用是操作同一个对象的多个属性时,提供一些书写的方便。

var obj = {
  p1: 1,
  p2: 2,
};
with (obj) {
  p1 = 4;
  p2 = 5;
}
// 等同于
obj.p1 = 4;
obj.p2 = 5;

注意,如果with区块内部有变量的赋值操作,必须是当前对象已经存在的属性,否则会创造一个当前作用域的全局变量。

var obj = {};
with (obj) {
  p1 = 4;
  p2 = 5;
}
obj.p1 // undefined
p1 // 4

位运算符

二进制或运算符(or):符号为|,表示若两个二进制位都为0,则结果为0,否则为1。
二进制与运算符(and):符号为&,表示若两个二进制位都为1,则结果为1,否则为0。
二进制否运算符(not):符号为~,表示对一个二进制位取反。
异或运算符(xor):符号为^,表示若两个二进制位不相同,则结果为1,否则为0。
左移运算符(left shift):符号为<<
右移运算符(right shift):符号为>>
带符号位的右移运算符(zero filled right shift):符号为>>>

void 运算符

void运算符的作用是执行一个表达式,然后不返回任何值,或者说返回undefined。

下面是一个更实际的例子,用户点击链接提交表单,但是不产生页面跳转。

<a href="javascript: void(document.form.submit())">
  提交
</a>

圆括号的作用

圆括号不是运算符,而是一种语法结构。它一共有两种用法:一种是把表达式放在圆括号之中,提升运算的优先级;另一种是跟在函数的后面,作用是调用函数。

Number(Object)

简单的规则是,Number方法的参数是对象时,将返回NaN,除非是包含单个数值的数组。

Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5

之所以会这样,是因为Number背后的转换规则比较复杂。

第一步,调用对象自身的valueOf方法。如果返回原始类型的值,则直接对该值使用Number函数,不再进行后续步骤。

第二步,如果valueOf方法返回的还是对象,则改为调用对象自身的toString方法。如果toString方法返回原始类型的值,则对该值使用Number函数,不再进行后续步骤。

第三步,如果toString方法返回的是对象,就报错。

String(Object)

String方法的参数如果是对象,返回一个类型字符串;如果是数组,返回该数组的字符串形式。

String({a: 1}) // "[object Object]"
String([1, 2, 3]) // "1,2,3"

String方法背后的转换规则,与Number方法基本相同,只是互换了valueOf方法和toString方法的执行顺序。

先调用对象自身的toString方法。如果返回原始类型的值,则对该值使用String函数,不再进行以下步骤。

如果toString方法返回的是对象,再调用原对象的valueOf方法。如果valueOf方法返回原始类型的值,则对该值使用String函数,不再进行以下步骤。

如果valueOf方法返回的是对象,就报错。

原生错误类型

  • SyntaxError 对象是解析代码时发生的语法错误

  • ReferenceError 对象是引用一个不存在的变量时发生的错误。

  • angeError 对象是一个值超出有效范围时发生的错误。主要有几种情况,一是数组长度为负数,二是Number对象的方法参数超出范围,以及函数堆栈超过最大值。

  • TypeError 对象是变量或参数不是预期类型时发生的错误。比如,对字符串、布尔值、数值等原始类型的值使用new命令,就会抛出这种错误,因为new命令的参数应该是一个构造函数。

  • URIError 对象是 URI 相关函数的参数不正确时抛出的错误,主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。

  • eval 函数没有被正确执行时,会抛出EvalError错误。该错误类型已经不再使用了,只是为了保证与以前代码兼容,才继续保留。

var err1 = new Error('出错了!');
var err2 = new RangeError('出错了,变量超出有效范围!');
var err3 = new TypeError('出错了,变量类型无效!');
err1.message // "出错了!"
err2.message // "出错了,变量超出有效范围!"
err3.message // "出错了,变量类型无效!"

finally 代码块

try...catch结构允许在最后添加一个finally代码块,表示不管是否出现错误,都必需在最后运行的语句。

function cleansUp() {
  try {
    throw new Error('出错了……');
    console.log('此行不会执行');
  } finally {
    console.log('完成清理工作');
  }
}
cleansUp()
// 完成清理工作
// Error: 出错了……

map()

map方法不仅可以用于数组,还可以用于字符串,用来遍历字符串的每个字符。但是,不能直接使用,而要通过函数的call方法间接使用,或者先将字符串转为数组,然后使用。

var upper = function (x) {
  return x.toUpperCase();
};
[].map.call('abc', upper)
// [ 'A', 'B', 'C' ]
// 或者
'abc'.split('').map(upper)
// [ 'A', 'B', 'C' ]

其他类似数组的对象(比如document.querySelectorAll方法返回DOM节点集合),也可以用上面的方法遍历。

map方法还可以接受第二个参数,表示回调函数执行时this所指向的对象。

var arr = ['a', 'b', 'c'];
[1, 2].map(function(e){
  return this[e];
}, arr)
// ['b', 'c']

如果数组有空位,map方法的回调函数在这个位置不会执行,会跳过数组的空位。

Array(2).map(function (){
  console.log('enter...');
  return 1;
})
// [, ,]

reduce(),reduceRight()

reduce方法和reduceRight方法依次处理数组的每个成员,最终累计为一个值。

它们的差别是,reduce是从左到右处理(从第一个成员到最后一个成员),reduceRight则是从右到左(从最后一个成员到第一个成员),其他完全一样。

这两个方法的第一个参数都是一个函数。该函数接受以下四个参数。

累积变量,默认为数组的第一个成员
当前变量,默认为数组的第二个成员
当前位置(从0开始)
原数组

[1, 2, 3, 4, 5].reduce(function(x, y){
  console.log(x, y)
  return x + y;
});
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果:15

Object.keys(),Object.getOwnPropertyNames()

Object.keys方法和Object.getOwnPropertyNames方法都用来遍历对象的属性。

Object.keys方法的参数是一个对象,返回一个数组。该数组的成员都是该对象自身的(而不是继承的)所有属性名。

Object.getOwnPropertyNames方法与Object.keys类似,也是接受一个对象作为参数,返回一个数组,包含了该对象自身的所有属性名。

对于一般的对象来说,Object.keys()和Object.getOwnPropertyNames()返回的结果是一样的。只有涉及不可枚举属性时,才会有不一样的结果。Object.keys方法只返回可枚举的属性,Object.getOwnPropertyNames方法还返回不可枚举的属性名。

var a = ['Hello', 'World'];
Object.keys(a) // ["0", "1"]
Object.getOwnPropertyNames(a) // ["0", "1", "length"]

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

React中有哪些类定义组件

navigator.clipboard浏览器怎么制作原生剪贴板

위 내용은 JavaScript를 사용할 때 알아야 할 작은 세부 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:JavaScript 범위 사용다음 기사:JavaScript 범위 사용