JavaScript 总结（一）

于 2022-12-09 21:03:28 发布
阅读量79 收藏
点赞数 1
分类专栏： 前端 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60955261/article/details/128259027
版权

NODE: 主要是跟着尚硅谷视频进行学习
JavaScript 学习阶段的总结记录篇（一）

🙌1. 基本语法

输入框

var name = prompt("请输入姓名:");
// 提示框：输入内容，返回值时 String 类型的

输出内容到控制台

console.log("hello");

对话框显示纯文本

alert("我是一个提示文本");

写在网页里

document.write("hello");
document.write("<br>");  // 换行，应该要写html语法

变成int类型的数据

var i = 999;
var j = parseInt(i/100);
// j --> 9

开启计时器

console.time("name");  // 传入一个字符串，作为标识
console.timeEnd("name"); // 传入要结束的标识

Math函数

var i = Math.sqrt(97); // 开平方 
// typeof i --> number

🙌2. 循环结构

// if
if(){}
else if(){}
else{}

//switch
switch(score){
    case 10:
        alert("10");
        break;
    default:
        alert("----");
        break;
}

// for
for(var i = 0; i < 10; i++){}

// while
var b = 10;
while(b){
    alert(b);
    b--;
}

🙌3. 数据类型

🤷‍♀️3.1 基本数据类型

  • String 字符串

  • Number 数值

  • Boolean 布尔值

  • Null 空值

  • Undefined 未定义

  • 基本数据类型都是单一的联系，值与值之间没有任何联系，都是独立的，无法构成一个整体
  • 不是以上五种的都是对象

🤷‍♀️3.2 对象

Object – 对象：

复合的数据类型，可以保存多个属性

😝3.2.1 对象分类

  • 内建对象

由ES标准中定义的对象，如：Math String Number Boolean Function Object

  • 宿主对象

由JS的运行环境提供的对象，比如 BOM DOM （console）

  • 自定义对象

开发人员自定义创建的对象

😝3.2.2 基本操作

😍创建对象 – 添加属性 – 读取属性 – 修改属性 – 删除属性

//🙌创建对象
var obj = new Object(); // new --> 构造函数 --> 专门创建对象

//🙌添加属性
obj.name = "孙悟空";
obj.gender = "男";
obj.age = 18;

//🙌读取对象中的属性
console.log(obj.gender); // 男
console.log(obj.address); // 未定义，返回 undefined

//🙌修改属性
obj.name = "悟空";

//🙌删除属性
delete obj.name;

😍习惯操作

obj["name"] = "xx";
var n = "name";

console.log(obj[name]);
console.log(obj[n]);  // ✨传入变量，常用

😍**in运算符** ：检查一个对象中是否含有指定属性，返回false or true【如果对象中没有，那么就会去原型中找】【原型见下文】

console.log("name" in obj); // true
console.log("add" in obj);  // false

😍引用

变量保存的是对象的内存地址，如果俩个变量指向的是同一个对象，那么俩者一起变化。

var obj2 = new Object();
obj2 = obj;
obj.name = "Tom";
console.log(obj2.name);   // Tom 一起变

😍使用工厂方法创建对象

// 可以创建大量的对象
function createPerson(){
    var obj = new Object();
    obj.name = "孙悟空";
    obj.age = 18;
    obj.gender = "男";
    obj.sayName = function(){
        alert(this.name);
    };
    return obj;
}
var obj1 = createPerson();
var obj2 = createPerson();

function createPerson(name, age, gender){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.gender = gender;
    obj.sayName = function(){
        alert(this.name);
    };
    return obj;
}

var obj1 = createPerson("小红", 18, "女");
var obj2 = createPerson("小兰", 19, "男");

😝3.2.3 对象字面量

对象字面量：直接指定属性

var obj = {
    name:"猪八戒", 
    age:28, 
    gender:"男"，
    test:{name:"沙和尚"}
};
console.log(obj.test); // 沙和尚

// 属性名可以不加引号，一些特殊的名字需要加

🙌4. 函数

函数也是一个对象，可以封装功能，用时调用。

🤷‍♀️4.1 创建函数

😍创建函数对象

// 创建【一般不使用此方式】
var fun = new Function("console.log('hello')");

// 调用
fun();

😍使用函数声明来创建函数

  • 语法：function 函数名字([形参],[]){}

    function fun2(){
    console.log("ss");
    alert("hh");
}
fun2();

