javascript入门（一）- 基本语法、函数、对象

一、在html之中引入js文件

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

二、基础语法

2.1 注释

• 单行注释

// 我是注释

• 多行注释

/*
我是注释1
我是注释2
我是注释3
*/

2.2 变量

js在给一个变量赋值之前，需要先申明此变量

js和许多解释器语言一样，是弱类型语言，一个变量可以接收多种类型数值

推荐使用驼峰方式命名

$符也可以作为变量名

var a;
a = 2;
a = "hello";

2.2.1 字符串类型

字符串类型可以使用单引号和双引号进行包裹，在字符串中使用引号需要使用转义符

字符串常用方法

• .length：返回字符串长度

var txt = "hello world";
var sln = txt.length;
console.log(sln);
--------------------
11

• charAt()：返回指定索引位置的字符
• fromCharCode()：将 Unicode 转换为字符串
• replace()：替换与正则表达式匹配的子串
• slice()：提取字符串的片断，并在新的字符串中返回被提取的部分
• split()：把字符串分割为子字符串数组
• trim()：移除字符串首尾空白

var txt = " hello world  ";
txt.trim();

• toLowerCase()：把字符串转换为小写
• substring()：提取字符串中两个指定的索引号之间的字符

2.2.2 数组

创建数组的三个方式

//方法一
var myCars=new Array();
myCars[0]="hello";      
myCars[1]="my";
myCars[2]="friend";

//方法二
var myCars=new Array("hello","my","friend");

//方法三
var myCars=["hello","my","friend"];

常用方法

length：设置或返回数组元素的个数
concat() ：连接两个或更多的数组，并返回结果。
find()：返回符合传入测试（函数）条件的数组元素。
findIndex()：返回符合传入测试（函数）条件的数组元素索引。
pop()：删除数组的最后一个元素并返回删除的元素
push()：向数组的末尾添加一个或更多元素，并返回新的长度
reverse()：反转数组的元素顺序。
shift()：删除并返回数组的第一个元素
unshift()：向数组的开头添加一个或更多元素，并返回新的长度

排序

数组的排序方法比较特殊，需要使用函数来实现

var a2=[1,81,32,18];
function sortNumber(a,b){
	return a-b
}
a2.sort(sortNumber);
------------------
(4) [1, 18, 32, 81]

2.3 流程控制

2.2.1 if语句

if (condition)
{
    当条件为 true 时执行的代码
}

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

2.2.2 switch 语句

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

var d=new Date().getDay(); 
switch (d) 
{ 
  case 0:x="今天是星期日"; 
  break; 
  case 1:x="今天是星期一"; 
  break; 
  case 2:x="今天是星期二"; 
  break; 
  case 3:x="今天是星期三"; 
  break; 
  case 4:x="今天是星期四"; 
  break; 
  case 5:x="今天是星期五"; 
  break; 
  case 6:x="今天是星期六"; 
  break; 
}

2.2.2 for 循环

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

for (var i=0; i<5; i++)
{
      x=x + "该数字为 " + i + "<br>";
}

2.2.3 while语句

while (条件)
{
    需要执行的代码
}

while (i<5)
{
    x=x + "The number is " + i + "<br>";
    i++;
}

三、 函数

3.1 创建函数

//1、普通函数
function functionname()
{
    // 执行代码
}

//2、匿名函数
var func = function ()
{
    // 执行代码
}
//定义函数的时候直接把它赋值给一个变量

//3、立即执行函数,使用括号包裹
(function functionname()
{
    // 执行代码
})

js中传参数和其他语言不同，在调用函数的时候可以传入和函数形参不匹配的个数，并不会报错

3.2 函数参数遍历

参数可以在函数中调用arguments方法

function func2(a,b){
	console.log(arguments.length)
	for(var i=0;i < arguments.length;i++){
		ret += arguments[i]
	}
	return ret
}

3.3 词法分析

函数在调用的一瞬间，会形成一个激活对象AO（Active Object），并会分析以下三个方面

• 1、函数参数：若有参数，则将参数传给AO，值为undefined,若没有则什么都不做
• 2、函数局部变量：若AO上有同名的值，则什么都不做，若没有同名的值，则将此值传给AO，值为undefined。意思就是当函数内部申明变量的时候，函数先会把变量生成出来，直到调用到赋值语句的时候才会赋值。
• 3、函数内部函数调用：如果AO上有同名对象，则会将AO上的对象覆盖

四、对象

js也是面向对象的语言，在生成对象的时候，要使用new关键字

4.1 组合对象

• 数组

var myCars=new Array("hello","my","friend");

• 数学

• 日期

// 创建，可以传入任意的时间参数
var d1 = new Date()

// 转换为字符串格式的本地时间
d1.toLocalString()

• JSON对象

var str1 = '{"name":"xiaoqiang","age":22}';
var obj1 = {"name":"xiaoqiang","age":22};

//json字符串转为对象
var obj = JSON.parse(str1)
//对象转为json字符串
var str = JSON.stringfy(obj1)

• RegExp正则对象

var reg1 = RegExp("^[a-zA-Z][0-9a-zA-Z_]{5,11}");
var ret = reg1.test("xiaoqiang") //校验成功则返回true，否则为false

4.2 数据对象

• 数字

var myCars=new Number(1);

• 字符串
• 布尔

4.3 高级对象‘

• 自定义对象
  这个自定义对象，如同字典类型

//创建
var person = {"name":"xiaoqiang","age":22};

//取值
var a = person.name;

for (var i person){
	console.log(i);
	console.log(person[i];
	}