javascript（修改）笔记大全

最新推荐文章于 2023-03-03 09:27:30 发布

oh97

最新推荐文章于 2023-03-03 09:27:30 发布

阅读量689

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_59727332/article/details/121086076

版权

JavaSript

基础语法

一初识js

1：引入js

（1）外联

（2）内联

（3）行内

2，注释

     //单行 
 
     /*多行*/

3.警告框

         alert（）；警告框
 
        confirm（）；选择框
 
        prompt（）；输入框
 
        console.log();控制台输出

二变量

变量是程序在内存中申请的一块用来存放数据的空间
使用：

声明变量  var age

赋值      age=18；

变量的初始化  var age = 18；  （声明并且赋值称为变量的初始化）

语法扩展

var age= 18；

age = 20；//更新变量

声明多个变量

var age = 18，name = ‘’佩奇’’；

变量命名规范:

由字母，数字，下划线，$组成

严格区分大小写

不能以数字开头，不能使用关键字，保留字

遵守驼峰命名法

临时变量

var temp ;

var app1 = 10;

var app2 = 20;

temp = app1;

app1 = app2;

app2 = temp;

temp就像是一个中介，暂时储存临时变量

三数据类型

js 变量的数据类型，是由js引擎根据 = 右边变量的值（字面量）的数据类型来判断的
js是动态语言，变快的数据类型可以变化的
```
例：
var age = 18；  
age = "佩奇"；
```
基本数据类型

number 数字型

boolean 布尔值

string  字符串

undefined 未定义

null  空值

number

包含整数，小数，负数

八进制用 0 表示

十六进制 0x

Number.MAX_VALUE   最大值

Number.MIN_VALUE   最小值

Infinity 无穷大

-Infinity 无穷小

NAN (not a number) 不是一个数字

is  NAN ()；判断是否数字   false 是数字    true不是数字类型

string
- 字符串引号嵌套外单内双外双内单
  
  \转义字符 \n 换行
  
  字符串长度 length
  
  字符串拼接 + 如；‘1’+‘2’ 返回值‘12’
  
  字符串和任何数据类型 + 都会转换为字符串
boolean
- 布尔型有两个值，true false 其中true 表示真，false假
  
  true当 1 计算， false当0 计算
undefined 和 null

Undefined 和 nan 和数值相加为NAN

Null 和数值相加返回相加的数值

typeof 获取变量类型
- typeof + 变量

字面量：字面量是一种直接出现在程序中的数据值

var 标识符 = 字面量   // 声明   左边是标识符   右边是字面量

转换为字符串

tostring（）

string（）

+

转换为数字型

parselnt();

parseFloat();

Number();

js隐式转换    -   *  /

转换为布尔型

''， 0 ，NAN ，undefined，null  代表为空，否定的值转换为false 

其余转换都为 true

标识符:标识符是就是为变量，函数，参数取的名字
关键字:js 本身已经使用的单词
保留字js为未来预留的可能会用到的单词

四运算符

运算符也被称为操作符，是用于实现赋值比较和执行算数运算功能的符号
算数运算符

+ - * / %

表达式和返回值

由数字运算符，变量等组成的式子，称为表达式

结果为返回值

一元运算符

a++   后置自增 先返回原值后自加

++a   前置自增 先自加后返回值

a--

--a

比较运算符

<  <=  小于 小于等于

> >=   大于 大于等于

== 等于

===  全等

!=   不等于

!==  不全等

=  赋值

逻辑运算符

&& 逻辑与 简称 与 或and

||  逻辑或   or

&&两边都为true 返回true 否则 false

|| 两边都为false 返回 false  否则 true

！  取反

赋值运算符

= 

+=

-=

*=

/=

%=

运算符优先级

1（）

2 一元运算符

3 算法运算符

4 关系运算符

5 相等运算符

6 逻辑运算符

7 赋值运算符

8 ，

五流程控制

顺序结构按顺序执行
分支结构判断执行
循环结构判断后是否循环执行

分支结构

1.if（）语句

if（）语句
   if（条件表达式）{
           条件表达式为真 执行语句
}

if else

 if     else 语句
if（条件表达式）{
  条件表达式为真 执行语句
}else{
  条件表达式为假 执行语句
}

if else if

if  else if  语句
if（条件表达式）{
  条件表达式为真 执行语句
}else if（条件表达式）{
  条件表达式为真 执行语句
}else{
    条件表达式为假 执行语句
}

三元表达式

条件表达式 ? 表达式1（true）：表达式2（false）

switch

switch（表达式）{
Case valu1 :
执行语句
Break；
Case valu2:
执行语句
break；
default: 执行语句；//类似else
}

循环结构

for循环

for（初始化变量，条件表达式，更新表达式）{
             循环体
  }

双 for循环

for（初始化变量，条件表达式，更新表达式）{
  循环体
for（初始化变量，条件表达式，更新表达式）{
  循环体
}
}
注意：外部循环一次，里面for循环整轮

while 循环

while （条件表达式）{

循环体

（更新表达式）

}

do while 循环

do{

循环体

}while（条件表达式）；

总结；如果是用来计次数，跟数字相关用for

while do while 可以用来做更复杂的判断条件

continue break

Continue ；跳出本次循环，继续执行下面的循环
break ；跳出整个循环（循环结束）

六数组

数组（array）；就是一组数据的集合，储存在单个变量下的优雅方式
数组创建
利用字面量创建

var arr = [];

利用new创建

var arr = new Array()

数组的索引索引，下标，用来访问数组元素序号数组名【索引】

arr[2];

遍历数组

遍历就是把数组元素从头到尾访问一次

 for (let i = 0; i < array.length; i++) {
             console.log(array[i]);
 
         }

新增数组，元素，修改length长度

arr.length = 5 ; //多余的显示“undefind”

新增数组元素，修改索引号，追加数组元素

arr[3] = ‘数组索引号3内容’；

七函数

函数就是封装了一段可以被重复执行调用的代码块

目的；就是让代码可以复用，

使用函数

//声明函数
function fun (){
    函数体；
}
// 函数的声明方式2 ，函数表达式（匿名函数）
var fun = function () {
}
//fun 是函数名，函数表达式也可以传递参数

调用函数

fun();//函数名()

注意：如果实参的个数一直，则正常输出结果

若实参的个数多于形参个数，会去到形参的个数

