JavaScript

Posted 狂狼大白鲨

tags:

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

javascript

0、组件

  1. Ant Design
  2. ice
  3. 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、字符串

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

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

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

  3. 多行字符串编写

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

  4. 模板字符串

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

  5. 字符串长度

    str.length

  6. 字符串的可变性，不可变

  7. 大小写转化

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

  8. 获取指定字符串下标

    str.indexOf("t")

  9. 切片

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

3.2、数组

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

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

  1. 长度

    arr.length

    注意：假如给arr.length赋值，数组大小就不会发生变化，如果赋值过小则元素丢失

  2. indexof,通过元素获得下标索引

    arr.indexof(2)

    字符串的“1”和数字的1是不一样的

  3. slice（）截取Array的一部分，返回一个新的数组，类似于string中的substring

  4. push 、pop 尾部

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

  5. unshift（）、shift（）头部

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

  1. 排序 sort（）

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

  2. 元素反转

    str.reverse()

  3. concat([1,2,3])连接数组

    注意：concat并没有修改数组，只是返回了一个新的数组

  4. 连接符join

    ["c","b","a"]str.join("-")"c-b-a"

  5. 多维数组

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

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

3.3、对象

若干键值对

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

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

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

  1. 对象赋值

    person.name = "qinji""qinjiang"

  2. 使用一个不存在的对象属性，是不会报错的！

    person.hahahundefined

  3. 动态删减属性，通过delete·删除对象属性

    delete person.nametrue

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

    person.haha = "haha""haha"personage: 3, sex: "boy", haha: "haha"

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

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

  6. 判断一个属性是否是这个对象自身拥有的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

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

  1. 遍历map

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

  2. 遍历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

  1. 如果两个函数使用相同的变量名，只要在函数内部就不冲突

  2. 内部类可以访问外部类，外部类不能访问内部类

  3. 假设在JavaScript中，函数查找变量自身函数开始~，由内向外查找。假设外不存在这个同名的函数变量，则内部函数会屏蔽外部函数。

  4. 说明：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')

现在的

  1. 定义一个类，属性，方法
//定义一个学生类class Student    constructor(name)         this.name = name;        hello()        alert('hello')    let xiaoming = new Student("xiaoming")let xiaohong = new Student("xiaohong")xiaoming.hello（）

  1. 继承

    <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//前进

8、操作DOM对象（重点）

DOM：文本对象模型