js基础知识

cuichangquan
174 阅读6分钟

一、组成

当前项目开发中，一般都基于React/Vue框架完成的，所以我们已经不用去操作DOM，而是操作数据，由框架本身帮助我们们完成DOM操作和渲染

  • DOM（document object model）文档对象模型，提供对应的属性和方法，可以让js 操作页面中的DOM元素。
  • BOM（browser object model）浏览器对象模型，提供操作浏览器的属性和方法。

二、变量

2.1 声明变量的几种方式

通常使用var、let、const声明变量

2.1.1 var

由于变量声明（以及其他声明）总是在任意代码执行之前处理的，所以在代码中的任意位置声明变量总是等效于在代码开头声明。这意味着变量可以在声明之前使用，这个行为叫做“hoisting”。“hoisting”就像是把所有的变量声明移动到函数或者全 局代码的开头位置

bla = 2
var bla;
// ...
// 可以理解为：   
var bla;  
bla = 2;

由于这个原因，我们建议总是在作用域的最开始（函数或者全局代码的开头）声明变 量。这样可以使变量的作用域变得清晰。

2.1.2 let

let作用域，只在let命令所在的代码块内（{}）有效

注意：必须声明'use strict';后才能使用let声明变量否则浏览并不能显示结果。

//let声明的变量只在它所在的代码块有效。
{let a=3;} 
console.log(a);//Uncaught ReferenceError: a is not defined

//计数器i只在for循环体内有效，在循环体外引用就会报错
for (let i = 0; i < 3; i++) {}
console.log(i);//Uncaught ReferenceError: i is not defined

//for循环还有一个特别之处，就是循环语句部分是一个父作用域，而循环体内部 是一个单独的子作用域。
for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}

2.1.3 const

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415;
PI=3;//Uncaught TypeError: Assignment to constant variable.

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const foo;//Uncaught SyntaxError: Missing initializer in const declaration

const的作用域与let命令相同：只在声明所在的块级作用域内有效。

const b = 2;//正确
// const b;//错误，必须初始化 
console.log('函数外const定义b：' + b);//有输出值
// b = 5;
// console.log('函数外修改const定义b：' + b);//无法输出

2.1.4 var、let、const的区别

  • var可以先使用，后声明；let必须先声明后使用。
  • var是允许在相同作用域内重复声明同一个变量的，而let与const不允许这一现象。

2.1.5 总结

  • 使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象；
  • 使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升；
  • 使用const声明的是常量，在后面出现的代码中不能再修改该常量的值。

2.2 命名规范

现在谈谈关于变量及方法等的命名，没有硬性规定，但为了规范，遵循一些约定还是很有必要的。

  • 严格遵循大小写
  • 使用驼峰命名法
  • 不能使用关键字和保留字（例如:关键字class,保留字boolean）
  • 不能用数字开头
  • 可包含字母，下划线，数字，$这些可用的字符

三、数据类型

3.1 基本数据类型（值类型）

五种基本数据类型（Number,String,Boolean,Undefined,Null）

Number类型

  • Number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后面至少有一位数字）两种值。
  • NaN:非数字类型。特点：
    • 涉及到的 任何关于NaN的操作，都会返回NaN
    • NaN不`等于自身。
  • isNaN() 函数用于检查其参数是否是非数字值。
  • isNaN(123) //false isNaN("hello") //true

String类型

  • 字符串有length属性。
  • 字符串转换：转型函数String(),适用于任何数据类型（null,undefined 转换后为null和undefined）；toString()方法（null,defined没有toString()方法）。

Boolean类型

  • 该类型只有两个值，true和false

Undefined类型

  • 只有一个值，undefined值。使用var声明了变量，但未给变量初始化值，那么这个变量的值就是undefined。

Null类型

  • null类型被看做空对象指针，前文说到null类型也是空的对象引用。

3.2 引用类型

三大引用类型Object、Array、Function

Object类型

js中对象是一组属性与方法的集合。这里就要说到引用类型了，引用类型是一种数据结构，用于将数据和功能组织在一起。引用类型有时候也被称为对象定义，因为它们描述的是一类对象所具有的属性和方法。

常见的创建Object实例的方式有两种

  • 第一种是使用new操作符后跟Object构造函数，如下所示
    var person = new Object();
    person.name = "qddd";
    person.age = 20;
  • 第二种方式是使用对象字面量表示法，如下所示
    var person = {
        name:"qddd"
        age:20
    }

Array类型

数组的每一项可以用来保存任何类型的数据，也就是说，可以用数组的第一个位置来保存字符串，第二个位置保存数值，第三个位置保存对象....另外，数组的大小是可以动态调整的。

创建数组的基本方式有两种:

  • 第一种是使用Array构造函数，如下所示
var colors = new Array("red","blue","yellow");
  • 第二种是使用数组字面量表示法，如下所示
var colors = ["red","blue","yellow"];

Function类型

每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法 函数通常是使用函数声明语法定义的，如下所示

function sum(num1,num2){
    return num1+ num2;
}

这和使用函数表达式定义函数的方式相差无几。

var sun = function (){
&emsp;&emsp;return sum1 + sum2;
};

3.3 实例

js按照存储方式分为值类型和引用类型。那么他们的计算有什么区别呢？

1、题目1：

var a = 100;
var b = a;
a = 200;
console.log(b);// 100

题目1是简单的值类型，在从一个变量向另一个变量赋值基本类型时，会在该变量上创建一个新值，然后再把该值复制到为新变量分配的位置上。

2、题目2：

var a = { age : 20 };
var b = a;
b.age = 21;
console.log(a.age);// 21

题目2是引用类型，当从一个变量向另一个变量赋值引用类型的值时，同样也会将存储在变量中的对象的值复制一份放到为新变量分配的空间中。

这时保存在变量中的是对象在堆内存中的地址，所以，与简单赋值不同，这个值的副本实际上是一个指针，而这个指针指向存储在堆内存的一个对象那么赋值操作后，两个变量都保存了同一个对象地址，则这两个变量指向了同一个对象。因此，改变其中任何一个变量，都会相互影响。

因此，引用类型的赋值其实是对象保存在栈区地址指针的赋值，因此两个变量指向同一个对象，任何的操作都会相互影响。

avatar
文章
阅读
粉丝