JS进阶
数组
数组可以存放任意类型的元素
let arr = ['小胖',12,true,28.9];
console.log(arr, arr.length);
var arr = [1, 2, ['xiaopang', '小胖']];
console.log(arr[2][1]);
函数
// 函数声明
function 函数名(x, y) {
//函数体代码
return z;
}
// 调用函数
函数名(x, y);
// 函数表达式
var myFunction = function(a, b) {
return a + b;
};
console.log(myFunction(1, 2)); // 输出: 3
类与对象
- 类的定义
class Person {
}
var p = new Person();
console.log(typeof p); // object
- 构造函数
constructor()方法用于传递参数, 返回实例对象.
通过new命令生成对象时自动调用, 若没有, 会自动创建
class Person {
constructor(uname, age) {
this.uname = uname;
this.age = age;
}
}
var stu = new Student('xiaoming', 20);
- 类的方法
class Person {
constructor(uname, age) {
this.uname = uname;
this.age = age;
}
p_sing() {
console.log('唱')
}
}
var kun = new Person('kunkun', 20);
kun.p_sing();
创建对象
class关键字（ES6）
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name}`);
}
}
let person = new Person('Alice', 30);
- 对象字面量（Object Literal）
// 创建一个简单的对象
let person = {
firstName: 'John',
lastName: 'Doe',
age: 30,
sayHello: function() { // sayHello() {
console.log(`Hello, my name is ${this.firstName} ${this.lastName}`);
}
};
// 使用对象的方法
person.sayHello(); // 输出: Hello, my name is John Doe
new关键字和构造函数
// 定义一个构造函数
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
this.displayInfo = function() {
console.log(`${this.year}${this.make} ${this.model}`);
};
}
// 使用构造函数创建对象
let myCar = new Car('Toyota', 'Corolla', 2020);
// 调用对象的方法
myCar.displayInfo(); // 输出: 2020 Toyota Corolla
Object.create()方法
// 定义一个原型对象
let animalProto = {
makeSound: function() {
console.log(`${this.name} makes a sound.`);
}
};
// 使用Object.create()创建对象
let myAnimal = Object.create(animalProto);
myAnimal.name = 'Dog';
// 调用对象的方法
myAnimal.makeSound(); // 输出: Dog makes a sound.
- 工厂函数
function createPerson(name, age) {
return {
name: name,
age: age,
sayHello: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
}
let person = createPerson('Alice', 30);
- 原型模式
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name}`);
};
let person = new Person('Alice', 30);
- 模块模式
let person = (function() {
let name = 'Alice';
let age = 30;
return {
getName: function() {
return name;
},
getAge: function() {
return age;
}
};
})();
Object.assign()方法
let parent = {
sayHello: function() {
console.log('Hello');
}
};
let child = Object.assign({}, parent, { name: 'Alice' });
内置对象
| 方法名 |
功能 |
| Math.floor() |
向下取整 |
| Math.max()/Math.min() |
求最大和最小值 |
| Math.random() |
获取范围在[0,1)内的随机值 |
| 方法名 |
功能 |
| getFullYear() |
获取年份 |
| getMonth() |
获取月份(0~11) |
| getDate() |
获取日期(1~31) |
| getDay() |
获取星期(0~6) |
| getHours() |
获取小时 |
| getMinutes() |
获取分钟 |
| getSeconds() |
获取秒 |
| 方法名 |
功能 |
| chatAt() |
返回在指定位置的字符 |
| charCodeAt() |
返回在指定位置字符的unicode编码(ASCII编码) |
| concat() |
连接字符串 |
| indexOf() |
从字符串的开头向后搜索字符串 |
| lastIndexOf() |
从字符串的末尾向前搜索字符串 |
| match() |
找到一个或多个正则表达式的匹配 |
| replace() |
替换与正则表达式匹配的字串 |
| search() |
检索与正则表达式相匹配的值 |
| slice() |
提取字符串的片段，并在新的字符串中返回被提取的部分 |
| split() |
把字符串分割成字符串数组 |
| substr() |
从起始索引号提取字符串中指定数目的字符 |
| substring() |
截取字符串中两个指定的索引号之间的字符 |
| toLowerCase() |
将字符串转换为小写 |
| toUpperCase() |
将字符串转换为大写 |
| toString() |
返回字符串本身 |
| valueOf() |
返回某个对象的原始值 |
| trim() |
删除前置及后缀的所有空格 |
| 方法名 |
功能 |
返回值 |
是否改变原数组 |
| push() |
在末尾添加元素 |
新数组的长度 |
Y |
| unshift() |
在开头添加元素 |
新数组的长度 |
Y |
| pop() |
删除最后一个元素 |
删除的元素的值 |
Y |
| shift() |
移除第一项 |
删除的元素的值 |
Y |
| reverse() |
反转数组中的元素 |
反转后数组 |
Y |
| sort() |
以字母顺序(字符串Unicode码点)对数组进行排序 |
新数组 |
Y |
| splice() |
在指定位置删除指定个数元素再增加任意个数元素 |
返回删除的数据所组成的数组 |
Y |
| fill() |
用给定值填充一个数组 |
新数组 |
Y |
| concat() |
通过合并（连接）现有数组来创建一个新数组 |
合并之后的数组 |
N |
| join() |
用特定的字符,将数组拼接形成字符串 (默认",") |
拼接后的字符串 |
N |
| slice() |
裁切指定位置的数组 |
被裁切的元素形成的数组 |
N |
| toString() |
将数组转换为字符串 |
字符串 |
N |
| valueOf() |
查询数组原始值 |
数组的原始值 |
N |
| indexOf() |
查询某个元素在数组中第一次出现的位置 |
存在该元素,返回下标,不存在 返回 -1 |
N |
| lastIndexOf() |
反向查询数组某个元素在数组中第一次出现的位置 |
存在该元素,返回下标,不存在 返回 -1 |
N |
| forEach() |
(迭代) 遍历数组,每次循环中执行传入的回调函数 |
无/(undefined) |
N |
| map() |
(迭代) 遍历数组, 每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组 |
有/自定义 |
N |
| filter() |
(迭代) 遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,把满足条件的元素筛选出来放到新数组中 |
满足条件的元素组成的新数组 |
N |
| every() |
(迭代) 判断数组中所有的元素是否满足某个条件 |
全都满足返回true 只要有一个不满足 返回false |
N |
| some() |
(迭代) 判断数组中是否存在,满足某个条件的元素 |
只要有一个元素满足条件就返回true,都不满足返回false |
N |
| reduce() |
(归并)遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中 |
最终操作的结果 |
N |
| reduceRight() |
(归并)用法同reduce,只不过是从右向左 |
同reduce |
N |
| includes() |
判断一个数组是否包含一个指定的值. |
是返回 true，否则false |
N |
| Array.from() |
接收伪数组,返回对应的真数组 |
对应的真数组 |
N |
| find() |
遍历数组,执行回调函数,回调函数执行一个条件,返回满足条件的第一个元素,不存在返回undefined |
满足条件第一个元素/否则返回undefined |
N |
| findIndex() |
遍历数组,执行回调函数,回调函数接受一个条件,返回满足条件的第一个元素下标,不存在返回-1 |
满足条件第一个元素下标,不存在=>-1 |
N |
| flat() |
用于将嵌套的数组“拉平”，变成一维的数组。 |
返回一个新数组 |
N |
| flatMap() |
flat()和map()的组合版 , 先通过map()返回一个新数组,再将数组拉平( 只能拉平一次 ) |
返回新数组 |
N |
| 方法名 |
功能 |
返回值 |
| JSON.parse(str) |
将JSON字符串转换成JS对象 |
JS对象 |
| JSON.stringify(obj, null, 2) |
将 JS 对象转换为 JSON 字符串 |
JSON字符串 |
