JavaScript 自用笔记（三）

原创 于 2023-01-09 21:30:44 发布 · 271 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #开发语言

本文详细介绍了JavaScript中的对象，包括对象的简介、基本操作、属性名和属性值，以及对象的分类。接着讨论了函数，包括函数的简介、参数、返回值、实参和立即执行函数。此外，还深入探讨了对象的属性、全局作用域、函数作用域、this关键字、工厂方法、构造函数以及原型对象。最后，讲解了数组的使用，如数组的创建、基本操作、方法以及去重技巧。

这里写目录标题

二十、对象

 

（一）对象的简介

/*
 * JS中数据类型
 * - String 字符串
 * - Number 数值
 * - Boolean 布尔值
 * - Null 空值
 * - Undefined 未定义
 *    -以上这五种类型属于基本数据类型,以后我们看到的值
 *          只要不是上边的5种,全都是对象
 * - Object 对象
 * 
 * 
 * 基本数据类型都是单一的值"he11o"123 true,
 * 值和值之间没有任何的联系。
 * 
 * 在JS中来表示一个人的信息（name gender age) .
 *   var name ="孙悟空";
 *   var gender ="男";
 *   var age = 18;
 * 如果使用基本数据类型的数据,我们所创建的变量都是独立，不能成为一个整体。
 * 
 * 对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。
 * 
 * 对象的分类：
 *  1.内建对象
 *         - 由ES标准中定义的对象，在任何的ES的实现中都可以使用
 *         - 比如，Math String Number Boolean Function Object...
 * 
 *  2.宿主对象
 *         - 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
 *         - 比如 BOM DOM
 * 
 *  3.自定义对象
 *         - 由开发人员自己创建的对象 
 */

 

（二）对象的基本操作

//创建对象
/*
 * 使用new关键字调用的函数,是构造函数constructor
 *  构造函数是专门用来创建对象的函数
 * 使用typeof检查—个对象时,会返回object
 */
var obj = new Object();

//console.log(typeof obj);

/*
 * 在对象中保存的值称为属性
 * 向对象添加属性
 *   语法：对象，属性名 = 属性值;
 */

//向obj中添加一个name属性
obj.name = "孙悟空";
//向obj添加一个gender属性
obj.gender = "男";
//向obj添加一个age属性
obj.age = 18;

/* 
 * 读取对象中的属性
 *  语法：对象，属性名
 * 
 * 如果读取对象中没有用的属性，不会报错而是会返回undefined
 */

//console.log(obj.gender);
//console.log(obj.hello);

/*
 * 修改对象的属性值
 *   语法：对象，属性名 = 新值 
 */
obj.name = "tom";

/*
 * 删除对象的属性
 *   语法：delete 对象，属性名
 */
delete obj.name;

console.log(obj.age);

 

（三）属性名和属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        
        var obj = new Object();
        /*   
         * 向对象中添加属性
         * 属性名：
         *   - 对象的属性名不强制要求遵守标识符的规范
         *   - 但还是尽量按照标识符的规范来
         */
        obj.name = "孙悟空";
        
        //obj.var = "hello";

        /*
         * 如果要使用特殊的属性名，不能采用.的方式来操作
         *   需要使用另一种方式：
         *       语法：对象["属性名"] = 属性值
         *   读取时也需要采用这种方式
         * 
         * 使用[]这种形式去操作宾性,更加的灵活,
         *   在[]中可以直接传递—个变量，这样变量值是多少就会读取那个压性
         */
        obj["123"] = 789;
        obj["nihao"] = "你好";

        var n = "123";
        
        console.log(obj.["123"]);
        //console.log(obj.[n]); (效果一样，且更加灵活)

         /*
          * 属性值
          *  JS对象的属性值，可以是任意的数据类型
          */

          obj.test = true;
          obj.test = null;
          obj.test = undefined;
          
          //创建一个对象
          var obj2 = new Object();
          obj.name = "猪八戒"；
          
          //将obj2设置为obj的属性
          obj.test = obj2;
          
          //console.log(obj.test.name);
          
          /*
           * in 运算符
           *  - 通过该运算符可以检查一个对象中是否含有指定的属性
           *      如果有则返回true,没有则返回false
           *  - 语法:
           *       “压性名" in 对象 
           */
          //console.log(obj.test2);
          
          //检查obj中是否含有test2属性
          //console.log( "test2" in obj);
          //console.log( "test" in obj);
          console.1og("name" in obj);

           
    </script>
</head>
<body>
</body>
</html>

 

（四）基础数据类型和引用数据类型

基本数据类型
String Number Boolean Null Undefined
引用数据类型
Object

JS中的变量都是保存到技内存中的。
  基本数据类型的值直接在栈内存中存储,
  值与值之间是独立存在,修改一个变量不会影响其他的变量

  对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，
  而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，
  当一个通过一个变量修改居性时,另一个也会受到影响|

var obj =new Object();
obj.name =“孙悟空"";
var obj2 =obj;
//修改obj的name属性
obj.name ="猪八戒"";
console.log(obj.name) ;
console.log(obj2.name) ;

当比较两个基本数据类型的值时,就是比较值。
而比较两个引用数据类型时,它是比较的对象的内存地址,
  如果两个对象是一摸一样的。但是地址不同。它也会返回false
 

（五）对象字面量

使用对象字面量,可以在创建对象时,直接指定对象中的属性。
语法：{属性名:居性值,屈性名:星性值…}
如果要使用一些特殊的名字，则必须加引号(“name”)

