MyselfNotes_js_by_sir.w

sir.wf

已于 2023-07-14 20:28:45 修改

阅读量45

点赞数

分类专栏：学习笔记文章标签： javascript 开发语言 ecmascript

于 2023-07-07 19:55:01 首次发布

本文链接：https://blog.csdn.net/happypok/article/details/131603644

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

JavaScript 语法入门(简化版)

Javascript 整个语法结构由三大部分组成

ES 规范

BOM 浏览器对象模型

DOM 文档对象模型

ES 规范

完全遵循 ES5 ES6 等规范,没有任何兼容性问题

基本数据类型(值数据类型)

Java 基本数据类型:byte short int float double long boolean char

JavaScript 基本数据类型：string number null boolean undefined bigint symbol

string:字符串（小写s）

tostring()

//ES5
var count = 100;
var str = "etoak";
//ES6 let 和 const 取代了 var 作为标识符
//let:用来赋值变量 const:用来赋值常量
let count = 100
//ES6 中自带 ASI 特性,如果语句为最终的结尾,则不需要手动书写分号,而自动添加
//推荐使用单引号取代双引号作为字符串标识
const str = 'etoak'

number:数字范围是正负 2^53-1 相当于 java 中 int + float
- NaN:表示 not a number
- Infinity:正无穷
- -Infinity:负无穷
- number()
- parseInt()
- -0
boolean:布尔值 true 和 false
- 在 js 中 null NaN undefined false 0 ‘’ 被统称为假值,在流程控制中等同于 false
- 除去假值以外的值统称为真值,在流程控制中等同于 true
```
let str = ''//假值
if(!str){
    //会进入此分支
}
const arr = [1,2,3]
if(arr.length){
    //如果数组长度不为 0 则进入此分支
}
```
- !!:根据真假值进行数据转换,假值为 false 真值为 true
null 注意空的数据类型显示存在差异使用 typeof 获取数据类型,则显示 Object 对象

undefined:表示没有数据类型

//Java
int count = 100;
String str = "etoak";
int count2;
String str2;
//Js
let count = 100	//number
let count2	// undefined
//Ts
let count:number = 100
const str:string = 'etoak'

bigint(ES8新增):范围超过了 2^53-1
- 在书写时后面添加 n
```
let count = 100	//number
let count2 = 100n //bigint
```
symbol(ES6新增)

复杂数据类型(地址数据类型,引用数据类型)

Object:表示一个对象
Array:数组
Function:函数,函数肯定存在返回值,要么是 return 的数据,要么返回 undefined
RegExp:正则表达式 https://any86.github.io/any-rule/
Math:用来进行数学运算
Date:用来进行日期运算

BOM 浏览器对象模型

Browser Object Model

将浏览器看做一个大的对象 window

根据浏览器不同的功能还存在六个子对象,此七个对象是内置对象,我们可以直接使用，类似于Java中的对象

BOM 就是提供了一组用户使用脚本操纵浏览器的接口

Browser Object Model（浏览器对象模型）,即把「浏览器」当做一个「对象」来看待。

window:顶层对象,全局变量,表示整个浏览器窗口，下面六个对象都为window对象的属性
- document:表示页面正文,配合 DOM,可以修改页面的结构和样式等（最强大）
- location:封装页面的地址栏信息,通过此对象可以进行跳转,路径截取等
- history:封装浏览器的历史记录,缓存等
- screen:可以获取当前屏幕的信息,例如获取分辨率,颜色,控制鼠标指针等
- navigtor:可以获取当前打开页面的浏览器信息
- frame:已经被淘汰,页面的一种框架,是 iframe 的前身

在这里插入图片描述

DOM 文档对象模型

提供了使用 js 脚本操纵页面结构和样式的多种接口

其实就是各种节点,存在较大差异性问题

Document Object Model（文档对象模型），就是把「文档」当做一个「对象」来看待，这个文档就是document

文档节点:就表示根元素,一个 html 页面只有一个文档节点
元素节点:就是指页面中的各种元素,通过 document 使用 js 选择器可以从模型中获取一个或者多个元素节点
- ES5
  - document.getElementById(‘id’):根据 id 属性从模型中获取唯一一个元素节点
  - document.getElementsByName(‘name’):根据 name 属性从模型中获取多个元素节点,被封装在一个类数组中
  - document.getElementsByTagName(‘tag’):根据标签名从模型中获取多个元素节点,被封装在一个类数组中
  - document.getElementsClassName(‘class’):根据 class 属性从模型中获取多个元素节点,被封装在一个类数组中
