JavaScript

Posted 2021-09-08 狂狼大白鲨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript相关的知识，希望对你有一定的参考价值。

javascript

0、组件

Ant Design
ice
Amazeui

1、什么是javascript

JavaScript是一门世界上最流行的脚本语言

2、快速入门

2.1、引入JavaScript

2.2、基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--间隔区分大小写-->
  <script>
    // 1.定义变量 变量类型 变量名=变量值；
    const score = 65;
    // alert(num)
    // 2.条件控制
    if (score>60  && score<70){
      alert('你的成绩在60~70');
    }else if (score>70 && score<80){
      alert('你的成绩在70~80');
    }else{
      alert('other')
    }

  //console.log() 在浏览器控制台打印变量！相当于Sout
  </script>

</head>
<body>

</body>
</html>

2.3、数据类型

数值，文本，图形，音频，视屏······

变量

`var _$f符号才可以

number

js区分小数和整数，number

123//整数123
123.//浮点数
1.23e3 //科学计算法
-99//负数
NaN //not a number
Infinity //表示无限大

字符串

‘abc’ “abc”

布尔值

true false

逻辑运算

与&&  两个都为真，结果都为真

或|| 一个为真，结果就是真

非！

比较运算符

= 赋值
== 等于（类型不一样，值一样也会判断为true）
=== 绝对等于(必须类一样，值一样结果才为true)

这是一个js缺陷，坚持不用==做比较

须知：

nan==nan 这个与所有的数值都不相等，包括自己
只能通过isnan（）判断是否为NaN

浮点数问题

console.log((1/3)===(1-2/3));

尽量避免使用浮点数问题进行计算，存在精度问题

null和undefined

null
undefined

数组

java的数组必须是相同类型的队形，一些数列相同类型的对象~,js不需要这样

var arr = [1,2,3,4,"hello",null ,true]

对象

对象是大括号，数组是中括号

每个属性之间用逗号隔开，最后一个不用

 //new person = new person();
      var person = {
          name:"qinjiang",
          age:3,
          tags:['js','java']
      }

取对象的值

person.name"qinjiang"person.age3

2.4、严格检查模式

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title><!--'use strict';严格检查模式，预防js的随意性导致产生的一些问题必须卸载js的第一行-->  <script !src="">    'use strict';    //全局变量 var 局部变量建议使用let    let i = 1;  </script></head><body></body></html>

3、数据类型

3.1、字符串

正常字符串我们是用单引号或者双引号包括

我们假设有些特殊性情况可以用转义符号

\\. 表示一个点\\n 表示换行\\t table\\u4e2d nicode字符\\x41  ascll字符

多行字符串编写

<script !src="">    'use strict';    console.log('a');    console.log("a");    //tab上边的字符串    const msg = `hello    你好呀    1111`;  </script>

模板字符串

  <script !src="">    'use strict';   let name = "liushuo";   let age = "3"    let msg = `nihaoya,${name}`  </script>

字符串长度
```
str.length
```
字符串的可变性，不可变

大小写转化

console.log(student.toUpperCase())//注意这里是方法不是属性  console.log(student.tolowerCase())

获取指定字符串下标
```
str.indexOf("t")
```

切片

[)str.substring(1)//从第一个字符串截取到最后一个字符串str.substring(1，3)//包含第一个不包含第三个

3.2、数组

Array可以包含任意数据类型的数组

var arr = [1,2,3,4,4]；//通过小标取值arr [1]

长度
```
arr.length
```
注意：假如给arr.length赋值，数组大小就不会发生变化，如果赋值过小则元素丢失
indexof,通过元素获得下标索引
```
arr.indexof(2)
```
字符串的“1”和数字的1是不一样的
slice（）截取Array的一部分，返回一个新的数组，类似于string中的substring

push 、pop 尾部

push:压入到尾部pop：弹出尾部的一个元素

unshift（）、shift（）头部

unshiftsh:压入到头部shif：弹出头部的一个元素

排序 sort（）

arr = ["b","a","c"]arr.sort()["a","b","c"]

元素反转
```
str.reverse()
```
concat([1,2,3])连接数组

注意：concat并没有修改数组，只是返回了一个新的数组
连接符join
```
["c","b","a"]str.join("-")"c-b-a"
```
多维数组

arr = [[1,2],[2.3]]arr[1][1]2

数组：存储数据（如何存，如何取）

3.3、对象

若干键值对

//定义了一个person对象有几个属性var 对象名 = {    属性名：属性值，       属性名：属性值，       属性名：属性值，}

js中的对象，{·····}表示一个对象，键值对描述属性XXXXXX：xxxx ，多个属性之间用逗号隔开，最后一个属性不加逗号！

js中的所有键都是字符串，值时任意对象

对象赋值
```
person.name = "qinji""qinjiang"
```
使用一个不存在的对象属性，是不会报错的！
```
person.hahahundefined
```
动态删减属性，通过delete·删除对象属性
```
delete person.nametrue
```

动态添加,直接给新的属性添加值即可

person.haha = "haha""haha"person{age: 3, sex: "boy", haha: "haha"}

判断属性值是否在这个对象中！xxx in xxx

"age" in persontrue//继承"toString" in persontrue

判断一个属性是否是这个对象自身拥有的hasownproperty

person.hasOwnProperty("age")true

3.4、流程控制

if判断

<script !src="">    'use strict';    let age = 3;    if(age<3){        alert("haha")    }else{        alert("kua~")    }  </script>

while循环,避免死循环

  <script !src="">    'use strict';    let age = 3;    while(age<100){        age = age +1;        console.log(age)    }	do{        age = age +1        console.log(i)    }while(age<100)  </script></head>

for循环

  <script !src="">    'use strict';    let age = 3;    for (let i = 0; i < 100; i++) {        console.log(i)    }  </script></head>

foreach循环

let name = [1,2,3,4,5,11,1111,123]    //函数    name.forEach(function (value) {        console.log(value)    })

for ····in····

let age = 3;    let name = [1,2,3,4,5,11,1111,123]    //函数   /*   * for(type str :el)   * */    // let (var index in object){}   for(let num in name){       if (name.hasOwnProperty(num)){           console.log("存在")           console.log(name[num])       }        console.log(num)   }

3.5、Map和Set

map：

//学生的成绩，学生的名字    // let names = ["tome","jack","hahah"]    // let scores = [100,90,80]    let map = new Map([["tom",100],["jack",90]])    let name = map.get("tom")//通过key获得value    map.set("admin",123456)    console.log(name)

Set：无序不重复集合

let set = new Set([3,1,1,1,1]);//set可以去重    set.add(2)//添加    set.delete(3)//删除    console.log(set.has(2))//是否包含某种元素

3.6、iterator

用iterator来遍历我们的map、set

遍历数组

//通过 for of 遍历值 而 for in是下标let arr = [3,4,5,5]for(let x of arr){    console.log(x)}

遍历map

let map = new Map([['tom',10],['qq',100]])    for (let x of map){        console.log(x)    }

遍历set

 let set = new Set([1,2,3]);    for(let a of set) {        console.log(a)  }

4.函数

方法：对象（属性，方法）

函数：

4.1、定义函数

定义方式

绝对值函数

function abs(x){	if(x>0){		return x;	}else{        return -x    }}

public 返回值类型 方法名（）{    return}

一但执行到return代表函数结束，返回结果。

如果没有执行return，函数执行完成会返回结果，结果就是undefined

定义方式二

let abs = function(x){    if(x>0){        return x;    }else{        return -x    }        }

function(){}这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数

调用函数

abs(10)//10abs(-10)//10

参数问题：JavaScript可以传任意个参数，也可以不传递参数

参数进来是否存在问题？假设不存在参数，如何规避

function abs(x){      //手动抛出异常    if(typeof x!=='number'){        throw 'not a number'    }    if( x>=0){      return x;    }else{      return -x;    }  }

arguments

arguements是一个js免费赠送的关键字

代表传递进来的所有参数，是一个数组

function abs(x){      console.log("x>="+x)      for (let i = 0; i < arguments.length; i++) {            console.log(arguments[i])      }    if( x>=0){      return x;    }else{      return -x;    }  }

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

问题：argument是包含所有参数，我们有时候想使用多余的参数进行附加操作，需要排除已有的参数~

rest

以前：

if (arguments.length>2){                for (let i = 2; i < arguments.length; i++) {                    //...                }

es6引入的新特性，可以获取除已经定义的参数外其他的参数~…

    <script>        function aaa(a,b,...rest){            console.log("a=>"+a)            console.log("b=>"+b)            console.log(rest)        }    </script>

rest 参数只能写在最后面，必须使用。。。表示

4.2、变量的作用域

在JavaScript中，var定义的实际变量是有作用域的。

假设在函数中声明，则在函数体外是不可以使用的·（非要想实现的话）

<script !src="">  'use st'  function aj(){    let x = 1;    x = x +1;  }x=x+2</script>//Uncaught ReferenceError: x is not defined

如果两个函数使用相同的变量名，只要在函数内部就不冲突
内部类可以访问外部类，外部类不能访问内部类
假设在JavaScript中，函数查找变量自身函数开始~，由内向外查找。假设外不存在这个同名的函数变量，则内部函数会屏蔽外部函数。
说明：js执行引擎，自动提升了y的声明，但是不会提升y的赋值；

这是在js建立之初就存在的特性，养成习惯：所有的变量定义都放在函数头部，不要乱放。便于以后的代码维护

全局函数

全局对象 window

 let x = 'xxx';    alert(x);    alert(window.x)//默认所有的全局变量，都会自动绑定在Window对象下

alert()这个函数本身也是一个window变量；

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><script !src="">    let x = 'xxx';    window.alert(x);    let old = window.alert;        window.alert = function () {            }    //失效了    window.alert(123);</script></body></html>

js实际上是一个全局变量作用域，任何变量（函数也可以视为变量），假设没有在函数范围内找到，就会想外查找，如果在外面也没找到，就会在全局作用域下查找，如果还没找打，就会报错。

规范

由于我们所有的全局变变量都绑定在我们的Windows上，如果不同的js文件，使用了相同的全局变量，就会引发冲突。如何解决冲突？

//唯一变量    let liu = {};        //定义全局变量    liu.name = "liushuo"    liu.add = function (a,b) {        return a+b ;

就是把自己的代码放在自己定义的唯一空间中，降低全局命名冲突的问题

jQuery

局部作用域let

function add() {    for (var i = 0; i < 100; i++) {        console.log(i)    }    console.log(i+1)//问题 ？i出了作用域还是可以使用}

ES6 let 关键字，解决局部作用域的的冲突问题

建议使用llet定义局部作用域的变量

常量 const

在ES6之前，怎么定义常量：只要用全部大写字母命名的变量就是常量，建议不要修改。

4.3、方法

定义方法

就是把函数放在对象里面，对象只有两个东西：属性和方法

 let kuangshen = {    name: 'Xinjiang',    birth : '2000',    age: function () {      //今年减去出生年月      let now = new Date().getFullYear();      return now-this.birth    }  }  //属性 kuangshen.name//方法kuangshen.age()

this:代表什么？拆开代码

function getage (){    let now = new Date().getFullYear();    return now-this.birth}  let kuangshen = {    name: 'Xinjiang',    birth : '2000',    age: getage  }

this是无法指向，是默认指向调用他的那个函数

apply

在js中可以控制this的指向！

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><script !src="">function getage (){    let now = new Date().getFullYear();    return now-this.birth}  let kuangshen = {    name: 'Xinjiang',    birth : '2000',    age: getage  }  let xaioming = {    name: 'Xinjiang',    birth : '2000',    age: getage  }  // kuangshen.age() okgetage.apply(kuangshen,[])//空参 this 指向了kuangshen 参数为空//getage.apply(xaioming,[])想只知道小明的年龄直接调小明即可</script></body></html>

5、对象

标准对象

typeof 123"number"typeof "123""string"typeof true"boolean"typeof NaN"number"typeof []"object"typeof {}"object"typeof Math.abs"function"typeof undefined"undefined"

5.1、Date

基本使用

<script>    let now = new Date() ;//Fri Aug 06 2021 16:11:28    now.getFullYear(); //年    now.getMonth();//月0~11 代表月    now.getDate();//日    now.getDay();//星期几    now.getHours();//时    now.getMinutes();    now.getSeconds();    now.getTime();//时间戳，全时间统一    console.log(new Date(1628322568374))  //S时间戳转为时间</script>

转换

now = new Date(1628322568374)Sat Aug 07 2021 15:49:28 GMT+0800 (中国标准时间)now.toLocaleDateString()//注意调用是一个方法，不是一个属性"2021/8/7"now.toGMTString()"Sat, 07 Aug 2021 07:49:28 GMT"

5.2、JSON

json是什么

早期，所有的数据传输习惯使用xml文件。lson是一个轻量级的数据奇偶换格式。简介和清晰的层次结构是的其成为理想的数据交换语言

在js中一切皆为对象，任何js支持的类型都可以用json来表示；number string

格式

对象都用{}
数组都用[]
所有的键值对都使用key：value

json字符串和js对象的转化

<script>    let user ={        name : "Xinjiang",        age : 3,        sex : "男"    }    // 对象转换为json字符串    let jsonUser = JSON.stringify(user)    // json字符串转换为对象参数为字符串    let obj = JSON.parse('{"name":"Xinjiang","age":3,"sex":"男"}');</script>

很多人搞不清js对象和json的区别

let obj = {a:'hello',b:'hellob'}let json =' {"a":"hello","b":"hellob"}'

5.3、Ajax

原生的js写法 xhr异步请求
jquey封装好的,方法$(#name).ajax("")
axios请求

6、面向对象编程

6.1、什么是面向对象

JavaScript、java、c#。。。。面向对象；javascript有些区别

类：模板

对象：具体的实例

在javascript中需要大家换一下思维方式

原型：

 let student={        name : "Xinjiang",        age : 3,        sex : "男",        run :function () {            console.log(this.name+"run...");        }        }    let xiaoming = {        name:"xaioming",    }    xiaoming.__proto__ = student; //表示小明的原型是student

class 继承

关键字，是在es6引入的，

之前的

function Student(name) {    this.name = name;  }  //给student新增一个方法  student.prototype.hello = function () {    alert('hello')  }

现在的

定义一个类，属性，方法

//定义一个学生类class Student{    constructor(name) {        this.name = name;    }    hello(){        alert('hello')    }}let xiaoming = new Student("xiaoming")let xiaohong = new Student("xiaohong")xiaoming.hello（）

继承

<script>  //es6之后  class Student{      constructor(name) {          this.name = name;      }      hello(){          alert('hello')      }  }  class xiaostudent extends Student{        constructor(name,grade) {            super(name);            this.grade = grade        }        myGrade(){            alert('我是一名小学生')        }  }  let xiaoming = new Student("xiaoming")  let xiaohong = new Student("xiaohong")  let xiaohua = new xiaostudent("xiaohua",1)</script>

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

原型链

——proto——：

7、操作BOM对象（重点）

浏览器介绍

js和浏览器关系？

ja是为了能够在浏览器运行！

Bom：浏览器对象模型

IE
chrome
Safari
firefox

三方浏览器

QQ浏览器
360浏览器

window

window代表浏览器窗口

window.alert(1)undefinedwindow.innerHeight100window.innerWidth855window.outerWidth1298window.innerWidth855//调整浏览器窗口

navigator

navigator,封装了浏览器的信息

navigator.appCodeName"Mozilla"navigator.appVersion"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.106 Safari/537.36"navigator.userAgent"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.106 Safari/537.36"

大多数时候，我们不会使用navigator对象，因为会被人为修改

不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.width1280screen.hightundefinedscreen.height720

location()

location代表当前页面的URL信息

host: "www.baidu.com"hostname: "www.baidu.com"href: "https://www.baidu.com/?tn=02003390_2_hao_pg"origin: "https://www.baidu.com"pathname: "/"port: ""protocol: "https:"host:代表主机href：代表当前指定位置protocol：协议reload：重新加载。刷新网页//设置新的地址location.assign('')

document

document 代表当前页面。HTML DOM文档树

document.title"百度一下，你就知道"document.title='刘硕'"刘硕"

获取具体的文档树节点:能动态的修改网页

<body><dl id="app">  <dt>java</dt>  <dd>javase</dd>  <dd>javaEE</dd> </dl><script !src="">  let dl = document.getElementById('app')</script></body>

获取cookie

document.cookie""

劫持cookie原理

获取你的cookie上传到他的服务器上

服务器·端可以设置cookie；httponly

history（不建议使用）

history.back()//后退history.forward//前进

以上是关于JavaScript的主要内容，如果未能解决你的问题，请参考以下文章

30秒就能看懂的JavaScript 代码片段

常用Javascript代码片段集锦

48个值得掌握的JavaScript代码片段（上）

如何将此 JavaScript 代码片段翻译成 Parenscript？

javascript 代码片段

javascript JS-常用代码片段