属性名和属性值是一组一组的名值对结构.
 名和值之间使用:连接,多个名值对之间使用,隔开
 如果一个属性之后没有其他的展性了，就不要写,

var obj2 = {
	name : "猪八或",
	age : 28,
	gender : "男"
	"!@#!@#"
	test:{name:"shs"};
};
console.log(obj2.test);

 
 

二十一、函数

 

（一）函数简介

函数是一个对象。

函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）。

函数中可以保存一些代码在需要的时候调用。

使用typeof检查一个函数对象时，会返回function

//可以将要封装的代码以字符串的形式传递给构造函数
var fun = new Function("console.log( 'Hello这是我的第一个函数');");

//封装到函数中的代码不会立即执行
//函数中的代码会在函数调用的时候执行
//调用函数 语法：函数对象（）
//挡调用函数时，函数中封装的代码会按照顺序执行
//fun()

语法：
  function 函数名（[形参1，形参2…形参N]）{
   语句…
  }

function fun2(){
	console.log(fun2);
}
fun2();//调用函数

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

 

（二）函数的参数

定义一个用来求两个数和的函数
 可以在函数的()中来指定一个或多个形参〔形式参数)
 多个形参之间使用,限开,声明形参就相当于在函数内部声明了对应的变量但是并不赋值
 

在调用函数时,可以在()中指定实参（实际参数)
 实参将会赋值给函数中对应的形参
函数的实参可能是任何数学模型

function sum (a,b){
	console.log(a+b);
}

sum(123,456);
//调用函数时解析器不会检查实参的类型
// 所以要注意，是否有可能则需要对参数进行类型的检查

调用函数时,解析器也不会检查实参的数量
 多余实参不会被赋值
如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined
 

（三）函数的返回值

语法：
  return a;

function sum(a, b, c){
	var d = a + b + c;
	return d
}

若return后不跟任何值，则返回undefined
若函数无return，则也返回undefined
 

（四）实参可以是任何值

//定义一个函数，判断一个数字是否是偶数，如果是返回true,不是返回false
function isOu(num){
	return num % 2 == 0;
}
var result = isOu(15);
console.log("result = "+result);

定义一个函数，可以根据半径计算一个圆的面积，并返回计算结果
function mianji(r){
	return 3.14*r*r;
}
result = mianju(S);

mianji()
 - 调用函数
 - 相当于使用函数返回值

mianji 
 - 调用函数
 - 相当于直接使用函数对象

 

（五）返回值类型

break可以退出当前循环

continue用于跳过当前循环

return可以结束整个函数
 

（六）立即执行函数

//函数对象()
/*
 *定义：函数定义完,立即被调用
 *只会被调用一次
 */
(function)(){
	alert("函数");
	})();

 
 

二十二、对象（深入）

（一）方法

对象的属性值可以是任何的数据类型，也可以是个函数

obj.sayName = function(){
	console.log(obj.name);
};
obj.sayName();
/*
 * 函数也可以称为对象的压性,
 * 如果一个函数作为一个对象的压性保存,那么我们称这个
 * 函数时这个对象的方法
 * 调用这个函数就说调用对象的方法(method)
 * 
 * 只在名称上有区别

枚举对象中的属性

/*
 * 使用for . . . in语句
 * 语法：
 * 	for(var 变量 in 对象){
 * 
 * 	}
 * for. . .in语句对象中有几个属性，循环体就会执行几次
 */
for(var n in obj){
	console.log("属性名:"+n);
	
	console.log("属性名:"+obj[n]);
}

 

（二）全局作用域

/* 
 * - 作用域指一个变量的作用范围
 * - 在]S中一共有两种作用域:
 * 		1.全局作用域
 * 			- 直按编写在script标签中的JS代码,都在全局作用域
 * 			- 全局作用域在页面打开时创建,在页面关闭时销毁
 * 			- 在全局作用域中有一个全局对象window，我们可以直接使用（它代表的是一个浏览器的窗口,它由浏览器创建我们可以直接使用）
 * 			- 在全局作用域中：（创建的变量都会作为window对象的属性保存）（创建的对象都会作为window对象的方法保存）
 * 			- 全局作用域中的变量都是全局变量,在页面的任意的部分都可以访问的到
 * 		2.函数作用域
 */

变量的申明提前
 – 使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值)，
   （但是如果声明变量时不适用var关健字，则变量不会被声明提前）

console.log("a = "+a) ;
var a = 123;

函数的声明提前
  – 使用函数声明形式剑建的函数function 函数(){}
   它会在所有的代码执行之前就被创建,所以我们可以在函数申明前来调用函数
  使用函数表达式创建的函数。不会被声明提前,所以不能在声明前调用

