JavaScript 从0到1

TheNorth
117 阅读2分钟

JavaScript

1. 变量

(1) 变量的定义 const 和 let, 其中const 定义的是常量，不可以重复赋值，一般来说数据不可改变, let定义的变量是可以改变的

let num =  123;
alert(num);

(2) JS 中常用的变量类型：

​ 1) String

​ 2) Boolean

​ 3) Numbers

​ 4) object: Array, Undefined, Null

const num_1  = 111;
const num_2  = 1.1; // 在js中Number类型是不分整型和浮点型的

const str_test = "abc"; // String 类型

const bool_test = true;

let array_test = [1,2,3];

let undefined_test = undefined;

console.log("typeof num_1", typeof num_1);

console.log("typeof num_2", typeof num_2);

console.log("typeof str_test", typeof str_test);

console.log("typeof bool_test", typeof bool_test);

console.log("typeof array_test", typeof array_test);

console.log("typeof undefined_test", typeof undefined_test);

(3) 字符串的相关操作

​ 1) 字符串拼接

console.log("num_1 = " + num_1,'and num_2 = ' + num_2);

console.log(`num_1 = ${num_1}, num_2 = ${num_2}`);

console.log("str_test length = " + str_test.length);  // 属性没有括号，方法才有括号

console.log("str_test toLocalUpperCase=",str_test.toLocaleUpperCase())

console.log("str_test substring(0,2)", str_test.substring(0,2))

let new_str = "a b c"

console.log("new_str split",new_str.split(" "))

​

2.数组

（1） 数组的相关操作

const new_array = ['a','b','c']

console.log("new_array[1]",new_array[1])

new_array[2] = "d" // const 定义的数组对象是可以修改的

new_array.push("e") // 在末尾添加元素

new_array.unshift("1") // 在头部添加元素

new_array.pop() //去掉最尾的元素

console.log(new_array)

console.log("Array.isArray(new_array)",Array.isArray(new_array))

console.log("new_array.indexOf('a')",new_array.indexOf('a'))

3.对象

const person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    hobbies: ['music', 'movies', 'sports'],
    address :{
        street: "50 main st",
        city: "Boston",
        state: "NA"
    }
}

console.log('person', person)
console.log('persom.firstName', person['firstName'])
console.log('person.hobbies[0]', person.hobbies[0])
console.log('person.address.street', person.address.street)

const{
    firstName,
    lastName,
    address:
        {city}
} = person; // 直接抓取person对象中的属性值

console.log("firstName=",firstName)

console.log("city=",city)


const todos  = [
    {
        id: 1,
        Name: "Jack"
    },
    {
        id: 2,
        Name: "Tom"
    }
];


console.log("todos",todos)

console.log("todos[1].Name=",todos[1].Name)

//转换成json格式

const todoJson = JSON.stringify(todos)

console.log(todoJson)

4. 循环语句

(1) for 相关语句

for(let i = 0; i < 6; i++){
    console.log(`i=${i}`)
}

(2) while 相关语句

let num = 0

while(num < 6){
    console.log("num = ", num);
    num++
}

(3) for-each的使用

const todos = [
    {
        Id: 1,
        Name: "Jack"
    },{
        Id: 2,
        Name: "Tom"
    },{
        Id: 3,
        Name: "Jerry"
    },
]

todos.forEach(
    function(t){
        console.log("t.Name = ", t.Name)
    }
)

(4) map的使用

//map 返回一个数组
const t = todos.map(
    function(t){
        return t.Id;
    }
)

console.log("t = ", t)

(5) filter 过滤器，过滤满足条件的数据

const tName = todos.filter(
    function(t){
        return t.Name.length > 3;
    }
)

5.判断语句

// if 语句

let num = 1;

if(num == 1){ // == 值判断值是否相等，不判断类型是否相等
    console.log("num = ", num)
}


if(num == '1'){ // == 值判断值是否相等，不判断类型是否相等
    console.log("num = ", num)
}

if(num === 1){ // 不仅要判断值是否相等，类型也需要判断
    console.log("num = ", num)
}


let score = 90

if (score >= 60 && score <= 70){
    console.log("成绩及格了")
}else if(score > 70){
    console.log("优秀")
}else{
    console.log("不及格")
}

6. 逻辑运算

注意：

false: undefined, 0, '',null, false //这些值默认是false
true:除了上述一般来说都是true

（1）与 &&

let score = 60

if (score > 60 && score < 70){
    console.log("良")
}else if(score >= 70){
    console.log("优秀")
}else{
    console.log("不及格")
}

(2) 或 ||

if(age < 0 || age > 200){
    console.log("非法年龄")
}else{
    console.log("age=", age)
}

(3) 三元运算符

const xxx = 9;

const color = xxx > 10 ? 'red' : 'green';

console.log("color = ",color)