如果实参的个数小于形参，多于的形参定义为 undefined 最终的结果就是NAN

函数的返回值

function fun() {
    return 需要返回的结果
}
 fun();
//注；return 会把返回结果给函数调用，但是return后的代码不会执行

arguments

不确定有多少个参数传递的时候可以使用 arguments来获取，
arguments 当前函数的内置对象，arguments中储存了传递的所有实参
arguments 展示形式是一个伪数组因此可以遍历
伪数组的特点，具有lenght属性，按索引方式储存数据，但是不具备 push pop 等方法

八作用域

作用域

js作用域；就是代码名字（变量）在某个范围内起作用和效果，目的是为了提高程序的可靠性，更重要的是减少命名冲突
Js的作用域（es6之前）：全局作用域局部作用域
全局作用域：就是整个script标签，或者是一个单独的js文件
局部作用域；就是在函数内部的就是局部作用域范围，只在函数内部起效果，和作用

变量作用域

变量作用域；根据作用域的不同，变量分为全局变量和局部变量
在全局作用域的声明的变量就是全局变量
在（局部作用域）函数内部声明的变量就是局部变量

注：在函数内直接赋值也是全局变量，

全局变量在浏览器关闭是清除，局部在使用后，不占内存

作用域链

作用域链；内部函数访问外部变量采用的是链式查找方式，这种结构称之为作用域链

九预解析

js预解析步骤

js引擎运行js分为两步；预解析，代码执行
预解析：就是js引擎会把js里面所有的var和function提升到当前作用域的最前面
代码执行：从上向下依次执行

预解析提升机制

预解析为变量预解析（变量提升），函数预解析（函数提升）

变量提升：就是把所有变量声明提升到当前的作用域最前面，不提升赋值操作
函数提升把所有的函数声明提升到当前作用域最前面，不调用函数

十对象

对象式由属性和方法组成的

创建对象的三种方式

利用字面量{}创建

var obj = {
    name:'佩奇',
    age:12,
    sayHi:function (){
        //方法
    }
}

利用new object 创建

    var obj = new Object();
    obj.属性 = '属性值';
    obj.方法名 = function (){};

构造函数创建对象

function 构造函数名 大写(){
this.属性 = 值;
this.方法 = function(){};
}
var obj = new 构造函数名;

//注；构造函数需要首字母大写，不需要return 就能返回结果
//例子:

function Star ( name,age ,sex) {
    this.name = name;
    this.age = age;
    this.sting = function ()
    }
}
var star = new Star('刘大海',28,'男');
console.log(star);

使用对象

obj.name//对象名.属性

obj['name']//对象名['属性']

使用对象的方法

obj.sayHi();//对象名.方法名

遍历对象

for (let k in object) {
//k是属性 , object 是对象  
   object[k];//对象属性值
}

对象是复杂数据类型

十一 js 内置对象

内置对象就是js 语言自带的

数学对象 Math

Math.PI//圆周率

Math.max//最大值

Math.min//最小值

Math.floor//向下取整

Math.ceil//向上取整

Math.round//四舍五入

Math.abs//绝对值

//随机生成一个数 固定语法
function getRandom (min,max){
    //随机生成两个数之间的 数
    return Math.floor(Math.random()*(max-min+1)+min)
}

Date();日期（构造函数）

  var date = new Date();
 
    date.getFullYear()//年
 
    date.getMonth()//月  0-11
 
    date.getDate()//日
 
    date.getDay()//星期  0-6
 
    date.getHours()//时
 
    date.getMinutes()//分
 
    date.getSeconds()//秒

    date.valueOf()//时间戳
 
    date.getTime()//时间戳
 
    var data = +new Date()//时间戳
 
    Date.now()//时间戳
    转换公式：
    d = parseInt(总秒数 / 60 /60 / 24);//天

    h = parseInt(总秒数 / 60 /60 % 24);//时
 
    m = parseInt(总秒数 / 60 %60 );//分
 
    s = parseInt(总秒数 % 60 );//秒

十二数组

  var arr = new Array();//空数组

  var arr = new Array(2);//数组长度为2

  var arr = new Array(2.3);//数组元素为 2 3

翻转数组

reverse(arr)  //数组翻转
console.log(arr.reverse());

instanceof 运算符

//可以用来检测是否为数组
var arr = [1,2];
console.log(arr instanceof Array);

Array.isArray(arr)

console.log(Array.isArray(arr));

添加删除数组元素

var arr = [1,2];
    push();//像数组末尾添加一个或者多个元素
    arr.push(4);
 
    unshift();//像数组第一个位置添加元素
    arr.unshift(0);
 
// push,unshift 完后返回的是新数组长度，原数组会发生改变
    console.log(arr);
    pop()//删除数组最后一个元素，一次只能删除一个
    arr.pop();
    shift();//删除数组第一个元素
    arr.shift();
    console.log(arr);
//pop shift 之后返回的结果是 删除的那个元素，元素组会改变

数组排序

  var arr = [5,8,3,2];
    arr.sort(function (a,b) {
      return  a-b;
     // return  b-a;//降序排列 
    })
 
    console.log(arr);

indexof(元素)；

indexof()返回该数组索引号，并且只返回满足条件的第一个，若找不到返回-1

//数据去重     
 var arr = [5,8,5,3,2,8,3,2];
    var newarr = []; 
    for (let i = 0; i < arr.length; i++) {
      if(newarr.indexOf(arr[i] )=== -1){
          newarr.push(arr[i]);  
      }
    }
    console.log(newarr);//结果[5, 8, 3, 2]

Lastindeof（）从后向前找

转换为字符串

  var arr = [5,8,5,3,2,8,3,2];
 
    var a = arr.toString();
 
    var  b =  arr.join(',');    //join（分隔符）
 
    console.log(b);
 
    console.log(typeof a);
 
    console.log(typeof b);

合并数组

 concat();//合并两个或者多个数组

 concat(arr1,arr2,arr3);

截取删除/添加

splice(从第几个索引开始,删除个数(可以选填),插入元素(可选));   
arr.splice(2,2,8);//从索引为二的开始删除，删除两个，添加一个元素8

被删除的元素组成一个新的数组

十三字符串对象

字符串的不可变：指的是里面的值不可变，虽然看上去可以改变内容，但是其实是地址值变了，内存中新开辟了一个内存空间，

