1 javascript对象
javascript的对象同java中的对象一样,都是拥有属性和方法的数据。
1.1 对象的定义
JavaScript 对象可以跨越多行,对象中的属是以name:value键值对的形式来写的,若对象有多个属性,则个属性之间用逗号隔开;对象的方法创建:方法名:finction(){ 方法代码}。
var person = {name:"lisa",sex:"man",age:20};
var person = {
//对象的属性
name:"lisa",
sex:"man",
age:20
//对象的方法
info:function()
{
return this.name + " " + this.sex+ " " + this.age;
}
};
1.2 对象的访问
- 可以通过两种方式来访问对象的属性
person.name;
person["name"];
- 访问对象的方法
person.info();
**注意:**访问对象的方法的时候如果写成了“person.info;”那么info方法会被当作一个属性,也就是说“info:”后面的内容会被当作字符串返回。
2 javascript函数
2.1 定义函数的语法
定义函数使用关键字function,关键字function必须小写,同java的方法一样,函数中也可以有入参共和返回值:
function myFunction(a,b)
{
return a*b;
}
2.2 ES6新增箭头函数
ES6新增箭头函数可以使得函数的定义更加简介、易读。
// 传统定义函数方式
function Test () {
执行代码
}
const Test = function () {
//执行代码
}
// 使用箭头函数定义函数时可以省略 function 关键字
const Test = (...params) => {
//执行代码
}
// 该函数只有一个参数时可以简写成:
const Test = param => {
return param;
}
2.3 HTML中的全局变量
在HTML中,全局变量就是window对象,所有的数据变量都属于window对象。
function muFunction(){
name="haha";
}
2.4 局部变量和全局变量的区别
- 声明位置不同。在javascript函数中使用var声明的变量是局部变量,所以只能在函数内部访问它,在函数外声明是变量是全局变量,网页上所有的脚本和函数都可以访问它;
- 声明周期不同。局部变量在函数运行结束后被销毁,全局变量在页面关闭后被销毁;
如果把值赋给一个尚未声明的变量,该变量将自动作为window的一个属性。
**注意:**如果变量子在函数内内衣使用var关键字声明,那么该变量就为全局变量。
// 此处可调用 carName 变量
function myFunction() {
carName = "hahah";
// 此处可调用 carName 变量
}
2.5 比较var和let 关键字
- let和var的声明方式相同,但是用let代替var来声明变量,可以将变量的作用域限定在当前代码块中。
- let 声明的变量只在其声明的块或子块中可用,这与 var 相似。二者之间最主要的区别在于 var 声明的变量的作用域是整个封闭函数。
3 javascript事件
常见的HTML时间有:
事件 | 描述 |
---|---|
onchange | HTML元素改变 |
onclick | 用户点击HTML元素 |
onmouseover | 用户在一个HTML元素上移动鼠标 |
onmouseout | 用户从一个HTML元素上移开鼠标 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已完成页面的加载 |
3.1 设置事件
- 在HTML标签元素中为该元素设置事件()不推荐这种方式
<button id="test" onclick="changeContent()innerHTML=Date()">现在时间是</button>
- 但在JS中需要这样写:
var test = document.getElementById("test");
test.onclick = test.changeContent(){
//执行代码
}
- 为元素添加事件和移除事件。
//为元素添加事件
element.addEventListener(event, function, [useCapture])
//移除元素的事件
element.removeEventListener(event,function,[userAcpture])
为元素添加点击事件的时候,不要将 event 参数设置为 onclick,而必须写成 click,去掉事件名称中的 on 即可。
<input id="test" type="button" value="提交"/>
<script>
window.onload =function(){
var test=document.getElementById("test");
test.addEventListener("click",fun1);
test.removeEventListener("click",fun1);
}
function fun1(){
alert("我是fun1");
}
function fun2(){
alert("我是fun2");
}
</script>
4 javascript字符串
4.1 字符串
字符串是可以插到引号中的任何字符,可以使用单引号或者双引号。同时也可以想向ava中的字符串一样,使用索引来访问字符串的每个字符,使用字符串的内置属性length来计算字符串的长度。
var name = "holly";
var namechar = name[0];
var namelen = name.length;
注意:
- 字符串的索引也是从 0 开始;
- 若字符串中也有引号,则需要引号的字符可以使用不同于字符串的引号括住,如果字符串中也还有其他特殊字符,可以使用使用反斜杠 () 来转义,转移同java一样。
4.2 字符串对象
可以使用字符创建一个字符串,也可以使用new关键字将字符串定义为一个对象。但不要创建 String 对象。它会拖慢执行速度,并可能产生其他副作用。
<script>
var x = "holly"; // x是一个字符串
var y = new String("holly"); // y是一个对象
document.getElementById("demo").innerHTML =typeof x + " " + typeof y;
</script>
**注意:**直接创建的字符串和使用new关键字创建的字符串是不一样的。===为绝对相等,即数据类型与值都必须相等。
var x = "John";
var y = new String("John");
(x === y) // 结果为 false,因为 x 是字符串,y 是对象
4.3 比较和=
**对于基础类型:**对于 string和number 等基础类型,== 和 === 是有区别的。
- 不同类型间比较,== 之比较 “转化成同一类型后的值” 看 “值” 是否相等,=== 如果类型不同,其结果就是不等。
- 同类型比较,直接进行 “值” 比较,两者结果一样。同类型比较,直接进行 “值” 比较,和=两者结果一样。
**对于高级类型:**对于 Array,Object 等高级类型,== 和 === 是没有区别的,都是进行 “指针地址” 比较。
**对于基础类型和高级类型:**基础类型与高级类型,== 和 === 是有区别的。
- 对于 ==,将高级转化为基础类型,进行 “值” 比较。
- 因为类型不同,=== 结果为 false。
var num=1;
var str="1";
var test=1;
test == num //true 相同类型 相同值
test === num //true 相同类型 相同值
num == str //true 把str转换为数字,检查其是否相等。
num === str //false 类型不同,直接返回false
!=是==的非运算,!==是===的非运算。
5 运算
5.1 各类型进行运算的转变
-
字符串和数字相加,数字转成字符串.;
-
数字和布尔值相加,布尔值 false 转成 0,true 转成 1;
-
字符串与布尔值相加,布尔值转化成字符串。
-
数字与 null(空值) 相加,null 转化为数字 0;
-
字符串与 null(空值) 相加,null 转化为字符串;
-
取模运算的结果符号只与%左边值的符号相同;
var x = 8 % 3; // 结果为 2
var y = 8 % (-3); // 结果为 2
var z = (-8) % 3; // 结果为 -2
-
其他数据类型转换为布尔类型的规则: null、undefined、0、NaN、空字符串转换为false,其他转化为 true。
-
switch语句 中 case的判断是===的判断,即数据类型和值的双重判断,这点要注意。另外switch的判断条件可以是String 、Number、Boolean、char、枚举、null、undefined。
5.2 不同类型的循环
-
for - 循环代码块一定的次数
-
while - 当指定的条件为 true 时循环指定的代码块
-
do/while - 同样当指定的条件为 true 时循环指定的代码块
-
for/in - 循环遍历对象的属性;for in 循环不仅可以遍历对象的属性,还可以遍历数组。
var person = {name:"holly",sex:"man",age:25};
for(x in person){ // x 为属性名
info = info + person[x];
}
- for…of 是 ES6 新引入的特性。**for-of **的语法看起来跟 **for-in **很相似,但它的功能却丰富的多,它能循环很多东西。
let iterable = [10, 20, 30];
for (let value of iterable) {
console.log(value);
}
// 10
// 20
// 30
let iterable2 = "boo";
for (let value of iterable) {
console.log(value);
}
// "b"
// "o"
// "o"
**注意:**定义了数组后对数组进行赋值,中间如有某些下标未被使用(即未被赋值),在遍历的时候,采用一般的 for 循环和 for…in 循环得到的结果不同。for…in 循环会自动跳过那些没被赋值的元素,而 for 循环则不会,它会显示出 undefined。
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var array = new Array();
var x;
var txt=""
array[0] = 1;
array[3] = 2;
array[4] = 3;
array[10] = 4;
for( x in array ){
alert(array[x]); // 依次显示出 1 2 3 4
}
alert(array.length); // 结果是11
for( var i=0 ; i<4 ; i++){
alert(array[i]); // 依次显示出 1 undefined undefined 2
}
document.getElementById("demo").innerHTML = txt;
}
</script
**参考javascript学习资料:**https://www.runoob.com/js/js-tutorial.html