JS基本语法

Posted on Posted in js
Tips: 本文创建于2014年5月18日,已超过 2 年,内容或图片可能已经失效!

javascrtpt

  1. 引入
  2. 大小写敏感
  3. 注释
  4. 分号结束符号
  5. 变量
  6. 数据类型
  7. 运算符
  8. 流程控制
  9. 函数
  10. 局部变量和全局变量
  11. 数组
  12. 常用的方法
  13. 字符串
  14. eval

1、引入

[code lang="js"]
<scritpt type="text/javascript">js content</script>
<script type="text/javascript" src="js file"></script>
[/code]

2、大小写敏感

3、注释

// 单行
/*多行注释*/

4、分号结束符号 ";"

可以使用,也可以不使用
var name='zhangsan';
var age=30;

5、变量的命名规则

名字组成:字母/数字/下划线/$

6、数据类型

number
boolean
string
undefined
null
object

null:空类型、在js里面null是空对象的指针。
在程序里可以声明一个变量,声明为null型,在后期要把该变量声明为对象类型。

number
整型
十进制
八进制
十六进制

浮点型

[code lang="js"]
var age10 = 30; // 十进制
var age8 = 034; // 八进制
var age16 = 0x17; // 十六进制
// alert(); document.write();
// 在调试中,在火狐中firebug调试工具中信息输出
// 可以把变量的详细信息中输出
console.log(age8);
console.log(age16);

// 科学计数
console.log(1.3e9); // 1.3*10的9次幂

//最大值
window.alert(Number.MAX_VALUE);
//最小值
window.alert(Number.MIN_VALUE);

var num = Number.MAX_VALUE;
document.write(num+num); // 输出Infinity,无限大
document.write(10/0); // 输出Infinity,无限大

console.log(0.034); // 两种输相同
console.log(.034);

// 不准确的浮点
document.write(0.1+0.2); // 0.30000000000000004
[/code]

数据类型的判断

[code lang="js"]
// 使用typeof()判断变量的类型
document.write(typeof(10)); //number
document.write(typeof(3.14)); //number
document.write(typeof('string')); //string
document.write(typeof(aaaa)); //undefined
document.write(typeof(true)); //boolean
document.write(typeof(TRUE)); //undefined
document.write(typeof(null)); //object
[/code]

7、运算符

逻辑运算符

[code lang="js"]
var res = 'lin' && 30;
document.write(res); // 输出为30
[/code]

短路运算

[code lang="js"]
var res = 35 || 'bj';
console.log(res); // 35
var yu = 0 && 'zhen';
console.log(yu); // 0
[/code]

连接符 +

8、流程控制

选择分支:if else if else switch

[code lang="js"]
<script type="text/javascript">
//switch分支结构
//case:后边可以跟常量、变量、表达式
/*var week = 3;
var num = 3;
switch(week){
case 0:
console.log('周日');
break;
case 1:
console.log('周一');
break;
case 2:
console.log('周二');
break;
case num:
console.log('周三');
break;
case 4:
console.log('周四');
break;
case 'five':
console.log('周五');
break;
case 6:
console.log('周六');
break;
default:
console.log('星期异常');
}
*/

var score = 120;
switch(true){
case score<100 && score>=90:
console.log('A');break;
case score<90 && score>=80:
console.log('B'); break;
case score<80 && score>=70:
console.log('C');break;
case score<70 && score >=60:
console.log('D');break;
default:
console.log('E');
}
</script>
[/code]

循环分支
continue/break

[code lang="js"]
/*
for(var i=0; i<10; i++){
if(i==5){
//break; //跳出本层循环
continue; //跳出本次循环,进入下次循环
}
console.log(i);
}
*/

//break/continue跳出至外边多层循环,
//在php里边:break 层数;
//可以给外部的循环设置标志,break 标志,就可以直接跳出到标志位所指向的位置
apple: for ( var m = 0; m < 5; m++) {
console.log(m);
for ( var n = 100; n > 90; n--) {
if (n == 95) {
// break apple;
continue apple;
}
console.log(n);
}
}
[/code]

函数

在js中一切都是对象,包括函数也是对象,因此可以封装

[code lang="js"]
// 第一种function要先加载到内存,声明与调用没有顺序
function getInfo() {
var t = 10 + 20;
return t;
}
console.log(getInfo());
// 第二种函数是有顺序的
var f = function(nm) {
return 'hello ' + nm;
}
console.log(f('tom'));
[/code]

函数参数,函数声明的时候可以没有参数。

[code lang="js"]
// 函数没有形式参数,可以通过arguments接受
function setInfo() {
// arguments 对象接受实际参数
arguments[0];
arguments[1];
arguments[2];
console.log(arguments);
// 个数
console.log(arguments.length);
}
setInfo(1, 2, 3);
// 函数调用对于实际参数可以灵活设置,没有限制
function f(addr, act, time) {
console.log(addr + "-" + act + "-" + time); // bj-undefined-undefined
document.write(addr + "-" + act + "-" + time);
}
f('bj');
[/code]

利用arguments模仿重载

[code lang="js"]
function f(){
if(arguments.length==1){
console.log('一个参数');
}else if(arguments.length==2){
console.log('二个参数');
}else{
console.log('没有参数');
}
}
f('zhangsan','work');
f('bj')
f();
// 二个参数 myJs.js:5
// 一个参数 myJs.js:3
// 没有参数 myJs.js:7
[/code]