str .indexOf(要查找的字符，起始的位置）

lastindexOf 从后向前找

根据位置返回字符

 var str = 'ndianfinsnf';    
 var a =  str.charAt(5);
 console.log(a);//返回的是索引为5的 f 

var n =  str.charCodeAt(6)
console.log(n);//返回的是索引为6的 ASCii值

str[5]//h5新增的方法，和charAt()一样

   console.log( str[5]);

拼接字符串

concat(str1,str2,str3)
 //拼接字符串，但是一般开发中中 +  操作比较多

substr 截取字符串

var str = 'ndianfinsnf';
substr(开始截取的位置索引号，截取的个数)第二个参数不写默认截取到最后一个
var b= str.substr(2);
console.log(b);

split（“分隔符”）转换为数组

   var str = 'nd,an,fins,nf';
 
    var b= str.split(',');
 
    console.log(b);

repiace 替换字符串

var str = 'nd,an,fins,nf';
 
    str.replace('被替换的字符','替换成的字符')//注意只会替换第一个字符
 
    var sr = str.replace('n','d');//替换字符
 
     console.log(sr);

案例多个转换

var str = 'nd,an,fins,nf';
 str.replace('被替换的字符','替换成的字符')//注意只会替换第一个字符

 //替换多个
  while(str.indexOf('n') !== -1){
   str = str.replace('n','a');
}
console.log(str);

转换大小写

  var str = 'nd,an,fins,nf';    
  var b = str.toUpperCase();//转换为大写字母
 
    console.log(b);
 
    var a = str.toLowerCase();//转换为小写字母
 
    console.log(a);

十四简单数据类型和复杂数据类型

简单数据类型

简单类型又叫基本数据类型或者值类型，复杂数据类型又叫引用数据类型

值类型: 简单数据类型/基本数据类型，在存储时变量中储存的是值本身，因此叫做值类型，string，number，boolean，undefined，null

引用类型/复杂数据类型

引用类型：复杂数据类型，在储存时变量中储存的仅仅是地址值（引用），因此叫引用类型，通过new关键字创建的对象，（系统对象，自定义对象）比如Object，Date Array等

堆和栈

堆和栈空间分配

栈（操作系统）：由操作系统自动分配释放存放在函数的参数值，局部变量的值等，其操作方式类似于数据结构中的栈；

简单数据类型存放在栈里面

堆（操作系统）：存储复杂数据类型（对象）；一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收

复杂数据类型存放在堆里面
注意：js没有堆和栈的概念，只是通过堆和栈理解代码执行机制，便于学习

传参

简单数据类型传参，直接在栈存储值

复杂数据传参，在栈开辟一个空间储存的是十六进制的地址值，地址值指向堆的一个开辟空间

Javascript WEB API

JS组成

- js基础由 ECMAscript 标准规定语法
- WEb API 由 W3C组织规定的
API 和 WEb API

API （Application Programming Linterface）应用程序编程接口，是一些预先定义好的函数，目的是提供应用程序与开发人员基于软件或者硬件得已访问一组列程的能力，而无需访问源码，或理解内部工作机制细节
web api
web api 是浏览器提供的一套操作浏览器功能的页面元素的api（BOM 和 DOM）
web api 一般都有输入和输出，（函数的传参和返回值）web api 很多都是，方法（函数）；

DOM

一 DOM组成

DOM (Document Object Model)
DOM是w3c组织推荐的处理可扩展标记语言（HTML 或 XML）的标准编程接口
DOM 树

文档：一个页面就是一个文档，DOM中用documen 表示
元素：页面的所有标签都是元素，DOM中用 element表示
节点：网页中所有的内容都是节点（标签，属性，文本，注释等）DOM中用node表示

二操作元素

document.getElementById()// 通过id获取元素
document.getElementsByTagName()//通过标签名字获取元素
document.getElementByClassName()//通过类名获取元素 
document.querySelectorAll()//获取元素集合
document.querySelector()//获取元素
document.body//获取body元素
document.documentElement//获取html元素

三事件

事件是由三部分组成：事件源，时间类型，事件处理程序，也称为事件三要素

事件源：事件被触发的对象
事件类型：如何触发，什么事件，比如鼠标点击，按下，经过，键盘按下
事件处理程序：通过函数赋值的方式完成

获取，修改，标签内容

innerText
innetrHTML(常用)
value
src
href

<body>
    <div onclick="alert('nihao')">12</div>
    <a href="http://www.baidu.com">百度/淘宝</a>
    <img src="/images/图层 26.png" alt="">
    <script>
        var div = document.querySelector('div');//获取div元素
        var a = document.querySelector('a');//获取 a元素
        var img = document.querySelector('img');//获取 img 元素
        console.log(div.innerHTML);//获取元素内容
        div.innerHTML = 'hello';//x修改内容
        div.innerText = 'hello';//如果带有空格 ，换行 。会自动取消空格，换行
        a.href = 'http://www.taobao.com';//修改href 路径
        img.src = '/images/图层 21.png';//修改图片路径
    </script>  
</body>

四修改 css样式

元素 .style.属性 = ‘属性值’；
- 若属性有两个及以上单词，要用驼峰命名法
```
   div.style. backgroundColor = 'red'
```
元素.className = ‘类名’；
如果动态修改较多css 样式，可以预先创建一个类名，修改时直接赋值给元素
但是元素有类名的情况下，会覆盖掉，
解决，再把原先的类名写上，空格隔开即可
例如:

div.className = 'box box1'

classList属性是HTM5新增的一个属性，返回元素类名 (推荐)

添加类名（是在后面追加类名，不会覆盖原有类名，不用加 “ . ” ）

div.classList.add('类名')//添加类名 注意不用加" . "
div.classList.remove('类名')//删除类名
div.classList.toggle('类名')// 有这个类名，会移除。没有这个类名会添加上

五修改设置元素的属性值

修改属性

1 element.属性 = '值'；
2 element.setAttribute ("属性"，"值");

移除，删除属性

element.removeAttribute('属性')；

获取元素的属性值

* 1 element.属性
  比如  div.id 
* 2 element.getAttibute('属性');
  比如 div.getAttribute('id')
  还可以获取自定义的属性

自定义属性规范

data-属性 = ' ';
 // H5新增 获取自定属性方法
element.dataset.自定义属性；
dataset 是一个集合里面存放了所有以data开头的自定义属性

六节点操作

一般节点至少拥有nodeType（节点类型），nodeName(节点名称), nodeValue(节点值)这三个属性
元素节点 nodeType 为1
属性节点 nodeName 为2
文本节点 nodeValue 为3 文本节点包含文字，空格，换行等

节点层级父级节点

//父级 节点
node.parentNode

返回某节点的父节点注：是返回的直接父级找不到返回null

2.子节点

     //子节点
     node.children
     node.firstElementchild  第一个元素节点
     node.lastElemenrchild 最后一个子元素节点
     或者 node.children[0] 第一个
     node.children[ node.children.length-1 ]  最后一个

3.兄弟节点

nextElementSibling  下个元素节点
previousElementSibling  上个元素节点

注：找不到返回null IE9 以上支持

4.节点操作

   /*创建*/
    document.createElement('标签名')//创建标签
    var li = document.createElement('li')//创建一个li 节点
    /*添加*/
    node.appendchild(child)  // node 父级 child 子级
    ul.appendchild(li);//此节点加入父级最后一个
    /*指定添加*/  
    node.insertBefore(child,指定元素位置即索引);//把标签添加在指定位置前面
    ul.insertBefore(li,ul.childer[0]);//把li 添加到ul子元素的第一个
    /*删除*/
    node.removeChild(child);//删除
    ul.removeChild(ul.children[0]);//删除ul子元素 索引为0 的元素
    /*复制节点*/

```js
       // 创建 字符串标签 
        Element.insertAdjacentHTML(position,text);
        //position: 是相对与元素的位置，并且必须是一下字符串之一
        "beforebegin" // 元素自身前面
        "afterbegin" // 元素内部的第一个子节点之前
        "beforeend"//  元素内部的最后一个子节点之后
        "afterend"// 元素自身的后面
        //text  是要被解析 HTML 或 XML 并插入dom 中的字符串

        // 例如：
        var li = `
        <li>
            <img src="" alt="">
            <a href=""></a>
        </li>
        `;
        ul.insertAdjacentHTML( "afterbegin",li);
```

克隆节点

 node.cloneNode();//参数为空，或者为false 是浅拷贝，只复制标签不复制内容
    //参数为true 深拷贝，复制标签及内容
    var list = ul.children[0].cloneNode(true); //拷贝需要储存到变量，方便把拷贝的添加到父 
    级元素
    ul.appendchild(list);//向ul添加拷贝的节点元素

三种创建节点区别
document.write() 创建元素
如果页面文档流加载完毕，再调用这句话会导致页面重绘（不推荐使用）
innerHTML 创建元素
创建多个元素效率更高（不要拼接字符串，采取数组形式拼接）结构稍微复杂
document.createElement() 创建元素
创建多个元素效率会低一些，但是结构更清晰，简单

七侦听/注册事件

注册事件概述
给元素添加事件，称为注册事件，或绑定事件,注册事件有两种方式：传统方式，方法监听注册方式

事件侦听注册事件 addEventListener （）
里面的事件类型是字符串，必须加引号不用加 on
同一个元素可以添加多个侦听器
参数
addEventListener （‘行为’，‘时间处理函数’，true/false）；
注；true 是捕获阶段
false是冒泡阶段，不写也默认是冒泡阶段
删除事件
```
 // 1 传统方式
 div.onclick = function(){};
 div.onclick = null;
```
// 2 事件监听移除
div.addEventListener(‘click’,fun);
function fun(){
div.removeEventListener(‘click’,fun)
}

注意，事件函数不用带（）；直接写函数名

DOM 事件流

事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即是DOM事件流
DOM事件流分为三个阶段:
1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

dom事件流
注意：1. js代码中只能执行捕获阶段或者冒泡其中一个阶段
2. onclick 和 attachEvent(ie的以前事件方式) 只能为冒泡阶段
3. 事件监听事件，可以设置为 true false
4. 有些事件是没有冒泡行为的比如 onblur ,onfocus onmouseenter ,onmouseleave

事件对象 event

div.addEventListener(‘click’,function(event){
console.log(event);
})
1 event 就是一个事件对象，写到我们侦听函数的小括号里面，当形参来开
2 事件对象只有有了事件才会存在，他是系统给我们创建的，不需要我们传参数
3 事件对象是我们事件的一系列相关的数据集合,跟时间相关的，比如鼠标点击，里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息，比如判断用户按下了哪个键

 div.addEventListener('click',function(event){
          console.log(event);
          console.log(event.keyCode);
     
      })

可以简写为 evt e
ie 678 不支持

  div.addEventListener('click',function(event){
          e = e || window.event//兼容ie 6 7 8 
          console.log(event);
      })

事件对象常见的属性和方法
1. e.target 返回的是触发事件的对象元素
  this 返回的是绑定事件的对象元素
  e.target 点击哪个返回哪个，this是绑定哪个返回哪个
2. e.type 返回事件类型
```
  div.addEventListener('click',function(e){
          e = e || window.event
          console.log(e.type);
      })
```

阻止默认行为（事件）

让连接不跳转，或者让按钮不提交，

div.addEventListener('click',function(e){
      e = e || window.event
      e.preventDefault()//阻止默认行为  比如连接不跳转，等
  })

div.onclick = function(e){
      e.preventDefault();//正常浏览器
      e.returnValue//ie 678 版本
      return false;//传统事件通用，但是return后面还有代码的话就不会执行了
  }

阻止冒泡行为

div.addEventListener('click',function(e){
    e = e || window.event
    e.stopPropagation();//停止冒泡行为
})

事件委托

原理：不是每个节点单独设置事件监听器，而是事件监听器设置在器父节点上，然后利用冒泡原理影响设置每个子节点

常用的鼠标事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-om7ls87b-1635763978199)(…/…/AppData/Roaming/Typora/typora-user-images/image-20211031204932059.png)]

