【JavaScript】基础知识总结

一、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，返回的数组中只包含一项