[JavaScript基础] 一、语言基础

Nicander
114 阅读4分钟

一、语言基础

1、语法

  • 区分大小写

  • 标识符——就是变量、函数、属性或函数参数的名称。标识符第一个字符必须是一个字母、下划线（_）或美元符号（$）

  • 注释: //单行注释 /* 多行注释*/

  • 语句: JavaScript语句以分号结尾，省略分号意味着由解析器确定语句在哪里结尾

2、关键字与保留字

ECMA-262描述了一组保留的关键字，这些关键字有特殊用途，比如表示控制语句的开始和结束，或者执行特定的操作。

按照规定，保留的关键字不能用作标识符或属性名。

image-20210126220313535

3、变量

ECMAScript变量是松散类型的，变量可以用于保存任何类型的数据。每个变量只不过是一个用于保存任意值的命名占位符。

有3个关键字可以声明变量：var、const和let。

var

  • 作用域：声明作用域是函数作用域

  • 声明提升——字声明的变量会自动提升到函数作用域顶部

    image-20210126222704021

let

  • 作用域：声明作用域是块级作用域

  • 不会变量提升

  • for循环中使用let声明可以解决之前使用var循环带来的变量渗透到循环体外部的问题

    image-20210126223634469

const

const的行为与let基本相同，唯一一个重要的区别是用它声明变量时必须同时初始化变量，且尝试修改const声明的变量会导致运行时错误。

  • 作用域： 块级作用域
  • const变量引用的是一个对象的话，可以修改对象内部的属性

声明风格和最佳实践

  • 不使用var

    限制自己只使用let和const有助于提升代码质量，因为变量有了明确的作用域、声明位置，以及不变的值。

  • const优先，let次之

    使用const声明可以让浏览器运行时强制保持变量不变，也可以让静态代码分析工具提前发现不合法的赋值操作。使用const声明可以让开发者更有信心地推断某些变量的值永远不会变，同时也能迅速发现因意外赋值导致的非预期行为。

4、数据类型

ECMAScript有6种简单数据类型（也称为原始类型），和一种复杂数据类型。在ECMAScript中不能定义自己的数据类型，所有值都可以用上述7种数据类型之一来表示。

  • 简单数据类型: Undefined、Null、Boolean、Number、String和Symbol。
  • 复杂数据类型: Object（对象）。Object是一种无序名值对的集合。

typeof操作符

typeof操作符用于确定任意变量的数据类型。

对一个值使用typeof操作符会返回下列字符串之一：

  • "undefined"表示值未定义；
  • "boolean"表示值为布尔值；
  • "string"表示值为字符串；
  • "number"表示值为数值；
  • "object"表示值为对象（而不是函数）或null；
  • "function"表示值为函数；
  • "symbol"表示值为符号

Undefined类型

Undefined类型只有一个值，就是特殊值undefined。当使用var或let声明了变量但没有初始化时，就相当于给变量赋予了undefined值：

Null类型

Null类型同样只有一个值，即特殊值null。 逻辑上讲，null值表示一个空对象指针，这也是给typeof传一个null会返回object的原因。

在定义将来要保存对象值的变量时，建议使用null来初始化，不要使用其他值。这样，只要检查这个变量的值是不是null就可以知道这个变量是否在后来被重新赋予了一个对象的引用，

Boolean类型

Boolean（布尔值）类型是ECMAScript中使用最频繁的类型之一，有两个字面值：true和false。

虽然布尔值只有两个，但所有其他ECMAScript类型的值都有相应布尔值的等价形式:

image-20210126225822151

理解以上转换非常重要，因为像if等流控制语句会自动执行其他类型值到布尔值的转换:

let message = "Hello world!";

if (message) {
console.log("Value is true");
}
// Value is true

Number类型

Number类型使用IEEE 754格式表示整数和浮点值（在某些语言中也叫双精度值）。

1) NaN

有一个特殊的数值叫NaN，意思是“不是数值”，用于表示本来要返回数值的操作失败了（而不是抛出错误）

isNaN()函数，该函数接收一个参数，可以是任意数据类型，该函数会对传入的参数进行转换，任何不能转换为数值的值将导致这个函数返回true。

2)数值转换

  • Number() 转型函数，可用于任何数据类型。
  • parseInt()和parseFloat()两个函数主要用于将字符串转换为数值。

Number()的转换规则有些复杂，实际使用时建议采用parseInt()和parseFloat()

String类型

String（字符串）数据类型表示零或多个16位Unicode字符序列。字符串可以使用双引号（"）、单引号（'） 或反引号(`)标示 。