常用键盘事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-523RfR30-1635763978203)(…/…/AppData/Roaming/Typora/typora-user-images/image-20211031204958737.png)]

e.keycode 属性返回该键的ASCII 值
keyup ，keydown 事件不区分大小写
keypress区分大小写大写和小写的ASCII 值不一样

document.addEventListener('keyup',function(e){
      console.log(e.keyCode);//返回的是按键的ASCII 值
  })

BOM

BOM概述：BOM（Browser Obiect Model）即浏览器对象模型，它提供了独立内容而与浏览器窗口进行交互的对象，其核心就是window

一 BOM的组成

window 对象是浏览器的顶级对象:

它是js访问浏览器窗口的以接口
它是一个全局对象，定义在全局作用域的变量，函数，都是window 对象的属性和方法

二 window事件

window.onload = function (){};
window.addEventListener('load',function(){})
/* load等页面内容全部加载完毕，包含页面 dom元素，图片 ，flash ，css，等再去执行事件函数 */

document.addEventListener('DOMContentLoaded',function (){})
/*DOMContentLoaded 事件触发时，文档dom加载完成，不包含 样式表，图片，flash 等*/
//调整窗口大小事件
window.onresize = function(){};
winwow.addEventListener('resize',function(){})
/*当窗口大小发生改变时，触发事件*/

