JavaScript基础笔记01

JS基础笔记

输入输出：

console.log() 控制台输出
alert() 弹出警示框
prompt() 输入

变量

声明变量：var
声明并赋值(变量初始化)：var a = 23,b=12

数据类型

简单数据类型：

1.Number 数字类型 有整数和浮点数
注意浮点数精度问题
Number.MAX_VALUE
Number.MIN_VALUE
infinity
-infinity
NaN 非数字类型
isNaN() 用来判断一个变量是否是NaN

2.String字符串
字符串长度：str.length
字符串拼接：+ 字符串和其他类型的数据拼接，会先把其他类型的数据转换成字符串在进行拼接

3.Boolean布尔类型
true falses

4.Undefined 和 Null
一个只声明未赋值的变量 值为undefined
undefined类型和其他类型数据相连或相加，注意结果

var variable;
console.log(variable);           // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   //  NaN

一个声明变量给 null 值，里面存的值为空

var vari = null;
console.log('你好' + vari);  // 你好null
console.log(11 + vari);     // 11
console.log(true + vari);   //  1

用typeof 可以检测数据类型
typeof num

数据类型转换

1. 转换成字符串：
   num.tostring()
   String(num)
   +字符串拼接隐式转换 num+str
2. 转换成数字类型
   parseInt(str)
   parseFloat(str)
   Number(str)
   隐式转换 ‘12’ - 0
3. 转换成布尔类型
   Boolean（）
   下面几种情况转换成布尔类型是false：
   “”, null, 0, NaN, undefined

运算符

1.算术运算符 ‘+’ ’ -’ ‘*’ ’ /’ ‘%’
2. 自增 自减 ++ –
3. 比较运算符 > < >= <= == === !=
== 两边的值是否相等（有隐式数据类型转换）
=== 两边的值和数据类型是否完全相同

console.log(18 == '18');     // true
console.log(18 === '18');   // false

4. 逻辑运算符 && || ！ 短路运算（逻辑中断）
   逻辑与&&：表达式1 && 表达式2
   表达式1为真 则返回表达式2
   表达式1为假 则返回表达式1

console.log( 123 && 456 );        // 456
console.log( 0 && 456 );          // 0
console.log( 123 && 456&& 789 );  // 789

逻辑或||： 表达式1 || 表达式2
表达式1为真，则返回表达式1
表达式1为假，则返回表达式2

console.log( 123 || 456 );         //  123
console.log( 0 ||  456 );          //  456
console.log( 123 || 456 || 789 );  //  123

5. 运算符的优先级
   （） | ++，–，！| * / + - | > < >= <= | == === != !== | &&| || | = | , |

流程控制

顺序结构、分支结构、循环结构

分支结构与语句

if else

// 适合于检查多重条件。
if (条件表达式1) {
    语句1；
} else if (条件表达式2)  {
    语句2；
} else if (条件表达式3)  {
   语句3；
 ....
} else {
    // 上述条件都不成立执行此处代码
}

switch

switch( 表达式 ){ 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}

三元表达式

表达式1 ? 表达式2 : 表达式3;

循环结构

for 循环

//  基本写法
for(var i = 1; i <= 10; i++){
    console.log('哈哈哈');
}

while循环

while (条件表达式) {
    // 循环体代码 
}

do while

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

continue 和 break 关键字

数组Array

创建数组：

var arr = new Array();   // 创建一个新的空数组
//1. 使用数组字面量方式创建空的数组
var  数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var  数组名 = ['小白','小黑','大黄','瑞奇'];

数组中可以存放任意类型的数据
索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）。数组可以通过索引来访问、设置、修改对应的数组元素，可以通过“数组名[索引]”的形式来获取数组中的元素。

注意：如果访问时数组没有和索引值对应的元素，则得到的值是undefined

数组长度：arr.length
数组的length属性可以被修改
如果设置的length属性值大于数组的元素个数，则会在数组末尾出现空白元素；
如果设置的length属性值小于数组的元素个数，则会把超过该值的数组元素删除

函数

函数声明 有名和匿名

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
  // 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...); 

注意：在JavaScript中，形参的默认值是undefined。

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();

参数 arguments的使用，arguments是函数的一个内置对象，用于接收实参，用于参数个数不确定的情况，是一个伪数组，可以遍历，存储了传递的所有实参
注意：在函数内部使用该对象，用此对象获取函数调用时传的实参。

变量作用域

• 全局作用域
• 局部作用域（函数作用域）

注意：JS没有块级作用域，即用{}包裹的部分

• 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存

• 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间

对象

创建对象的三种方法

1. 使用对象字面量创建{}

var star = {
    name : 'pink',
    age : 18,
    sex : '男',
    sayHi : function(){
        alert('大家好啊~');
    }
};

console.log(star.name)     // 调用名字属性
console.log(star['name'])  // 调用名字属性
star.sayHi();    // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

2. 使用new Object（）

var andy = new Obect();  // 创建一个空对象
// 给对象增添属性和方法
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
    alert('大家好啊~');
}

3. 构造函数 首字母大写

function 构造函数名(形参1,形参2,形参3) {
     this.属性名1 = 参数1;
     this.属性名2 = 参数2;
     this.属性名3 = 参数3;
     this.方法名 = 函数体;
}

var obj = new 构造函数名(实参1，实参2，实参3) 

new关键字的作用

• 在构造函数代码开始执行之前，创建一个空对象；
• 修改this的指向，把this指向创建出来的空对象；
• 执行函数的代码
• 在函数完成之后，返回this—即创建出来的对象

遍历对象

for (var k in obj) {
    console.log(k);      // 这里的 k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}