JS基础入门

最新推荐文章于 2023-06-16 18:33:14 发布

m0_66478461

最新推荐文章于 2023-06-16 18:33:14 发布

阅读量1.1k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_66478461/article/details/123150322

版权

第一章、ES5

前言：ES5作为ECMAScript第五个版本（第四版因为过于复杂废弃了），给我们提供了很多API

一、保护对象：保护对象的成员（属性和方法）但几乎没有用处

1、四大特性

语法：

Object.defineProperties(obj,{
       "属性名":{
           value:实际保存值,
           writable: true/false,//开关：控制着这个属性名是否可以被修改
           enumerable: true/false,//开关：控制着这个属性名是否可以被for in循环遍历到
           configurable: true/false,//开关：控制着这个属性名是否可以被删除 - 这一句是总开关，一旦设置为false，其他特性不允许在修改，一旦设置为false不可逆
       }
   })
var ty={"id":1001,"name":"涛涛","salary":1000000}
Object.defineProperty(dy,"id",{
			writable: false,//开关：控制着这个属性名是否可以被修改
			configurable: false,//开关：控制着这个属性名是否可以被删除
			})

Object.defineProperties(ty,{
				id:{
					writable: false,//开关：控制着这个属性名是否可以被修改
					configurable: false,//开关：控制着这个属性名是否可以被删除
				},
				name:{
					configurable: false,//开关：控制着这个属性名是否可以被删除
				}
	         })

2、三个级别：

       1、防扩展：禁止给对象添加新属性
           Object.preventExtensions(obj);
       2、密封：禁止给对象添加新属性和删除属性
           Object.seal(obj);
       3、冻结：禁止给对象添加和删除和修改
           Object.freeze(obj);

二、数组的新的API：3组6个

1、判断：判断结果一定是一个布尔值（以下6个API的底层都是for循环，目的 - 简化for循环）

1）every：每一个元素都要满足条件，结果才为TRUE，只要有一个不满足条件就为FALSE->类似&&。

语法：var bool=arr.every(function(val,i,arr){
return 判断条件;
})

               //val - 当前值
               //i - 当前下标
               //arr - 数组本身

//判断数组是否【都】由偶数组成
        var arr1 = [1, 2, 3, 4, 5];
        var arr2 = [2, 4, 6, 8, 10];
//法一、
        console.log(
            arr1.every(val => val % 2 == 0)
        )
        console.log(
            arr2.every(val => val % 2 == 0)
        )
//法二、
Array.prototype.pdos = function() {
            for (var i = 0; i < this.length; i++) {
                if (this[i] % 2 != 0) {
                    return false;
                }
            }
            return true;
        }

        console.log(arr1.pdos());
        console.log(arr2.pdos());

//判断数组是否【包含】由偶数组成

        var arr1 = [1, 2, 3, 4, 5];
        var arr2 = [2, 4, 6, 8, 10];
        var arr3 = [1, 3, 5, 7, 9];
//法一、
        Array.prototype.pdos = function() {
            for (var i = 0; i < this.length; i++) {
                if (this[i] % 2 == 0) {
                    return true;
                }
            }
            return false;
        }
        console.log(arr1.pdos())
        console.log(arr2.pdos())
        console.log(arr3.pdos())
//法二、
console.log(
            arr1.some(val => val % 2 == 0)
        )
console.log(
            arr2.some(val => val % 2 == 0)
        )
console.log(
            arr3.some(val => val % 2 == 0)
        )

// 判断数组是否都是升序排列
        var arr1 = [1, 2, 3, 4, 5, 6];
        var arr2 = [4, 65, 1, 2, 43, 76];

        console.log(
            arr1.every(function(val, i, arr) {
                if (i == arr.length - 1) {
                    return true
                }
                return val <= arr[i + 1];
            })
        )
        console.log(
            arr2.every(function(val, i, arr) {
                if (i == arr.length - 1) {
                    return true
                }
                return val <= arr[i + 1];
            })
        )

2）every：每一个元素都要不满足条件，结果才为FALSE，只要有一个满足条件就为true->类似||。

语法：var bool=arr.some(function(val,i,arr){
return 判断条件;
})

2、遍历：将数组中的每个元素取出来执行相同或相似的操作：

1）forEach：遍历数组，直接修改原数组

语法：arr.forEach(function(val,i,arr){
直接做操作
})