- ES6
  - document.querySelector(‘sel’):使用 css 选择器从全文获取唯一一个元素节点
  - document.querySelectorAll(‘sel’):使用 css 选择器从全文获取多个元素节点,封装在一个类数组中
属性节点:就是指元素中的各种属性
- <tagName 属性名=“属性值” />
文本节点:就是指页面中的各种文本

注释节点:就是指页面中的各种注释

<html>
    <body>
    <div id="outter">测试1<span>测试2</span>测试3</div>
    </body>
</html>
其中html为文档节点，body为元素节点，整个div为一个元素节点，其中id="outter"为属性节点，测试1为文本节点，span为元素节点

在这里插入图片描述

Js能够直接修改页面结构和样式吗?如果不能说出为什么?

Js不能直接修改页面的结构和样式,Js 必须借助 DOM 文档对象模型来修改页面的结构和样式
浏览器从上往下解析,在解析完全文之后,如果没有任何错误,浏览器会根据当前页面结构和样式创建一个 DOM 文档对象模型,这个模型由各种节点(Node)组成,类似一棵倒置的树,保存在内存中

          html

           |

        \-----------

        |     |

        head    body

        |     |

      -------    ------

      |   |    |   |

     meta  title button table

                 |

                 tr

                 |

                 td

DOM 文档对象模型创建之后,可以通过 BOM 中的 document 对这些节点进行各种 crud 操作,对这些节点进行操作之后,如果浏览器发现 DOM 文档对象模型与当前页面不再保持一致,则重新根据模型渲染页面,使之保持一致
我们书写的页面如果去掉 window.onload 则意为着执行到 let nodeTb = document.getElementById(‘tb’) 代码时模型根本没有创建完毕,此时 js 选择器根本无法从模型中获取元素节点,从而导致绑定激发事件出错

Js中的箭头函数

ES6新特性箭头函数

在 js 中如果见到匿名函数,则 function 可以省略,在参数之后添加 => 如果没有参数,则小括号不能省略,如果存在一个参数,则小括号可以省略,一个以上不能省略,函数体如果只有 return 语句或者只有一行语句,则大括号和 return 省略

// ES5
let x = function(x, y) {
     return x * y;
}
 
// ES6
let x = (x, y) => x * y;

Js中的等号

=:赋值

==:如果两个数据不是同一种类型,则转换为同一种类型进行比较

===:如果两个数据不是同一种类型,立刻返回 false,如果是同一种类型,则进行比较，常用

Js中字符串常用的二十种方法

在这里插入图片描述

Js中的数组

数组的创建

通过复杂数据类型自带的构造器去创建数组

const arr = new Array()
arr[0]=15
arr[1]='etoak'
arr[0]=true
arr[0]=null

直接创建数组
```
const arr = [1,2,3,4,5]
```

数组的追加
- push()：尾部增添
- unshift()：头部增添
数组的删除
- pop()：尾部删除
- shift()：头部删除
- splice(index,length,replace):删除
  - index:起始删除的索引
  - length:删除个数
  - replace:替换的值,不是必须
数组的迭代
- for循环
- for-in循环
  - ES5 for in 迭代
    
    for(let index in 数组){}
```
for(let index in arr1){
    console.log(arr1[index])
}
```
- for-of循环
  - ES6 新特性 for of 迭代
    
    for(alias(别名) of 数组){}
```
for(a of arr1){
    console.log(a)
}
```
- forEach循环
  - ES6 forEach 迭代
    
    ES5 数组.forEach(function(alias,index){})
    
    ES6 数组.forEach((alias,index)=>{})
```
arr1.forEach((a,index)=> console.log(`第${index}个元素是${a}`))
```

数组的过滤

filter()

//ES5
数组.filter(function(){
    return 过滤条件
})
//ES6
数组.filter(() => return 过滤条件)
//例子
const newArr = arr1.filter(function(a){
    return a>=5
})

const newArr4 = arr4.filter(a => a <= 40)

find()

/*find与filter类似，但是仅仅返回符合过滤条件的第一个数据*/
/* find():与 filter 类似,但是仅仅返回第一个符合过滤条件的数据 */
let value = arr1.find( a => a >= 5 )
console.log(value)//只输出一个值

