js基础-尚硅谷

视频链接 :
尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版

数组方法

• 末尾删除 pop()
• 开头删除 shift()
• 指定删除 split(起始位置，删除个数)
• 末尾追加 push()
• 开头追加 unshift()
  

函数

• 返回多个值 return [a,b]

• 返回最大值的运算 在for循环里面 max<arr[i]的话 max=arr[i]否则等于max

  

  另外一种表达形式

  

• 立即执行函数–防止变量污染–多个立即执行函数之间要加分号隔开

(function(形参){ 函数体 })(实参)
(function fn(形参){}(实参))

• 秒数转化成时分秒

• argument–伪数组 在函数内部有效、

  在不确定函数的参数个数的时候，argument可以存放所有的形参

  则函数的形参可直接写（），在函数体内部遍历argument

  伪数组比真数组少了几个方法 比如pop push

  

  运行结果

  

  • 如果实参数量少于形参数量 undefined和数值进行运算的结果是nan
  • 如果形参数量少于实参数量，则取前几个实参进行运算

对象

1. 声明

   let 对象名={}
   

2. 属性和方法

   let 对象名={
   	属性名：属性值，
   	方法名：函数
   }
   

3. 属性访问

   对象.属性名
   对象['属性名']
   

4. 对象中的方法
   

   调用：对象.方法名()
   person.sayHi()
   

5. 新增属性

   obj.a='b'
   没有a就增加a，有a就修改a
   

6. 遍历对象–for in

   for(let k in 对象){
   	k--表示的是键名
   	obj[k]--表示的是键名所对应的键值
   }
   

7. 数组对象

   let a=[
   	{name:'小明',age:''},
   	{},
   	{},
   	{}
   ]
   取值：a[0].name='小明'
   

8. 内置对象

• math

  • random 生成0-1不包括1的随机数

  • ceil：向上取整

  • floor：向下取整

  • max：最大值

  • min：最小值

  • pow：幂运算

  • abs：绝对值

    生成n-m的随机数：Math.floor(Math.random()*(M-N+1))+N

不同数据类型的存储

1. 值类型：string，number，boolean，undefined，null
2. 引用类型：object，array，date
3. 堆和栈
4. 引用数据类型指向的是同一块空间，把应用数据赋值给另一个变量，一个发生改变另一个也会跟着发生变化

构造函数

使用工厂方法创建构造函数

function createObject(name, sex, age) {
            let obj = new Object();
            obj.name = name;
            obj.sex = sex;
            obj.age = age;
            obj.sayName = function () {
                alert(name)
            }
            return obj;
        }
        let obj = createObject('baba', 'nan', 00)
        let obj2=createObject('mama','nv',11)
        console.log(obj);
        console.log(obj2);

创建构造函数–避免全都是Object类型的

1. var per = new Person();在new的时候，会立即创建一个新的对象，然后对象作为返回值进行返回

function Person(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }

        function Dog(name, age, sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        let obj = new Person('baba', 'nan', 00)
        let obj2 = new Dog('mama', 'nv', 11)
        console.log(obj);
        console.log(obj2);
}

2. 区别：

使用同一个构造函数创建的对象，我们称之为一类对象，也将一个构造函数称为一个类，我们将通过一个构造函数创建的对象，叫做该类的实例

3. 构造函数的修改：每一个对象创建一次，都会创建一个新的方法，但是方法是可以共享的，会导致内存的浪费。

   解决方法：在全局写函数，构造函数内部写函数名。

   

原型对象

1. 将函数定义在全局作用域，污染了全局作用域的命名空间，且易被覆盖，不安全
2. 创建的每一个函数，解析器都会向函数中添加一个属性prototype：对应一个对象就是原型对象
3. 原型对象相当于一个公共的区域，所有同一个类的实例都可以访问到这个全局对象，我们可以将对象总共有的内容，统一设置到原型对象中，如果改属性存在则不找原型 无则原型

4. 像一个公共区域 类原型中添加 则用类创建的实例默认拥有这个方法或属性

5. 判断是某个对象中是否含有改属性

   “属性名” in 对象 //但原型里面的也会被识别出来

   对象.hasOwnProperty(“属性名”)//检查对象自身中是否存在改属性

6. 原型对象也是对象 ，当我们使用一个对象或者方法的时候，会在自身中

寻找，如果原型对象中有就使用，如果没有的话就去原型的原型中寻找，object的原型没有原型

toString

1. 直接在页面中打印一个对象的时候，会显示[object Object],而toString返回的也是对象，是该实例的原型的原型方法，可以给原型添加toString方法 输出想输出的值

垃圾回收

垃圾定义：当一个对象 没有任何的属性和变量存储他的地址时，也就是没有任何方法可以对他进行调用的时候，这个对象就是一个垃圾，

但是js的回收机制是程序自动的，所以我们只需要让程序知道这个对象我们以后不再用到即可，也就是将这个变量值设置为null