//函数声明,会被提前创建
function fun({
	console.log("我是一个fun函数");
}

//函数表达式,不会被提前创建
var fun2 = function(){
	console. log(""我是fun2函教");
};

fun2();

 

（三）函数作用域

– 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
– 每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的
– 在函数作用域中可以访问到全局作用域的变量，在全局作用域中无法访问到函数作用域的变量
– 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用，
  如果没有则向上一级作用域中寻找,直到找到全局作用域,
  如果全局作用域中依然没有找到,则会报错ReferenceError
– 在函数中要访可全局变量可以使用window对象

var a = 10;
function fun(){
	var a =""我是函数中的变量a";
	var b = 20;
	console.log("a ="+a);//（里）
}
fun();
console.log("a = "+a);//（外）

在函数作用域也有声明提前的特性。
 本使用var关键字声明的变量，会在函数中所有的代码执行之前被声明。
 函故声明也会在函数中所有的代码技行之前执行。

function fun3(){
	fun4();
	var a = 35;
	function fun4(){
		alert("I'm fun4");
	}
}

在函数中，不使用var声明的变量都会成为全局变量
 

（四）this

/*解析器在调用函数每次都会向函数内部传递进一个路含的参数,
 * 这个路含的参数就是this. this指向的是一个对象，
 * 这个对象我们称为函数执行的上下文对象,
 *  根据函数的调用方式的不同. this会指向不同的对象
 *     1.以函数的形式调用时,this永远都是window
 *     2.以方法的形式调用时,this就是调用方法的那个对象

 

（五）使用工厂方法创键对象

function createPerson(name , age , gender){
	//创建一个新的对象
	var obj = new object();
	
	//向对象中添加压性
	obj.name = name;
	obj.age = age;
	obj.gender = gender;
	obj.sayName = function(){
		alert(this.name);l
	};
	
	//将新的对象返回
	return obj;
}
var obj2 = createPerson(张三,18,男);
var obj3 = createPerson();

console.log(obj2);

– 使用工广方法创建的对象，使用的构造函数都是Object
 所以创建的对象都是Object这个类型，
 就导致我们无法区分出多种不同类型的对案|
 

（六）构造函数

– 创建一个构造函数，专门用来创建Person对象的
  构造函数就是一个普通的函数，创建方式和普通函数没有区别,
  不同的是构造函数习惯上首字母大写

– 构造函数和普通函效的区别就是调用方式的不同
  普通函数是直接调用，而构造函数需要使用new关键字来调用

– 构造函数的执行流程;
  1.立刻创建一个新的对象
  2.将新建的对象设置为函数中this，在构造函数中可以使用this来引用新建的对象
  3.逐行执行函数中的代码
  4.将新建的对象作为返回值返回

– 使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。
  我们将通过一个构造函数创建的对象，称为是该类的实例

– this的情况，
  1.当以函数的形式调用时，this是window
  2.当以方法的形式调用时，i谁调用方法this就是谁
  3.当以构造函数的形式调用时，this就是新创建的那个对象

function Person(){
	this.name = "张三";
	//。。。。。。
		alert(this.name);
}
var per = new Person();

var dog = =new Dog();
console.log(per);
console.log(dog);

/*
 * 使用instanceof可以检查一个对象是否是一个类的实例
 * 语法:
 *      对象instanceof构造函数
 * 	如果是，则返回true，否则返回false
 */
console. log(per instanceof Person);

 

（七）原型对象

– 原型prototype
  我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype
    这个屈性对应着一个对象,这个对象就是我们所谓的原型对象

– 如果函数作为昔通函数调用prototype没有任何作用
– 当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的屈性，
  指向该构造函数的原型对象。我们可以通过__proto__来访问该属性

– 原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，
  我们可以将对象中共有的内容,统一设置到原型对象中

– 当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，
  如果没有则会去原型对象中寻找,如果找到则直接使用

– 以后转们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，
  这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了

function MyClass(){
}
MyClass.prototype.a = 123;
MyClass.prototype.sayHello = function(){
	alert("hello");
};
var mc = new MyClass();
var mc2 = new MyClass();
console.log(mc2.__proto__ == Myclass.prototype);

//使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true
console.log( "name" in mc);
//可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
//使用该方法只有当对象自身中含有压性时,才会返回true
console.log(mc.hasOwnProperty ( "age"));
console.log(mc.hasOwnProperty ("hasOwnProperty" ));
/*原型对象也是对象,所以它也有原型,
 * 当我们使用一个对象的兵性或方法时,会现在自身中寻找,
 *      自身中如果有,则直接使用,
 *      如果没有则去原型对象中寻找,如果原型对象中   与,则使用,
 *      如果没有则去原型的原型中寻找
 * 		如果没有则去原型的原型中寻找,直到找到0bject对象的原型,
 * 		0bject对象的原型没有原型，如果robject中依然没有找到，则返回undefined

 
 

二十三、toString()

function Person( name , age , gender){
	this.name = name;
	this.age = age;
	this.gender = gender;
}
//修改Person原型的tostring
Person. prototype.tostring = function(){
	return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"";
};
//创建一个Person实例
var per = new Person(""孙悟空"",18,"男"");
//当我们直接在页面中打印一个对象时，事件上是输出的对象的toString()方法的返回值
var result = per.toString();
console.log("result =" + result);

 
 

二十四、垃圾回收

– 当一个对象没有任何的变量或压性对它进行引用，此时我们将永远无法操作该对象，
  此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，
  所以这种垃圾必须进行清理。
– 在JS中拥有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁，
  我们不需要也不能进行垃圾回收的操作
– 只要将不再使用的对象设置成null即可。

var obj = =new Object();
obj = null;

 
 

二十五、数组

（一）数组介绍

数组（Array）
 – 数组也是对象
 – 它和我们昔通对象功能类似,也是用来存储一些值的
 – 不同的是昔通对象是使用字符串作为压性名的,
    而数组时使用数字来作为索引操作元素
 – 索引:
    从0开始的整数就是索引
 – 数组的存储性能比首通对象要好。在开发中我们经常使用数组来存储一些数据

var  arr = new Array();
//使用typeof检查—个数组时,会返回object
//console.log(typeof arr);

/*
 * 向数组中添加元素
 * 语法：数组[索引] = 值
 */
 arr[0] = 10;
 arr[1] = 33;
 arr[2] = 22;
 /*
 * 读取数组中的元素
 * 语法：数组[索引]
 *  （如果读取不存在的索引，不会报错而是返回undefined）
 */
 console.log(arr[3]);
 /*
 * 获取数组的长度
 * 可以使用length属性来获取数组长度（元素的个数）
 * 语法：数组.length
 * 
 * 对于连续的数组,使用length可以获取到数组的长度(元素的个数)
 * 对于非连续的数组,使用length会获取到数组的最大的索引+1
 * （尽量不要创建非连续的数组）
 */
 console.log(arr.length);
 console.log(arr);
 /*
 * 修改length
 * 		如果修改的length大于原长度。则多出部分会空出来
 * 		如果修改的length小于原长度。则多出元素会被删除
 */
 arr.length = 10;

arr[5] = 60;
//向数组最后一个位置添加元素
arr[arr.lrngth] = 70;
console.log(arr);

 

（二）数组字面量

//语法：[]
var arr = [1,2,3,4,5,6];
console.log(arr[3]);
//使用枸造函数创建数组时，也可以同时漆加元素，将要添加的元素作文构造函数的参数传递
//元素之间使用,隔开

//创建一个数组数组中只有一个元素10
arr = [10];

//创建一个长度为10的数组
arr2 = new Array(10);

console.log(arr2.length);

//数组中的元素可以是任意的数据类型
arr =["he1lo",1,true,null,undefined];
console.log(arr);

//也可以是对象
var obj = iname:"孙悟空""};
arr[arr.length] = obj;
arr = [{name : "孙悟空"},{name : "沙和尚"},{name :" 猪八戒"}];

//可以是函数
arr = [function(){alert(1)},function(){alert(2)}];

console.log(arr[5].name);

//可以是数组（多维数组）

 

（三）数组的冒泡(sort)排序

– 排序，就是把一个乱序的数组，通过我们的处理，让他变成一个有序的数组

冒泡排序
在这里插入图片描述
– 先遍历数组，让挨着的两个进行比较，如果前一个比后一个大，那么就把两个换个位置
– 数组遍历一遍以后，那么最后一个数字就是最大的那个了
– 然后进行第二遍的遍历，还是按照之前的规则，第二大的数字就会跑到倒数第二的位置
– 以此类推，最后就会按照顺序把数组排好了
1、 我们先来准备一个乱序的数组

var arr =[4,3,2,1]

  – 接下来我们就会用代码让数组排序
2、 先不着急循环，先来看数组里面内容换个位置

//假定我现在要让数组中的第0项和第1项换个位置
//需要借助第三个变量
var temp = arr[0]
arr[0] = arr[1]
arr[1] = temp
console.log(arr)

for(var i=0; i<arr.length-1; i++){
	if(arr[i] > arr[i+1]){
		var temp = arr[1]
		arr[1] =arr[i+1]
		arr[i+1] = temp
	}
}

for(var i=0; i<arr.length-1-1; i++){
	if(arr[i] > arr[i+1]){
		var temp = arr[1]
		arr[1] =arr[i+1]
		arr[i+1] = temp
	}
}

for(var i=0; i<arr.length-1-1-1; i++){
	if(arr[i] > arr[i+1]){
		var temp = arr[1]
		arr[1] =arr[i+1]
		arr[i+1] = temp
	}
}
console.log(arr)
for(var m=0; m<arr.length-1; m++){
	for(var i=0; i<arr.length-1-m; i++){
	if(arr[i] > arr[i+1]){
		var temp = arr[1]
		arr[1] =arr[i+1]
		arr[i+1] = temp
		}
	}
}	
总结：

 

（四）数组的选择排序

– 先假定数组中的第0个就是最小的数字的索引
– 然后遍历数组，只要有一个数字比我小I那么就替换之前记录的索引
– 知道数组遍历结束后，就能找到最小的那个索引，然后让最小的索引换到第0个的位置
– 再来第二趟遍历，假定第1个是最小的数字的索引
– 在遍历一次数组，找到比我小的那个数字的索引
– 遍历结束后换个位置

<body>
    <script>
        var arr = [5,1,2,4,6,3]
        for(var m=0;m<arr.length-1;m++){
            var minIndex = m
            for(var i=m+1;i<arr.length;i++){
            if(arr[1]<arr[minIndex]){
                minIndex=i
            }
        }
        console.log(minIndex)

        var temp = arr[m]
        arr[m] = arr[minIndex]
        arr[minIndex] = temp
        console.log(arr)
        }
    </script>
</body>
</html>

 

（五）数组的四个方法

数组的常用方法

1.

– 数组是一个复杂数据类型，我们在操作它的时候就不能再想基本数据类型一样操作了
– 比如我们想改变一个数组

//创建一个数组
var arr = [1，2，3]
//我们想把数组变成只有1和2
arr =[1，2]

 – 这样肯定是不合理，因为这样不是在改变之前的数组
 – 相当于心弄了一个数组给到arr这个变量了
 – 相当于把 arr里面存储的地址给换了，也就是把存储空间换掉了，而不是在之前的空间里面修改
 – 所以我们就需要借助一些方法，在不改变存储空间的情况下，把存储空间里面的数据改变了

push

 – 该方法可以向数组的末尾添加一个或多个元素。并返回裁组的新的长度
 – 可以将要添加的元素作为方法的参数传递,
   这样这些元素将会自动添加到数组的末尾
 – 该方法会将数组新的长度作为返回值返回

arr.push("张三"，"李四");
console.log(arr);
console.log("result = "+result);
pop

 – 该方法可以删除数据的最后一个元素，并将被删除的元素返回

arr.pop();
arr.pop();
arr.pop();
console.log(arr);
unshift

 – 向数组开头添加一个或多个元素，并返回新的数组
 – 向前边插入元素以后，其他数组索引会依次调整

shift

 – 可以删除数组的第一个元素,并将被无陈的元素作为返回值返回

splice
var arr = [1,2,3]
//删除：
var ressplice = arr.splice(1,2)//从第1个元素开始删掉2个元素
console.log(arr)
console.log("返回值"，ressplice)

//增加：
var ressplice = arr.splice(1,2,"3")//在删掉的后面加“3”这个元素
//如果是arr.splice(1,0,"3")则添加到1和2位置之间
console.log(arr)
console.log("返回值"，ressplice)
resver
//倒序：
var arr = [1,2,3,4]
arr.resver()
console.log(arr)
sort
排序：
var arr = [11,21,56,7,3]
arr.sort(function(a,b)){
	return a~b //从a~b排序
})
console.log(arr)

 

2.

concat
//拼接
var arr1 = [1,2,3]
var arr2 = [4,5,6]
var arr3 = arr1.concat(arr2,7,[8,9])
//把arr2拼接到arr1后面   arr2后面加多种形式也能拼接到后面
console.log(arr1,arr2,arr3)

var arr4 = arr1.concat()
arr4.pop() //pop不会对concat影响
console.log(arr1,arr4)
join
//数组→字符串
var arr = [1,2,3,4,5]
document.write(arr.join("-"))//使用“-”使字符连在一起

var arr =[]
for(var i=0;i<5;i++){
arr.push("<li>"+i+"</li>")
}//相当于<li>标签
document.write(arr.join(""))//去掉“，”
slice
//截取：(开始索引，结束索引)  //不影响原数组
var arr = ["a","b","c","d"]
var arr2 = arr.slice(0,2)
//var arr2 = arr.slice(2) 从2开始到最后
//var arr2 = arr.slice(2，-1)//最后为-1，包前不包后，（长度+ -1）
console.log(arr,arr)
indexOf
// 返回-1 就是找不到
 var arr = ["a","b","c","d"]
 var res = arr.indexOf("c",2)//从下标为2的位置开始查
 console.log(res)
lastindexOf

从后往前查

 var res = arr.lastindexOf("c"3)
 console.log(res)

3.

foreach 遍历

var arr =["aaa" , "bbb" ,"ccc" ,"ddd" ]
//回调函数
arr.forEach(function(item,index,arr){
console.log(item,index,arr) //(形参（内容），索引值，元素组)
})
map 映射
var arr = [1,2,3,4,5]
var arr2 = arr.map(function(){
	return "哈"
	//var arr2 = arr.map(function(item){
	//	return item*item(数组平方)
})
console.log(arr2)

在这里插入图片描述

        var arr =["xiaoming" , "kerwin" , "tiechui"]
        var arr2 = arr.map(function(item){
            return "<li>"+item+"</li>"//制造标签
        })
        console.log(arr,arr2)
        document.write(arr2.join(""))

在这里插入图片描述

filter 过滤
            {
                name : "aaa",
                price: 100
            }
            {
            name : "bbb" ,
            price:200
            }
            {
            name : "ccc",
            price: 300
            }
        ]
        var arr2 = arr.filter(function(item){
            return item.price>200
        })
        console.log(arr2)