map()

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
array.map(function(currentValue,index,arr), thisValue)

const newArr3 = persons.map( person => person.name )
console.log(newArr3)
此时newArr3数组中的值为人的名字

数组的排序

reverse()逆序排序
sort()正序排序

数组的常用方法

在这里插入图片描述

let与const的区别

对于基本类型

let 赋值变量 const 赋值常量
对于复杂类型 Object Array Function

使用 const 会事先划分好内存地址,不管用户如何改动,则都在这个地址之内,不会造成频繁的寻址

反而较 let 节省资源,因此使用 const 不影响数据的改动,并且效率较高,因此复杂类型推荐使用 const

substring-substr-slice区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fevR8hKK-1688730716366)(C:\Users\WangFan\AppData\Roaming\Typora\typora-user-images\substring-substr-slice区别.png)]

Js中的对象创建

通过对象字面量创建对象

let|const stu = {
    name:'tom',
    realname:'张三',
    gender:0
    email:'et@et.com'
    run(){
        consle.log(`${this.name}的真实姓名${this.realname},邮箱地址为${this.email}`)
    },
}
stu.run()

通过对象自带的构造器创建对象

const object = new Object()
obj.name = 'tom'
obj.gender = 0
obj.realName = '张三'

一些常用的方法

//设置属性值 对象名.属性名 = 新的值
person.name = 'tom'
//调用方法 对象名.方法名()
person.etoak()
//获取属性值 属性值 = 对象.属性名 属性值 = 对象['属性名']
console.log(person.name,person['name'])
//删除属性和属性值 如果删除成功返回 true ,删除失败 false     delete 对象名.属性名
consle.log(delete person.name)
/* 获取所有的属性名  Object.key(对象名)*/
console.log(Object.keys(person))
/* 获取所有的属性值 Object.values(对象名)*/
console.log(Object.values(person))

Js中的函数创建

//方式一
let add = () => {
    xxxxxx
}

//方式二
function add(){
    xxxxxx
}

Js分离语法

ES6 新特性分离语法，使用分离运算符 … 可以将数据从字符串数组对象中分离出来

针对字符串将每个字符拆出来

let str = 'etoak'
console.log(...str)
//输出e t o a k

针对数组就是将数组的 [ ] 去掉,将内部的数据取出

const arr = [1, 2, 3, 4, 5]
console.log(...arr)//输出 1 2 3 4 5 

const demo = (a, b, c, d, e) => a + b + c + d + e
console.log(demo(...arr))//输出15

const arr2 = [...arr,999]//数组的拷贝
console.log(arr2)
//输出[1, 2, 3, 4, 5, 999]

针对对象就是将对象的 { } 去掉,将内部的键值对取出，但是取出的键值对不能单独放到外面，也需要放置在 { } 中

const obj = {
    name:'张三',
    age:33,
    location:'济南',
}

const obj2 = {...obj,hobby:['犯法']}

console.log(obj2)
//输出name: '张三', age: 33, location: '济南', hobby: Array(1)

深拷贝与浅拷贝

浅拷贝
- 浅拷贝:两个拷贝后的数据不管哪一个修改,都会影响另一个,既你变我也变, 称之为浅拷贝
深拷贝
- 深拷贝:两个拷贝后的数据不管哪一个修改,都不会影响另一个,既你变我不变,称之为深拷贝

拷贝的方式

使用 =

基本数据类型：肯定深拷贝

复杂数据类型：肯定浅拷贝

let str1 = 'etoak' //基本数据类型 -> 深拷贝
let str2 = str1
console.log(str1,str2)//输出 etoak etoak

const arr1 = [1,2,3,4] //复杂数据类型 ->浅拷贝
const arr2 = arr1
console.log(arr1,arr2) //(4) [1, 2, 3, 4] (4) [1, 2, 3, 4]
arr2.push(777) //往arr2数组添加 777 
console.log(arr1,arr2) //受到浅拷贝影响 arr1 也会发生变化  (5) [1, 2, 3, 4, 777] (5) [1, 2, 3, 4, 777]

const obj1 = {
    name:'胡桃', //基本数据类型
    age:17, //基本数据类型
    hobby:['恶作剧','逛街'], //复杂数据类型
}

