qiusj
/
meface
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
meface/docs/article/web/index.md

314 lines
10 KiB
Markdown
Raw Normal View History

init project
2023-11-17 10:54:23 +08:00
---
title: JavaScript 基础语法
date: 2020-10-18
author: ac
tags:
- JavaScript
categories:
- Web
---
## JavaScript 基础
### 变量和数据类型
JavaScript 的变量名区分大小写，A和a是两个不同的变量。声明变量的标识符不能以数字开头，字符集为Unicode。如果一个变量只是声明而没有被赋值，则该变量的值为underfined。
所有的数据都是用var定义。
```javascript
var name = "admin";
var age = 26;
var obj = new Date();
```
> 如果使用var声明一个已经存在的变量，是无效的，但如果并进行了赋值，则会覆盖掉前面的值
>
> ES6中新增了let、const 定义变量
**变量提升**
JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的【声明语句】（var a;），都会被提升到代码的头部，这就叫做变量提升（hoisting）
**区块（block）**
```javascript
{
var a=1;
}
```
区块对于var命令不构成单独的作用域，与不使用区块的情况没有任何区别。
区块通常搭配更复杂的语法结构一起使用如：for、if、while
**作用域**
ES5中只有两种作用域，全局作用域、函数作用域，ES6中增加了块级作用域。
函数内部定义的变量，会在该作用域内覆盖同名全局变量。
对于var命令来说，局部变量只能在函数内部声明，在其他区块中声明，一律都是全局变量。即函数内部用var声明的变量是局部变量，但像if、switch、for这些{}用var声明的是全局变量。函数执行时所在的作用域，是定义时的作用域，而不是调用时所在的作用域。
**数据类型**
number、string、boolean、undefined、null、object
- 原始类型：number/string/boolean
- 合成类型：object(狭义的对象Object、数组Array、函数function)
- 特殊值 ：undefined/null
typeof元运算符，返回跟在其后面变量的数据类型的字符串。
```javascript
typeof 123 // "number"
typeof '123' // "string"
typeof false // "boolean"
function f() {}
typeof f // "function"
typeof undefined // "undefined" undefined返回undefined。没有声明的变量也为undefined
typeof window // "object"
typeof {} // "object"
typeof [] // "object" 数组本质上只是一种特殊的对象，instanceof运算符可以区分数组和对象
typeof null // "object"
```
**undefined和null的区别**：
- null是一个表示“空”的对象，转为数值时为0；
- undefined是一个表示”此处无定义”的原始值，转为数值时为NaN。
```javascript
Number(null) // 0
Number(undefined) // NaN
```
> parseInt逐个解析字符，而Number函数整体转换字符串的类型
**返回undefined的典型场景**：
1. 变量声明了，但没有赋值
2. 调用函数时，应该提供的参数没有提供，该参数等于 undefined
3. 对象没有赋值的属性
4. 函数没有返回值时，默认返回 undefined
**隐式布尔型：**
当预期某个位置应该是布尔值，会将该位置上现有的值自动转为布尔值
- "": false，对于任何非空字符串都是 true.
- 0: false，对于任何非0数值都是 true.
- null: false，对于任何非空对象都是 true.
### 对象
#### Object对象
<div style='color:red'>JS原生提供Object对象，JS中的所有其他对象都继承自Object对象。</div>
> 其他对象指的是调用对象的toString()方法返回"[object Object]"的对象。第二个Object是该对象创建时使用的构造函数，可以是Number、String、Boolean、Undefined、Null、Array、Arguments、Function、Error、Date、RegExp、Object。
本身方法：直接定义在Object对象上的方法。
实例方法：定义在Object原型对象Object.prototype上的方法。
在Object.prototype对象上面的属性和方法，将被所有实例对象共享。
**构造函数与Object()**
作为构造函数使用new关键字创建新的对象。
```javascript
var obj = new Object();
```
> 通过var obj = new Object()的写法生成新对象，与字面量的写法var obj = {}是等价的。
`Object`本身也是一个函数，Object(arg)将参数arg转为对象，如果参数为空或是undefined和null，则返回空的对象
但Object(value)与new Object(value)两者的语义是不同的：
- Object(value)表示将value转成一个对象。
- new Object(value)则表示新生成一个对象，它的值是value。
**静态方法**
- Object.keys()：方法只返回可枚举（可遍历）的该对象自身（不是继承的）的属性数组。
- Object.getOwnPropertyNames()：方法返回该对象自身的属性数组（可遍历和不可遍历的都返回）。
```javascript
var a = ['Hello', 'World'];
Object.keys(a) // ["0", "1"]
Object.getOwnPropertyNames(a) // ["0", "1", "length"]
var obj = {p1: 123,p2: 456};
Object.getOwnPropertyNames(obj) // ["p1", "p2"]
```
- Object.getOwnPropertyDescriptor()：获取某个属性的属性描述对象。
- Object.defineProperty()：通过描述对象，定义某个属性。
- Object.defineProperties()：通过描述对象，定义多个属性。
- Object.create()：该方法可以指定原型对象和属性，返回一个新的对象。
- Object.getPrototypeOf()：获取对象的Prototype对象。
**实例方法**
方法定义在Object.prototype对象，所有Object的实例对象都继承了这些方法:
- Object.prototype.valueOf()：返回当前对象对应的值。
- Object.prototype.toString()：返回当前对象对应的字符串形式。
- Object.prototype.toLocaleString()：返回当前对象对应的本地字符串形式。
- Object.prototype.hasOwnProperty()：判断某个属性是否为当前对象自身的属性，还是继承自原型对象的属性。
- Object.prototype.isPrototypeOf()：判断当前对象是否为另一个对象的原型。
- Object.prototype.propertyIsEnumerable()：判断某个属性是否可枚举。
#### 属性描述对象
JavaScript 提供了一个内部数据结构，用来描述对象的属性，控制它的行为，比如该属性是否可写、可遍历等等。每个属性都有自己对应的属性描述对象，保存该属性的一些元信息。
Object中与对象属性相关的静态方法：
- `Object.getOwnPropertyDescriptor()`：获取某个属性的描述对象。
- `Object.defineProperty()`：通过描述对象，定义某个属性。
- `Object.defineProperties()`：通过描述对象，定义多个属性。
```javascript
//属性描述对象
{
value: 123,//属性值，默认为undefined
writable: false,//属性值（value）是否可改变,默认为true
enumerable: true,//该属性是否可遍历，默认为true.如果设为false,for...in循环,Object.keys跳过该属性。
configurable: false,//表示可配置性，默认为true
get: undefined,
set: undefined
}
var obj = Object.defineProperties({}, {
p1: { value: 123, enumerable: true },
p2: { value: 'abc', enumerable: true },
p3: {
get: function () { return this.p1 + this.p2 },
enumerable:true,
configurable:true
}
});
obj.p1 // 123
obj.p2 // "abc"
obj.p3 // "123abc"
//Object.defineProperty(object, propertyName, attributesObject)
var obj = Object.defineProperty({}, 'p', {
value: 'abc',
writable: false,//设为false，该属性不可改变
enumerable: true,
configurable: false
});
obj.p // 'abc'
obj.p = 'ABC';
obj.p // 'abc'
```
> `Object.defineProperty()`和`Object.defineProperties()`参数里面的属性描述对象，`writable`、`configurable`、`enumerable`这三个属性的默认值都为`false
Object中与对象状态有关的静态方法：
- `Object.preventExtensions()`：防止对象扩展，使得对象无法再添加新的属性。
- `Object.isExtensible()`：判断对象是否可扩展。
- `Object.seal()`：禁止对象配置，使得对象无法添加新的属性，也不能删除旧的属性。
- `Object.isSealed()`：判断一个对象是否可配置。
- `Object.freeze()`：冻结一个对象，使得一个对象无法添加新属性、无法删除旧属性、也无法改变属性的值，使得这个对象实际上变成了常量。
- `Object.isFrozen()`：判断一个对象是否被冻结。
#### JSON对象
`JSON`对象是 JavaScript 的原生对象，用来处理 JSON 格式数据（大括号加键值对的形式）。
拥有两个静态方法：
- JSON.stringify方法用于将一个值转为串符合 JSON 格式的字符串；
- JSON.parse方法用于将 JSON 字符串转换成对应的值。
通过var obj = new Object()的写法生成新对象，与字面量的写法var obj = {}是等价的。
```javascript
var obj = { "p": 1 };
'p' in obj // true
```
> in运算符用于检查对象是否包含某个属性，它不能识别哪些属性是对象自身的，哪些属性是继承的，通常与Object的实例方法hasOwnProperty()搭配使用
Object(value)与new Object(value)两者的语义是不同的：
- Object(value)表示将value转成一个对象；
- new Object(value)则表示新生成一个对象，它的值是value。
对于JSON对象，建议key值用单引号，数字键可以不加因为会自动转为字符串类型但不能用点运算符。
JSON 对值的类型和格式有严格的规定。
1. 复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。
2. 原始类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined）。
3. 字符串必须使用双引号表示，不能使用单引号。
4. 对象的键名必须放在双引号里面。
5. 数组或对象最后一个成员的后面，不能加逗号。
**遍历JSON对象**
```javascript
var person = { "name": "张三","age": 18 ,"stature": 180};
//for..in会遍历对象所有可遍历（enumerable）的属性，会跳过不可遍历的属性。
for (var key in person) {
if (person.hasOwnProperty(key)) {
console.log(key);
}
}
//取json对象的方式
person.name
person["age"]
```
### 参考文章
[1] Object对象 `https://wangdoc.com/javascript/stdlib/object.html`
[2] 属性描述对象] `https://wangdoc.com/javascript/stdlib/attributes.html`
[3] 标准库-JSON对象 `https://javascript.ruanyifeng.com/stdlib/json.html`