JavaScript学习笔记

JavaScript

ES5大多数都支持

ES6主流支持得好

本课基于ES6

最大优点：可以再浏览器中直接执行

//helloworld
console.log("hello world");

document.body.innerHTML = "hello world"

一 语法

1 基本数据类型与类型转换

1.1 基本数据类型

1.只有一种类型的数字，浮点数

2.没有单独的char类型，单引号或双引号，默认都是字符串

注：单引号中加单引号要转义\’

3.获取一个类型typeof

4.两个空值

​ undefined：访问一个没有赋值过的变量（属性），会返回undefined

typeof undefined->“undefined”

​ null：通常用于强调，这里本应该是一个对象，但是这个对象还不存在

typeof null->“object”

1.2 类型转换

1.字符串与别的类型相加会变成字符串

1+“1”->11

2.+可以用于字符串转为数字

+“1”->1//此处1为数字

3.NaN表示运算出错时候的情况，意思为：不是一个数字

typeof NaN ->number

4.不建议使用==，会发生类型转换

​ 最好使用=或!，不会发生类型转换

5.false值

​ 被认为是假的的值有

• false
• 0
• ’ ’
• undefined
• null
• NaN

2 变量

1.使用let、const声明变量，不用var

2.变量名要合法

3.表达式

4.变量不能重复声明

5.let变量可以修改，const变量不能修改(只读)

6.let变量的类型可以随意修改

7.empty

​ let empty

​ console.log(empty)->undefined

8.作用域

​ 块级作用域，用{}

​ 内部优先级高，会屏蔽掉外部同名的变量，同时内部的变量不会影响到外部的变量

3 函数

1.function声明函数

2.没有返回值会打印undefined

3.容错性高，传入的参数可以多可以少

​ 少就undefined，多就取不到

4.函数作用于包括参数和块级作用域，会屏蔽内外

5.先调用后声明也可以->定义提升

6.变量就没有定义提升

7.箭头函数

//以下情况等价

const minius1 = (a, b) => {
    return a - b;
}；
const minius1 = function (a, b){
    return a - b;
}；
//函数体是一个表达式，就可以直接返回，省略大括号和return
const minius1 = (a, b) => a - b;
//函数体是一个参数，可以省略小括号
const returnSelf = x => x;

8.函数作为参数

function add(a,b){
	return a + b;
};

function binaryOperator(operand1,operand2,func){
    const res = func(operand1,operand2);
    console.log(res);
    return res;
}

binaryOperator(2, 3, add);
binaryOperator(2, 5, (a, b) => a / b);
binaryOperator(2, 5, (a, b) => a * b);

//函数作为返回值
const A = char =>{
    let res = 0;
    return num => {
        return res;
    }
}

函数使用时，使用定义的

4 对象

对象是属性property的集合

属性包含一个名key or name和一个value

1.对象字面值：key

​ 需要是字符串

//对象例子
let folder1 = {
    'size' = 2000,
    'name' = 'folder1',
    'other object' = null
}
//如果是合法的标识符可以省略单引号
let folder1 = {
    size = 2000,
    name = 'folder1',
    'other object' = null//'other object'不是合法的标识符，有空格，要用单引号括起来
}

2.访问属性的方式

console.log(folder1.name);

console.log(folder1['name']);

let sizeKey = 'size';
console.log(folder1[sizeKey]);

console.log(foler1['na' + 'me']);

访问不存在的属性时候，会返回undefined，不会报错

3.可以任意修改属性值

​ 直接赋值即可

4.对象的属性可以任意增加

5.希望属性名是计算出来的，不是固定的

const str = 'variable';
const obj = {
    [str]:'computed key',
    0.1:'number as key',//数字会被转化为字符串
    log:()=> {//对象里面有函数，也叫对象的方法
        console.log('func as value');
    }
}
console.log(obj['0.1']);//不能用.调用

6.更简单的写法

const year = 2022;
const month = 6;
console.log({
    year,//属性名是变量名，值是变量值
    	//不用写year:year,
    month
})

7.遍历所有的对象属性

7.1 Object方法

const student = {
    name:'张三'，
    age:20,
    interests:['跑步'，'看书']，
    teacher：{
        name:'李四'
    }
}
console.log(Object.key(student));

7.2 for in方法

for(const key in student){
    console.log(key,student[key]);
}

8.判断对象是否包含一个属性

console.log(student.classmate === undefined)//错误，可能本身存在一个值为undefined的属性

Object.keys(student);//遍历数组判断

console.log('classmate' in student);//in判断，在就返回true，不在返回false

9.属性删除

delete.student.teacher;

10.对象的引用

const emptyObj1 = {};
const emptyObj2 = {};
//emptyObj1与emptyObj2不相等

const emptyObj3 =  emptyObj1;
//emptyObj3与emptyObj1相等，赋值过来的

emptyObj1 = emptyObj2;//错误，引用不能变。

const标记了，引用是不变的，但是对象的属性是可变的

赋值的是指向关系，而不是内容

参数传入的是值，但是对于对象而言是引用

5 class、this与内置对象

1.基本语法

//声明
class Rectangle {
    constructor(length,width){
    this.length = length;
	this.width = width;
    }
    area(){
        return this.length * this.width;
    }
}

//调用
const rect1 = new Rectangle(20,20);
const rect2 = {
    length:20,
    width:20
}

//注意：area方法可以访问，但是不属于对象本身，但是在in的时候，也是会返回true

​ 普通类Object

​ 数组Array

3.数组中的方法

1. push：数组最后加入新项
2. slice：获取数组中的一部分
3. indexOf：获取数组元素的index
4. join：数组转字符串
5. isArray：判断是否是数组

4.基本类型的包装对象

//声明为一个类
const numObj = new Number(1);
//numObj是一个类

5.数字后面不能加.

2.toFixed(3);//错误，2被认为是浮点数，不能调用方法
(2).toFixed(3);//正确，将2转化成一个对象，然后再加上三位小数