const obj2 = {...obj1}
console.log(obj1,obj2) 
//{name: '胡桃', age: 17, hobby: Array(2)} {name: '胡桃', age: 17, hobby: Array(2)}
obj2.name = '甘雨' //基本数据类型，深拷贝
obj2.age = 27 //基本数据类型 深拷贝
obj2.hobby[0] = '工作' //复杂数据类型 浅拷贝
console.log(obj1, obj2) 
/* 
obj1 -> {name: '胡桃', age: 17, hobby: Array(2)} hobby : (2) ['工作', '逛街']
obj2 -> {name: '甘雨', age: 27, hobby: Array(2)} hobby : (2) ['工作', '逛街']
*/

使用 … Object.assign() slice() Array.from() concat()

复杂类型:拷贝之后,如果修改的数据是这个复杂类型表层的数据,这个数据是基本类型,则深拷贝

如果修改的数据是这个复杂类型表层的数据,这个数据是复杂类型,则浅拷贝

const obj3 = {
    name:'张三', //基本数据类型
    age:33, //基本数据类型
    location:{ //Object 数据类型，引用数据类型
        address:'济南',
    },
}

const obj4 = Object.assign({},obj3) 
//Object.assign() 用于将源对象的所有可枚举属性复制到目标对象中。
// 第一个参数是目标对象，后面的参数是源对象


console.log(obj3,obj4) //{name: '张三', age: 33, location: {…}}   {name: '张三', age: 33, location: {…}}
obj4.name = '李四' //基本数据类型 -> 深拷贝
obj4.age = 40 //基本数据类型 -> 深拷贝
console.log(obj3, obj4) //{name: '张三', age: 33, location: {…}}  {name: '李四', age: 40, location: {…}}
obj4.location.address = '青岛' //引用数据类型 -> 浅拷贝
console.log(obj3, obj4) //济南会变成青岛

JSON.parse(JSON.stringify())
- 又称之为万能转换器,不管什么数据,都是深拷贝但是注意对与数据有诸多限制

解构赋值

解构赋值只能给对象赋值，但是不能创建对象，创建对象采用对象字面量创建对象，不要和创建对象、数组混淆

通过数组方式赋值，注意等号前后都有 [ ] ,不能出现数组名

let [value1,value2,value3] = [100,true,'etoak']
console.log(value1,value2,value3)//100 true 'etoak'

let [value4, value5, value6] = [100,,'etoak']
console.log(value4, value5, value6) //100 undefined 'etoak'

//!!!!!!!!!!!!!!!!!以下写法是错误的!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
let arr[value1,value2,value3] = [100,true,'etoak'] //不能出现数组名

通过对象方式赋值,注意属性名和标识必须对应,注意等号前后都有 { } ，不能出现对象名

let {myname,mypass,myaddress,myhobby,myvalue} = { 
    myname:'钟离',
    mypass:12345,
    myaddress:'璃月港',
    myhobby:['和胡桃吃饭','逛街'],
    value:'测试', //测试属性名与标识不对应，出现undefined
}

console.log(myname,mypass,myaddress,myhobby,myvalue) //钟离 12345 璃月港 Array(2) undefined


//!!!!!!!!!!!!!!!!!以下写法是错误的!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
let stu{myname,mypass,myaddress,myhobby,myvalue} = { //不能出现对象名
    myname:'钟离',
    mypass:12345,
    myaddress:'璃月港',
    myhobby:['和胡桃吃饭','逛街'],
    value:'测试', 
}

. 通过对象方式赋值,注意属性名和标识必须对应,注意等号前后都有 { } ，不能出现对象名

let {myname,mypass,myaddress,myhobby,myvalue} = { 
    myname:'钟离',
    mypass:12345,
    myaddress:'璃月港',
    myhobby:['和胡桃吃饭','逛街'],
    value:'测试', //测试属性名与标识不对应，出现undefined
}

console.log(myname,mypass,myaddress,myhobby,myvalue) //钟离 12345 璃月港 Array(2) undefined


//!!!!!!!!!!!!!!!!!以下写法是错误的!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
let stu{myname,mypass,myaddress,myhobby,myvalue} = { //不能出现对象名
    myname:'钟离',
    mypass:12345,
    myaddress:'璃月港',
    myhobby:['和胡桃吃饭','逛街'],
    value:'测试', 
}