//将数组中的每个元素*2
			var arr=[1,2,3,4,5];
	//方法一、		
			Array.prototype.c2=function(){
				for(var i=0,newArr=[];i<this.length;i++){
					newArr.push(this[i]*2)
				}
				return newArr;
			}
			
			var newArr=arr.c2();
			console.log(newArr);
			console.log(arr);
	//方法二、	
            arr.forEach((val, i, arr) => arr[i] *= 2)
            //			
            console.log(arr);
	//方法三、
            var newArr = arr.map(function(val) {
            return val * 2;
        })

            console.log(arr);
            console.log(newArr);

2）map：遍历数组，不修改原数组返回一个新数组

语法：var newArr=arr.map(function(val,i,arr){
return 操作的结果
})

3、过滤和汇总：

1）过滤：筛选出自己想要的，但是不会修改原数组

语法：var subArr=arr.filter(function(val,i,arr){
return 判断条件;
})

//筛选出偶数
var arr = [1, 2, 3, 4, 5, 6, 7];        
var subArr = arr.filter(function(val) {
         return val % 2 == 0;
    })
        			
    console.log(subArr);
    console.log(arr);

Array.prototype.filterEven = function() {
     for (var i = 0, newArr = []; i < this.length; i++) {
         if (this[i] % 2 == 0) {
             newArr.push(this[i]);
          }
        }
         return newArr;
     }

2）汇总：把数组中的每个元素汇总到一起

语法：

var sum=arr.reduce(function(prev,val,i,arr){
return prev+val;
},基础值);//基础值会和最后的结果加在一起

4、面试题：严格模式：很严格

开启：在你的任何作用域的顶部加上一句话："use strict";
功能：1）禁止给未声明的变量赋值 - 解决全局污染
2）静默失败升级为报错

5、 call/apply/bind：不是自己的方法也可以使用 - 笔试面试也很容易碰到

1） call/apply：临时替换了函数中的this -相当于借用

语法：函数名.call(借用的对象,实参,...); - 单独传入每一个实参
函数名.apply(借用的对象,arr); - 只能传入一个实参是一个数组，apply其实会默认的将数组打散
强调：call/apply，相当于立刻调用函数，立即执行

2）bind：永久替换了函数中的this - 相当于买下来一个方法

①创建了一个和原函数完全相同功能的新函数
②将新函数中的this永久绑定为了指定对象，别人都借不走了
③将新函数中的部分参数永久固定

用法：var 新函数=原函数.bind(指定对象,永久实参,...) - 不是立刻执行的，需要自己调用
强调：bind绑定的新函数没有办法被call/apply借走

6、固定套路：

1）Math.max/min.apply(Math,arr);
2）Object.prototype.toString.call/apply(arr);
3）***类数组转为普通数组：类数组名称=Array.prototype.slice.call/apply(类数组);

第二章、ES56

ES6：简化ECMAScript - 语法较大的变化

1、*模板字符串：可以在字符串中放入变量 - 不需要再做字符串拼接，在字符串中实现了一个简单的js的环境

语法：`我的名字叫${name}`
`我的名字+${name}`//

2、*块级作用域：尽量以后【优先】使用let创建变量

作用：1）禁止声明提前
2）添加了块级作用域，一个{}就是一个块
3）记录着当前触发事件的元素的下标

let 变量名=值;

3、箭头函数：

1） function去掉，()和{}之间添加=>
2）形参只有一个，省略();
3）函数体只有一句话，省略{};
4）函数体只有一句话并且是return，省略{}和return；

4、for...of循环作用不大不经常使用

语法：

for(var v of 数组名){
v;//value当前值
}

缺点：1）不能修改原数组，只能返回新数组
2）不能遍历hash数组，意味着也不能遍历对象，只能遍历索引数组

第三章、查找元素

四、DOM：Document Object Model（文档对象模型）
将每一个标签<div>/元素/属性/文本/注释，看做了一个DOM节点/元素/对象（提供了一些操作元素的属性/方法）

面试题：HTML/XHTML/DHTML/XML分别是什么？

1、HTML - >网页
2、XHTML - >更严格的网页
3、DHTML - >动态的网页：D：Dynamic：其实并不是新技术、新概念，是将现有技术的整合的统称，使我们的网页在离线状态依然具有动态效果
DHTML：HTML+CSS+JS(dom);
4、XML - >数据格式

1、原本是可以操作一切结构化文档的 HTML 和 XML，后来为了方便各类开发者分为3个部分

1）核心DOM：【无敌】，既可以操作HTML又可以操作XML
       缺点：API比较繁琐

2）HTML DOM：只能操作HTML，API简单，缺点：比如属性部分，只能访问/设置标准属性，不能操作自定义属性

3）XML DOM：只能操作XML，XML基本已经被淘汰了 - 现在最流行的数据格式JSON

   开发建议：优先使用HTML DOM，HTML DOM满足不了在用核心DOM补充