obj=null

数组

1. 创建 let a=new Array()

2. 赋值 a[0]=1

3. 添加 a[a.length]=1 可以直接在最后添加

4. 使用字面量创建数组 let arr=[1,3,4,7]

区别

arr[10]–创建只有一个元素为10

new Array(10):创建长度为10的数组

5. foreach遍历
   • foreach需要一个函数作为参数，直接在里面传一个匿名函数
   • 回调函数：我们创建 但不由我们调用，浏览器调用，执行次数由数组元素个数决定
   • 浏览器会将遍历到的元素以实参的形式传递进来
   • 第一个参数是下标对应内容，第二个参数是遍历元素的索引，第三个参数是正在遍历的数组

6. slice

   • 从某个已有的数组提取出想要的部分
   • 不改变原数组 封装到新数组中返回
   • 两个参数 开始到结束 不包括结束
   • 只写一个参数 改索引到最后
   • 负数就倒数第几个

7. splice

   • 删除数组中的指定元素

   • 影响原数组 会将指定元素从原数组中删除

   • 两个参数 第一个是开始的索引 第二个是删除几个

   • 第三个即以后，可以传新的元素，自动插入开始位置索引的前面

     

8. 去重

   • j–是因为相同的就把该位置的元素删掉，则下一个就跳过了比较

   

9. 数组剩余方法

   • arr.concat(arr2,arr3) --不对原数组产生影响–连接两个或多个数组

   • arr.join(“,”)–将数组转化成字符串–默认连接符就是逗号

   • arr.reverse()–翻转数组，直接修改原数组

   • arr.sort()–对数组进行排序，会影响原数组–小到大，大到小就再逆序

     sort排序是按照unicode进行排序的

     所以11小于2

   • 我们可以在sort添加一个回调函数，指定排序规则，回调函数中需要两个形参，浏览器会分别使用数组中的元素作为实参去调用回调函数，使用哪个元素调用不确定，但是a一定在b的前面，返回一个大于0的值的时候，a和b会交换位置,如果返回小于等于0，位置不变

      let a=[2,11,3,22,8];
     console.log(a.sort(function(a,b){
          return a-b;
      }));
     

10. call和apply-函数对象的方法

    • 需要函数对象进行调用
    • fun.call() fun.apply()
    • 调用函数执行，可以将一个对象this指定为第一个参数
    • 比如，fun(),直接调用的话，this的指向是window
    • fun.call(obj),的话，this指向的是obj
    • call(obj,2,3)–可以将实参在对象之后依次传递
    • apply(obj,[2,3])–需要将实参封装带数组中统一传递

    

11. arguments-

    • 在调用函数时浏览器都会传递隐含的参数
      • 1.上下文对象this
      • 2.封装实参对象argument，是一个类数组对象，
    • 在调用函数时，所传递的实参都会在argument中保存
    • argument.length就是实参长度
    • 无论是否定义形参，只要有实参都会在argument中保存

    

    • argumen有一个属性callee，返回的时当前指向函数的对象

日期Data对象

在Date中表示一个时间

1.创建一i个Date对象

//如果使用构造函数创建一个Date对象，则会封装为当前代码执行的时间
var d = new Date();

//创建一个指定的时间
var d = new Date("12/03/2016 11:10:30")
格式：月/日/年 时：分：秒

2. d.getDate()–获取当前日期是第几日

3. d.getDay()–获取当前日期是周几 范围是0-6 周日是0

4. d.getTime()–获取当前日期的时间戳–从1970年1月1日当当前日期毫秒数

   1s=1000ms

5. 时间戳/1000=秒 再/60=分钟 再/60=小时 再/24=天 再/365=年

6. 获取当前时间戳

   time=Date.now()

7. 功能：测试代码执行的性能；

Math

1. 不是构造函数，属于工具类，封装了数学运算相关的属性和方法，

   

   

包装类–底层自己用的

1. 基本数据类型：String Number Boolean Null Undefined

2. 引用数据类型：Object

3. js中，提供三个包装类，可以将基本数据类型数据转化成包装类

   String()

   Number()

   Boolean()

4. 对象转成布尔值都是true,所以，let b = new Boolean(false),b是true

   

字符串的方法

1. 创建字符串：let a = “abc”

2. 在底层是以字符数组的形式保存的 [“a”,“b”,“c”]

3. chatAt()-返回指定位置的字符

   a.chatAt(0)=a
   

4. chatCodeAt(0)-返回指定位置字符编码

5. String.formCharCode()-根据字符编码获取字符 74-J 20013-中

6. str.concat()-连接字符串

7. str.indexOf(“a”)=0 -检索字符串是否含有指定内容，

   返回第一次出现的索引，无则-1

   第二个参数，指定开始查找的位置

8. str.lastindexOf(“a”)=3-从后往前找

