本文详细介绍了JavaScript的基础用法，包括行内、内部和外部js的使用，以及js放置位置。还阐述了语句和注释规则、变量声明、数据类型、类型转换、相等和全等比较。此外，对数组、函数、内置对象和对象操作等方面进行了讲解，如数组方法、函数定义与调用等。
JavaScript
一、基础用法
行内js
将js代码写在html标签上
<button type="button" onclick="alert('Hello')">按钮</button>
内部js
写在html页面中script标签中
<script type="text/javascript">
// alert("你好");
</script>
外部js
创建js文件，通过script标签引入js文件
console.log("hello");
<!-- 引入外部js文件 src：引入文件的路径 charset：编码格式 -->
<!-- 注：如果srcipt标签设置了src属性，则在script标签中写的js代码无效 -->
<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
js放置的位置：
1. 放在head标签中
2. 放在body中
3. 放在body标签后（推荐）
js代码从上往下依次执行，最好等到html元素执行完毕后再执行js代码
onclick 点击事件，当点击元素时触发
alert(“内容”) 弹出层
console.log(“”); 打印内容在控制台
二、语句和注释
- js代码以行为单位，从上往下一行一行执行。一行就是一个语句。
- 语句以分号结尾，一个分号就表示语句的结束。（js是一种弱类型语言，如果没有分号，可能也不会报错，建议写上）
- 如果多个语句写在一行，那每个语句结尾必须加上分号。
注释：
html代码中
兼容html风格的注释： <!-- 注释内容-- >
js代码中
// 单行注释
/* 多行注释 */
标识符和关键字
标识符就是一个名字，用来给变量和函数进行命名，有特定规则和规范
规则：由Unicode字母、_、$、数字组成、中文组成
（1）不能以数字开头
（2）不能是关键字和保留字
（3）严格区分大小写
规范：
（1）见名知意
（2）驼峰命名或下划线规则
关键字也称保留字，是被JavaScript征用来有特殊含义的单词
三、变量
JS是一种弱类型语言，在声明变量时不需要指定数据类型，直接使用var修饰符声明变量。
变量的声明
1. 声明并赋值
var str = "Hello World";
console.log(str);
2. 先声明再赋值
var str2; // 声明
str2 = "hello"; // 赋值
变量的注意点
1. 当变量只声明而未赋值时，则变量的值会返回undfinded
var a;
console.log(a); // undefined
2. 变量要有定义才能使用，若变量未声明就使用，JavaScript会报错，告诉你变量未定义。
// console.log(b);
// b is not defined
3. 可以在同一条var命令中声明多个变量。
var aa=1,bb=2,cc=10;
console.log(aa,bb,cc);
4. 若使用var重新声明一个已经存在的变量，是无效的。
var str;
console.log(str);
5. 若使用var重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值
var str = '你好';
console.log(str);
6. JavaScript是一种动态类型、弱类型语言，也就是说，变量的类型没有限制，可以赋予各种类型的值。
var flag = true;
console.log(true)
变量提升
JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。
这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。
注：只有用var声明的变量，才会变量声明。
console.log(uname);
var uname = "zhangsan"; // undefined
var uname;
console.log(uname);
uname = "zhangsan";
// 只有用var声明的变量，才会变量声明。
console.log(upwd);
// upwd = "123456";
四、数据类型
数 值（Number）： 整数和小数（比如 1 和 3.14）
字符串（String）： 字符组成的文本（比如"Hello World"）
布尔值（Boolean）： true（真）和 false（假）两个特定值
Undefined： 表示“未定义”或不存在，即此处目前没有任何值
Null： 表示空缺，即此处应该有一个值，但目前为空
对象（object）(引用) ： 各种值组成的集合
1)、对象（object）{name:”zhangsan”,age:”18”}
2)、数组（array）[1,2,3]
3)、函数（function）function test() {}
Undefined
表示值不存在
出现Undefined的情况：
-
当声明了变量但未赋值时，这个变量的值就是undefined
-
调用函数（方法）时，函数有形参，但未提供实参，则参数为undefined
-
函数没有返回值，默认返回undefined
/* Undefined */ // 1. 当声明了变量但未赋值时，这个变量的值就是undefined var str; console.log(str); // undefined // 2. 调用函数（方法）时，函数有形参，但未提供实参，则参数为undefined function test(str) { // 有形参 console.log(str); // undefined } // 调用方法 test(); // 未提供实参 // 3. 函数没有返回值，默认返回undefined var t = test(1); console.log(t); // undefined
null
表示空值
使用Null类型值时注意以下几点：
1）使用typeof操作符测试null返回object字符串。
2）undefined派生自null，所以等值比较返回值是true。未初始化的变量和赋值为null的变量相等。
/* null */
var a = 1;
var b = true;
console.log(typeof a); // number
console.log(typeof b); // boolean
// 1）使用typeof操作符测试null返回object字符串。
var c = null;
console.log(null);
console.log(typeof null); // object
// 2）undefined派生自null，所以等值比较返回值是true。未初始化的变量和赋值为null的变量相等。
var d;
console.log(d);
console.log(c == d);
布尔类型
true或false
数值型
数值型包括：整型和浮点型
-
所有数字（整型和浮点型）都是以64位浮点类型存储的。所以在js中，1与1.0是相等的，1+1.0的值为2
-
浮点类型最高精度是17位，浮点类型运算时可能不准确，不建议使用浮点型做判断
-
在存储数值时会自动将整型的浮点数值（1.0）转换成整型（1）
/* 数值型 */ // 所有数字（整型和浮点型）都是以64位浮点类型存储的。所以在js中，1与1.0是相等的，1+1.0的值为2 console.log(1==1.0); // true console.log(1+1.0); // 2 // 在存储数值时会自动将整型的浮点数值（1.0）转换成整型（1） var s = 1.0; console.log(s);
字符串
使用 ’ ’ 或 " "引起来，如：‘hello’，“good”。
对象
{}
五、类型转换
1.函数转换
parseInt()
在转换之前，首先会分析该字符串，判断位置为0处的字符，判断它是否是个有效数字，如果不是，则直接返回NaN，不再继续，如果是则继续，直到找到非字符
/* parseInt() */
console.log(parseInt("123abc")); // 123
console.log(parseInt("123.45")); // 123
console.log(parseInt("abc")); // NaN
parseFloat()
在转换之前，首先会分析该字符串，判断位置为0处的字符，判断它是否是个有效数字，如果不是，则直接返回NaN，不再继续，如果是则继续，直到找到非字符
可以识别第一个小数点
/* parseFloat() */
console.log(parseFloat("123abc")); // 123
console.log(parseFloat("123.45")); // 123.45
console.log(parseFloat("abc")); // NaN
console.log(parseFloat("12.34.56")); // 12.34
2.显式转换
toString()函数可以将数字转换为字符串。
// toString
var data = 10;
console.log(data);
console.log(data.toString());
var data1 = null;
// console.log(data1.toString()); // Cannot read property 'toString' of null
Number还提供了toFixed()函数将根据小数点后指定位数将数字转为字符串，四舍五入
// toFixed()
var data2 = 1.4;
console.log(data2.toFixed(0)); // 1
var data3 = 1.46;
console.log(data3.toFixed(1)); // 1.5
构造方法
JS 为 Number、Boolean、String 对象提供了构造方法，用于强制转换其他类型的数据。此时操作的是整个数据，而不是部分。
强制类型转换方法 String() 是最简单的，因为它可把任何值转换成字符串。
最简单的转字符串的方式，往任意数据数据后面+“”
// Number
console.log(Number( "5.5 ")); // 5.5
console.log(Number( "56 ")); // 56
console.log(Number( "5.6.7 ")); // NaN
// 将任意值转换成字符串，包括null和undefinded
var qq = null;
console.log(String(qq));
var flag = true;
console.log(flag+"");
六、相等和全等
== 相等，比较值是否相等
=== 全等，比较值和类型是否相等
var a = 1; // 数值型
var b = '1'; // 字符串
console.log(a==b);
console.log(a===b);
七、数组
数组的定义
var arr = [值1,值2,值3]; // 隐式创建
var arr = new Array(值1,值2,值3); // 直接实例化
var arr = new Array(size); // 创建数组并指定长度
/* 数组的定义 */
// 隐式创建
var arr = [];
console.log(arr);
var arr2 = [1,'a',true];
console.log(arr2);
// 直接实例化
var arr3 = new Array(1,2,3);
console.log(arr3);
// 创建数组并指定长度
var arr4 = new Array(5);
console.log(arr4);
数组的特点
1. 长度可变
2. 数组中数据类型任意
3. 索引从0开始
4. 可以使用任意字符当作数组的索引，如果索引是非正整数，我们称之为数组的属性，属性不影响数组的长度。
基本操作
-
数组的长度可以通过length属性获取，长度可以任意修改
获取长度：数组.length
设置长度：数组.length = 新长度
-
获取数组中元素通过索引获取，索引可以越界
获取元素：数组[下标]
设置元素：数组[下标] = 值
/* 基本操作 */ // 获取数组的长度 console.log(arr2.length); // 设置数组的长度 arr2.length = 5; console.log(arr2); // 获取数组的元素 console.log(arr2[0]); console.log(arr2[10]); // 设置元素 arr2[4] = 'zhangsan'; console.log(arr2); // 设置属性 arr2['uname'] = "admin"; console.log(arr2); console.log("=========");
数组的遍历
1. 普通的for循环遍历
for(var i=0; i<=数组.length-1; i++){
}
2. for...in..
for(var 下标(名称任意) in 数组名){
数组名[下标]是获取元素
} // 下标(名称任意)
3. forEach
数组名.forEach(function(element,index){
element表示当前元素
index表示索引
}
/* 数组的遍历 */
// 普通的for循环遍历
for (var i = 0; i < arr2.length; i++) {
console.log(arr2[i]);
}
console.log("==========");
// for... in
for(var index in arr2) {
console.log(index);
console.log(arr2[index]);
console.log("-------");
}
console.log("=========");
// forEach
arr2.forEach(function(element,index){
console.log(element);
console.log(index);
console.log("-------");
})
了解内容：
如果下标：
1.为非负整数(包括整数字符串)：自动从0开始,不存在添加 undefined
2.为负数、小数、非数字符串：这些内容不计算在长度内，当成"属性"处理，相当于自定义属性。
数组非常灵活，使用数组元素
1.下标: 非负整数(包括整数字符串)：
数组.下标
数组[下标]
2.下标：负数、小数、非数字字符串：
数组[属性]
*for ——> 不遍历属性
*foreach ——>不遍历属性和索引中的undefined
* for in ——>不遍历索引中的undefined
八、数组方法
push 添加元素到最后
unshift 添加元素到最前
pop 删除最后一项
shift 删除第一项
reverse 数组翻转
join 数组转成字符串
indexOf 数组元素索引
slice 截取（切片）数组，原数组不发生变化
splice 剪接数组，原数组变化，可以实现前后删除效果
concat 数组合并
// 定义数组
var arr = [1,2,'a',3,'b'];
// push 添加元素到最后
arr.push('c');
// unshift 添加元素到最前
arr.unshift(0);
// pop 删除最后一项
arr.pop();
// shift 删除第一项
arr.shift();
// reverse 数组翻转
var arr2 = arr.reverse();
// join 数组转成字符串
var str = arr.join('-');
// indexOf 数组元素索引
var index = arr.indexOf('a');
// slice 截取（切片）数组，原数组不发生变化
var arr3 = arr.slice(2,5);
// splice 剪接数组，原数组变化，可以实现前后删除效果
var arr4 = arr.splice(1,2,'aa','bb')
// concat 数组合并
var arr5 = [100,200];
var arr6 = arr.concat(arr5);
console.log(arr);
console.log(arr2);
console.log(str);
console.log(index);
console.log(arr3);
console.log(arr4);
console.log(arr6);
九、函数
函数的定义
有三种函数定义的方式：函数声明语句、函数定义表达式、Function构造函数
-
函数声明语句
function 函数名([参数列表]) {
} -
函数定义表达式
var 变量名 = function([参数列表]) {
} -
Function构造函数
var 变量名 = new Function(‘a’,‘b’,‘return (a+b)’);
注：
1.如果使用函数声明语句这种方式声明函数，会具有函数名提升的效果。
2.JS中方法没有重载，如果出现同名方法则覆盖。
/* 函数的定义 */
// 1. 函数声明语句
function test() {
console.log("函数声明语句...");
}
test(); // 调用函数
function test2(a) {
console.log(a);
}
test2(1);
// 2. 函数定义表达式
var test3 = function(){
console.log("函数定义表达式...");
}
test3();
var test4 = function(a,b) {
console.log(a,b);
}
test4(2,20);
// Function构造函数
var test5 = new Function('a','b','c','return (a+b);');
var num = test5(1,2,3);
console.log(num);
函数的参数
实参可以省略，那么对应形参为undefined
若函数形参同名（一般不会这么干）：在使用时以最后一个值为准。
可以给参数默认值：当参数为特殊值时，可以赋予默认值。
参数为值传递，传递副本 ；引用传递时传递地址，操作的是同一个对象。
// 实参可以省略，那么对应形参为undefined
function fn(str) {
console.log(str); // undefined
}
fn();
// 若函数形参同名（一般不会这么干）：在使用时以最后一个值为准。
function fn2(a,a) {
console.log(a);
}
fn2(1,2);
// 可以给参数默认值：当参数为特殊值时，可以赋予默认值。
function fn3(a) {
a = a || "a";
return a;
}
var a1 = fn3();
console.log(a1);
var a2 = fn3(100);
console.log(a2);
// 参数为值传递，传递副本 ；引用传递时传递地址，操作的是同一个对象。
// 值传递
var n = 10;
function fn4(num) {
num = 20;
}
fn4(n);
console.log(n);
// 引用传递
var obj = {
uname:"zhangsan",
upwd:"123456"
};
function fn5(o){
o.uname = "lisi"; // 修改对象中的属性值
}
fn5(obj);
console.log(obj);
函数的调用
-
常用调用方式：函数名([参数列表]);
-
函数调用模式
-
对象调用模式
// 函数调用模式 function add(a,b) { return a+b; } var sum = add(10,20); console.log(sum); // 对象调用对象 var ob = { name:"zs", age:18, sex:true, test:function(){ console.log("对象调用对象..."); } }; ob.test();
函数的返回
1. 如果函数有返回值，需要通过return返回
2. 如果函数不需要返回数据时，则无返回值，或者说返回undefinded
3. 如果函数不需要返回值时，使用return，则表示结束方法
作用：
1.返回结果给调用者
2.结束语句
函数的作用域 （在JS中只有函数有作用域）
1. 全局变量与局部变量同名问题
1. 在函数中定义变量时，若没有加var关键字，使用之后自动变为全局变量
if (true) {
var aa = 1;
}
if (true){
console.log(aa);
}
// 1. 全局变量与局部变量同名问题
// 2. 在函数中定义变量时，若没有加var关键字，使用之后自动变为全局变量
var bb = 10; // 全局变量
function abc(b) {
var b = 100; // 局部变量
var bb = 200; // 局部变量 与全局变量bb没有关系，相当于新声明的变量
console.log(bb); // 就近原则
c = 12; // 没有var修饰符，则是全局变量
}
abc(bb);
// console.log(b); // b is not defined
console.log(bb); // 只能获取全局变量
console.log(c);
十、内置对象
String
◦ charAt(idx) 返回指定位置处的字符
◦ indexOf(Chr) 返回指定子字符串的位置，从左到右。找不到返回-1
◦ substr(m,n) 返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。
◦ substring(m,n) 返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。
◦ toLowerCase() 将字符串中的字符全部转化成小写。
◦ toUpperCase() 将字符串中的字符全部转化成大写。
◦ length 属性，不是方法，返回字符串的长度。
Math
◦ Math.random() 随机数
◦ Math.ceil() 向上取整，大于最大整数
◦ Math.floor() 向小取整，小于最小整数String
Date
// 获取日期
◦ getFullYear() 年
◦ getMonth() 月
◦ getDate() 日
◦ getHours() 时
◦ getMinutes() 分
◦ getSeconds() 秒
// 设置日期
◦ setYear()
◦ setMonth()
◦ setDate()
◦ setHours()
◦ setMinutes()
◦ setSeconds()
◦ toLoacaleString() 转换成本地时间字符串
说明：
1. getMonth()：得到的值：0~11（1月~12月）
2. setMonth()：设置值时0~11
3. toLocaleString()：可根据本地时间把 Date 对象转换为字符串，并返回结果。
var str = "1q2w3e4Hr5t";
console.log(str);
console.log(str.charAt(5));
console.log(str.indexOf('w'));
console.log(str.substr(1,4));
console.log(str.substring(1,4));
console.log(str.toLowerCase());
console.log(str.toUpperCase());
console.log(str.length);
console.log(Math.random());
var num1 = 1.4;
console.log(Math.ceil(num1));
console.log(Math.floor(num1));
// 得到日期
var date = new Date();
// 得到年
var year = date.getFullYear();
console.log(year);
十一、对象
一、对象的创建
JS 创建自定义对象，主要通过三种方式：字面量形式创建对象、通过new Object对象创建 、通过Object对象的create方法创建对象。
1. 字面量形式创建对象
var 对象名 = {}; // 空对象
var 对象名 = {
键:值,
键:值,
...
};
2. 通过new Object创建
var 对象名 = new Object(); // 空对象
3. 通过Object对象的create方法创建
var 对象名 = Object.create(null); // 创建空对象
var 对象名 = Object.create(参考对象); // 以参考对象为模板，创建新的对象
赋值：对象名.键 = 值 （如果键存在，则表示修改数据；如果键不存在，则表示添加数据）
/* 对象的创建 */
// 1. 字面量形式创建对象
var obj = {}; // 空对象
obj.uname = "zhangsan"
obj.uage =18;
console.log(obj);
// 非空对象 （键都是字符串，值可以是六种数据类型中任意一种）
var obj2 = {
uname:"zhangsan", // 字符串
uage:18, // 数值
islike:true, // 布尔值
sayHello:function(){ // 函数
console.log("Hello...");
},
cats:['大毛','喵喵'], // 数组
dog:{ // 对象
name:"张二狗",
age:1
}
};
console.log(obj2);
console.log(obj2.uname);
obj2.sayHello(); // 方法调用模式
obj2.uage = 19;
// 2. 通过new Object创建
var obj3 = new Object();
obj3.name="lisa";
console.log(obj3);
// 3. 通过Object对象的create方法创建
var obj4 = Object.create(null);
console.log(obj4.name);
var obj5 = Object.create(obj3);
console.log(obj5.name);
二、对象的序列化和反序列化
// 序列化对象，将对象转为字符串
JSON.stringify(object);
// 反序列化，将一个Json字符串转换为对象。
JSON.parse(jsonStr);
cript type="text/javascript">
var obj = {
uname:"zhangsan", // 字符串
uage:18, // 数值
islike:true, // 布尔值
sayHello:function(){ // 函数
console.log("Hello...");
},
cats:['大毛','喵喵'], // 数组
dog:{ // 对象
name:"张二狗",
age:1
}
};
console.log(obj);
// 序列化对象，将对象转为字符串 JSON.stringify(object);
var str = JSON.stringify(obj);
console.log(str);
// 反序列化，将一个Json字符串转换为对象。JSON.parse(jsonStr);
var obj2 = JSON.parse(str);
console.log(obj2);
三、this
this指的是，调用函数的那个对象。
function test () {
this.x = 1;
console.log(this.x);
}
test(); // 调用者是window对象
console.log(x); // 相当于定义在全局对象上的属性
console.log(this);
// 在对象中使用
var o = {
name : '张三',
age : 20,
sayHello : function () {
console.log(this.name)
console.log(this)
}
}
o.sayHello(); // 调用者是o这个对象
扫一扫
580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