函数返回值,可以把一个函数当作参数返回

[code lang="js"]
function f() {
function f1() {
console.log('hello');
}
return f1;
}
var ff = f();
ff(); // 输出hello
[/code]

函数调用,匿名函数自调用

[code lang="js"]
function getInfo(){
return 'computer';
}
getInfo();
// 匿名函数自调用,普通函数传统调用有弊端
// 程序多定义一个变量就多了一份风险,变量名字被污染的风险
// 引用多个框架包,会使用这个
(function (){
console.log( 'niming');
})();
[/code]

函数内部两个关键字callee和caller
callee的使用通过arguments.callee进行调用
callee是本函数的引用/指针

[code lang="js"]
var num = 0;
function f() {
num++;
if (num < 5) {
console.log(num);
arguments.callee();
}
}
f();
// 阶乘
function factorial(n) {
if (n <= 0)
return 1;
else
return n * arguments.callee(n - 1)
}
console.log(factorial(1));
[/code]

caller:函数被调用,想知道是谁来调用这个函数,就用caller

[code lang="js"]
function f1() {
console.log('f1');
f2();
}
function f2() {
console.log('f2');
console.log(f2.caller.name);
}
function f3() {
console.log('f3');
f2();
}
f1();
[/code]

局部变量和全局变量

全局变量:windows对象的直接属性是全局变量
局部变量:不是windows对象的直接属性就是局部变量
声明全局变量:
1、在函数外部声明的变量普遍都是全局变量
2、在函数内部,没有var关键字,也是全局变量
声明局部变量:
在函数内部声明,并且需要有var关键字

[code lang="js"]
//全局变量
var age = 23;
var addr = 'bj';
function f() {
// 没有var关键字声明,全局变量,前提是函数要执行
info = 'apple';
}
f();
// 以上的变量都是全局变量,同时也是window对象属性
// 因此全局变量的调用都是通过window对象调用
[/code]

数组

var arr = [el,el,el,el];
var arr = new Array(el,el,el,el);
var arr = new Array(4);

[code lang="js"]
// 在js里面不允许直接声明"关联数组"
var arr = [ 'apple', 'pear', 'banana', 'orange' ];
// 这是一个属性,属性的名称是hainan,名称是yeziguo
arr['hainan'] = 'yeziguo';
console.log(arr);
console.log(typeof arr); // object
console.log(arr.hainan); // yeziguo
console.log(arr[0]); // apple

var animal = new Array(1, 2, 3, 4, 5, 6);
console.log(animal);
[/code]

通过属性length获得数组长度

[code lang="js"]
// length 获得数组程度针对数字下标起作用
// 获得数组最大索引值+1的信息
var arr = [ 'apple', 'pear', 'banana', 'orange' ];
arr[4] = 'xigua';
arr['shandong'] = 'grape';
arr[21] = 'liulian';
console.log(arr);
[/code]

数组遍历

[code lang="js"]
// 数组遍历
var arr = [ 'apple', 'pear', 'banana', 'orange' ];
arr['hainan'] = 'yeziguo';
// 下标为数字的
// for ( var i = 0; i < arr.length; i++) {
// console.log(arr[i]);
// }
for ( var index in arr) {
console.log(index + '=>' + arr[index]);
}
[/code]

常用的方法

在js中定义的数组都是Array实例

[code lang="js"]
var arr = [ 'apple', 'pear', 'banana', 'orange' ];
// instanceof 判断一个对象是否鼠疫一个类的实例
console.log(typeof arr); // object
console.log(arr instanceof Array); // true
// push 向数组里追加元素
arr.push('zhuijia001');
arr.push('zhuijia002', 'zhuijia003');
console.log(arr);
// pop 删除数组最后一个元素
arr.pop();
console.log(arr);
// unshift 在开始的位置追加元素
// sort 正序
// reverse 反序
// slice(start,end) 返回数组一部分
// indexOf 返回一个内容的下标
// lastIndexOf 返回一个内容的下标,从后向前
[/code]

字符串

声明字符串
var addr = 'bj'; // 变量类型为string
var addr = new String('bj'); // 变量类型为obj

[code lang="js"]
var addr = 'bj';
var name = new String('zhangsan');

console.log(typeof addr);
console.log(typeof name);
// obj 可以增加属性
name.age = 20;
console.log(name.age);
[/code]

字符串属性调用
length:长度

[code lang="js"]
var addr = 'bj';
var name = new String('zhangsan');
// 在js引擎里面,字符串调用属性,首先把字符串转化成临时对象,通过对象调用属性,再把对象结果返回。同时临时对象销毁。
console.log(addr.length);
console.log(name.length);
[/code]

  • \n 换行
  • \r 回车
  • \t 指标
  • \\ 斜线

eval

该函数可以把内部的字符串参数当作表达式在上下环境中运行。

[code lang="js"]
var s = 30 + 10;
console.log(s); // 40
console.log("23+10"); // 23+10
console.log(eval("23+10")); // 33
// eval 内部参数字符串的定义必须符合js语法规则
var info = "alert('123')";
console.log(info);
eval(info);
[/code]

» 转载请注明来源:若我若鱼 » JS基本语法

Leave a Reply

Your email address will not be published. Required fields are marked *

15 + 3 =