--- 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对象
JS原生提供Object对象，JS中的所有其他对象都继承自Object对象。
> 其他对象指的是调用对象的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`