三定时器

定时器

setTimeout (调用函数，延迟的毫秒数）；//延迟调用

注 : 延时单位是毫秒。可以省略，省略默认为0
调用函数可以直接写函数，或者函数名
setTimeout是隔多久执行，只执行一次
setTimeout（）也称为回调函数，callback
普通函数按照代码顺序直接调用，而回调函数需要等待时间，时间到了才去调用因此称为回调函数

清除定时器

clearTimeout(定时器函数名)//清除定时器

定时器

setInterval(调用函数，每隔多久执行一次/毫秒) //循环调用

setInterval 是隔多久调用一次，重复调用

清除定时器

clearInterval(定时器函数名)//清除定时器

四 js执行机制

js是单线程 js语言的一个特点，就是单线程，也就是说同一个时间只能做一件事
单线程意味着，js任务需要排队，一个执行完才能执行下一个
导致的问题：如果js执行时间长，会造成页面渲染不连贯，导致页面渲染加载阻塞。
同步和异步（解决堵塞的问题）
（1）同步：前一个任务执行完，在执行下个
（2）异步：同时进行多个任务
同步任务：同步任务都在主线程上执行，形成一个执行栈
异步任务：js 异步是通过回调函数实现的，异步任务有以下三种
- 普通事件：例如 onclick ，resize 等
- 资源加载：例如 load 。error等
- 定时器：例如setTimeout，setInterval
异步任务相关；回调函数，添加到任务队列中，任务队列也称为消息列表
执行机制
- 先执行执行栈中的同步任务
- 异步任务回调函数放入任务队列中
- 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bVntV7De-1635763978204)(…/…/AppData/Roaming/Typora/typora-user-images/image-20211031205848697.png)]

四 location 对象

location 属性是用于获取或设置窗体的URL ，并可用于解析URL，（返回的是一个对象，所以也称为location对象）
URL(Uniform Resourse Locator)是互联网上标准资源地址，互联网上的每一个文件都有一个唯一的URL
URL语法格式
protocol://host[iport]/path/[?query]#fragment
例如 http:///www.itcast.cn/index.html?name=andy&age=18#link
- protocol:通信协议常用的 http ftp maito等
- host ：主机（域名）
- port：端口号（可省略）http默认为80端口
- path：路径，有0个或1个符号隔开，一般表示主机上目录或文件地址
- query：参数，以键值对的形式通过& 符号隔开
- fragment：片段，#后面的内容常见于链接锚点
location 对象的属性
- location.href//获取或者设置 URL
- location.host//返回主机（域名）
- location.port//返回端口号
- location.pathname//返回路径
- location.search//返回参数
- location.hash//返回片段，# 后面的内容常见链接锚点
location 对象常见方法
- location.assign();//跟href 一样可以跳转页面，也称为重定向页面
- location.replace();//替换当前页面，不记录历史，不能后退
- location.reload();//刷新页面，参数为true 强制刷新 ctrl + f5

五 navigator对象

navigator对象包含了有关浏览器相关信息，有很多的属性，常见的是 userAgent ，该属性可以返回有客户机发送服务器的 user-agent 头部的值
可以用来判断用户用的那个终端打开页面，实现跳转，
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Toajgm5F-1635763978206)(…/…/AppData/Roaming/Typora/typora-user-images/image-20211031210103309.png)]

六 history 对象

history 与浏览器历史记录进行交互，该对象包含用户在浏览器窗口中访问过的URL
history方法
- history.back()//回退
- history.forward()//前进
- history.go()//指定参数前进后退

七 PC 网页特效

一元素偏移量 offset系列

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vx90y49I-1635763978208)(…/…/AppData/Roaming/Typora/typora-user-images/image-20211031210252914.png)]

注意：返回值不带单位，

二元素可视区 client 系列

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KuHgrGU9-1635763978209)(…/…/AppData/Roaming/Typora/typora-user-images/image-20211031210309258.png)]

三 scroll 系列

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MrInRABa-1635763978210)(…/…/AppData/Roaming/Typora/typora-user-images/image-20211031210403781.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wunzhOq6-1635763978211)(…/…/AppData/Roaming/Typora/typora-user-images/image-20211031210439679.png)]

四scroll事件滚动触发

   div.addEventListener('scroll',function(){//滚动触发事件
        console.log(div.scrollTop);
    })

五总结三系列的用法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uoAH9vAq-1635763978212)(…/…/AppData/Roaming/Typora/typora-user-images/image-20211031210538675.png)]

六鼠标事件 mouseenter

当鼠标移动到元素上时就会触发 mouseenter事件
类似mouseover ，他们两者之间的差别就是：

mouseover鼠标经过自身盒子会触发，经过子盒子还会触发
mouseenter只会经过自身盒子触发
之所以这样就是mouseenter 不会冒泡
跟mouseenter、搭配鼠标离开 mouseleave同样不会冒泡

八立即执行函数

    (function(){}())//写法一 函数立即执行，自调用
    (function(){})()//写法二 函数立即执行，自调用

主要作用：独立创建作用域，避免命名冲突（函数执行完会自动释放空间）

移动端事件

一触屏事件 touch

touch（也称为触摸事件）对象是一个触摸点，触摸点可能是一个手指，也可能是一个触摸笔，触屏事件响应用户手指（或触屏笔）对屏幕或者触控板操作
常见事件

touchstart 手指触摸到一个DOM元素时触发
touchmove 手指在一个DOM元素上滑动触发
touchend 手指从一个DOM元素上移开时触发

