JavaScript 基本用法
JavaScript 引入方式
行内 JS
-
将 JS 代码写在 HTML 标签上
<button type="button" onclick="alert('Hello')">按钮</button>
内部 JS
-
写在 HTML 页面中的 script 标签中
<script type="text/javascript">
alert("你好");
</script>
外部 JS
-
创建 JS 文件，通过 script 标签引入 JS 文件
<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
JS 放置位置
-
放在 head 标签中
-
放在 body 中
-
放在 body 标签后（推荐）
JS 代码从上往下依次执行，最好等到 HTML 元素执行完毕后再执行 JS 代码
常用函数
-
onclick：点击事件，当点击元素时触发 -
alert("内容")：弹出层 -
console.log("")：打印内容在控制台
语句和注释
语句规则
-
JS 代码以行为单位，从上往下一行一行执行
-
语句以分号结尾，一个分号就表示语句的结束
-
如果多个语句写在一行，那每个语句结尾必须加上分号
注释类型
HTML 代码中
<!-- 兼容html风格的注释 -->
JS 代码中
// 单行注释
/*
* 多行注释
*/
标识符和关键字
标识符规则
-
由 Unicode 字母、
_、$、数字、中文组成 -
不能以数字开头
-
不能是关键字和保留字
-
严格区分大小写
标识符规范
-
见名知意
-
驼峰命名或下划线规则
变量
变量声明
// 1. 声明并赋值
var str = "Hello World";
// 2. 先声明再赋值
var str2; // 声明
str2 = "hello"; // 赋值
变量注意点
-
当变量只声明而未赋值时，则变量的值会返回
undefined -
变量要有定义才能使用，若变量未声明就使用，JavaScript 会报错
-
可以在同一条 var 命令中声明多个变量
-
若使用 var 重新声明一个已经存在的变量，是无效的
-
若使用 var 重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值
-
JavaScript 是一种动态类型、弱类型语言，变量的类型没有限制
变量提升
-
JavaScript 引擎先解析代码，获取所有被声明的变量，然后再一行一行地运行
-
所有的变量的声明语句，都会被提升到代码的头部
-
只有用 var 声明的变量，才会变量提升
console.log(uname); // undefined
var uname = "zhangsan";
数据类型
基本数据类型
-
数值（Number）：整数和小数
-
字符串（String）：字符组成的文本
-
布尔值（Boolean）：
true和false -
Undefined：表示"未定义"或不存在
-
Null：表示空缺，应该有一个值但目前为空
引用数据类型
-
对象（object）：各种值组成的集合
-
对象：
{name:"zhangsan",age:"18"} -
数组：
[1,2,3] -
函数：
function test() {}
-
Undefined
出现 Undefined 的情况：
-
声明了变量但未赋值
-
调用函数时，函数有形参但未提供实参
-
函数没有返回值
Null
使用 Null 类型值时注意：
-
使用
typeof操作符测试null返回object字符串 -
undefined派生自null，等值比较返回值是true
布尔类型
-
true或false
数值型
-
所有数字都是以 64 位浮点类型存储的
-
浮点类型最高精度是 17 位，运算时可能不准确
-
在取出数值时会自动将整型的浮点数值转换成整型
字符串
-
使用
' '或" "引起来
类型转换
自动类型转换
函数转换
// parseInt() - 转换为整数
parseInt("123abc"); // 123
parseInt("123.45"); // 123
parseInt("abc"); // NaN
// parseFloat() - 转换为浮点数
parseFloat("123abc"); // 123
parseFloat("123.45"); // 123.45
parseFloat("abc"); // NaN
显式转换
// toString() - 数字转换为字符串
var data = 10;
data.toString();
// toFixed() - 根据小数点后指定位数将数字转为字符串
var data2 = 1.4;
data2.toFixed(0); // 1
var data3 = 1.46;
data3.toFixed(1); // 1.5
// Number() - 强制转换
Number("5.5 "); // 5.5
Number("56 "); // 56
// String() - 任意值转换成字符串
String(null); // "null"
// 最简单的转字符串方式
var flag = true;
flag + ""; // "true"
强制类型转换
Number（），Boolean（），String（），直接加""
全等和相等
比较运算符
var a = 1; // 数值型
var b = '1'; // 字符串
a == b; // true - 相等，比较值是否相等
a === b; // false - 全等，比较值和类型是否相等
ps：switch语句中的case判断是全等比较
数组
数组定义
// 隐式创建
var arr = [值1, 值2, 值3];
// 直接实例化
var arr = new Array(值1, 值2, 值3);
// 创建数组并指定长度
var arr = new Array(size);
数组特点
-
长度可变
-
数组中数据类型任意
-
索引从 0 开始
-
可以使用任意字符当作数组的索引
基本操作
// 获取长度
数组.length;
// 设置长度
数组.length = 新长度;
// 获取元素
数组[下标];
// 设置元素
数组[下标] = 值;
数组遍历
// 1. 普通的for循环遍历
for(var i = 0; i <= 数组.length-1; i++) {
console.log(数组[i]);
}//只能拿到正常索引的数据
// 2. for...in
for(var 下标 in 数组名) {
console.log(数组名[下标]);
}
// 3. forEach
数组名.forEach(function(element, index) {
console.log(element); // 当前元素
console.log(index); // 索引
});
数组方法
常用数组方法
var arr = [1, 2, 'a', 3, 'b'];
arr.push('c'); // 添加元素到最后
arr.unshift(0); // 添加元素到最前
arr.pop(); // 删除最后一项
arr.shift(); // 删除第一项
arr.reverse(); // 数组翻转
arr.join('-'); // 数组转成字符串，元素间用‘-’间隔
arr.indexOf('a'); // 数组元素索引
arr.slice(2, 5); // 截取数组，原数组不发生变化（截取索引从2到5的内容）
arr.splice(1, 2, 'aa', 'bb'); // 剪接数组，原数组变化（1：起始位置；2：几个元素；后面：要换成的元素），返回值为被剪接掉的元素
arr.concat([100, 200]); // 数组合并
函数
函数定义
// 1. 函数声明语句
function 函数名([参数列表]) {
// 函数体
}
// 2. 函数定义表达式
var 变量名 = function([参数列表]) {
// 函数体
}
// 3. Function构造函数
var 变量名 = new Function('a', 'b', 'return (a+b)');
函数注意点
-
使用函数声明语句声明函数，会具有函数名提升的效果
-
JS 中方法没有重载，如果出现同名方法则覆盖
函数的参数
-
实参可以省略，对应形参为
undefined -
若函数形参同名，在使用时以最后一个值为准
-
可以给参数默认值
-
参数为值传递（传递副本）或引用传递（传递地址）
函数的调用
// 常用调用方式
函数名([参数列表]);
// 函数调用模式
function add(a, b) {
return a + b;
}
var sum = add(10, 20);
// 对象调用模式
var ob = {
test: function() {
console.log("对象调用对象...");
}
};
ob.test();
函数的返回
// 有返回值
function add(a, b) {
return a + b;
}
// 无返回值（返回undefined）
function test() {
console.log("无返回值");
}
// 使用return结束方法
function check(flag) {
if (!flag) {
return; // 结束方法
}
console.log("继续执行");
}
函数的作用域
-
全局变量与局部变量同名问题（就近原则）
-
在函数中定义变量时，若没有加 var 关键字，使用之后自动变为全局变量
-
JS中只有函数有作用域
内置对象
String 对象
var str = "1q2w3e4Hr5t";
str.charAt(5); // 返回指定位置处的字符
str.indexOf('w'); // 返回指定子字符串的位置
str.substr(1, 4); // 从m位置开始取n个字符
str.substring(1, 4); // 从m位置开始到n位置结束
str.toLowerCase(); // 全部转化成小写
str.toUpperCase(); // 全部转化成大写
str.length; // 返回字符串的长度
Math 对象
Math.random(); // 随机数
Math.ceil(1.4); // 向上取整
Math.floor(1.4); // 向下取整
Date 对象
var date = new Date();
// 获取日期
date.getFullYear(); // 年
date.getMonth(); // 月 (0~11)
date.getDate(); // 日
date.getHours(); // 时
date.getMinutes(); // 分
date.getSeconds(); // 秒
// 设置日期
date.setYear();
date.setMonth();
date.setDate();
date.setHours();
date.setMinutes();
date.setSeconds();
date.toLocaleString(); // 转换成本地时间字符串
对象
对象的创建
// 1. 字面量形式创建对象
var 对象名 = {}; // 空对象
var 对象名 = {
键: 值,
键: 值,
...
};
// 2. 通过new Object创建
var 对象名 = new Object(); // 空对象
// 3. 通过Object对象的create方法创建
var 对象名 = Object.create(null); // 创建空对象
var 对象名 = Object.create(参考对象); // 以参考对象为模板
对象操作
// 赋值
对象名.键 = 值; // 键存在则修改，不存在则添加
// 示例对象
var obj2 = {
uname: "zhangsan", // 字符串
uage: 18, // 数值
islike: true, // 布尔值
sayHello: function() { // 函数
console.log("Hello...");
},
cats: ['大毛', '喵喵'], // 数组
dog: { // 对象
name: "张二狗",
age: 1
}
};
对象的序列化和反序列化
序列化
// 序列化对象，将对象转为字符串
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 的含义
-
this指的是调用函数的那个对象
this 的使用
// 在函数中使用
function test() {
this.x = 1;
console.log(this.x);
}
test(); // 调用者是window对象
// 在对象中使用
var o = {
name: '张三',
age: 20,
sayHello: function() {
console.log(this.name); // 调用者是o这个对象
console.log(this);
}
}
o.sayHello();
JavaScript 特性总结
弱类型语言特点
-
变量声明不需要指定数据类型
-
变量的类型可以动态改变
-
类型转换相对灵活
函数式编程特性
-
函数是一等公民
-
支持高阶函数
-
支持闭包
面向对象特性
-
基于原型的面向对象
-
支持对象字面量
-
动态添加属性和方法
扫一扫
2538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
