一、JavaScript基本使用
引用JS方法
标签引用
在HTML中在script标签中就可以编写JavaScript代码,
<script>
alert("Hello,World!");
</script>
文件引用
在HTML文件中使用script标签,设置src属性引用一个单独的js文件,
<script src="main.js"></script>
打印输出方法
页面输出
使用JavaScript向页面输出一句话
<script>
document.write("Hello,World!");
</script>
控制台输出
使用JavaScript向控制台输出一句话
<script>
console.log("输出一条日志");//最常用
console.info("输出一条信息");
console.warn("输出一条警告");
console.error("输出一条错误");
</script>
弹出窗口输出
使用JavaScript向弹出窗口输出一句话
<script>
alert("Hello,World!");
</script>
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
注释
<script>
// 这是注释内容
console.log("Hello,World!");
/**
* 这是注释内容
*/
</script>
二、JavaScript基础语法
typeof运算符
返回一个变量的数据类型
console.log(typeof 123);
console.log(typeof "Hello,World!");
console.log(typeof true);
console.log(typeof undefined);
console.log(typeof null);
运行结果:
number
string
boolen
undefined
object
转义字符
转换为String类型
三种方式:toString()、String()、 拼串
方式一:调用被转换数据类型的toString()方法,该方法不会影响到原变量,它会将转换的结果返回,但是注意:null和undefined这两个值没有toString()方法,如果调用它们的方法,会报错。
var a = 123;
a = a.toString();
console.log(a);
console.log(typeof a);
方式二:调用String()函数,并将被转换的数据作为参数传递给函数,使用String()函数做强制类型转换时,对于Number和Boolean实际上就是调用的toString()方法,但是对于null和undefined,就不会调用toString()方法,它会将 null 直接转换为 “null”,将 undefined 直接转换为 “undefined”。
var a = 123;
a = String(a);
console.log(a);
console.log(typeof a);
var b = undefined;
b = String(b);
console.log(b);
console.log(typeof b);
var c = null;
c = String(c);
console.log(c);
console.log(typeof c);
方式三:为任意的数据类型 +“”
var a = 123;
a = a + "";
console.log(a);
console.log(typeof a);
转换为Number类型
Number()、parseInt() 和parseFloat()。
Number()可以用来转换任意类型的数据,而后两者只能用于转换字符串。
parseInt()只会将字符串转换为整数,
parseFloat()可以将字符串转换为浮点数。
方式一:使用Number()函数
字符串 --> 数字
- 如果是纯数字的字符串,则直接将其转换为数字
- 如果字符串中有非数字的内容,则转换为NaN
- 如果字符串是一个空串或者是一个全是空格的字符串,则转换为0
布尔 --> 数字
- true 转成 1
- false 转成 0
null --> 数字
- null 转成 0
undefined --> 数字
- undefined 转成 NaN
方式二:这种方式专门用来对付字符串,parseInt() 把一个字符串转换为一个整数
var a = "123";
a = parseInt(a);
console.log(a);
console.log(typeof a);
方式三:这种方式专门用来对付字符串,parseFloat() 把一个字符串转换为一个浮点数
var a = "123.456";
a = parseFloat(a);
console.log(a);
console.log(typeof a);
对象使用
创建对象
var person = new Object();
person.name = "孙悟空";
person.age = 18;
console.log(person);
或者
var person = {
name: "孙悟空",
age: 18
};
console.log(person);
访问属性
var person = new Object();
person.name = "孙悟空";
person.age = 18;
console.log(person);
delete person.name
console.log(person);
遍历对象
var person = {
name: "zhangsan",
age: 18
}
for (var personKey in person) {
var personVal = person[personKey];
console.log(personKey + ":" + personVal);
}
简单来说栈内存用来保存变量和基本类型,堆内存是用来保存对象。
函数
基本使用:两数之和
// 函数声明
var sum = function (num1, num2) {
var result = num1 + num2;
console.log("num1 + num2 = " + result);
}
// 函数调用
sum(10, 20);
return:
function sum(num1, num2) {
return num1 + num2;
}
var result = sum(10, 20);
console.log(result);
示例;
// 使用工厂模式创建对象
function createPerson(name, age) {
// 创建新的对象
var obj = new Object();
// 设置对象属性
obj.name = name;
obj.age = age;
// 设置对象方法
obj.sayName = function () {
console.log(this.name);
};
//返回新的对象
return obj;
}
var person1 = createPerson("孙悟空", 18);
var person2 = createPerson("猪八戒", 19);
var person3 = createPerson("沙和尚", 20);
console.log(person1);
console.log(person2);
console.log(person3);
构造函数创建对象
普通函数是直接调用,而构造函数需要使用new关键字来调用。
// 使用构造函数来创建对象
function Person(name, age) {
// 设置对象的属性
this.name = name;
this.age = age;
// 设置对象的方法
this.sayName = function () {
console.log(this.name);
};
}
var person1 = new Person("孙悟空", 18);
var person2 = new Person("猪八戒", 19);
var person3 = new Person("沙和尚", 20);
console.log(person1);
console.log(person2);
console.log(person3);
}
原型
// 使用构造函数来创建对象
function Person(name, age) {
// 设置对象的属性
this.name = name;
this.age = age;
}
// 在Person类的原型对象中添加方法
Person.prototype.sayName = function() {
console.log(this.name);
};
var person1 = new Person("孙悟空", 18);
var person2 = new Person("猪八戒", 19);
var person3 = new Person("沙和尚", 20);
person1.sayName();
person2.sayName();
person3.sayName();
组合继承
子类引用指向父类对象,继承父类型的原型属性和方法
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.setName = function (name) {
this.name = name;
};
function Student(name, age, price) {
Person.call(this, name, age); // 为了得到父类型的实例属性和方法
this.price = price; // 添加子类型私有的属性
}
Student.prototype = new Person(); // 子类引用指向父类对象,为了得到父类型的原型属性和方法
Student.prototype.constructor = Student; // 修正constructor属性指向
Student.prototype.setPrice = function (price) { // 添加子类型私有的方法
this.price = price;
};
var s = new Student("孙悟空", 24, 15000);
console.log(s.name, s.age, s.price);
s.setName("猪八戒");
s.setPrice(16000);
console.log(s.name, s.age, s.price);
字符串常用属性、方法
常用属性
属性 | 描述 |
---|---|
constructor | 返回创建字符串属性的函数 |
length | 返回字符串的长度 |
prototype | 允许您向对象添加属性和方法 |
常用方法
JSON数据类型
JSON 字符串:双引号包围
{"name": "John"}
JSON 数字:数字必须是整数或浮点数
{"age": 30}
JSON 数组
{
"employees": ["Bill", "Steve", "David"]
}
JSON 布尔
{"sale": true}
JSON字符串转JS对象
JSON.parse():可以将以JSON字符串转换为JS对象,它需要一个JSON字符串作为参数,会将该字符串转换为JS对象并返回
var jsonStr = '{"name":"张三","age":18,"gender":"男"}';
var obj = JSON.parse(jsonStr);
console.log(obj);
JS对象转JSON字符串
JSON.stringify():可以将一个JS对象转换为JSON字符串,需要一个js对象作为参数,会返回一个JSON字符串
var obj = {name: "张三", age: 28, gender: "男"};
var jsonStr = JSON.stringify(obj);
console.log(jsonStr);
迭代器使用
//声明一个对象
const banji = {
name: "五班",
stus: [
"张三",
"李四",
"王五",
"小六"
],
[Symbol.iterator]() {
//索引变量
let index = 0;
let _this = this;
return {
next: function () {
if (index < _this.stus.length) {
const result = {value: _this.stus[index], done: false};
//下标自增
index++;
//返回结果
return result;
} else {
return {value: undefined, done: true};
}
}
};
}
}
//遍历这个对象
for (let v of banji) {
console.log(v);
}
常用数组方法
堆栈方法
栈中项的插入(叫做推入)和移除(叫做弹出),只发生在一个位置——栈的顶部。
ECMAScript 为数组专门提供了 push() 和 pop() 方法,以便实现类似栈的行为。
var colors = []; // 创建一个数组
var count = colors.push('red', 'green'); // 末尾推入两项
console.log(count); //2
colors.push('black'); // 末尾推入另一项
console.log(colors); //3
var item = colors.pop(); // 末尾弹出最后一项
console.log(item); //'black'
console.log(colors); //2
队列方法
push() 是向数组末端添加项
shift() 数组首部移除一项
unshift() 方法。它能在数组前端添加任意个项并返回新数组的长度。
var colors = []; // 创建一个数组
var count = colors.push('red', 'green'); // 末尾推入两项
console.log(count); //2
colors.push('black'); // 末尾推入另一项
console.log(colors); //3
var item = colors.pop(); // 末尾弹出最后一项
console.log(item); //'black'
console.log(colors); //2
反转数组
var values = [1, 2, 3, 4, 5];
values.reverse();
console.log(values); //5,4,3,2,1
分片方法
slice()
- 只有一个参数:返回从该参数指定位置开始到当前数组末尾的所有项。
- 如果有两个参数:该方法返回起始和结束位置之间的项,但不包括结束位置的项。
var colors1 = ['red', 'green', 'blue', 'yellow', 'purple'];
var colors2 = colors1.slice(1);
var colors3 = colors1.slice(2, 4);
var colors4 = colors1.slice(2, 2);//结果是什么?
console.log(colors1); //[ 'red', 'green', 'blue', 'yellow', 'purple' ]
console.log(colors2); //[ 'green', 'blue', 'yellow', 'purple' ]
console.log(colors3); //[ 'blue', 'yellow' ]
splice方法
- 删除:可以删除任意数量的项,只需指定 2 个参数:要删除的第一项的位置和要删除的项数。 例如, splice(0,2)
会删除数组中的前两项。 - 插入:可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置、0(要删除的项数)
和要插入的项。如果要插入多个项,可以再传入第四、第五,以至任意多个项。例如, splice(2,0,‘red’,‘green’)
会从当前数组的位置 2 开始插入字符串 ‘red’ 和 ‘green’ - 替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起
始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如, splice (2,1,‘red’,‘green’)
会删除当前数组位置 2 的项,然后再从位置 2 开始插入字符串 ‘red’ 和 ‘green’
var colors = ['red', 'green', 'blue'];
var removed = colors.splice(0,1); // 删除第一项
console.log(colors); // green,blue
console.log(removed); // red,返回的数组中只包含一项
removed = colors.splice(1, 0, 'yellow', 'orange'); // 从位置 1 开始插入两项
console.log(colors); // green,yellow,orange,blue
console.log(removed); // 返回的是一个空数组
removed = colors.splice(1, 1, 'red', 'purple'); // 插入两项,删除一项
console.log(colors); // green,red,purple,orange,blue
console.log(removed); // yellow,返回的数组中只包含一项