JS补充 - leileigwl

1.数组#

数组的常用方法#

1. map#

遍历数组。

1
var list = ["a", "b", "c", "d", "e"];
2
list.map(function (value, index) {
3
    console.log("第" + (index + 1) + "个元素是" + value);
4
});

2. push#

在结尾追加元素。

1
var list = ["a", "b", "c", "d", "e"];
2
list.push("f");
3
console.log(list);

3. sort#

排序。

数值：从小到大排序。字符串：按首字母从 a~z 来排序。

1
var list = [1, 3, 6, 5, 2];
2
list.sort();
3
console.log(list);

4. filter#

过滤器。newList = list.filter(function (item) {}的item是数组的每个元素

例子 - 将数组中大于等于 3 的元素放到新的数组

1
var list = [1, 3, 6, 5, 2];
2
var newList = list.filter(function (item) {
3
    if (item >= 3) {
4
        return item;
5
    }
6
});
7
console.log(newList);

5. join#

连接数组。

不加参数时，默认加逗号。

1
var list = ["a", "b", "c"];
2
var str = list.join();
3
console.log(str);

实现 abc，在 join 里面加参数，空字符串可以设成空的连接符

1
var str = list.join("");
2
console.log(str);

实现 a+b+c

1
var str = list.join("+");
2
console.log(str);

6.字符串split 方法#

split 是字符串的拆分方法。

split 不设参数时，默认生成一个数组。

1
var str = "banana";
2
var list = str.split();
3
console.log(list);

空字符串会拆分字符串

1
var list = str.split("");
2
console.log(list);

按字符来拆分

1
var list = str.split("n");
2
console.log(list);

例子 - 把日期 “2021-8-15” 按 ”-” 来拆分

1
var str = "2021-8-15";
2
var list = str.split("-");
3
console.log(list);

7.结合数组与对象#

1
var list = [
2
    { name: "小明", age: 2, sex: "男" },
3
    { name: "小红", age: 2, sex: "女" },
4
    { name: "小亮", age: 2, sex: "男" },
5
];

获取数据：list[0].name

1
console.log(list[0].age);
2
console.log(list[0].name);

例子 - 找出所有男同学，放入一个新的数组。

方法 1 - 数组 filter 过滤器

1
var list = [
2
    { name: "小明", age: 2, sex: "男" },
3
    { name: "小红", age: 2, sex: "女" },
4
    { name: "小亮", age: 2, sex: "男" },
5
];
6
var newList = list.filter(function (item) {
7
    if (item.sex === "男") {
8
        return item;
9
    }
10
});
11
console.log(newList);

方法 2 - 数组 push 添加

1
var list = [
2
    { name: "小明", age: 2, sex: "男" },
3
    { name: "小红", age: 2, sex: "女" },
4
    { name: "小亮", age: 2, sex: "男" },
5
];
6
var newList = [];
7
for (var i = 0; i < list.length; i++) {
8
    if (list[i].sex === "男") {
9
        newList.push(list[i]);
10
    }
11
}
12
console.log(newList);

2.ES6#

模板字符串#

反引号 `

支持换行。

1
let str = `hello
2
world`;
3
console.log(str);

支持嵌入变量。

${}

连接字符串

1
let year = "2020";
2
let month = "10";
3
let date = "10";
4
let result = `${year}年${month}月${date}日`;
5
console.log(result);

解构赋值#

数组的解构赋值。

[n,m]

1
let [n, m] = [10, 20];
2
console.log(n);
3
console.log(m);

例子 - 交换。让 n=20,m=10。

定义一个临时变量，先把 n 放到 temp 里，再把 m 赋值给 n,最后再把 temp 赋值给 n。

方法一

1
let n = 10;
2
let m = 20;
3
let temp;
4
temp = n;
5
n = m;
6
m = temp;
7
console.log(n);
8
console.log(m);

方法二（解构赋值）

1
let n = 10;
2
let m = 20;
3
[n, m] = [m, n];
4
console.log(n);
5
console.log(m);

对象的结构赋值（常用）。

1
let { name, age } = { name: "xiaoming", age: 10 };
2
console.log(name);
3
console.log(age);

1
let xm = { name: "xiaoming", age: 10 };
2
function getName({ name }) {
3
    return name;
4
}
5
let result = getName(xm);
6
console.log(result);

通过解构赋值传递参数。

3.函数#

1.闭包#

闭包函数：声明在一个函数中的函数，叫做闭包函数。

闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回之后。

闭包的特性：内部函数未执行完，外部函数即使执行完成，外部函数中的变量也不会被销毁。

自己总结:在不需要展示内部变量的情况下，调用到内部函数

1
function fun1() {
2
    function fun2() {
3
        console.log("I'm fun2");
4
    }
5
    return fun2;
6
}
7
const f = fun1();

利用闭包实现了代码的封装。

1
function fun1() {
2
    let n = 10;
3
    let m = 20;
4
    function fun2() {
5
        return n + m;
6
    }
7
    return fun2;
8
}
9
const f = fun1();
10
const result = f();
11
console.log(result);

代码封装#

ES5 的一个模块化的语法。

1
const module = (function () {
2
    let a = 10;
3
    let b = 20;
4
    function add() {
5
        return a + b;
6
    }
7
    return add;
8
})();

2.箭头函数#

作用：简化写法。

1
const add = (x) => {
2
    return x * x;
3
};
4
const add = (x) => x * x;

1
const fun = function (x) {
2
    return x * x;
3
};
4

5
const fun = (x) => {
6
    return x * x;
7
};
8

9
const fun = (x) => x * x;

例子 - 每秒输出一次名字#

1
const cat = {
2
    name: "miaomiao",
3
    sayName() {
4
        setInterval(() => {
5
            console.log(this.name);
6
        }, 1000);
7
    },
8
};
9
cat.sayName();

使用 function 定义的函数， this 取决于调用的函数。

使用箭头函数， this 取决于函数定义的位置。

箭头函数和普通函数的this 指向不同。

普通函数指向的是调用该函数的对象。

箭头函数：在哪里定义，this 就指向谁。

4.面向对象#

ES5 构造函数#

构造函数的函数名，首字母大写

构造函数是用来创建对象用的。

function Dog(){}

1
function Dog(name, age) {
2
    this.name = name;
3
    this.age = age;
4
}
5
var dog = new Dog("旺柴", 2);
6
console.log(dog.name);

原型对象#

通过设置构造函数的prototype属性，可以扩展构造函数生成的对象。

通过原型对象，为构造函数生成的对象赋予新的方法。

Dog.prototype.sayName = function () {};

1
function Dog(name, age) {
2
    this.name = name;
3
    this.age = age;
4
}
5
Dog.prototype.sayName = function () {
6
    console.log(`我的名字是${this.name}`);
7
};
8
var dog = new Dog("旺柴", 2);
9
var bigDog = new Dog("二哈", 3);
10
dog.sayName();
11
bigDog.sayName();

原型链（继承）#

Dog.prototype = new Animal()

1
function Animal(name) {
2
    this.name = name;
3
}
4
Animal.prototype.sayName = function () {
5
    console.log(`你好，我是${this.name}`);
6
};
7
Animal.prototype.sayHello = function () {
8
    console.log("hello");
9
};
10

11
function Dog(name) {
12
    this.name = name;
13
}
14
Dog.prototype = new Animal();
15

16
var dog = new Dog("旺柴");
17
dog.sayName();
18
dog.sayHello();

ES6 面向对象语法#

Class 关键字#

constructor(ES6 的构造函数)

1
class Dog {
2

3
    constructor(name, age) {
4
        this.name = name;
5
        this.age = age;
6
    }
7
    sayName() {
8
        console.log(`我是${this.name}`);
9
    }
10
}
11
let dog = new Dog("旺柴", 2);
12
dog.sayName();

继承#

extends关键字

super

1
class Animal {
2
    constructor(name) {
3
        this.name = name;
4
    }
5
    sayName() {
6
        console.log(`我是${this.name}`);
7
    }
8
}
9
class Dog extends Animal {
10
    constructor(name, age) {
11
        super(name);
12
        this.age = age;
13
    }
14
}
15
let dog = new Dog("旺柴", 2);
16
dog.sayName();
17
console.log(dog.age);