2、DOM树：树根：document - 不需要创建，一个页面只有一个document对象，由浏览器的JS解释器自动生成，可以通过树根找到每一个DOM元素/节点/对象，提供了很多的API

3、每个DOM元素都有三大属性：

   1）xx.nodeType：描述节点的类型
       document节点：9
       element节点：1
       attribute节点：2
       text节点：3

   2）xx.nodeValue：属性节点的值，说白了获取属性值
       以前有用，获取一个属性节点的值

   3）***xx.nodeName：节点的名称 - 判断xx是什么标签
       注意：返回是一个全大写的标签名

4、*通过关系获取元素

   父：xx.parentNode
   子：xx.children - >集合，只能找到子级儿子，不能找后代
   第一个儿子：xx.firstElementChild
   最后一个儿子：xx.lastElementChild
   前一个兄弟：xx.previousElementSibling
   后一个兄弟：xx.nextElementSibling

5、*API直接查找元素：

1）通过HTML的一些特点去找元素

① id：var elem=document.getElementById("id"); - 找到了是单个元素，没找到null

② tagname/class/name：var elems=document.getElementsByTagName/ClassName/Name("标签名/class名"); - 找到了是集合，没找到空集合

建议：表单控件元素尽量可以不用写class，因为必写name

2）通过css选择器去获取元素：

① 单个元素：var elem=document.querySelector("任意css选择器");
       强调：万一选择器匹配到多个，只会返回第一个
       没找到null

② 多个元素：var elems=document.querySelectorAll("任意css选择器");
       强调：找到了返回集合，没找到返回空集合
       更适合做复杂查找

面试题：getXXX 和 querySelectoXXX 有什么区别？
       返回结果不同：
           1、getXXX，获取到返回的是一个动态集合HTMLCollection

           2、querySelectoXXX，获取到返回的是一个静态集合NodeList

           动态集合 vs 静态集合
           1、动态集合：根据DOM树的改变，是动态集合也一起改变，每一次修改DOM树，都会悄悄的再次查找DOM
           缺点：每次都会悄悄重新查找，效率较低，不能使用forEach

           2、静态集合：每一次修改DOM树，静态集合不会发生变化，只会认准你找的时候的第一次找到的结果
           优点：每次不会悄悄重新查找，效率较高，可以使用forEach

6、*****递归：简单来说就是函数中，又一次调用了函数自己，迟早有一天会停下来

何时使用：遍历DOM树，专门用于【遍历层级不明确】的情况，既可以遍历层级不明确的DOM，也可以遍历层级不明确的数据

如何使用递归：2步
       function 函数名(root根){
           1、第一层你要做什么操作直接做

           2、判断他有没有下一级，如果由下一级再次调用此函数，只不过传入的实参是他的下一次
       }

函数名(root根)

算法：深度优先！优先遍历当前节点的子节点，子节点遍历完毕才会跳到兄弟节点
缺点：同时开启大量的函数调用，浪费的内存，只有一个情况采用：【遍历层级不明确】

递归 vs 循环
优点：直观，易用性能高，几乎不占用内存
缺点：性能较低难得一匹

7、遍历层级不明确的API：TreeWalker：一个在DOM树上行走的人
缺陷：专门为遍历层级不明确的DOM准备，并且自动跳过起点

如何：
       固定公式
       1、创建tw：
           var tw=document.createTreeWalker(根元素,NodeFilter.SHOW_ELEMENT);

       2、反复调用nextNode方法找到每一个元素
           while((node=tw.nextNode())!=null){
               node要做什么操作;
           }

总结：现在【找元素】的方式：
   1、直接找元素：getXXX、querySelectorXXX
   2、通过关系
   3、层级不明确才用递归

第四章、操作元素：

<elem 属性名="属性值" style="样式名:样式值">内容</elem>
强调：页面上获取和设置的一切数据类型都是字符串

一、元素内容：

*1、elem.innerHTML：获取或设置开始标签到结束标签之间的HTML代码，没有兼容性问题，可以识别标签

获取：elem.innerHTML
设置：elem.innerHTML="新内容"

2、elem.textContent：获取或设置开始标签到结束标签之间的纯文本，具有兼容性问题，不能识别标签

获取：elem.textContent
设置：elem.textContent="新内容"

*老IE：elem.innerText; //原本是只有老IE才可以使用的，但是随着各个浏览器的发展，IE没有将就大家，反而是其他主流浏览器去将就了老IE

*3、input.value：获取或设置单标签（能写内容的单标签）的内容的