every 每一个
        var arr =[9e,9e,2,94]
        var arr2=arr.every (function( item){
            return item>=90
        })
        console.log(arr2)
some 只要一个满足条件，就为true

– 类“every”

find
 var arr2 = arr.filter(function(item){
    return item.price>200//找出全部符合项
var arr2 = arr.find(function(item){
    return item.price>200//找出符合的一项
reduce 叠加
var arr -[1,2,3,4,5]
var arr2= arr.reduce(function(prev,item){
    return prev+item
},"") //此处为""时为数组，为0时则prev从0开始储存
console.log(arr2)

// prev 0 item l
// prev 1 item 2
// prev 3 item 3
// prev 6

 

（六）数组去重

-方法1：

var arr = [1,2,3,4,3,5,6,2,1]
var arr2 = []
for(var i=0;i<arr.length;i++){
	if(arr2.indexOf(arr[i])=== -1){
		arr2.push(arr[i]) //查数组内没有重复的
	}
}
console.log(arr,arr2)]

-方法2：利用对象

var obj = {0
for(var i=e;i<arr.length;i++){
obj[arr[i]]="随便"
}
console.log(obj)
var arr2 = []
for(var i in obj){
arr2.push(i-0 )
}
console.log(arr2)

-方法3：new Set

var set1= new Set(arr)
console.log(set1)
var arr1 =Array.from(set1)
console.log(arr1)

 
 

二十六、字符串

1.创建字符串
– 我们创建字符串也分为两种方法字面量和构造函数
– 字面量:

var str = 'he11o'

– 构造函数创建

var str = new string('he11o')

//length只读
str1.length = 0
console.log(str1)
//索引/下标 只读
console.log(str1[1])
str1[1]= "a"
console.log(str1)
//遍历
for(var i=e;i<str1.length;i++){
console.log(i,str1[i])
}

统计数字出现次数

<body>
    <script>
        var str = "abcabcab"
        var obj={}
        for(var i=0;i<str.length;i++){
            console.log(str[i])
            var key = str[i]
            if(obj[key]){
                obj[key]++ //反复出现
            }else{
                obj[key]= 1 //不存在（第一次出现）赋值1
            }
        }
        console.log(obj)
    </script>
</body>
</html>

 

（一）字符串常用方法

chartAt（索引）返回索引对应的字符

var str = "megju"
var str1 = str.charAt(1)
console.log(str,str1)

//则显示 megju  m

 

chartCodeAt（索引）返回索引对应的字符编码

字符集：
ASCII字符集
– 计算机只能存储0101010这样的二进制数字
– a ~ z/ A ～ Z / $ / @/…之类的内容也有由二进制数字组成的
– 可以理解为，a ~ z/ A ~ Z/ $ /@/…之类的内容都有一个自己的编号，然后在计算机存储的时候，是存储的这些编号，我们看的时候，也是通过这些编号在解析成我们要看到的内容给我们看到

unicode编码
– 我们看到了，ASCII只有这128个字符的编码结构
– 但是因为ASCI工出现的比较早，而且是美国发明的，早先时候这些内容就够用了·因为存储一些英文的内容，传递一些英文的文章什么的都够用了
– 那么对于这个世界来说肯定是不够用的
– 因为我们的汉字没有办法存储，包括一些其他国家的语言也没有办法存储·所以就出现了unicode编码，也叫《万国码，统一码)
– unicode对照表就是一个和ASCII 一样的对照表，只不过变得很大很大，因为存储的内容特别的多
– 而且包含了世界上大部分国家的文字，所以我们的文字和字符现在在存储的时候，都是按照unicode编码转换成数字进行存储
– 我们的UTF-8就是一种8 位的unicode字符集

var arr =[]
for(var i=65;i<91;i++){
console.log(String.fromcharCode(i))
} //将编码转换回字符

 

toUpperCase() 把字符转换为大写

toLowerCase() 把字符转换为小写
 
substr(开始索引，长度) 截取
substring(开始索引，结束索引（不能用负数）) 截取
slice(开始索引，结束索引) 截取

var str = "kerwin"
var str1=str.substr(1,2)//得出er
var str1=str.substring(1,2)//得出e,包前不包后
var str1=str.slice(1,2)
console.log(str1)

 

replace 替换 - 正则表达式

var str ="abdwadwa"
var str1 = str.replace("a","*")
console.log(str1)

 

split 分割 （字符串分割成数组）

var str = "a|b|c|d"
console.log(str.split("")5

在这里插入图片描述
 

indexof lastindexOf

var str = "abcda"
console.log(str.indexof("a",1))//从前往后查
console.log(str.lastIndexof("a",3))//从后往前查

在这里插入图片描述
 

concat 连接字符串 +

var'str = "abcd"
var str1 = str+"ef"//得出abdcef
console.log(str1)

 

trim 去掉首尾空格

trimstart() trimLeft() 去掉首空格
trimEnd() trimRight() 去掉尾空格

var str = "  hello  world  "
console.log("|"+str+"|")
console.log("|"+str.trim()+"|")

在这里插入图片描述
 

（二）json格式字符串

//{"key":110, "key":"123")
var str = '{"name":"kerwin" , "age":100}'
console.log(str)
var obj = JSON.parse(str)//parse解析字符串
console.log(obj)

//前=》后
var obj1 = {name : "tiechui"}
var str1 = JSON.stringify(obj1)
console.log(obj1,str1)

 

（三）模板字符串

//es6
//var myhtml = '<li>11111</li> \
// <li>2222</li>\
// <li>3333</li>'
var myhtml = `<li>11111</li>
<li>2222</li>
<li>3333</li>`

var myname = "fuyun"
var str = `my nane is ${myname} ${10+20} ${10>20} ${10>20?'aaa':'bbb'}`//未定义的字符要用''
document.write(str)

var arr -[ "xiaoming" , "kerwin" , "tiechui"]
var arr2 = arr.map(function(item){
	return `<li>${item}</li>`
})
console.log(arr2)
document.write(arr2.join(""))

 
 

二十七、数字

（一）数字常用方法

Number toFixed() 返回是字符串

var price = 123.45678
console.log(price.toFixed(2)-0)//保留两位小数//-0后才是数字

Math 对象

// random 0-1的随机数
console.log(Math.random())

// round 四舍五入取整
console.log(Math.round(4.46))

//ceil 向上取整  floor 向下取整
console.log(Math.ceil(4.11))
console.log(Math.floor(4.96))

//abs 绝对值
console.log(Math.abs(-10.2))

//sqrt 平方根9
console.log(Math.sqrt(8))

// pow (底数，指数)
console.log(Math. pow(3,3))

// max(多个参数)
console.log (Math.max (10,50,20,34))

// min(多个参数)
console.log(Math.min( 10,50,20,34))

//PI
console.log (Math.PI) //π

 

（二）随机整数

// 0-10不包含10
var res = Math.floor(Math.random()*10)
console.log(res)
// 0-10包含10
ver res = Mlath.floor(Math.random()*(10+1))
console.log(res)
// 10-20不包含20
var res = Math.floor(Math.random()*10)+10
console.log(res)
// 10-20包含20
var res = Math.floor(Math.random()*(10+1))+10
console.log(res)

//函数--min-max不包含
function getRnd1(min ,max) {
	if(min>max) {
		console.error("参数有误")
		return
	}
	return Math.floor(Math.random()*(max-min)) +min}
console.log(getRnd1(200, 300))

//函数--min-max包含
function getRnd1(min ,max) {
	if(min>max) {
		console.error("参数有误")
		return
	}
	return Math.floor(Math.random()*(max-min+1))+min}
console.log(getRnd1(200,300))

 
 

二十八、时间对象

Date
js提供的内置构造函数,专门用来获取时间的

1.new Date()
– new Date()在不传递参数的情况下是默认返回当前时间

var time = new Dateo
console.log(time) //当前时间Fri Mar 01 2019 13:11:23 GMT+0800(中国标准时间)

– new Date()在传入参数的时候，可以获取到一个你传递进去的时间

var time = new Date( '2019-03-03 13:11:11')
console.log(time) // sun Mar 03 2019 13:11:11 GMT+0800(中国标准时间)

– new Date(传递的参数有多种情况

  1. 传递两个数字，第一个表示年，第二个表示月份
var time m new Date(2019，00) //月份从О开始计数，0表示1月，11表示 12月
console.log(time) // Tue Jan 01 2019 00:00:00 GMT+0800(中国标准时间)
  1. 传递三个数字，前两个不变，第三个表示该月份的第几天，从1到31
  2. 字符串
var date3- new Date("2023-10-10 10:10:10")console.log(date3) //“-”换成“/”效果一样
//Tue oct 10 2023 10:10:10 GMT+0800(中国标准时间)

（一）时间对象的常用方法

getFullYear 获取年份

var date = new Date()
console.log(date.getFullYear())

getFullMonth 获取月份

0-11 ===>1-12

var date = new Date()
console.log(date.getFullMonth())

getFullDate 获取日期

var date = new Date()
console.log(date.getFullDate())

getFullDay 获取周

周日：0； 周一-周六：1-6

var date = new Date()
console.log(date.getFullDay())

getHours 获取时间

var date = new Date()
console.log(date.getHours())
console.log(date.getMinutes())
console.log(date.getSeconds())
console.log(date.getMilliseconds())

getTime 时间戳

var date = new Date()
console.log(date.getTime())
//console.log(new Date(1653280060490))

设置时间

console. log(date)

date.setFul1Year(2025)
console.log(date)

date.setMonth(5)
console.log(date)

date.setDate(25)
console.log(date)

date.setHours(13)
console.log(date)

date.setMinutes(50)
console.log(date)

date.setSeconds(59)
console.log(date)

date.Time(new Date(1653280060490))
console.log(date)

 

（二）定时器

– 在js里面，有两种定时器，倒计时定时器和间隔定时器

倒计时定时器

– 倒计时多少时间以后执行函数
– 语法: setTimeout(要执行的函数，多长时间以后执行)
– 会在你设定的时间以后，执行函数

var timerId = setTimeout(function() {
conso1e.log('我执行了")
}， 1000)//注册定时器；1000毫秒
console.log(timerId)// 1

。时间是按照毫秒进行计算的，1000毫秒就是1秒钟
。所以会在页面打开1秒钟以后执行函数
。只执行一次，就不在执行了
。返回值是，当前这个定时器是页面中的第几个定时器

间隔时定时器

– 语法: setInterval(要执行的函数，多长时间以后执行)

setInterval(function(){
},1000)//注册间隔定时器

停下定时器

clearTimeout(time1)
clearInterval(time2)

停止按钮

<button id="btn1">清除定时器-延时</button>
<button id="btn2">清除定时器-间隔</button>
<script>
	var time1= setTimeout(function(){
		console.log("fuyun")
	},1000)
	var time2= setInterval(function(){
		console.log(new Date())
	},1000)
	console.log(time1,time2)
	console.log(btn1,btn2)//直接通过id，拿到按钮对象
	btn1.onclick = function({
		console.log "btn1 click")
		clearTimeout(time1)
	}
	btn2.onclick = function({
		console.log "btn2 click")
		clearInterval(time2)
	}
</script>

 

（三）异步执行

console.log("111111")
setTimeout(function(){
	console.log( "kerwin")
	},1000)
console.log("2222222")

在这里插入图片描述
（同步代码执行完，再执行异步的）
 

（四）倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">

    </div>
    <script>
        var targetDate = new Date("2023/1/22")
        
        //console.log(targetDate-currentDate) // 时间戳的差值

        function diffTime(current,target){
            var sub = Math.ceil((target-current)/1000)

            var day = parseInt(sub/(60*60*24))
            var hours = parseInt(sub%(60*60*24)/(60*60))
            var minutes = parseInt(sub%(60*60)/60)
            var seconds = sub%60

            var obj = {
                day:day,
                hours:hours,
                minutes:minutes,
                seconds:seconds
            }
            return obj
        }
        
        setInterval(function(){
            var currentDate = new Date()
            var res = diffTime(targetDate,currentDate)
            /* console.log(res)
            document.write(`新年${res.day}天${res.hours}时${res.minutes}分${res.seconds}秒`)
            document.write("<br>") */

            box.innerHTML = `新年${res.day}天${res.hours}时${res.minutes}分${res.seconds}秒`
        },1000)
    </script>
</body>
</html>

在这里插入图片描述
 
 

二十九、BOM

（一）介绍

– BOM（Browser object Mode1):浏览器对象模型
– 其实就是操作浏览器的一些能力
– 我们可以操作哪些内容
 。获取一些浏览器的相关信息(窗口的大小)。操作浏览器进行页面跳转
 。获取当前浏览器地址栏的信息。操作浏览器的滚动条
 。浏览器的信息（浏览器的版本)
 。让浏览器出现一个弹出框（ alert / confirm / prompt )
 。…
– BOM的核心就是window对象
– window是浏览器内置的一个对象，里面包含着操f作浏览器的方法
 

（二）获取浏览器窗口的尺寸

– innerHeight和innerwidth
– 这两个方法分别是用来获取浏览器窗口的宽度和高度（包含滚动条的)

var windowHeight = window.innerHeight
console.log(window.innerHeight,innerHeight)

var windowwidth = window.innerwidth
console.log(window.innerwidth,innerwidth)

 

（三）浏览器的弹出层

alert

btn.onclick = function(){
	//alert("用户名密码不匹时”)
	setTimeout(function(){
		alert(“缓存清除成功")
	}, 2000)

//询问框 confirm
btn.onclick= function(){
	var res = confirm("你确定删除吗?")
	console.log(res)
	if(res){
	}else{
	
	}
}

//输入框prompt
btn.onclick = function(){
	var res = prompt("请输入你得用户名")
	console.log(res)
}

 

（四）浏览器的地址栏

– 在window中有一个对象叫做1ocation
– 就是专门用来存储浏览器的地址栏内的信息的
location.href
 – location.href这个属性存储的是浏览器地址栏内ur1地址的信息

console.log(window.1ocation.href)

   。会把中文变成ur1编码的格式
 – location.href这个属性也可以给他赋值

window.location.href = "./index.html"
//这个就会跳转页面到后面你给的那个地址

location.reload
 – location.reload(这个方法会重新加载一遍页面，就相当于刷新是一个道理

window. location.reload()

   。注意:不要写在全局，不然浏览器就会一直处在刷新状态
 

（五）浏览器常见事件

onload

– 这个不在是对象了，而是一个事件
– 是在页面所有资源加载完毕后执行的工

window.onload = function(){
console.log('页面己经加载完毕")}

resize

window.onresize = function(){
	console.log ("resize")
}

onscroll

与滚动条位置数值相关

window.onscroll·-function(){
	console.log( "scroll")
}

 

（六）浏览器滚动距离

<body>
    <button id="btn">返回顶部</button>
    <script>
        window.onscroll = function(){
	        console.log(document.documentElement.scrollTop || document.body.scrol1Top)

	        if((document.documentElement.scrollTop || document.body.scrollTop) > 100){
		        console.log("显示回到顶部按钮")
	        }else{
		        console.log("隐藏回到顶部按钮")
	        }
        }

        btn.onclick = function(){
            //window.scrollTo(0,0) //1.两个数字
            
            window.scrollTo({
                left:0,
                top:0
            })//2.对象
        }
    </script>
</body>

 

（七）浏览器打开标签页

btn.onclick =function(){
window.open("http://www.baidu.com")
}

 

（八）浏览器的历史记录

– window中有一个对象叫做history
– 是专门用来存储历史记录信息的
history.back
 – history.back是用来会退历史记录的，就是回到前一个页面，就相当于浏览器上的按钮

window.history.back()

  。前提是你要有上一条记录，不然就是一直在这个页面,
也不会回退
history.forword
 – history.forword是去到下一个历史记录里面，也就是去到下一个页面，就相当于浏览器上的按钮

window.history.forward()

  。前提是你要之前有过回退操作，不然的话你现在就是最后一个页面，没有下一个

<button id="btn">history.back()</button>
<script>
btn.onclick =function(){
history.back()
}

btn.onclick =function(){
// location.href="02.html"
// history.forward()
history.go(1) } go用于回退

 

（九）浏览器本地存储

localStorage

//增
loca1storage.setItem("name" , "kerwin")
//取
1ocalstorage.getItem("name")
//删
localstorage.removertem("name")
//清空
1ocalstorage.clear()

sessionStorage

//增
sessionstorage.setItem("name" , "kerwin")
//取
sessionstorage.getItem("name")
//删
sessionstorage.removeItem("name")
//清空
sessionstorage.clear()

全部清除：

btn4.onclick =function(){
// console.log(){
localStorage.clear
()}

//存，只能存字符串，不能存对象，
localStorage.setItem("obj",JSON.stringify({name:"kerwin",
age:100y))

//永久存储 localStorage
//会话存储 sessionstorage 关闭页面就丢失

 

（十）记住用户名

<div>
	用户名：
	<input type="text"id="username">
</div>
<div>
	密码：
	<input type="password"id="password">
</div>
<div>
	<button id="login">登录</button>
</div>
<script>
//先获取用户名密码信息进行存储
	var uservalue = localStorage.getItem("username")
	var passvalue = localStorage.getItem("password")
	if(uservalue && passvalue ) 
	username.value = uservalue
	password.value=passvalue
	login.onclick=function(){
		console.log(username.value,password.value)
		localStorage.setItem("username",username.value)
		localStorage.setItem("password",password.value)
	}
</script>
Whnist
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值