😍使用函数表达式

  • 语法： var 函数名 = function([形参],[]){ }

    var fun3 = function(){
    console.log("我是匿名函数中封装的代码块");
};

  • 参数可以是任何数据类型，传入对象、函数都行

🤷‍♀️4.2 调用操作

😍小操作

function sum(a, b){
    console.log(a + b);
    d = a + b;
    return d; // 默认 return undefined;
    alert("xx");  // return 之间的东西都不会变执行了
}
var ans = sum(1, 2);
/*
sum(1,2,3); 多余的形参不会变赋值
sum(1); a = 1, b = undefined
sum("hello", 1); // 不会检查参数类型
*/

😍创方法

obj.sayName = function(){
    console.log(obj.name);
};// 方法
obj.sayName(); // 调用方法

😍枚举对象中的属性

for(var i in obj){
    console.log("属性名： " + i);
    console.log("属性值： " + obj[i]);
}

🤷‍♀️4.3 作用域

注意

使用 var 声明的变量，会在所有代码执行前被声明【声明提前】

  • 全局作用域：

    • 直接编写在 script 标签里面的 JS 代码

    • 在全局作用域中，创建的变量都会作为window 对象的属性保存

      • var b = 20;
console.log(window.b);

  • 函数作用域：

    • 只在函数内有效
    • 在函数中，不使用var 声明的变量都会变成全局变量

🤷‍♀️4.4 构造函数

✨对比：使用工厂方法创建对象

function createPerson(name, age, gender){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.gender = gender;
    obj.sayName = function(){
        alert(this.name);
    };
    return obj;
}
var obj1 = createPerson("小红", 18, "女");
var obj2 = createPerson("小兰", 19, "男");

😍构造函数基本理解

  • 构造函数与普通函数一致，习惯上首字母大写
  • 构造函数需要使用new 关键词来进行调用，可以使用this来引用新建的对象
  • 使用同一个构造函数创建的对象称为一类对象【一个实例】，将一个构造函数称为一个类
function Person(){
    
}
var per = new Person(); // 构造函数 Object
var per = Person(); // 普通调用

​ 😍 基本操作

function Person(name,age){
    this.name = name;
    this.age = age;
    this.sayName = function(){
        alert("hello, 我是: " + this.name);
    };  
}
var obj1 = new Person("小红", 18);
var obj2 = new Person("小兰", 19);
obj2.sayName();  // 有多少个对象就会创建多少个方法

—> 将sayName方法放全局去

// eg1
function Person(name,age){
    this.name = name;
    this.age = age;
    this.sayName = fun();  // 共享一个方法
}
// 局限: 函数定义在全局,	污染了全局作用域的命名空间,也不安全  --> 原型对象
function fun(){
	alert("hello, 我是：" + this.name);
};
var obj1 = new Person("小红", 18);
var obj2 = new Person("小兰", 19);
obj2.sayName();

😍instanceof 检查一个对象是否是一个实例

console.log(obj1 instanceof Person); // true -> false
// 所有的对象都是 Object 的后代

🤷‍♀️4.5 原型对象

  • 原型：prototype
  • 所创建的每一个函数【构造函数】，解析器都会向函数中加一个属性prototype，prototype对应着一个对象，这个对象就是原型对象，可以通过__proto__来访问该属性
  • 原型对象：是一个公共的
  • 我们在创建构造函数时，可以把对象共有的属性和方法添加到原型对象中去
function Per(){
    
}
var p = new Per();
console.log(p.__proto__);
console.log(p.prototype); 
console.log(p.__proto__ == Per.prototype); // true

Per.prototype.a = "123";
console.log(p.a); // 123 --> 自身没有，所以会去原型对象中找
p.a = "222";
console.log(p.a); // 222

​ 以上例子eg1可以改成

function Person(name,age){
    this.name = name;
    this.age = age;
};
// 向原型对象中创建方法
Person.prototype.sayName = function fun(){
    alert("hello, i am :" + this.name);
};
/* 匿名函数：
Person.prototype.sayName = function(){
    alert("hello, i am :" + this.name);
};
*/
var obj1 = new Person("小红", 18);
var obj2 = new Person("小兰", 19);

obj1.sayName();
obj2.sayName();

😍**toString()**