获取：input.value;
设置：input.value="新内容"

二、元素的属性：

*1、获取属性值：

核心DOM：elem.getAttribute("属性名");
HTML DOM：elem.属性名;

*2、设置属性值：

核心DOM：elem.getAttribute("属性名"，属性值);
HTML DOM：elem.属性名="属性值";

*3、删除属性：

核心DOM：elem.removeAttribute("属性名");
HTML DOM：elem.属性名="";

4、判断属性：没用，只能判断有没有，不能判断具体是什么

核心DOM：elem.hasAttribute("属性名");

更合理的语法：

if(elem.getAttribute("class")=="d1"){
使用获取的方式能判断出具体是什么class
}

5、强调：HTML DOM确实简单，但是需要注意：

1、class写为className
2、只能操作标准属性，不能操作自定义属性
3、删除的时候，删不干净，有的属性删不干净依然具有功能，比如href没有属性值默认为刷新、disabled就算没有属性值依然是禁用操作...,更推荐删除的时候使用核心DOM

三、元素的样式：

1、内联样式：优先级最高，一定会覆盖其他的样式，且仅仅当前元素可用，不会牵一发动全身

获取样式：elem.style.css属性名
设置样式：elem.style.css属性名="css属性值"

唯一的缺点：获取样式时，也只能获取内联样式

2、样式表：

//1、获取你想要操作的样式表
           var sheet=document.styleSheets[1];
//2、获取这个样式表中所有的样式规则
           var rules=sheet.cssRules;
//3、数出你想要操作的那个样式规则
           var rule=rules[30];
//4、操作：获取和设置
           console.log(rule.style.background);
           rule.style.background="purple"

總結：核心DOM就是：增、删、改、查（DOM结构：元素、文本、属性、样式）

第五章：元素創建以及渲染

一、创建元素和渲染DOM数据：3步

1、创建空标签：
       var elem=document.createElement("标签名");

2、为这个空标签添加必要的东西（属性或事件）
       elem.属性名="属性值";
       elem.on事件名=function(){}

3、将在内存中创建的元素渲染到DOM树上
   *父元素.appendChild(elem);//将elem追加到父元素里面当了最后一个儿子

注意：

父元素.insertBefore(elem,已有子元素); //将elem追加到父元素里面当了儿子，会插在已有子元素的前面 - 导致所有元素的下标都会改变
父元素.replaceChild(elem,已有子元素); //将elem追加到父元素里面当了儿子，会替换掉已有子元素

4、删除元素：elem.remove();

二、HTML DOM常用对象：【简化】核心DOM

1、image对象：仅仅只是简化了创建语句

1）创建：var img=new Image();//完全等效于var img=document.createElement("img");
2）注意：不是人人都有构造函数创建方式

2、form对象：简化了查找元素

1）查找form元素：var form=document.forms
2）查找form元素中的表单控件：var input=form.elements
3）专属事件：form.οnsubmit=function(){//提交事件，只会在提交的一瞬间触发：防止用户输入错误也能提交
return false;//阻止条件
}

3、*select对象：

属性：1、*select.options;//得到select下面所有的option，完全等效于xx.children
2、*select.selectedIndex;//获取到当前选中项的下标 - 只要是做联动就必然会用到

方法：1、*select.add(option);//完全等效于appendChild
2、select.remove(i);//删除掉下标i的option

专属事件：select.οnchange=function(){//只有选中项发生变化的时候才会触发}

4、*option对象：仅仅只是简化了创建语句

*创建：var opt=new Option("innerHTML","value");

建议：HTML DOM别的无所谓，关键select和option：如果你想要一句话将option创建出来放入到select中：
select.add(new Option("内容","值"))

5、浏览器提供了3个弹出框

1）用户输入框：var user=prompt("提示文字","默认值");
2）警告框：alert("警告文字");
3）用户确认框：var bool=confirm("提示文字");

6、百度/高德地图已经帮我们实现好了基本技术，只需要使用固定步骤：

1、打开百度：搜索 - 百度地图开放平台，点击进去https://lbsyun.baidu.com/
           2、注册/登录百度账号
           3、拉到最下面，注册为开发者
           4、应用管理->我的应用->创建应用
           5、名字随意，选择浏览器端，白名单写为*，获取到了密钥：
           6、鼠标放到导航栏上，开发文档->javascript API->示例DEMO
           7、选择你喜欢的地图，然后修改经纬度
           8、如果使用多个地图，可以混搭，但是webgl版和普通版不能混搭，其他都可以
           9、作用：为了你的网站看上去更美观、更专业