seo网站怎么搭建,苏州旅游必去十大景点,网络规划设计师考试通过率,网页视频下载器app大标题小节一、数组1. 数组的创建、赋值、分类#xff1b;2. 数组的简单操作#xff08;根据索引增、查、改#xff09;#xff1b;3. 声明式和构造函数创建的数组的区别#xff1b;4.数组的方法#xff1a;push()、unshift()、splice()、pop()、shift()、slice()、sort(…大标题小节一、数组1. 数组的创建、赋值、分类2. 数组的简单操作根据索引增、查、改3. 声明式和构造函数创建的数组的区别4.数组的方法push()、unshift()、splice()、pop()、shift()、slice()、sort()、reserve()、join()、toString()、contat()二、对象1. 对象的书写规则2. 创建对象3. 操作属性值4. 操作属性5. 对象的遍历 for-in6. 深浅拷贝7. 基础类型和引用类型三、this1. 在 js 中全局的变量和函数全部属于 windowthis 指向 window。2. 在方法中this 表示该方法所属的对象。3. 在函数中this 会指向 window但在严格模式下函数中的 this 会指向 undefined4. 在事件中this 表示接收事件的元素即接收事件的 HTML 元素。总结一、数组
注意不要在循环中使用 return否则会终止循环。如果一定要使用将原本要 return 的最终结果存到数组中再将这个数组 return 出来。
1. 数组的创建、赋值、分类
1创建 ① 声明式创建 var arr []; ② 构造函数创建 var arr2 new Array();
2赋值 ① var arr [4,5,6,7]; ② var arr2 new Array(7,8,9,0,1);
3分类 ① 伪数组例如 arguments ② 数组 整数数组、字符串数组、json对象数组、二维数组 2. 数组的简单操作根据索引增、查、改
1增
var arr [];
arr [4,a,true,undefined,NaN,null,{},[],function(){console.log(hello)}];console.log(arr[9]);//undefined 声明了arr但是arr下标为9的位置未赋值
arr[9] world;
console.log(arr);//(10) [4, a, true, undefined, NaN, null, {…}, Array(0), ƒ, world]注意打印的时候浏览器显示的是 (2) [empty,0]实际上 arr2[0] 的值是 undefined而不是 empty。var arr2 [];
arr2[1] 4;
console.log(arr2); //(2) [empty,0]
console.log(arr2[0]); //undefined2查
var arr [4,a,true,undefined,NaN,null,{},[],function(){console.log(hello)}];console.log(arr[1]);//aarr[8]();//hellofor(var i 0;iarr.length;i){console.log(arr[i]);
}3改
var arr [4,a,true,undefined,NaN,null,{},[],function(){console.log(hello)}];
arr[2] hello;
console.log(arr[2]); //hello3. 声明式和构造函数创建的数组的区别
1使用声明式
var arr1 []; // 创建空数组
var arr2 [ 20 ]; // 长度为1数据是20
var arr3 [ 2,6,9 ]; // 创建带有三个字符串的数组
console.log(arr2); //[20]
console.log(arr3); //(3) [2, 6, 9]2使用 Array 构造函数
var arr1 new Array( ); // 创建空数组
var arr2 new Array( 20 ); // 长度是 20 的空数组
var arr3 new Array( 2,6,9 ); // 创建带有三个字符串的数组
console.log(arr2); //(20) [empty × 20]
console.log(arr3); //(3) [2, 6, 9]4. 数组的方法 以下所列方法中 会改变原数组的方法push()、unshift()、splice()、pop()、shift()、splice()、sort()、reverse()返回新数组不影响原数组的方法slice(n,m)、join()、toString()、concat() 1增push()、unshift()、splice() ① push()给数组的最后一位增加 var arr [4,5,6,7];arr.push(hello);
console.log(arr);//(5) [4, 5, 6, 7, hello]② unshift()给数组的第一位增加 var arr [4,5,6,7];arr.unshift(hello);
console.log(arr);//(5) [hello, 4, 5, 6, 7]③ splice(指定位置从0开始指定位置包括自身, 删除个数, 新增内容)给指定索引的位置增加 var arr [4,5,6,7];arr.splice(1,2,world);
console.log(arr);//(3) [4, world, 7]
arr.splice(1,0,2);
console.log(arr);//(4) [4, 2, world, 7]
arr.splice(1,1,hello); //相当于替换
console.log(arr);//(4) [4, “hello”, world, 7]2删 pop()、shift()、splice() ① pop()删除数组的最后一个 var arr [4,5,6,7,8,9];arr.pop();
console.log(arr);//(5) [4, 5, 6, 7, 8]② shift()删除数组的第一个 var arr [4,5,6,7,8,9];arr.shift();
console.log(arr);//(5) [5, 6, 7, 8, 9]③ splice(指定位置从0开始指定位置包括自身删除个数) var arr [4,5,6,7,8,9];arr.splice(1,1);
console.log(arr);//(5) [4, 5, 7, 8, 9]3截取 slice(n,m)截取数组的第 n 位到第 m 位的前一位含前不含后。返回新数组不操作/影响原数组
var arr [4,5,6,7,8,9];
console.log(arr);//(6) [4,5,6,7,8,9]arr.slice(1,3);
console.log(arr); //(6) [4,5,6,7,8,9]
//当使用方法时返回原数组发现没有变化时可能是这个方法把处理结果放在返回值中。
//就像在 slice() 方法中有个 return。
console.log(arr.slice(1,3)); //(2) [5,6]
var newArr arr.slice(1,3);
console.log( newArr ); //(2) [5,6]4排序sort()、reverse()
① sort()默认按字符升序排列var arr [4,6,5,3,8];
arr.sort();
console.log(arr);//(5) [3, 4, 5, 6, 8]var arr2 [2,101,6,58,3]
arr2.sort();
console.log(arr2);//(5) [101, 2, 3, 58, 6]var arr3 [Banana, Orange, Apple, Mango]
arr3.sort();
console.log(arr3); //(4) [Apple, Banana, Mango, Orange]解决 sort() 按位排序的方法//升序
var arr2 [2,101,6,58,3]
arr2.sort(function(a,b){return a-b;})
console.log(arr2); //(5) [2, 3, 6, 58, 101]//降序
arr2.sort(function(a,b){return b-a;})
console.log(arr2); //(5) [101, 58, 6, 3, 2]② reverse()反向排序将数组中的元素颠倒顺序返回逆序后的数组。var arr [Banana, Orange, Apple, Mango]arr.reverse();console.log(arr); //(4) [Mango, Apple, Orange, Banana]5数组转为字符join()、toString()
① join()将数组转为字符参数会将逗号替换掉返回一个新数组var arr [2,6,8,9];
console.log(arr.join()); //2,6,8,9
console.log(arr.join()); //2689
console.log(arr.join(-)); //2-6-8-9② toString()也可以将数组转为字符返回一个新数组var arr [2,6,8,9];
console.log(arr.toString()); //2,6,8,96合并两个或多个数组concat()返回新数组不影响原数组。
var a [2,6,8,9];
var b [hello, world, I];
var c [4, 7];
var result a.concat(b, c);
console.log(result); //(9) [2, 6, 8, 9, hello, world, I, 4, 7]5. 数组的遍历获取数组中的每个元素for()
1定义一个 30 项的数组数组每一项要求是 1-10 的随机数每间隔 5 个数字求出前 5 个数的平均值。
var arr new Array(30);
var newArr [];
var aveArr [];
for(var i0; i30; i){arr[i] Math.round(Math.random()*91)
}
for(var i0; i30; ii5){newArr.push( arr.slice(i, i5) );
}
console.log(newArr)
for(var i0; inewArr.length; i){aveArr.push( ave(newArr[i]) )
}
console.log(aveArr)//求数组每个值之和的平均值
function ave(arr){var sum0;for(var i0; iarr.length; i){sum arr[i];}return sum/arr.length;
}2数组去重利用 对象 添加属性得到undefined 通过obj.A就可以给对象添加一个值为 undefined 的属性A。 定义一个空对象 obj遍历数组 判断数组中的第一个值在obj中是否存在如果不存在就将这个值作为对象的键给它赋值为1如果存在就把它的值1。判断第二个值在obj中是否存在…一次类推. var arr [a,b,a,a,b,a];
var obj {};
for(var i0; iarr.length; i){if( obj[arr[i]] ){ obj[arr[i]];} else { obj[arr[i]] 1;}
}
console.log(obj);//{a:4, b:2}得到的是a和b在数组中的重复个数
var newArr [];
for(var key in obj){newArr.push(key);
}
console.log(newArr); //[a,b]6. 冒泡排序 和 比较排序
1冒泡排序依次对数组中相邻数组进行比较。如果第一个比第二个大就交换他们两个。
var arr [12,9,6,8,3,4];
for(j 0; jarr.length-1; j){for(var i 0; iarr.length-1-j; i){if(arr[i] arr[i1]){var temp arr[i];arr[i] arr[i1];arr[i1] temp; }}
}2比较排序将第一位依次与后面的元素相比较得到最小值与第一位交换再用第二位依次与后面的元素相比较得到最小值再与第二位交换…
var arr [3,1,2,4,6,9];
for(var i 0;iarr.length; i){var min arr[i];//假设为最小值var minIndex i;//最小值的indexfor(var j i1; jarr.length; j){ //i与后面所有的值做比较if(min arr[j]){min arr[j];minIndex j;}}arr[minIndex] arr[i];arr[i] min
}
console.log(arr);二、对象 存储数据的载体称为变量在对象中称为属性功能实现的载体称为函数在对象中称为方法当只操作对象进行编程的时候称为“面向对象编程”。 对象 其实就是一种类型即 引用类型。对象的值就是引用类型的实例。 在 ECMAScript 中引用类型是一种数据结构用于将数据和功能组织在一起它也常被称为“类”。对象的组成 由 属性键、key 和 属性值值、value 组成作用 1储存数据2用来编程 1. 书写规则
1属性可以直接写类似于变量名 2属性值可以是任意数据 3键和值之间用 “:” 连接 4没对属性之间用“,”隔开。
对象的值可以是数字、字符、布尔值、undefined、null、对象、数组、函数函数在对象中叫做 “方法”var obj {num: 1,str: hello,bool: true,und: undefined,nul: null,obj: {},arr: [],fn: function(){console.log(1);}
}2. 创建对象
所有对象都不相等但是对象身上的属性可以相等 1字面量方式创建var obj {}; 2构造函数的方式创建var obj new Object(); 构造函数new用来执行构造函数; 构造函数的特点 1所有通过 new 调用的函数不管有没有返回值都会得到一个函数的同名对象每次 new 得到的不是同一个 2构造函数只会产生对象构造函数是用来构造对象的函数不能用 ypeof 来检查数据类型。 function fn(){console.log(1)
}
var a new fn();
var b new fn();
console.log(a);//fn {}
console.log(b);//fn {}
console.log(a b);//false内部用this 来构造属性和方法 function Person()
{this.namehxl;this.age18;this.sayHifunction(){alert(Hi)}}
var a new Person();
console.log(a);//Person {name: hxl, age: 18, sayHi: ƒ}3. 操作属性值
1获取 ① 通过 “.” 拿到对象中的值也可以使用 obj[属性名]注意要加双引号 ② 当 i 是变量时我们不能用 obj.i 去访问而要用 obj[i] ③ 获取一个对象中不存在的属性时它的属性值为 undefined。
var obj {a:1,b:hello,c:true,d:function(){console.log(haha);},e:function(){return {fn:function(){console.log(111);}}}
};
//两种获取方式
console.log(obj.a);//1
console.log(obj[a]);//1 此处若不加双引号意味着 a 是一个变量
console.log(obj[ a]);//1 用 [] 的方式获取里面还可以对变量进行拼接//获取和调用对象中的函数
console.log(obj.d); //f (){console.log(haha);}
console.log(obj.d()); //hahaconsole.log(obj.e);//f (){return{ fn:function(){console.log(111);} }}
console.log(obj.e());//{fn:f}
console.log(obj.e().fn);//f (){cosnole.log(111);}
console.log(obj.e().fn());//111//获取对象中不存在的属性名
console.log(obj.x); //undefined2改值 obj.c false; 4. 操作属性
1赋值 ① 直接赋值var obj {a:1,b:2};
② 变量赋值
var obj {};
obj.a 20;
console.log(obj)//{a:20}
obj.fn function(){console.log(1);
}
console.log(obj);//{a:20,fn:f}2删除对象中的某个属性delete 对象.属性名;
var obj {name: admin,age: 18,sex: 保密,height: 180cm,weight: 70KG,like: [read,sport,wirte]
}
delete obj.like;
console.log(obj); //{name: admin, age: 18, sex: 保密, height: 180cm, weight: 70KG}5. 对象的遍历 for-in
1for-in 用于非数组对象的遍历常用于对象的遍历。 因为 obj.length 得到的是 undefined所以普通的 for() 对 对象 没有用。 枚举 for-in 循环中的代码每执行一次就会对数组的元素或者对象的属性进行一次操作这种循环也称“枚举”。 var obj {name:hxl,age:20,show:function(){console.log(hello)},skill:编程
};
for(var i in obj){console.log(i);//name age show skillconsole.log(obj.i);//undefined undefined undefined undefined//注意//原因 i 不是 obj 身上的属性这里的 i 只是一个变量。//当 i 是变量时我们不能用 obj.i 去访问而要用 obj[i]console.log(obj[i]);//hxl 20 f (){console.log(hello)} 编程
}2Object 适用于 所有可枚举属性的 对象包括字符串。
① Object.keys()返回值是一个由原对象的 key/键/属性名 组成的新数组 。
传入普通数组返回 索引。var arr [a, b, c];
console.log(Object.keys(arr)); // [0, 1, 2]//传入对象返回 键/属性名
var obj { a: alive, b: bike, c: color };
console.log( Object.keys(obj) ); // [a, b, c]传入对象返回 键/属性名。var obj { a: alive, b: bike, c: color };
console.log( Object.keys(obj) ); // [a, b, c]② Object.values()返回值是一个由原对象的 value/值/属性值 组成的新数组 。
const obj { id:1, name:zhangsan, age:18 }
console.log(Object.values(obj)); // [1, zhangsan, 18]补充 Object.assign({}, 对象1, 对象2, 对象3) 合并两个或多个对象返回一个新对象不修改原对象。var obj1 {a:1, b:2};
var obj2 {c:3, d:4};
console.log(Object.assign({}, obj1, obj2); // {a:1, b:2, c:3, d:4}6. 深浅拷贝
1值传递 在拷贝的时候拷贝的是值 var a 10;var b a;console.log(a, b); //10 10b 20;console.log(a, b); //10 202引用传递 在拷贝的时候拷贝的是指针内存地址
var obj1 {name:admin};
var obj2 obj1;
console.log(obj1, obj2);//{name: admin} {name: admin}obj2.name hxl;
console.log(obj1, obj2);//{name: hxl} {name: hxl}3对象的深浅拷贝
浅拷贝直接复制数组和对象 只拷贝内存地址当修改拷贝之后的数据时会影响原数据引用传递 对象本身是引用传递浅拷贝。深拷贝 不拷贝内存地址只拷贝值当修改拷贝之后的数据时不会影响原数据。值传递
4浅拷贝 转换为 深拷贝常使用深拷贝 ① 整个赋值 var obj1 {name:hxl};var obj2 obj1;obj2 {name:zjx};console.log(obj1);//{name: hxl}console.log(obj2);//{name: zjx}//或者 相比上面的方法建议var obj1 {name:hxl};var obj2 {}; //给自己一个存储空间obj2.name obj1.name;obj2.name root;console.log(obj1); //{name: hxl}console.log(obj2); //{name: root}② 当对象有多个属性和属性值时
var obj1 {name:admin,age:18};
var obj2 {};
for(var i in obj1){obj2[i] obj1[i];
}
obj2.name root;
console.log(obj1); //{name: admin, age: 18}
console.log(obj2); //{name: root, age: 18}③ 当对象有多个属性和属性值时属性值又是对象 使用JSON.stringify将数据转换成字符再用JSON.parse转换成对象。 this.labelListData JSON.parse(JSON.stringify(this.editLabelList));这种情况在项目中会出现在——从接口获取的数据同时赋值给两个变量,改变其中一个变量时另一个变量的值也会改变。 7. 基础类型和引用类型 基础类型都是值传递引用类型都是引用传递。 1值类型(基本类型)字符串String、数字(Number)、布尔(Boolean)、对空Null、未定义Undefined、SymbolES6 引入了一种新的原始数据类型表示独一无二的值。
2引用数据类型对象(Object)、数组(Array)、函数(Function)。 三、this this 是一个指针、变量、对象。表示当前函数所在的执行上下文空间即当前的执行环境面向对象语言中 this 表示当前对象的一个引用但在 JavaScript 中 this 不是固定不变的它会随着执行环境的改变而改变。 this 指向问题 1在 js 中全局的变量和函数全部属于 windowthis 指向 window。 2在方法中this 表示该方法所属的对象。 3在函数中this 会指向 window但在严格模式下函数中的 this 会指向 undefined 4在事件中this 表示接收事件的元素即接收事件的 HTML 元素。
1. 在 js 中全局的变量和函数全部属于 window。
var a this;
console.log(a, window);2. 在方法中this 表示该方法所属的对象。
在对象方法中 this 指向调用它所在方法的对象。
//this 表示 person 对象。fullName方法所属的对象就是 personthis.firstName相当于person.firstName
var person {firstName: John,lastName : Doe,id : 5566,fullName : function() {return this.firstName this.lastName;}
};
console.log( person.fullName() ); //John Doe3. 在函数中在函数中会生成一个区域也叫做作用域除此之外在函数中还存在另外一个东西——this
1 在函数中函数的所属者默认绑定到 this 上在浏览器中window 就是该全局对象。回调函数中的 this 也指向window。 普通函数 function myFunction() {return this;
}
console.log(myFunction())回调函数回调函数就是把一个函数作为参数 传递给另一个函数。 var obj {name: admin,show: function (fn) { console.log(this); //指向objfn();}
}
obj.show( function(){ //obj.show中的这个以函数为参数的函数就是“回调函数”console.log(this); //指向window
})其实拆分出来相当于 var obj {
name: admin,
show: function () { console.log(this); //指向objfunction fn(){conosle.log(this); //指向fnfn属于window}fn(); //window.fn();
}
}
obj.show();2严格模式下函数是没有绑定到 this 上这时候 this 是 undefined。
function myFunction() {user strict;return this;
}
console.log(myFunction()); //undefined4. 在事件中this 表示接收事件的元素。
在 HTML 事件句柄中this 指向了接收事件的 HTML 元素。
button onclickthis.style.displaynone点我后我就消失了
/button总结 观察一个函数或变量看前面有没有对象如果有对象那么就属于这个对象如果没有就属于window。 this 指向的必须是一个对象如果不是对象会强行当成 一个对象 call() 和 apply() 方法可以将 this 引用到任何对象。
