js基础笔记

引入方式

行内式：

<input type="button" value="点我试试" onclick="alert('Hello World')" />

内嵌式：

<script>
    alert('Hello  World~!');
</script>

外部js文件：

<script src="my.js"></script>

变量声明

• var a;

变量赋值：

var a = 10

5种简单数据类型

1.数字型 Number

isNaN用来判断一个变量是否为非数字类型，示例代码如下

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum);            // false ，21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName));  // true ，"andy"是一个非数字

2.字符串型String

字符串型可以是引号中的任意文本，其语法为 双引号 "" 和 单引号'',示例代码如下

var strMsg = "我爱北京天安门~";  // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~';    // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子;       // 报错，没使用引号，会被认为是js代码，但js没有这些语法

3.布尔型Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。

布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。示例代码如下

console.log(true + 1);  // 2
console.log(false + 1); // 1

4.Undefined

一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时，注意结果）

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

5.Null

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

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

获取变量数据类型

typeof可以用来检测变量数据类型

var num = 18;
console.log(typeof num) // 结果 number（数字型） 

类型转换

1.转换字符串

方法1
var num = 10
var str = num.toString()
console.log(str) // 结果黑色代表字符串，转换成功
console.log（typeof str）// 检测结果为string 所以转换成功
方法2
console.log(String(num))
方法3
console.log(num+'')

2.转换数字型

1.parseInt(变量)，可以把字符型转换为数字型 得到整数
var age = prompt('请输入你的年龄')
console.log(parseInt(age)) // 结果为蓝色，转换数字型成功
console.log(parseInt('3.14'))// 3 取整
console.log(parseInt('120px')) // 120 去除后面字母单位
console.log(parseInt('ms120px')) // NaN
2.parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数
console.log(parseFloat('3.14'))// 3.14
console.log(parseFloat('120px')) // 120 会去除单位
console.log(parseFloat('ms120px')) // NaN
3.利用Number变量
console.log(Number('3.14')) // 3.14
4.利用算数运算 - * /
console.log(Number('3.14'-0)) // 3.14

3.转换为布尔型

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

循环

for循环

// for 里面是可以添加其他语句的 
for (var i = 1; i <= 100; i++) {
 if (i == 1) {
    console.log('这个人今年1岁了， 它出生了');
 } else if (i == 100) {
    console.log('这个人今年100岁了，它死了');
  } else {
       console.log('这个人今年' + i + '岁了');
  }
}

双重for循环

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
    for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  
       需执行的代码;
   }
}
var star = '';
for (var j = 1; j <= 3; j++) {
    for (var i = 1; i <= 3; i++) {
      star += '☆'
    }
    // 每次满 5个星星 就 加一次换行
    star += '\n'
}
console.log(star);

while循环

while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。 while语句的语法结构如下

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

do-while循环

do... while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。

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

switch

注意： 执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

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

continue、break

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一 次）。

for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         console.log('这个包子有虫子，扔掉');
         continue; // 跳出本次循环，跳出的是第3次循环 
      }
      console.log('我正在吃第' + i + '个包子呢');
 }

break 关键字用于立即跳出整个循环（循环结束）。

for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         break; // 直接退出整个for 循环，跳到整个for下面的语句
     }
     console.log('我正在吃第' + i + '个包子呢');
   }

创建数组、

利用 new 创建数组

var 数组名 = new Array() ；
var arr = new Array();   // 创建一个新的空数组

利用数组字面量创建数组

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

遍历数组

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}

数组中新增元素

数组[ 数组.length ] = 新数据;

函数的使用

函数参数语法

• 形参：函数定义时设置接收调用时传入

• 实参：函数调用时传入小括号内的真实数据

break ,continue ,return 的区别

• break ：结束当前的循环体（如 for、while）

• continue ：跳出本次循环，继续执行下次循环（如 for、while）

• return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

自定义函数方式(命名函数)

// 声明定义方式
function fn() {...}
// 调用  
fn();  

对象

例如，将“张三疯”的个人的信息保存在数组中的方式为：

var arr = [‘张三疯’, ‘男', 128,154];

使用字面量对象记录上组数据为

var obj = {
    "name":"张三疯",
    "sex":"男",
    "age":128,
    "height":154
}
console.log(star.name)     // 调用名字属性
console.log(star['name'])  // 调用名字属性

利用 new Object 创建对象

var andy = new Object();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
    alert('大家好啊~');
}
 console.log(andy.name);
       console.log(andy['name']);
       andy.sayhi()

利用构造函数创建对象

function Obj(r,rr,rrr){
         this.r=r
         this.rr=rr
         this.rrr=rrr
         this.i=function(yy){
             console.log(yy);
         }
     }
     var hh=new Obj('g','t','y')
     hh.i('7')
     console.log(hh.r);

遍历对象

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

日期对象

获取当前时间必须实例化：

var now = new Date();

获取指定时间的日期对象

var future = new Date('2019/5/1');

创建数组的两种方式

字面量方式

var arr = [1,"test",true]

new Array()

var arr = new Array();

检测是否为数组

instanceof 可以判断一个对象是否是某个构造函数的实例

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false

Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];
var obj = {};
console.log(Array.isArray(arr));   // true
console.log(Array.isArray(obj));   // false

添加删除数组元素的方法

push、unshift为增加元素方法；pop、shift为删除元素的方法