JavaScript和Java在概念和设计方面都是完全不同的语言。JavaScript由Brendan Eich于1995年发明,并于1997年成为ECMA标准。ECMA-262是官方名称。ECMAScript 6(2015年6月发布)是JavaScript的最新官方版本。
在HTML中,必须在<script>和</ script>标记之间插入JavaScript代码。可以放在HTML页面的<body>和<head>部分。
JavaScript可以以不同的方式“显示”数据:
- 使用window.alert()写入警告框。
- 使用document.write()写入HTML输出。
- 使用innerHTML写入HTML元素。
- 使用console.log()写入浏览器控制台。
变量
声明
var person = "John Doe", carName = "Volvo", price = 200;
注意:声明没有值的变量将具有 undefined值。如果重新声明JavaScript变量,它将不会丢失其值。
执行这些语句后,变量person仍将具有值“John Doe”:
var person = 'John Doe'; var person; console.log(person);
运算
如果向字符串添加数字,那么将该数字视为字符串并连接。+=用于字符串拼接;
console.log(1 + 5 + '10' + 15); // 61015
如果一个变量的值是字符串的数字,执行++操作会转成数字并计算 ; ++ 是操作变量的,不能是 ++1 或 1++
var number = '5' console.log(typeof number) // string console.log(number += 1); // 51 console.log(++ number); // 52 console.log(typeof number) //number
比较
将字符串与数字进行比较时,JavaScript会在进行比较时将字符串转换为数字:空字符串转换为0。非数字字符串转换为NaN; 和NaN比较始终为false,即使是和NaN自己。可以用isNaN()判断是否是非数字,再进行比较,连接,运算等操作。比较两个字符串时,“2”将大于“12”,因为(按字母顺序)1小于2。因此比较的时候最好转成Number类型。
function print(log){ console.log(log); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="base.js"></script> <script> print('5' > 4); //true print('' > -1); // true print('' < 1); // true print('n' > 0) // false print(0 === NaN) //false print(0 == NaN) //false print(NaN === NaN); // false print(NaN == NaN); // false </script> </body> </html>
数据类型
number,string,object, boolean,undefined
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="base.js"></script> <script> print(typeof "John" ); // Returns string print(typeof 3.14) // Returns number print(typeof false) // Returns boolean print(typeof [1,2,3,4]) // Returns object print(typeof {name:'John', age:34}) // Returns object print(typeof a) // Returns undefined </script> </body> </html>
JavaScript具有动态类型。这意味着同一个变量可以用作不同的类型:
var x; // Now x is undefined var x = 5; // Now x is a Number var x = "John"; // Now x is a String
null与undefined
在JavaScript中,null的数据类型是一个对象。
var person = null; // Value is null, but type is still an object
undefined和null之间的区别:
typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true
undefined比null更消极,null表示变量该是一个对象,undefined表示不知道要保存什么类型;
数组和类
toString()
返回值:数组转换为(逗号分隔的)数组值的字符串。
注意:将对象转成字符串时,用String()转,因为String(null)不出错, undefined.toString()或null.toString()会出错
arr.join([separator])
返回值:用给定的分隔符将各数组元素组成字符串,类似于toString()
pop()和push() 【改变原数组】
分别在尾巴上弹出和推入元素;
返回值:分别返回弹出的元素和新数组的长度;shift()和unshift()类似,只是在前面弹出和推入元素
fill();【改变原数组】
将数组统一用给定参数填充;
返回值: 更改后的数组
filter(func[,thisValue]):
处理函数: func(currentValue[,index,arr]) 【下同】
返回值:传入一个函数,根据函数的返回结果判断是保留,并将保留结果作为数组返回
find(func,[thisValue]);
返回值:传入一个函数,根据函数的返回结果返回第一个符合条件的数组元素值
findIndex(func[,thisValue]):
和find(func)类似,只是返回符合func()条件的数组元素的index值
返回值: 如果数组中的任何元素通过测试,则返回数组元素索引,否则返回undefined
forEach(func,[thisValue])
为每个元素调用处理函数func; thisValue是处理函数this的值,如果此参数为空,则是Windows对象
返回值: undefined
slice(start[, end])
返回值: 将指定部分的数组元素作为新数组返回
splice(index,howmany,item...) 【改变原数组】
在index位置开始删除howmany各元素,并插入item...
返回值: 返回删除的值(如果有)
Javascript没有对象:
于是模拟了一个对象:类似于hashmap的key:value保存结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="base.js"></script> <script> var stu = new Object(); // 能够保存key value的值 stu.name = "王有财"; stu.age = 21; stu.showInfo = function(){ print(this); print('name = '+ this.name + ';age = ' + this.age); } stu.showInfo(); </script> </body> </html>
结果:
{name: "王有财", age: 21, showInfo: ƒ}
name = 王有财;age = 21