console.log(obj1.toString());
Person.prototype.toString = function(){
    return "我是person";
}
alert(obj1.toString());

😍**hasOwnProperty() 来检查对象自身中是否有该属性**

function Test(){
}
var a = new Test();
Test.prototype.x = 1;
console.log(a.hasOwnProperty("x")); // false
  • 原型也还有原型，直到找到Object的原型结束。

🤷‍♀️4.6 垃圾回收

  • 垃圾回收（GC）：处理程序运行过程中产生的垃圾
  • 把不再使用的对象设置成null，系统会自动进行回收，将其从内存中销毁

🙌5. 数组

  • 数组（Array）：也是一个对象，存储数据，通过索引操作对象
var arr = new Array();
arr[0] = 10;
arr[1] = 33;
arr[2] = 22;
arr[10] = 31;
console.log(arr[1]); // 33
console.log(arr.length); // 11 尽量不要创建非连续的数组
arr.length = 15;// 多出来的为空，如果比原数组长度小，超过的部分会被删去

🤷‍♀️5.1 使用字面量创建数组

var arr = [1, 2, 3, 4];
arr = [[1, 2], [3, 4]];
var obj = new Object();
arr = [function(){alert(1)},1,2,obj];
arr[0]();

🤷‍♀️5.2 方法

var arr = [1, 3, 4];
var result = arr.push(10, 20);  // 末尾加元素, return 数组长度
result = arr.unshift(10, 20); // 开头加元素, return 数组长度
result = pop();  // 删除数组的最后一个元素, 并返回删除的元素
result = arr.shift(); // 删除第一个元素，并返回删除的元素

🤷‍♀️5.3 数组遍历

for(var i = 0; i < arr.length; i++){
	console.log(arr[i]);
}

forEach()：需要一个函数作为参数，只支持IE8以上的浏览器

arr.forEach(function(value, index, arr){
   console.log("value = " + value);
});
// 第一个参数 正在遍历的元素
// 第二个参数 正在遍历的元素的索引
// 第三个参数 正在遍历的对象

🤷‍♀️5.4 数组方法

slice(start.end) ：提取指定区段[start, end) 的元素，不会影响原数组

var result = arr.slice(1, 4);
result = arr.slice(1, -1);

splice(index,num) ：会影响原数组

  • index --> 开始位置的索引
  • num --> 删除的数量
  • 第三个参数极其以后：可以加一些新的元素
  • 返回值：返回删除的元素
var result = arr.splice(1, 2,"11","22","33");

arr.concat(arr2,arr3)：连接多个数组，返回新数组，不会对原数组有影响

arr.join()：把原数组转化成一个字符串，不会影响原数组，返回转化后的字符串，默认以","逗号连接，也可以自定义如:arr.join("-")

arr.reverse()：反转原数组，会影响原数组

var arr = ["孙悟空", "猪八戒", "沙和尚"]
var arr2 = ["白骨精"]
var result = arr.concat(arr2);
result = arr.join(); 
result = arr.join("-"); 
result = arr.reverse();

arr.sort()：对数组进行排序，会影响原数组，会根据Unicode排序，对数字进行排序也是一样，所以我们可以自定义规则进行排序

arr = ['a','b','d','c']
arr.sort();
alert(arr)

arr = [1,9,10,5,1,8]
arr.sort(function(a,b){ // a 在 b 前面
    return a - b; // 升序排序
    // if(a > b){
    //     return 1;
    // }else if(a < b){
    //     return -1;
    // }else{
    //     return 0;
    // }
    // return >0 元素交换位置  <=0 不变
});

var arr = ["孙悟空", "猪八戒", "沙和尚"]
var arr2 = ["白骨精"]
var result = arr.concat(arr2);
result = arr.join(); 
result = arr.join("-"); 
result = arr.reverse();

arr.sort()：对数组进行排序，会影响原数组，会根据Unicode排序，对数字进行排序也是一样，所以我们可以自定义规则进行排序

arr = ['a','b','d','c']
arr.sort();
alert(arr)

arr = [1,9,10,5,1,8]
arr.sort(function(a,b){ // a 在 b 前面
    return a - b; // 升序排序
    // if(a > b){
    //     return 1;
    // }else if(a < b){
    //     return -1;
    // }else{
    //     return 0;
    // }
    // return >0 元素交换位置  <=0 不变
});
CWisdomJ
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值