js学习笔记
一:js数据类型
1:基本数据类型
number类型(整数,小数)
String类型
boolean类型
NaN类型其实是一个number类型表示它不是一个数
null类型其实也是一个object类型的指代的是空对象的引用
undefined类型表示一个变量没有被初始化值
2:引用数据类型
object
如果想知道一个变量所属的数据类型可以用typeof操作符
二:数组
1:数组的定义:类似于java中的map容器,数组的内容不一定是相同类型的数据
第一种方法:
var arr = new Array();
arr.push;
第二种方法:
var arr = [1,2,3,true,"adsas"];
2:常用方法:push,pop,shift,unshift,splice,slice,concat,join,sort,reverse
数组的大小是可以任意改变的 如:arr.length = 5;强制将数组的长度改为5
push 方法:直接操作数组
我们有的时候需要在数组中加入一个或者多个数据这时候我们可以用push方法
eg:arr.push(null);[1,2,3,true,"adsas",null]
pop方法:直接操作数组
从现有数组中弹出最后一个数据出来并且删除最后一个数据
eg:arr.pop(); //null
shift方法:直接操作数组
删除第一个元素并且返回第一个元素的值
eg:arr.shift();//1
unshift方法:直接操作数组返回一个新的数组
在数组的首部插入一个数组或者元素
eg:arr.unshift(a2);返回一个新的数组
splice方法:直接操作数组放回一个删除了的数组,第一个参数是从哪个位置开始删除,
第二个参数是要删除的元素个数
第三个参数表示追加的新元素个数
arr = [1,2,3,true,"adsas"]
eg:arr.splice(1,2,3,4,5);//[1,3,4,5,true,"adsas"]
slice方法:不直接操作数组,纯粹的截取数组,参数是左开右闭,类似于java字符串操作
eg:var sliceResult = arr.slice(0,3);//截取的是arr[0],arr[1],arr[2]
返回一个截取的数组sliceResult因为之前的arr数组没有改变
concat方法:不直接操作数组,是做数组的链接,返回一个链接之后的数组对象
但是该方法只针对number | string | boolean
var a1 = [1,2,3,4,5,true];
var a2 = [false,"asda",null,undefined];
var a3 = a1.concat(a2);//[1,2,3,4,5,true,false,"asda",undefined]
join方法:不直接操作数组,将数组按照特定的分隔符进行分割
var a1 = [1,2,3]
a1.join("-"); //[1-2-3]
console.log(a1); [1,2,3]
sort方法:直接操作数组,将数组按照字符的编码顺序进行排序,数字也当成字符进行处理例如:以下例子:
var map1 = [3,20,9];
map1.sort(); //[20,3,9];
排序的时候只比较数字的第一个数字20的第一个数字就是2所以将2放到了最前面。
在例如:
var map2 = [120,190,180,110];
map2.sort(); //[110,120,180,190]
如果是一位数,二位数,三位数或者更多位数进行比较的时候首先是比较第一个字符谁大谁小,大的排到后面
var map3 = [110,1,11,8,20,130,100]
map3.sort();//[1,100,11,110,130,20,8]
如果想要正确的排序数组需要传入一个特定的比较函数:
这时候进行排序处理:
map3.sort(compare)
console.log(map3); //[1,8,11,20,100,110,130]
reverse方法:将数组的顺序进行反转,纯粹的倒序数组
var arr = [1,2,1,4];
arr.reverse();
console.log(arr); //[4,1,2,1]
3:ECMA5扩展方法:
一:数组的提取
1:indexOf(searchElement,startIndex)
第一个参数是想要检索的元素值,startIndex表示从哪个位置开始检索,返回第一个匹配该值的索引位置。
如果第二个参数没有给出的话,默认是从零开始索引
2:lastIndexOf(searchElement,fromIndex)
第一个参数是想要检索的元素值,formIndex表示从哪个位置开始向前检索遇到第一个匹配的返回索引位置
同样如果第二个参数没有指定的话,默认是从最后的索引位置开始检索
二:数组的遍历:5中方法可以对数组进行遍历 map ,some ,filter,every,forEach
1:第一种类型:返回值为数组的方法 :map,filter
1.1 map方法:返回一个新的数组
var arr = [1,2,3,4,8,5,2,1,0];
arr.map(callbackFn(),thisArg)
var res = arr.map(function(value,index,arr){
//在这个函数里你可以进行必要的逻辑处理,这里的value ,index ,arr是已经知道的,代表数组中的元素和
//索引位置
return value * 2 + index;
});
console.log(res); // [false,true,true,true ..,false]
1.2:filter方法:
var res = arr.filter(function(value,index,arr){
value > 3 ? value : false;
});
console.log(res); // [4,8,5]
2:第二种类型:返回值为boolean类型的方法:some,every
顾名思义some方法应该是找到数组中满足条件的一个元素就行了,没有必要都满足条件,只要有一个满足条件就返回
true
而every方法是要求数组的每一个元素都要满足条件才返回true,只要有一个为false的就返回false
var res = arr.some(function(value,index,arr){
return value > 3 ? true : false;
});
console.log(res) //true;
相反every方法就会返回false
3:第三种类型是没有返回值得纯遍历数组的方法forEach()没有任何的返回值
arr.forEach(function(value,index,arr){
//只需要显示数组的元素就行了不需要过多的逻辑处理
});
三:数组的缩窄:reduce,reduceRight
reduce 从0位置开始遍历数组
reduceRight 从数组最后一个元素开始向前遍历
arr.reduce(function(prev,cur,index,arr){
return prev + cur;
})
三:object:所有类的root类,类中的属性是不可以重复的,重复的话会覆盖掉原来的属性值
类的初始化:var obj = new Object();或者var obj = {};
obj.name = "lk"; obj.age = 19;
obj.setName(name) = function(){
}
1:对象的遍历:for in 循环
2:构造器:constructor
3:利用object模拟java中的map对象
4:利用js对象的特性来去除数组中的重复项:js对象中的key永远不会重复
5:单例类型的对象,Global对象其实你是new不出来的
它有以下方法可以使用:
一:编码解码方法
encodeURI(string:uri),encodeURIComponent(string:uri)
decodeURI(string:uri),decodeURIComponent(string:uri)(常用)
encodeURI()是将空格字符进行编码,不会对": //"等字符进行编码
(常用)encodeURIComponent()会将空格和 ": //"字符都进行编码的
二:eval(string)方法
将string字符串转换为js脚本,
1:基本数据类型的转换:
2:数组类型:
三:Date对象
四:函数:重要的内容
1:函数的定义:
第一种方式定义:优先解析,创建函数最快,静态,函数作用域
function test(){
console.log();
}
test();
第二种方式定义:直接量式,顺序解析,创建函数中等,静态解析,函数作用域
var test1 = function(){
console.log();
}
test1();
第三种方式定义:构造函数式:创建函数最慢,动态解析,顶级作用域
var test3 = new Function("a","b","return a + b;")
test3();
2:函数也是一种数据类型可以作为参数传递给另外一个函数:function类型
function add(function get(){
console.log("get number");
})
3:解析顺序:
function te(){}语句式是优先进行解析的js解析器把它当做是全局变量优先将其放到内存中去;该方式声明的函数
是静态的函数,
背后的原理是 1:function te(){}会先解释,不会顾及其他函数的顺序,
2:函数的名字相同的时候会出现覆盖的现象
4:函数作用域的概念:
JavaScript这个特性被非正式地称为声明提前,即JavaScript函数里声明的所有变量(但不涉及赋值)
都被提前至函数体的顶部了。
5:js作用域链的变量访问规则是:如果当前作用域内存在访问的变量,则使用当前作用域的变量,否则到上一层
作用域内查找,知道全局作用域,如果找不到,则该变量为未声明,因为函数式可以嵌套的所以才有作用域链的
概念。
6:匿名函数的调用:
匿名函数的使用在JS很重要,由于js中一切数据都是对象,包括函数,因此可以将一个函数传递到另外一个函数
中
如果匿名函数没有保存,则运行后被从内存中释放
//匿名函数的调用
7:函数被调用的时候,运行在它被定义的环境中去,无论函数在哪里被调用,被谁调用,都无法改变函数被声明的
语法环境,这决定了函数的运行环境
在最后一句的地方他会重建holder()方法中需要的变量,但是不会重建holder函数,会重建x,fun2函数
一:js数据类型
1:基本数据类型
number类型(整数,小数)
String类型
boolean类型
NaN类型其实是一个number类型表示它不是一个数
null类型其实也是一个object类型的指代的是空对象的引用
undefined类型表示一个变量没有被初始化值
2:引用数据类型
object
如果想知道一个变量所属的数据类型可以用typeof操作符
二:数组
1:数组的定义:类似于java中的map容器,数组的内容不一定是相同类型的数据
第一种方法:
var arr = new Array();
arr.push;
第二种方法:
var arr = [1,2,3,true,"adsas"];
2:常用方法:push,pop,shift,unshift,splice,slice,concat,join,sort,reverse
数组的大小是可以任意改变的 如:arr.length = 5;强制将数组的长度改为5
push 方法:直接操作数组
我们有的时候需要在数组中加入一个或者多个数据这时候我们可以用push方法
eg:arr.push(null);[1,2,3,true,"adsas",null]
pop方法:直接操作数组
从现有数组中弹出最后一个数据出来并且删除最后一个数据
eg:arr.pop(); //null
shift方法:直接操作数组
删除第一个元素并且返回第一个元素的值
eg:arr.shift();//1
unshift方法:直接操作数组返回一个新的数组
在数组的首部插入一个数组或者元素
eg:arr.unshift(a2);返回一个新的数组
splice方法:直接操作数组放回一个删除了的数组,第一个参数是从哪个位置开始删除,
第二个参数是要删除的元素个数
第三个参数表示追加的新元素个数
arr = [1,2,3,true,"adsas"]
eg:arr.splice(1,2,3,4,5);//[1,3,4,5,true,"adsas"]
slice方法:不直接操作数组,纯粹的截取数组,参数是左开右闭,类似于java字符串操作
eg:var sliceResult = arr.slice(0,3);//截取的是arr[0],arr[1],arr[2]
返回一个截取的数组sliceResult因为之前的arr数组没有改变
concat方法:不直接操作数组,是做数组的链接,返回一个链接之后的数组对象
但是该方法只针对number | string | boolean
var a1 = [1,2,3,4,5,true];
var a2 = [false,"asda",null,undefined];
var a3 = a1.concat(a2);//[1,2,3,4,5,true,false,"asda",undefined]
join方法:不直接操作数组,将数组按照特定的分隔符进行分割
var a1 = [1,2,3]
a1.join("-"); //[1-2-3]
console.log(a1); [1,2,3]
sort方法:直接操作数组,将数组按照字符的编码顺序进行排序,数字也当成字符进行处理例如:以下例子:
var map1 = [3,20,9];
map1.sort(); //[20,3,9];
排序的时候只比较数字的第一个数字20的第一个数字就是2所以将2放到了最前面。
在例如:
var map2 = [120,190,180,110];
map2.sort(); //[110,120,180,190]
如果是一位数,二位数,三位数或者更多位数进行比较的时候首先是比较第一个字符谁大谁小,大的排到后面
var map3 = [110,1,11,8,20,130,100]
map3.sort();//[1,100,11,110,130,20,8]
如果想要正确的排序数组需要传入一个特定的比较函数:
sort(compareFn)
@param compareFn — The name of the function used to determine the order of the elements.
If omitted, the elements are sorted in ascending, ASCII character order.
function compare(value1,value2){
if(value1 < value2){
return -1;
}else if(value1 > value2){
return 1;
}else{
return 0;
}
}
这时候进行排序处理:
map3.sort(compare)
console.log(map3); //[1,8,11,20,100,110,130]
reverse方法:将数组的顺序进行反转,纯粹的倒序数组
var arr = [1,2,1,4];
arr.reverse();
console.log(arr); //[4,1,2,1]
3:ECMA5扩展方法:
一:数组的提取
1:indexOf(searchElement,startIndex)
第一个参数是想要检索的元素值,startIndex表示从哪个位置开始检索,返回第一个匹配该值的索引位置。
如果第二个参数没有给出的话,默认是从零开始索引
2:lastIndexOf(searchElement,fromIndex)
第一个参数是想要检索的元素值,formIndex表示从哪个位置开始向前检索遇到第一个匹配的返回索引位置
同样如果第二个参数没有指定的话,默认是从最后的索引位置开始检索
二:数组的遍历:5中方法可以对数组进行遍历 map ,some ,filter,every,forEach
1:第一种类型:返回值为数组的方法 :map,filter
1.1 map方法:返回一个新的数组
var arr = [1,2,3,4,8,5,2,1,0];
arr.map(callbackFn(),thisArg)
var res = arr.map(function(value,index,arr){
//在这个函数里你可以进行必要的逻辑处理,这里的value ,index ,arr是已经知道的,代表数组中的元素和
//索引位置
return value * 2 + index;
});
console.log(res); // [false,true,true,true ..,false]
1.2:filter方法:
var res = arr.filter(function(value,index,arr){
value > 3 ? value : false;
});
console.log(res); // [4,8,5]
2:第二种类型:返回值为boolean类型的方法:some,every
顾名思义some方法应该是找到数组中满足条件的一个元素就行了,没有必要都满足条件,只要有一个满足条件就返回
true
而every方法是要求数组的每一个元素都要满足条件才返回true,只要有一个为false的就返回false
var res = arr.some(function(value,index,arr){
return value > 3 ? true : false;
});
console.log(res) //true;
相反every方法就会返回false
3:第三种类型是没有返回值得纯遍历数组的方法forEach()没有任何的返回值
arr.forEach(function(value,index,arr){
//只需要显示数组的元素就行了不需要过多的逻辑处理
});
三:数组的缩窄:reduce,reduceRight
reduce 从0位置开始遍历数组
reduceRight 从数组最后一个元素开始向前遍历
arr.reduce(function(prev,cur,index,arr){
return prev + cur;
})
三:object:所有类的root类,类中的属性是不可以重复的,重复的话会覆盖掉原来的属性值
类的初始化:var obj = new Object();或者var obj = {};
obj.name = "lk"; obj.age = 19;
obj.setName(name) = function(){
}
1:对象的遍历:for in 循环
for(var a in user){
//这个a 是这个对象里面的一个属性或者是方法
console.log(a);
//要想取得这个对象的属性的值需要用user[a]的方式进行取值,类似于java中的map数据结构采用的是数组加链表
//的结构进行构建
console.log(user[a]);
}
2:构造器:constructor
var Person = function(name,age,id){
this.name = name;
this.age = age;
this.id= id;
}
var p = new Person('lc',20,1);
//获得对象的构造器
console.log(p.constructor);
//用于检查给定的属性是否能够使用for-in循环进行遍历或者枚举
console.log(p.propertyIsEnumerable(propertyName))
//用于检查给定的属性在当前的对象实例中是否存在
console.log(p.hasOwnProperty(propertyName))
3:利用object模拟java中的map对象
function myMap(){
size = 0;
obj = { };
//put方法将元素放入到map中去
this.put = function(key,value){
obj[key] = value;
size++;
}
//通过键获得值
this.get = function(key) {
if(obj[key] || obj[key] === 0){
return obj[key]
}else{
return null;
}
}
//获取对象的大小
this.getSize = function(){
console.log(size);
return size;
}
//移除元素
this.remove = function(key) {
if(obj[key] || obj[key] === 0){
delete obj[key];
return true;
}else{
return false;
}
}
//遍历对象
this.eachMap = function(fn){
//遍历对象
for(var attr in obj){
//传入的函数可以对key 和 value进行处理
fn(attr,obj[attr]);
}
}
}
4:利用js对象的特性来去除数组中的重复项:js对象中的key永远不会重复
var arr = [1,1,2,3,3,3,4,4,5,4,3,6,7,6,8,7,9,10,9];
//第一步将数组转换为js对象
function arrToObject(arr){
var obj = {};
var j = arr.length;
for(var i = 0;i<j;i++){
obj[arr[i]] = true;
}
return obj;
}
var resultObj = arrToObject(arr);
//将对象转换为数组
function objToArr(obj){
var arr = {};
for(var att in obj){
arr.push(att);
}
return arr;
}
var resultArr = objToArr(reslutObj);
console.log(resultArr);
5:单例类型的对象,Global对象其实你是new不出来的
它有以下方法可以使用:
一:编码解码方法
encodeURI(string:uri),encodeURIComponent(string:uri)
decodeURI(string:uri),decodeURIComponent(string:uri)(常用)
encodeURI()是将空格字符进行编码,不会对": //"等字符进行编码
(常用)encodeURIComponent()会将空格和 ": //"字符都进行编码的
eg:var url = "http://www.baidu.com cn";
var res1 = encodeURI(url);
console(res1); //http://www.baidu.com%20cn
var res2 = encodeURIComponent(url);
console(res2); // http%3f%2fwww.baidu.com%20cn
escape(string)方法:实现对字符串的编码
unescape(string)方法:实现对字符串的解码
二:eval(string)方法
将string字符串转换为js脚本,
1:基本数据类型的转换:
var str1 = "var a = 9;var b = 10;"
var res1 = eval(str1);
console.log(a + b); //19
2:数组类型:
var strArr = "[1,2,3,4,5,6,7]";
var resArr = eval(strArr);
console.log(resArr); //[1,2,3,4,5,6,7]
3:对象类型或者函数类型:eval('(' + string + ')')才能正确的执行
var strObj = "{name : 'lkd',age : 20,id : 10}";
var resObj = eval('(' + strObj + ')');
console.log(resObj); //{name : 'lkd',age : 20,id : 10}
三:Date对象
var date = new Date();
date.getFullYear(); //获得当前年份
date.getMonth() + 1; //获得的月份需要加一处理才能得到正常的月份
date.getDay(); //获得星期数 0 表示星期日
date.getHours();//获得小时数
四:函数:重要的内容
1:函数的定义:
第一种方式定义:优先解析,创建函数最快,静态,函数作用域
function test(){
console.log();
}
test();
第二种方式定义:直接量式,顺序解析,创建函数中等,静态解析,函数作用域
var test1 = function(){
console.log();
}
test1();
第三种方式定义:构造函数式:创建函数最慢,动态解析,顶级作用域
var test3 = new Function("a","b","return a + b;")
test3();
2:函数也是一种数据类型可以作为参数传递给另外一个函数:function类型
function add(function get(){
console.log("get number");
})
3:解析顺序:
function te(){}语句式是优先进行解析的js解析器把它当做是全局变量优先将其放到内存中去;该方式声明的函数
是静态的函数,
//function语句式
function test(){
console.log("1");
}
test();
//直接量式
var test = function(){
console.log("2");
}
test();
//构造方法式
var test = new Function("console.log('3')");
test();
//function语句式
function test(){
console.log("4");
}
test();
//直接量式
var test = function(){
console.log("5");
}
test();
//构造方法式
var test = new Function("console.log('6')");
test();
//输出结果 4 2 3 3 5 6
背后的原理是 1:function te(){}会先解释,不会顾及其他函数的顺序,
2:函数的名字相同的时候会出现覆盖的现象
4:函数作用域的概念:
function myTest(num){
var i = 0;
if(num == 222){
var j = 0;
for(var k = 0;k < 2;k++){
console.log(k);
}
console.log(k);
}
console.log(i);
console.log(j);
console.log(k);
}
myTest(111);//0,undefined,undefined
上面的代码类似于下面的代码
function myTest(num){
var i = 0;
var j,k;
if(num == 222){
j = 0;
for(k = 0;k < 2;k++){
console.log(k);
}
console.log(k);
}
console.log(i);
console.log(j);
console.log(k);
}
myTest(111);//0,undefined,undefined
JavaScript这个特性被非正式地称为声明提前,即JavaScript函数里声明的所有变量(但不涉及赋值)
都被提前至函数体的顶部了。
5:js作用域链的变量访问规则是:如果当前作用域内存在访问的变量,则使用当前作用域的变量,否则到上一层
作用域内查找,知道全局作用域,如果找不到,则该变量为未声明,因为函数式可以嵌套的所以才有作用域链的
概念。
6:匿名函数的调用:
匿名函数的使用在JS很重要,由于js中一切数据都是对象,包括函数,因此可以将一个函数传递到另外一个函数
中
如果匿名函数没有保存,则运行后被从内存中释放
//匿名函数的调用
var ab = (function(a,b){
return a + b;
})(1,2);
console.log(ab);
//()表示执行相关代码
(function(a,b){
return a + b;
}(1,2));
7:函数被调用的时候,运行在它被定义的环境中去,无论函数在哪里被调用,被谁调用,都无法改变函数被声明的
语法环境,这决定了函数的运行环境
var x = 99;
// var inerFun = null;
function fun1(){
console.log(x);
}
function holder(){
var x = 100;
var fun2 = fun1;
//在函数内部如果定义一个变量没有加var那么默认是被认为全局变量
inerFun = function(){
fun2();
console.log(x);
}
fun1(); // 99
fun2(); //99
inerFun(); //100
}
holder();
fun1(); // 99
inerFun(); //100
在最后一句的地方他会重建holder()方法中需要的变量,但是不会重建holder函数,会重建x,fun2函数