js基础笔记

最新推荐文章于 2024-10-15 14:00:48 发布

last Dances

最新推荐文章于 2024-10-15 14:00:48 发布

阅读量84

点赞数

分类专栏：笔记文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_52307122/article/details/129027051

版权

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一，类型转换

(1) 转换成字符串类型： toString() String() 拼接字符串，使用方法如下

toString()
在这里插入图片描述

String()
在这里插入图片描述

为任意的数据类型 +“”
在这里插入图片描述

(2) 转换为Number类型： Number() parseInt() parseFloat()

(1) Number()
在这里插入图片描述
(2) parseInt(): 将字符串转换为一个整数

(3) parseFloat(): 将一个字符串转换为整数

注意：如果对非String使用parseInt()或parseFloat()，它会先将其转换为String然后在操作

二，逻辑运算符

在这里插入图片描述

三，条件语句

switch … case用法：

案例演示1：根据today的数值，输出今天是星期几。

var today = 1;
switch (today) {
    case 1:
        console.log("星期一");
        break;
    case 2:
        console.log("星期二");
        break;
    case 3:
        console.log("星期三");
        break;
    case 4:
        console.log("星期四");
        break;
    case 5:
        console.log("星期五");
        break;
    case 6:
        console.log("星期六");
        break;
    case 7:
        console.log("星期日");
        break;
    default:
        console.log("输入错误");
}

案例演示2：根据month的数值，输出对应月份的天数，2月默认28天。

var month = 10;
switch (month) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        console.log("31天");
        break;
    case 4:
    case 6:
    case 9:
    case 11:
        console.log("30天");
        break;
    case 2:
        console.log("28天");
        break;
    default:
        console.log("输入错误");
}

四，对象

4.1 对象创建

var person = new Object();
person.name = "孙悟空";
person.age = 18;
console.log(person);  // {name: '孙悟空', age: 18}

delete person.name
console.log(person); // {age: 18}

4.2 遍历对象

枚举对象通过for… in…循环，有几个属性就循环几次

var person = {
    name: "zhangsan",
    age: 18
}

for (var personKey in person) {
    var personVal = person[personKey];
    console.log(personKey + ":" + personVal);
}
// name:zhangsan  
// age:18

五，对象进阶

5.1 使用工厂化模式创建对象

var person1 = {
    name: "孙悟空",
    age: 18,
    sayName: function () {
        console.log(this.name);
    }
};

var person2 = {
    name: "猪八戒",
    age: 19,
    sayName: function () {
        console.log(this.name);
    }
};

var person3 = {
    name: "沙和尚",
    age: 20,
    sayName: function () {
        console.log(this.name);
    }
};

console.log(person1);
console.log(person2);
console.log(person3);

以上代码在数量较少时可以使用，但在数量众多时就没法使用，采用一下方式

// 使用工厂模式创建对象
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);

演化

// 使用工厂模式创建对象
function createPerson(name, age) {
    // 创建新的对象
    var obj = new Object();
    // 设置对象属性
    obj.name = name;
    obj.age = age;
    // 设置对象方法
    obj.sayName = function () {
        console.log(this.name);
    };
    //返回新的对象
    return obj;
}

for (var i = 1; i <= 1000; i++) {
    var person = createPerson("person" + i, 18);
    console.log(person);
}

五，数组及方法

(1) push：给数组的末尾添加一个或者多个元素，并返回新数组的长度

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.push("唐僧", "蜘蛛精", "白骨精", "玉兔精");
console.log(arr); // ['孙悟空', '猪八戒', '沙和尚', '唐僧', '蜘蛛精', '白骨精', '玉兔精']
console.log(result); // 7

(2) pop: 删除数组末尾最后一个元素，返回改删除元素

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.pop();
console.log(arr); //  ['孙悟空', '猪八戒']
console.log(result); // 沙和尚

(3) unshift: 该方法向数组开头添加一个或多个元素，并返回新的数组长度

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.unshift("牛魔王", "二郎神");
console.log(arr); // ['牛魔王', '二郎神', '孙悟空', '猪八戒', '沙和尚']
console.log(result); // 5

(4) shift()：该方法可以删除数组的第一个元素，并将被删除的元素作为返回值返回

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.shift();
console.log(arr); // ['猪八戒', '沙和尚']
console.log(result); // 孙悟空

(5) forEach: 该方法可以用来遍历数组

在这里插入图片描述
forEach两种使用方式：

// 方式一
var arr = ['a', 'b', 'c']
arr.forEach(function(e) {
	console.log(e)
})
// a
// b
// c
// 方式二 
var arr = ["孙悟空", "猪八戒", "沙和尚"];
arr.forEach(function (value, index, obj) {
    console.log(value + " #### " + index + " #### " + obj);
});
// 孙悟空 #### 0 #### 孙悟空,猪八戒,沙和尚
// 猪八戒 #### 1 #### 孙悟空,猪八戒,沙和尚
// 沙和尚 #### 2 #### 孙悟空,猪八戒,沙和尚

(6) slice(): 该方法将截取数组内指定位置的元素，不会影响原数组，而是将截取到的元素封装到一个新数组中返回

参数：

第一个参数：截取开始的位置的索引，包含开始索引
第二个参数：截取结束的位置的索引，不包含结束索引，第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
索引可以传递一个负值，如果传递一个负值，则从后往前计算，-1代表倒数第一个，-2代表倒数第二个。

var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
var result = arr.slice(1, 4);
console.log(result); // ['猪八戒', '沙和尚', '唐僧']
result = arr.slice(3);
console.log(result); // ['唐僧', '白骨精'] 
result = arr.slice(1, -2);
console.log(result); //  ['猪八戒', '沙和尚']

(7) splice()：该方法可以用于删除数组中的指定元素，该方法会影响到原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回

参数：

第一个参数：表示开始位置的索引
第二个参数：表示要删除的元素数量
第三个参数及以后参数：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

var arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"];
var result = arr.splice(3, 2);
console.log(arr); // ['孙悟空', '猪八戒', '沙和尚']
console.log(result); // ['唐僧', '白骨精']
result = arr.splice(1, 0, "牛魔王", "铁扇公主", "红孩儿");
console.log(arr); // ['孙悟空', '牛魔王', '铁扇公主', '红孩儿', '猪八戒', '沙和尚']
console.log(result); // []

(8) concat()：该方法可以连接两个或多个数组，并将新的数组返回，该方法不会对原数组产生影响

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var arr2 = ["白骨精", "玉兔精", "蜘蛛精"];
var arr3 = ["二郎神", "太上老君", "玉皇大帝"];
var result = arr.concat(arr2, arr3, "牛魔王", "铁扇公主");
console.log(result);
// ['孙悟空', '猪八戒', '沙和尚', '白骨精', '玉兔精', '蜘蛛精', '二郎神', '太上老君', '玉皇大帝', '牛魔王', '铁扇公主']

(9) join()：该方法可以将数组转换为一个字符串，该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回，在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符，如果不指定连接符，则默认使用，作为连接符

var arr = ["孙悟空", "猪八戒", "沙和尚"];
var result = arr.join(" ");
console.log(result); // 孙悟空 猪八戒 沙和尚
console.log(typeof result) // string

(10) reverse()：该方法用来反转数组（前边的去后边，后边的去前边），该方法会直接修改原数组

var arr = ["孙悟空", "猪八戒", "沙和尚"];
arr.reverse();
console.log(arr); //  ['沙和尚', '猪八戒', '孙悟空']