二触屏对象

TocuhEvent 是一类描述手指在触摸平面（触摸屏，触摸板）的状态变化的事件，这类事件用于描述一个或多个触点，是开发者可以检测触点的移动，触点的增加和减少等等
常见的触摸事件对象：
touches 正在触摸屏幕所有的手指列表
targetTouches 正在触摸当前DOM元素上的手指列表
changedTouches 手指状态发生了改变的列表，从无到有，从有到无的变化
平时都是给元素注册触摸事件，重点注意 targetTouches
targetTouches [0] 就可以得到正在触摸Dom元素的第一个手指的相关信息，比如手指的坐标的等等

三移动端拖动元素

拖动三部曲：
1. 触摸 touchstart 获取初始坐标，同时获取盒子原来的位置
2. 移动手指touchmove 计算出手指滑动距离，并且移动盒子
3. 离开 touchend
4. 注意：手指移动也会触发滚动屏幕所有要阻止屏幕滚动。e.preventDefault();

本地储存

sessionStorage

声明周期为关闭浏览器窗口
在同一个页面下数据可以共享
以键值对的形式储存使用

存储 / 设置 / 获取 /删除数据

     sessionStorage.setItem("key",value);
     sessionStorage.getItem("key");//获取本地储存数据
     sessionStorage.removeItem("key");//删除本地储存数据
     sessionStorage.clear();//清除所有本地储存数据

localStorage

声明周期永久生效，除非手动删除，否则关闭页面也会存在‘
可以多窗口页面，共享，（在统一浏览器可以共享

以键值对的形式存储使用

存储 / 设置 / 获取 /删除数据

     localStorage.getItem("key");//获取数据
     localStorage.setItem("key",value);//设置数据
     localStorage.removeItem("key");// 删除数据
     localStorage.clear();//清除所有的数据

面向对象编程

面向对象的特性：
- 封装性
- 继承性
- 多态性

一类和对象

ES6 类和对像
类：抽象了对象的公共部分，它泛指某一大类
对象：特指某一个，通过实例化一个具体的对象

创建对象

        class Name {
            constructor(){}
        }
        var name = new Name ();//实例化

注意：创建类，类名后面不要加小括号（）

生成实例，类名后面加小括号

构造函数不要加 function

多个函数之间不要用，逗号隔开

Constructor

constructor() 函数可以接受传递过来的参数。同时返回实例对象
Constructor() 韩硕只要 new 生成实例就会自动调用这个函数，如果没写，也会自动生成

继承 extends

       class Father {
         
        }
        class Son  extends Father{
          
        }

继承方法 super()

继承方法 super（）关键字用于访问和调用对象父类的函数，可以调用父类的构造函数，也可以调用父类的普通函数
```
       class Father {
        constructor(x,y){

          }
        }
        class Son  extends Father{
          constructor(x,y){
              super(x,y);//调用父类的构造函数
          }
        }
```
- 继承中的属性或者方法查找原则：就近原则
  - 继承中父类，子类，有相同方法，就执行子类，没有执行父类的方法
  - 注意：es6没中类没有变量提升，必须先定义类，才能使用实例化对象
  - 类里面共有的属性，和方法一定要加this使用
this 指向
- constructor的this 指向的是创建的实例
- 方法的 this 指向的是调用者

构造函数和原型 es5

构造函数是一种特殊的函数，主要用来初始化对象，即对象为对象成员变量赋初始值，它总与 new 一起使用

        function 构造函数名 (age,name){ //构造函数名首字要大写
            this.age = age,
            this.name = name
        }
        var user = new 构造函数名()

静态成员的实例成员

构造函数中的属性和方法我们称之为成员
实例成员就是构造函数内部通过this 添加的成员，实例成员只能通过实例化的对象访问

静态成员，在构造函数本身上添加的成员，静态成员只能通过构造函数访问

        function Sub (age,name){
            this.age = age,
            this.name = name
        }
        Sub.age = 28;//静态成员添加
        var user = new Sub()

        console.log(user.age);//undefined

        console.log(Sub.age);//28

构造函数的问题
- 构造函数存在浪费内存的问题，实例化一个对象就会创建一个空间

构造函数原型

prototype 构造函数通过原型分配的函数式一个所有对象共享的，每一个构造函数都有一个 prototype 属性
我们可以把一些不变的方法，直接定义在 prototupe 对象上，这样所有的对象实例就能共享这些方法

原型对象

对象都有一个属性，__proto__ 指向构造函数 prototupe 原型对象

__proto__ === prototupe 原型对象

构造函数 constructor

constructor 指回构造函数本身
constructor 主要用于记录该对象引用与那个构造函数，他可以让原型对象重新指向原来的构造函数

如果修改了原来的原型对象，给原型对象赋值的是一个对象，则必须手动的利用 constructor 指回原来的构造函数

        function Star(age){
            this.age=age
        };
        Star.prototype = {
            constructor:Star,//指回原来的构造函数
            SeyHi:function(){alert('hello')},//向 原型添加方法
            Move:function(){alert('world')}//向 原型添加方法
        }

原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mXpFRgpy-1635763978213)(…/…/AppData/Roaming/Typora/typora-user-images/image-20211101134205893.png)]

        function Star(){
        };
        Star.prototype = {
            constructor:Star,//指回原来的构造函数
            SeyHi:function(){alert('hello')},//向 原型添加方法
            Move:function(){alert('world')}//向 原型添加方法
        }
        var liu = new Star();//实例对象
        console.log(liu.__proto__); // 指向 构 造函数原型对象prototype
        console.log(Star.prototype); // 指向 构 造函数原型对象prototype
        console.log(Star.prototype.constructor);  //指向  构造函数 Star 
        console.log(Star.prototype.__proto__);// 指向 object原型对象prototype
        console.log(Star.prototype.__proto__.__proto__); // 指向 null
        console.log(Star.__proto__ == Function.prototype); //构造函数 指向 大写Function 原型对象
        console.log(Function.prototype.__proto__);// 指向 object原型对象prototype

扩展内置对象

可以通过原型对象，对原来的内置对象，进行扩展自定义的方法，比如给数组增加自定义求偶数的功能
注意：数组和字符串内置对象不能给原型对象覆盖操作
```
  Array.prototype= function(){ }
```

继承