9. str=str.slice(0,2)=ab–不影响原数组，将截取到的返回，包括开始，

   不包括结束

10. str.substring(0,2)=ab–同上，但不接受赋值，负值默认0，自动调整参数位置，第一个大于第二个就自动交换

11. str.substr(0,2)=ab----第一个是开始索引，第二个是截取的长度，不影响原数组

12. str.split(“,”)–用逗号将字符串进行拆分构造成一个数组，空串就是每一个字母都拆分开来

正则表达式

1. 创建：let reg=new RegExp(“a”)
2. 方法：reg.test(“a”)–符合就返回true
3. 参数：第一个参数i，忽略大小写；第二个参数g：是否采用全局
4. 字面量创建：var 变量=/正则表达式/匹配模式 let reg=/a/i

DOM简介

\AppData\Roaming\Typora\typora-user-images\image-20221221195908459.png)]

1. getStyle()–读取到的是内联样式
2. 获取当前显示的样式-元素.currentStyle，但是只有IE可以
3. 或者：let obj = getComputedStyle(box1,null) 第二个参数是伪元素 一般用null;如果获取的没有设置，获取的是真实值而不是默认值 with是值而不是auto

getStyle封装函数

function getStyle(obj,name){
      return getComputedStyle(obj,null)[name];
    考虑兼容
    if(window.getComputedStyle){
                return getComputedStyle(obj,null)[name];
            }else{
                return obj.currentStyle[name];
            }
}

其他相关的属性

• 都是只读的

1. clientWidth -返回可见的宽度,返回的是一个数字可以直接进行计算，包括内容区和内边距

2. offsetWidth -返回内容区，内边距和边框

3. offsetParent -用来获取当前元素的定位父元素

4. offsetLeft -相对于定位元素的水平偏移量，左侧偏移量

5. scrollLeft -水平滚动条移动的距离

6. scrollHeight -可滚动高度

7. scrollHeight-scrollTop==currentHeight 滚动条到底了

   可滚动高度-滚动条垂直移动高度=盒子高度的时候，就滚动到底了

事件对象

1. 获取盒子中鼠标的坐标值

let box1 = document.getElementById("box");
        let box2 = document.getElementById("box2");
        box1.onmousemove = function (event) {
            let mousex = event.clientX;
            let mousey = event.clientY;
            box2.innerHTML=`x=${mousex};y=${mousey}`
        }

考虑兼容：event=event||window.event

div跟着鼠标一起移动

• event的clientX是一直相对于页面的左上角，所以在滚动条向下移动时，会与元素产生距离
• pageX：则是当前显示窗口的鼠标的横坐标

事件的冒泡

1. 事件向上传导，后代元素事件被触发时，祖先元素相同事件也会被触发
2. 取消冒泡：event.cancelBubble = true;

事件的委派

事件的绑定

事件的传播

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-08ydzA5R-1672304520873)(C:\Users\11359\AppData\Roaming\Typora\typora-user-images\image-20221221233459226.png)]

Nagvigator

1. 代表当前浏览器的信息
2. window.navigator 或者 navigator

Loaction

1. 代表当前浏览器的地址栏

2. 可以获取地址栏信息或者操作浏览器跳转页面

   

   3. location.reload()–刷新按钮 参数填true 强制清空缓存刷新，
   4. location.replace(url)–使用新的页面替换当前页面，不能使用回退按钮，

History

1. 代表浏览器的历史记录，不能获得具体历史记录，只能操作浏览器向前向后，只在当此访问有效

2. history.back()–回退
3. history.forward()-往前跳
4. history.go(1)-向前跳转1个页面 -1向后跳转一个页面

Screen

1. 代表用户屏幕，获取用户的显示器相关信息

window

类的操作

        // 定义一个函数 用来向元素添加指定的class属性
        function addClass(obj, cn) {
            if (!hasClass(obj, cn)) {
                obj.className += " " + cn;
            }
        }
        // 判断是否含有指定的class
        function hasClass(obj, cn) {
            // 创建正则表达式
            // let reg = /\bb2\b/
            // 因为由变量，所以要用到构造函数
            var reg = new RegExp("\\b" + cn + "\\b");

            return reg.test(obj.className)
        }
        // 删除类
        function removeClass(obj, cn) {
            // 创建正则表达式
            var reg = new RegExp("\\b" + cn + "\\b");
            obj.className = obj.className.replace(reg, "").trim()
        }
        // 切换 存在就删除 不存在就添加
        function toggleClass(obj, cn) {
            if (hasClass(obj, cn)) {
                removeClass(obj, cn)
            } else {
                addClass(obj, cn)
            }
        }
        btn.onclick = function () {
            addClass(box1, "b")
            addClass(box1, "c")
            toggleClass(box1, "d")
        }
        btn.ondblclick = function () {
            removeClass(box1, "b")
        }

JSON

过滤敏感词