模板字面量

  • ES6新增了模板字面量，使用反引号（`）。

    • 字符串差值,与之前使用单引号和+拼接不同，模板字符串可以使用包含${expression}表示占位符。
    const people = {
  name: 'Johnson',
  job: 'Front-end'
}

const project = {
  name: 'Dyniva'
}
// 之前拼接方式
let message = people.name + '(' + people.job + ')' + ' follow this  project ' + project.name;
//ES6 模板字面量
let message = `${people.name}(${people.job}) follow this project ${project.name}`

  • 所有插入的值都会使用toString()强制转型为字符串，而且任何JavaScript表达式都可以用于插值。

  • 在插值表达式中可以调用函数和方法：

  • function capitalize(word) {
 return `${ word[0].toUpperCase() }${ word.slice(1) }`;
}
console.log(`${ capitalize('hello') }, ${ capitalize('world') }!`); // Hello, World!

  • 模板字面量可以保留换行字符，可以跨行定义字符串：

image-20210128222938106

Symbol类型

Object类型

ECMAScript中的对象其实就是一组数据和功能的集合。

类似Java中的java.lang.Object，ECMAScript中的Object也是派生其他对象的基类。Object类型的所有属性和方法在派生的对象上同样存在。

每个Object实例都有如下属性和方法。

  • constructor：用于创建当前对象的函数。在前面的例子中，这个属性的值就是Object()函数。

  • hasOwnProperty(propertyName)：用于判断当前对象实例（不是原型）上是否存在给定的属性。

  • isPrototypeOf(object)：用于判断当前对象是否为另一个对象的原型。

  • propertyIsEnumerable(propertyName)：用于判断给定的属性是否可以使用for-in语句枚举。与hasOwnProperty()一样，属性名必须是字符串。

  • toLocaleString()：返回对象的字符串表示，该字符串反映对象所在的本地化执行环境。

  • toString()：返回对象的字符串表示。

  • valueOf()：返回对象对应的字符串、数值或布尔值表示。通常与toString()的返回值相同。

操作符

  • 一元操作符：

    • 递增/递减操作符（++i --i）、一元加减乘除操作符、位操作符、

    • 布尔操作符（逻辑非！、逻辑与&&、和逻辑或||）

    • 关系操作符（小于、大于、小于等于和大于等于）、

    • 相等操作符

      • 等于（==）和不等于（!=）： 这两个操作符都会先进行类型转换（通常称为强制类型转换）再确定操作数是否相等。
      • 全等( === )和不全等 ( !== )：只有两个操作数在不转换的前提下判断是否相等。

下边是一些特殊情况及比较的结果：

image.png

  • 条件操作符 是ECMAScript中用途最为广泛的操作符之一，语法跟Java中一样

    variable = boolean_expression ? true_value : false_value;

  • 逗号操作符 可以用来在一条语句中执行多个操作

5、语句

IF语句

if语句是使用最频繁的语句之一，语法如下：

if (condition) statement1 else statement2

这里的条件（condition）可以是任何表达式，并且求值结果不一定是布尔值。ECMAScript会自动调用Boolean()函数将这个表达式的值转换为布尔值。

do-while语句

while语句

while语句是一种先测试循环语句，即先检测退出条件，再执行循环体内的代码。

while(expression) statement

for语句

for语句也是先测试语句，只不过增加了进入循环之前的初始化代码，以及循环执行后要执行的表达式

for (initialization; expression; post-loop-expression) statement

for -in语句

for-in语句是一种严格的迭代语句，用于枚举对象中的非符号键属性

for-in总是得到对象的key或数组、字符串的下标。

for (property in expression) statement
// 循环显示了BOM对象window的所有属性
let arr = ['d', 's', 'r', 'c'];
for (const key in arr) {// 确保这个局部变量不被修改，推荐使用const
    if (arr.hasOwnProperty(key)) {
        console.log(key);
    }
}
// 0
// 1
// 2
// 3

for -of语句

for-of语句是一种严格的迭代语句，用于**遍历可迭代对象的元素*

for-of总是得到对象的value或数组、字符串的值

//语法
for (property of expression) statement
//示例  
for (const el of ['d', 's', 'r', 'c']) { // 确保这个局部变量不被修改，推荐使用const
 console.log(el);
}
// d
// s
// r
// c

标签语句

break和continue语句

break用于退出于立即退出循环，强制执行循环后的下一条语句。而continue语句也用于立即退出循环，但会再次从循环顶部开始执行。

switch 语句

语法：

switch (expression) {
 case value1:
 statement
 break;
 // ....
 default:
 statement
}

6、函数

ECMAScript中的函数使用function关键字声明，后跟一组参数，然后是函数体。

function functionName(arg0, arg1,...,argN) {
 statements
}
avatar
文章
阅读
粉丝