(4) switch 语句

// switch 语句

let color = "red"

switch (color){
    case 'red':
        console.log("红色");
        break;
    case 'blue':
        console.log("蓝色");
        break;
    default:
        console.log("未知");
        break;
}

7. 函数

（1）普通函数

注意： 普通函数的首字母是不可以大写的

console.log("function 函数演示")

//普通函数第一个字母是不可以大写的
function add(num_1 = 0, num_2 = 0){
    return num_1 + num_2
}

let res = add(1,2)

console.log("res = ", res)

(2) 箭头函数（相当于匿名函数）

注意： 匿名函数必须有变量接收

// 箭头函数
// 上述函数并不能改造为箭头函数，去掉函数名add才可以
// 匿名函数必须要有变量进行接收

const kniferes = (num_1, num_2) =>{
    return num_1+num_2
}

addres = kniferes(1,2)
console.log(addres)


// 如果箭头函数只有一行，且不是return指令是可以这样编写的

const singleline = () => console.log("123")

singleline()

// 取代return

const addline = (num_1, num_2) => num_1 + num_2
console.log("addline(1,2) = ", addline(1,2))

//只有一个形参，无初始值

const test = num_1 => num_1 + 12;

console.log("test=",test(1))

8. 对象

// 面向对象的基础演示, 只要带上{},就是一个对象

const book_1 = {
    title : "明朝那些事",
    author: "朱元璋",
    year: "2013",
    getSummary: function(){
        return `${this.author} 在 ${this.year} 写了 ${this.title}`
    }
}

console.log(book_1.getSummary())

console.log("Object.Keys(book_1)", Object.keys(book_1))

console.log("Object.Values(book_1)", Object.values(book_1))

9. 构造函数

（1）构造函数，相当于其他语言中类的概念

存在的问题： 比如构造函数中存在方法，这个时候会在所有的对象中创建该方法。造成了内存的浪费。

image-20211117213432595

因此，JS为了解决上述问题，推出了原型链的概念

/*
    注意：类是对象的模板，对象是类的实例
    但是ES6之前，js是不存在类的概念的，js不是基于类，而是通过构造函数
*/

/*构造函数
    a. 构造函数的首字母必须大写，用来区分于普通函数
    b. 内部使用的this对象，来指向要生成的实例对象
    c. 使用New来生成对象
*/


function Book(title, author, year){
    this.title = title;
    this.author = author;
    this.year = year;
    this.getSummary = function(){
        return `${this.author} 在 ${this.year} 写了 ${this.title}这篇文章`
    }
}

book_1 = new Book("明朝那些事", "朱元璋","2020")

console.log(book_1.getSummary())

（2）原型链

通过原型链创建构造函数的方法，只有对象使用时，才会创建。

/*
    原型链
*/

function Book(title, author, year){
    this.title = title;
    this.author = author;
    this.year = year
}


Book.prototype.getSummary = function(){
    return `${this.author} 在 ${this.year} 写了 ${this.title}`
}

10. 继承

// 继承

function Book(title, author, year){
    this.title = title
    this.author = author
    this.year = year
}

Book.prototype.getSummary = function(){
    return `${this.author} 在 ${this.year} 写了 ${this.title}这本书。`
}


function Picture(title, author, year, month){
    Book.call(this, title, author, year)
    this.month  = month
}


Picture.prototype = Object.create(Book.prototype)
Picture.prototype.constructor = Picture; // 如果不加上这个语句，默认使用的构造器是Book的构造器

let picture = new Picture("国王排名","Jack","2020","12")

console.log("picture.getSummary()=",picture.getSummary())

11. 创建对象

除了上述的构造函数之外，还可以使用下面的方式创建对象

（1）创建方式1

//创建对象的方法

const bookProtos = {
    getSummary : function(){
        return `${this.author} 在 ${this.year} 写了 ${this.title}这本书。`
    }
}

const book_1 = Object.create(bookProtos)

book_1.author = "朱元璋";
book_1.year = 2020;
book_1.title = "明朝那些事";

console.log("book_1.getSummary()",book_1.getSummary())

12. 类

//类

class Book{
    constructor(title, author, year){
        this.title = title
        this.author = author
        this.year = year
    }

    getSummary(){
        return `${this.author}在${this.year}写了${this.title}这本书`
    };
    //静态方法
    static topBookStore(){
        return 'Barnes & Noble';
    }
}



const book_1 = new Book("明朝那些事","朱元璋","2020")

console.log("book_1.getSummary()=", book_1.getSummary())

13.子类

class Magazine extends Book{
    constructor(title, author, year, month){
        super(title, author, year)
        this.month = month
    }
}

const mag = new Magazine("明朝那些事","朱元璋","2020", "12")

console.log("mag.getSummary()=", mag.getSummary())
avatar
文章
阅读
粉丝