构造函数 + 原型对象称为组合继承

利用原型对象继承方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hb1o8Gt0-1635763978214)(…/…/AppData/Roaming/Typora/typora-user-images/image-20211101140214127.png)]

        S.prototype = F实例对象;
        S.prototype.constructor = S;// 重新指向S 构造函数

es6 中的 class 类就是构造函数的语法糖（同样有 prototype proto

call() 继承

fun.call(thisArg,arg1,arg2…)

调用这个函数，并且修改函数运行时的this指向
- thisArg 当前调用函数 this的指向对象
- arg1 ，arg2 ：传递的其他参数
```
        fun.call()//调用函数
        fun.call(son)//改变 fun的this 指 son 对象
```

数组新增方法

forEach

        var arr =["苹果","香蕉","鸭梨","草莓"]
        arr.forEach((value,index,arr)=>{
            console.log(value);//数组当前的值
            console.log(index);//索引
            console.log(arr);//数组本身
        })

filter

filter((v,i,arr)=>{}) 创建一个新的数组，新的数组中的元素是通过检查指定数组中符合条件的所有元素

主要用于筛选数组中符合条件的所有元素返回的是一个新数组

        var num = [20,50,30,60,80,40,90,100];
        num = num.filter((v)=>{
            return v >= 50;//返回 大于等于50以上的
        })
        console.log(num);// [50, 60, 80, 90, 100]

some

some 用于检测数组的元素是否满足指定条件
注意：返回的是布尔值，查到返回true 否则 false ，找到第一个满足条件的元素，终止循环，不在继续寻找

       var num = [20,50,30,60,80,40,90,100];
        var bol = num.some((v)=>{
            return v >= 50;
        })
        console.log(bol);//ture

foreach filter return false 不会终止循环还会继续遍历

字符串方法

trim

去除两则空格，返回新的字符串
```
 var str = str.trim()
```

对象方法

        Object.defineProperty(obj,prop,descriptor)//定义属性或修改原有属性
       // obj 对象
       // prop 属性
       //  descriptor 以对象形式{}书写
       {
           value:设置属性的值，默认为 undefined
           writable:值是否可以重写， true / false  默认为false
           enumerable:目标属性是否可以被枚举  true / false  默认为false
           configurable:目标属性是都可以被删除 或可以再次被修该特性   true / false  默认为false
       }

函数高阶

函数的定义方式

        function 函数名(){}
        var 变量名 = function(){}
        var fn = new Function()

函数调用

        //普通函数
        函数名();
        函数名.call();
        //对象方法
        对象名.方法名()
        //构造函数
        new 构造函数
        //绑定事件函数
        触发调用
        //定时器函数
        由设置的时间到了调用
        //立即执行函数
        自调用

this 指向

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mzNvS0hH-1635763978215)(…/…/AppData/Roaming/Typora/typora-user-images/image-20211101145850313.png)]

改变函数内部 this 指向

call(thisArg ,arg1…)
```
f.call(s,name)
```
apply( thisArg ,[argArray])
```
f.apply(s,[name])
```
bind(thisArg ,arg1…)

f.bind(s,name)

三个方法总结
- call 和 apply 会调用函数，并且改变函数内部this指向
- call 和apply 传递的参数不一样，call 传递参数 arg的形式 apply传递的必须是数组形式[arg]
- bind 不会调用函数，可以改变this 指向
主要应用场景
- call 经常用于继承
- apply 经常和数组有关系
- bind 不调用函数，但还想改变this指向，比如定时器内部this指向

严格模式

严格模式对正常模式做了一些更改

消除不合理，不严谨之处
消除代码运行的一些不安全之处
提高编译器效率，增加运行速度
禁用保留字，不能做变量名

严格模式开启

分为两种：为脚本开启严格模式

为函数开启严格模式

只需要最前面一行代码加上

`use strict`

注意：严格模式下全局作用域中函数的（普通函数）this指向为 undefined 其他函数this指向不变

高阶函数

高阶函数式对其他函数进行操作，它接受的函数作为参数或将函数作为返回值输出

        //1
        function fun (callback){
            callback&&callback//若传递执行
        }  
        fun(function(){alert("hello")})
        //2
        function fn(){
            return function(){
                alert("hello")
            }
        }
        fn()

闭包&递归

闭包

闭包指有权访问另一个函数作用域中变量的函数
通俗的说：一个作用域访问另一个函数的局部变量

主要作用：延伸变量的作用范围，和寿命

        function fun (){
            var num = 10;
         return function (){
                console.log(num);
            }
        }
        var fn =fun();//调用的是返回的函数
        fn()//调用函数

递归

一个函数在内部调用其本身，称为递归函数

由于递归很容易发生 “栈溢出”错误，所以必须加退出条件return

        var num = 1;
        function fun (){
            num++;//条件更新
            console.log(num);
            if(num ==6){
                return;//达到判断条件 return 出去
            }
            fun()//调用本身
        }
        fun()

深/浅拷贝

浅拷贝：只拷贝一层，更深层次对象几被的只拷贝引用
深拷贝：拷贝多层，每一个级别的数据都会拷贝

object.assign(target,…sources) es6新增方法可以浅拷贝

        //普通浅拷贝
        var obj= {
            id:1,
            name:"张三",
            sayHi:function(){
                alert("hello")
            }
        };
        var o = {};
        // for (const k in obj) {
        //     o[k]= obj[k] //k 是属性   obj[k]是属性值
        // }
        // console.log(o);
        // o.sayHi()

        //es6 新增拷贝
        Object.assign(o,obj)
        console.log(o);

        //深拷贝
        function deepCopy(newobj,oldobj){
            for (const k in oldobj) {
        
                var item = oldobj[k];
                if(item instanceof Array){
                    newobj[k] = [];
                    deepCopy(newobj[k],item);
                }else if(item instanceof Object){
                    newobj[k] = {};
                    deepCopy(newobj[k],item);
                }else{
                    newobj[k] = item;
                }
            }
        }

正则表达式

正则表示式：是用于匹配字符串中字符串组合的模式
通常用于检索，替换哪些符合某个模式（规则）的文本

正则表达式使用

是用 RegExp 对象创建

var reg = new RegExp(/123/);
var str = 123;

