二十、对象
(一)对象的简介
/*
* 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(传递的参数有多种情况
- 传递两个数字,第一个表示年,第二个表示月份
var time m new Date(2019,00) //月份从О开始计数,0表示1月,11表示 12月
console.log(time) // Tue Jan 01 2019 00:00:00 GMT+0800(中国标准时间)
- 传递三个数字,前两个不变,第三个表示该月份的第几天,从1到31
- 字符串
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>