js学习笔记

最新推荐文章于 2024-07-21 23:48:11 发布
最新推荐文章于 2024-07-21 23:48:11 发布
阅读量1.1k 收藏 3
点赞数 1
分类专栏： 前端 文章标签： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lck898989/article/details/79437918
版权
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]
              
              如果想要正确的排序数组需要传入一个特定的比较函数：
              
               
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函数
              
                


               
          


           
            


                   


          
_星星之火_
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript学习笔记
11-24
在实际使用中，JavaScript通常通过`<script>`标签内联嵌入HTML文档，或者引用外部.js文件。需要注意的是，`<script>`标签的位置会影响代码的执行时机，通常建议将其放置在`<head>`或`<body>`标签的底部，以确保在...
遇到的一些面试题
elktime的博客
06-01 228
ES5的5种：Null，undefined，Boolean，Number，String， ES6新增：Symbol表示独一无二的值 ES10新增：BigInt 表示任意大的整数一种引用数据类型：（本质上是由一组无序的键值对组成）Object。包含Object、Array、 function、Date、RegExp。 JavaScript不支持创建任何自定义类型的数据，也就是说JavaScript中所有值的类型都是上面8中之一。在 if 语句中 null 和 undefined 都会转为false两者用相等运
JS中数组常用的方法
CharliePuthJJ的博客
05-08 232
关于js中数组的操作还蛮多的，有时候我知道某些方法，但是用起来又忘记某些语法和某些参数项，所以我打算根据归纳一下js常见的数组arr的方法，以便以后的使用起来更加熟练。
JS基础知识学习笔记全
最新发布
hetupyou的博客
07-21 1822
JS基础知识学习笔记全 一、引入方式 1、内部脚本 （一般定义在body下面会改善执行速度） <body> </body> <!-- 内部脚本 --> <script> /* 打开页面警告框显示的内容 */ alert('helloJS'); </script> 2、外部脚本 外部专门新建一个.js文件，里面只存放js代码，没有外部的script标签，文件中内容如下 /* 打开页面警告框显示的内容 */ aler
javascript 处理null及'null'值 （转载）
一路前行
12-04 1438
function dealNull(obj){    for(var i in obj){        if(null == obj[i] || 'null' == obj[i]){            obj[i]='';        }else if('object' == typeof obj[i]){            dealNull(obj[i]);        }   ...
JS入门到精通完整版
qq_46362763的博客
08-08 1万+
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。它是作为开发Web页面的脚本语言而出名，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。.....................
js中push方法小结
热门推荐
张木期的博客
08-25 3万+
今天笔试做一道算法题，老是通过不了，头大，直到交卷也没有通过，考完后查了一下，原来是我push的用法用错了，也是服了，重点注意这里arr.push后返回的是push的长度，我却一直用var arr=arr.push('first'),然后输出arr总是1，也是蠢爆了。。。。。。下面总结一下push方法吧 push方法是数组中的 var arr = [] var length = arr.push(...
JavaScript学习笔记
06-23
本资源“JavaScript学习笔记”是为初学者精心准备的一份教程，旨在帮助你快速掌握JavaScript的基础知识，并解决在学习过程中可能遇到的问题。 1. **变量与数据类型**： JavaScript支持多种数据类型，包括基本类型...
javaScript学习笔记
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
Javascript 基础知识学习
岳来的博客
11-23 7257
javascript 基础学习
Javascript学习
守灯者的博客
03-04 1396
Javascript 学习记录
JavaScript 基础（超详细）
TKOP_的博客
03-02 1万+
这篇笔记大概囊括了 JavaScript 基础的所有知识点。适合 js 初学者去查看特定知识点或者已经自学完 js 的伙伴去完成查漏补缺的过程。知识点的梳理参照了《JavaScript 高级程序设计》的内容，所以这算是一篇读书笔记。知识点的具体介绍主要有书中重要讲述、代码示例、思维图表、重难点解析、个人思考总结和他人的启发。虽不敢说这是最详细的笔记，但对于每个知识我都会尽力将自己的所思所想清楚地记录下来并分享。
JavaScript基础学习笔记1
qxf1969851571的博客
01-06 1490
一些JavaScript的基础知识
JS如何学习
weixin_35755562的博客
01-05 371
JavaScript 是一种流行的编程语言，可以用来开发网站和网络应用。它可以运行在浏览器中，也可以运行在服务器端。 要学习 JavaScript，你可以从以下几个方面入手： 了解 JavaScript 的基本语法。JavaScript 的语法和其他编程语言很像，你可以先了解变量、数据类型、运算符、流程控制语句、函数等基础概念。 在浏览器中练习 JavaScript。JavaScript 可以直...
JavaScript的学习
m0_66030479的博客
07-09 1665
js的学习
JS入门必备基础知识（适合新人学习）
qq_57162921的博客
09-21 2409
js基础学习
js基础学习
qq_52701502的博客
04-22 437
javascript_day01 学习目标 1.掌握js的组成 2.掌握数据类型 3.掌握运算符 4.掌握流程控制 5.掌握数组 6.掌握函数 7.掌握作用域 8.掌握js对象 一、javascript 概述 1.1 javascript 介绍 JavaScript在1995年由Netscape（网景）公司设计的脚本语言。 js是一个什么样的语言呢？ 是一门脚本语言：不需要编译,直接执行 是一门解释性语言：相对于编译语言java不同，没有编译成机器语言class文件过程；源代码不能直接翻译成机器语言，而
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值