利用字面量 /正则表达式/ 创建
```
  var reg = /123/;
   var str = 123;
```
检测正则表达式 test（）
- text正则对象方法，用于检测字符串是否符合该规则，返回true/false
- reg.text(str)
```
        var reg = /123/;
        var str = 123;
       console.log(reg.test(str)); //true 
```
正则表达式组成
- 边界符 ^以什么……开始 $ 以什么……结尾 /^ abc $/ 必须是abc
- 字符类 [] 表示一些类字符可供选择，只要匹配一个就行 /[abc]/ 包含abc任意一个值都可以 /^ [abc ] $/ 只能是其中一个，三选一
- 下划线—
- -短横线
- [a-z] 小写a-z其中的字符
- [A-Z] 大写A-Z 其中的字符
- [0-9] 0-9之间的数字
- [^] 取反
- ¹ 以[]开始。。。
量词符
- /* /可以出现0 次及以上
- /+/ 一次多次
- /？/一次或0次
- {3 }重复3次
- {3，}重复3次及以上
- {3,16}重复3次小于等于16次
括号总结
- {} 量词符里面表示重复次数
- [] 匹配方括号的任意字符
- () 小括号表示优先级
预定义类
- \d 0-9
- \D 除了0-9
- \W 除字母，数字下划线以外
- \w 任意字母，数字，下划线，
- \S 除了空格（包含换行，制表符，空格等
- \s 空格（包含换行，制表符，空格等
- | 或
正则表达式替换
- replace（被替换得字符/正则表达式，g/i 全局匹配/不区分大小写，替换为的字符）
- str.replace(/傻逼/gi，“**”)

Es6

关键字

let 声明变量
- let 声明的变量只在所处于的块级有效
- 在{}大括号中声明，才具有块级作用域，var不具备这个特点
- let 声明的变量没有变量提升
const 声明常量
- 作用声明常量，常量就是值（内存地址）不能变化的量
- 具有块级作用域
- 声明常量必须赋初始值
- 常量赋值后，之不可更改
  - 基本数据类型，值不可更改，
  - 复杂数据类型，地址不变情况下，可以修改内容
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cbvzfW8Q-1635763978216)(…/…/AppData/Roaming/Typora/typora-user-images/image-20211101164538900.png)]

二解构赋值

es6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构

数组解构

        let [a,b,c] = [1,2,3];
        console.log(a);//1
        console.log(b);//2
        console.log(c);//3

对象解构

        var {name,age,sex } = pas;
        console.log(name);//张三
        var {name:username,age:userage,sex:usersex} = pas; //name:username  左边代表匹配属性  右边代表接收变量名
        console.log(username);
        console.log(usersex);

三箭头函数

（）=> {}

在箭头函数中只有一句代码并且代码的执行结果就是函数的返回值，函数大括号可以省略
如果形参只有一个（）小括号也可以省略
```
(n1,n2)=>n1+n2;

n1 => nl;
```

this

箭头函数this绑定看的是this 所在函数定义在哪个对象下，绑定哪个对象则this指向哪个

或理解函数定义的上下文

四剩余参数

…args 函数传参不确定时使用

        const sum = (...args)=>{
            let to = 0;
            args.forEach( v => to += v)
            return to; 
        }
        console.log(sum(1,4,6,8));
        console.log(sum(5,6,9));

剩余参数和解构配合使用

        var num = [1,2,3,4,5];
        let [num1,...num2] = num;
        console.log(num1);//1
        console.log(num2);//  [2,3,4,5];

五 Array 扩展方法

扩展运算符可以将数组拆分成以逗号分隔得参数序列
扩展运算符应用于数组合并

       1 var num = [1,2,3,4,5];
        console.log(...num );//1 2 3 4 5

       2 let arr = [1,12];
        let arr1 = [3,13];
        let arr3 = [...arr,...arr1]
        console.log(arr3);// [1, 12, 3, 13]

扩展运算符将伪数组转换真正的数组

        var div = document.querySelector("div");
        var divArr  = [...div];
        divArr.push['a']

Array.from() 将伪数组转换为数组

       var div = document.querySelector("div");
       let divArr = Array.from(div)

find（）找出第一个符合条件的数组成员，如果没有返回 undefined

        let arr = [1,2,5,6,8,9,4];
        var arr1 = arr.find((v,i)=>  v == 2);
        console.log(arr1); //2

findLndex 找到符合调教的数组成员位置，如果没有返回 -1

        let arr = [1,2,5,6,8,9,4];
        var arr1 = arr.findIndex(v => v === 8)
        console.log(arr1);//4 返回的是索引

includes() ; 判断数组是否包含某个值，有true 无 false

        let arr = [1,2,5,6,8,9,4];
        console.log(arr.includes(5));//true
        console.log(arr.includes(3));//false

六 string的扩展方法

模板字符串

可以拼接变量
可以换行

可以调用函数

        `${变量}`

        `1
        2
        3`

        `${fun()}`

str.startsWith ( ) 判断字符串是否以什么开始，返回布尔值
str.endWith（）判断字符串是否以什么结尾，返回布尔值

repeat（n）重复字符串n 次，返回一个新字符串

        let str = 'x'.repeat(3);
        console.log(str);//  xxx

七 set 数据结构

创建 new Set（）

数组去重返回的是一个对象

        let arr = [1,2,2,2,3,3,4,5,5];
        let arr1 = new Set(arr);
        console.log(arr1);//{1, 2, 3, 4, 5}
        console.log( typeof arr1); //object  
        arr1 = [...arr1];

Set 对象方法

add（value）添加值返回set 结构本身
delete（value）删除值返回布尔值
has（value）查询是否有该值返回布尔值

clear（）清除所有成员，没有返回值

        let arr = [1,2,2,2,3,3,4,5,5];
        let set = new Set(arr);
        set.add(6);
        set.has(5);
        set.delete(2)
        console.log(set );//{1, 3, 4, 5, 6}

遍历方法都一样能用在set 上
```
set.forEach(v => console.log(v))
```

↩︎

oh97

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript（修改）笔记大全

JavaSript基础语法一初识js1：引入js（1）外联（2）内联（3）行内2，注释 //单行 /*多行*/3.警告框 alert（）；警告框 confirm（）；选择框 prompt（）；输入框 console.log();控制台输出二变量变量是程序在内存中申请的一块用来存放数据的空间使用：声明变量 var age赋值 age=18
复制链接

扫一扫