狂神Javascript学习笔记

JavaScript

概述

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

一个合格的后端人员,必须要精通JavaScript

入门

引入JavaScript

  1. 内部标签

    <script>
            alert("Hello World!");
    </script>
    
  2. 外部引入

    <script src="js/keleJs.js"></script>
    

基本语法入门

定义:

var score= 1;

条件控制:

if(){
     
    
}else{
     
   
}

狂神Javascript学习笔记_第1张图片

数据类型

数值,文本,图形,音频,视频

变量

var来定义js的变量

number

js不区分小数和整数

123//整数123
123.1//浮点数123.1
1.2332e4//科学计数法
-99//负数
NaN// not a number
Infinity//表示无限大

字符串

'abc'  "abc"

比较运算符!!!

=      赋值
==     等于(类型不一样,值一样,也会判断为true===    绝对等于(类型一样,值一样,才会判断为true

须知

  • NaN===NaN,NaN与所有的数值都不相等,包括自己
  • 只能通过isNaN(NaN),来判断这个数是不是NaN

浮点数问题

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

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

console.log(Math.abs(1/3-(1-2/3))<0.00000001) //true

null和undefined

null:空

undefined:未定义

数组

java的数组必须是相同类型的对象,js中不需要这样

var arr = [1, 2, 3, 4, 5, 'hello', null, true];

取数组下标,如果越界了,就会undefined

对象

对象是大括号{ },数组是中括号[ ]

每个对象之间使用逗号隔开,最后一个不需要添加

var Person = {
            name :"kele",
            age:3,
            tags:['js', 'web','java']
}

取对象的值:

Person.name
kele

严格检查模式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <script type="text/javascript">
        'use strict';
         let i = 1;
        //es6 let
    script>

head>
<body>

body>
html>

数据类型

字符串

  1. 正常字符串我们使用单引号或者双引号包裹
  2. 注意转义字符 \
\'      字符串
\n      换行
\t      tab
\u4e2d  中
  1. 多行字符串编写
//波浪键包裹可以写多行字符串
// ``
var msg = `
		hello
		world
		hihaoa 
		nihai`
  1. 模板字符串
let name = "kele";
let age = 18;
let m1 = `nihao a,  ${name}`
  1. 字符串长度
console.log(str.length)
  1. 字符串的可变性:不可变
  2. 大小写转换
//注意这是方法,不是属性
student.toUppercase()
student.toLowercase()
  1. student.indexOf(‘t’)
  2. subString()
student.subString(1,3)//1-2
//含头不含尾  [1,3)

数组

Array可以包含任意数据类型

var arr = [1,2,3,4,5]//通过下标取值和赋值
  1. 长度
arr.length
//注意:假如给arr.length赋值,数组长度就发生变化
  1. indexOf():通过元素获得下标索引
arr.indexOf(2)
1

字符串的”1“和数字1是不同的

  1. slice():截取Array的一部分,返回一个新的数组,类似于subString
  2. push,pop
push();压入到尾部
pop():弹出尾部的一个元素
  1. unshift(),shift()
unshift();压入到头部
shift():弹出头部的一个元素
  1. sort():排序
(3) ["b", "c", "a"]
arr.sort();
(3) ["a", "b", "c"]
  1. 元素反转 reverse()
(3) ["a", "b", "c"]
arr.reverse()
(3) ["c", "b", "a"]
  1. concat();
arr
(3) ["c", "b", "a"]
arr.concat('1', '2','3')
(6) ["c", "b", "a", "1", "2", "3"]
arr
(3) ["c", "b", "a"]
//注意:concat()并没有修改数组,只是会返回一个新的数组
  1. 连接符 join();
(3) ["c", "b", "a"]
arr.join('-')
"c-b-a"
//打印拼接数组,使用特定的字符串连接
  1. 多维数组
arr = [[1,2], [3,4], ["kele", "20"]]
arr[2][1]
"20"

数组:存储数据(知道如何存,如何取,剩下的方法都可以自己实现)

对象

若干个键值对

var 对象名 = {
     
    属性名:属性值,
    属性名:属性值,
    属性名:属性值
}

//定义一个person对象,有三个属性
		var Person = {
     
            name :"kele",
            age : 3,
            score : "good"
        }
//js中的对象,{...}表示一个对象,键值对描述属性xxxx:xxxx,
//多个属性之间用逗号隔开,最后一个不加逗号

JS中所有的键都是字符串,值是任意对象

  1. 对象赋值
Person.name
"kele"
Person.name = "kele2"
"kele2"
  1. 使用一个不存在的对象属性,不会报错!undefined
Person.haha
undefined
  1. 动态删减属性
delete Person.name
true
Person
{
     age: 3, score: "good"}
  1. 动态添加属性,直接给新的属性添加值即可
Person.haha = "haha"
"haha"
Person
{
     age: 3, score: "good", haha: "haha"}
  1. 判断属性值是否在对象中 xxx in xxx
Person
{
     age: 3, score: "good", haha: "haha"}
'age' in Person
true
'toString' in Person
true
  1. 判断一个属性是否是自身拥有的 hasOwnProperty()
Person.hasOwnProperty('age')
true
Person.hasOwnProperty('toString')
false

流程控制

if()else

while()

for()

forEach()循环

var arr = [1,232,14,43,34,34,314,];

        arr.forEach(function (value){
     
            console.log(value)
        })

for…in

for(var index in object)
for (var number in arr) {
     
            if (arr.hasOwnProperty(number)){
     
                console.log("存在");
                console.log(arr[number])
            }
        }

Map和Set

ES6的新特性

Map

var map = new Map([['tom', 100], ['jerry', 90], ['haha', 80]]);
var name = map.get(`tom`)//通过Key获得value
map.set('admin', 12356)//新增,修改
map.delete('tom');//删除
console.log(name);

map
Map(4) {
     "tom" => 100, "jerry" => 90, "haha" => 80, "admin" => 12356}

Set

无序不重复的集合

var set = new Set([3,1,1,1,1,1]);
set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含有些元素

iterator

ES6新特性

//通过for of 实现输出数组内的值  for in实现输出数组下标
var arr = [1,2,3,4,5,66,4223];
for (var x of arr) {
     
    console.log(x)
}

遍历map

var map = new Map([['tom', 100], ['jerry', 90], ['kele', 80]])
for (let x of map) {
     
    console.log(x)
}

遍历set

var set = new Set([5,6,7])
for (let x of set) {
     
    console.log(x)
}

函数

定义函数

定义方式一

绝对值函数

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

一旦执行到return,代表函数结束,返回结果!

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

定义方式二

var abs = function(x){
     
    if(x>=0){
     
        retun x;
    }else{
     
        return -x;
    }
}
//这是一个匿名函数,但是可以把结果赋值给abs
//通过abs就可以调用函数!

方式一和方式二等价

调用函数

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

参数问题:JS可以传任意个参数,也可以不传参数。

假设不存在参数,如何规避

function abs(x){
     
    if (typeof x != 'number'){
     
        throw 'Not a Number'
    }
    if(x>=0){
     
        return x;
    }else{
     
        return -x;
    }
}

参数存在多个问题

arguments

arguments是JS免费赠送的一个关键字

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

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

问题:arguments包含所有的参数,我们有时候想使用多余的参数来进行附加操作,需要排除已有的参数

rest

以前:

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

ES6引入的新特性,获取除了已定参数外的其他参数

现在:

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

变量的作用域

在JS中,var定义的变量实际是有作用域的

假设在函数体内声明,则在函数体外不可调用

function kele() {
     
    var x = 1;
    x = x + 1;
}
x = x + 2;//x is not defined

如果两个函数使用了相同的变量名,只要在函数内,就不冲突

function kele() {
     
    var x = 1;
    x = x + 1;
}

function kele2() {
     
    var x = 1;
    x = x + 1;
}

内部函数可以调用外部函数的成员,反之则不行

function kele() {
     
    var x = 1;
    function kele2() {
     
        var y = x + 1;
    }
    var z = y + 1;// z is not defined
}

假设,内部函数变量和外部函数变量重名!

function kele() {
     
    var x = 1;
    function kele2() {
     
        var x = 'A';
        console.log('inner' + x);
    }
    console.log('outer' + x);
    kele2()
}
kele();

​ 假设在JavaScript中,函数查找变量从自身函数开始,由内向外查找,假设外部存在同名的函数变量,则内部函数会屏蔽外部函数的变量。

提升函数的作用域

function kele() {
     
    var x = 'x' + y;
    console.log(x);
    var y = 'y';
}
kele();
//xundefined

说明JS执行引擎,自动提升了y的声明,但是不会提升y的赋值。

function kele() {
     
    var y;
    
    var x = 'x' + y;
    console.log(x);
    y = 'y';
}

​ 这个是在JS建立之初就存在的特性。养成规范:所有的变量定义都放在头部,不要乱放,便于代码维护。

全局函数

var x = 1;
function kele() {
     
    console.log(x);
}
kele();
console.log(x);
//1
//1

全局对象***window***

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

alert()函数本身也是一个***window***的变量

规范

由于我们所有的全局变量都会绑定到我们的window上,如果不同的JS文件,使用了相同的变量,就会发生冲突—>如何减少冲突

//唯一全局变量
var KeleApp = {
     };

//定义全局变量
KeleApp.name = 'kele';
KeleApp.add = function (a,b) {
     
    return a + b;
}

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

JQuery

局部作用域 let

function aaa() {
     
    for (var i = 0; i < 100; i++) {
     
        console.log(i);
    }
    console.log(i+1);//101 i 出了这个作用域还可以使用
}
aaa();

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

function aaa() {
     
    for (let i = 0; i < 100; i++) {
     
        console.log(i);
    }
    console.log(i+1);//Uncaught ReferenceError: i is not defined
}
aaa();

建议都是用let去定义局部作用域的变量

常量 const

在ES6之前,定义常量:只要是用全部大写字母命名的都是常量,建议不要修改

var PI = '3.14';
console.log(PI);//3.14
PI = '213';
console.log(PI);//213

在ES6引入了常量关键字 const

const PI = '3.14';//只读变量
console.log(PI);
PI = '213';
console.log(PI);
//Uncaught TypeError: Assignment to constant variable.

方法

定义方法

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

var kele = {
     
    name : 'kele',
    birth: 2019,
    age : function () {
     
        //今年-出生的年份
        var now= new Date().getFullYear();
        return now - this.birth;
    }
}
//属性  kele.name;
//方法  kele.age();
function getAge() {
     
    var now= new Date().getFullYear();
    return now - this.birth;
}
var kele = {
     
    name : 'kele',
    birth: 2019,
    age : getAge
}

this是无法指向的,默认指向调用他的那个对象

apply

在JS中可以控制this的指向

function getAge() {
     
    var now= new Date().getFullYear();
    return now - this.birth;
}
var kele = {
     
    name : 'kele',
    birth: 2019,
    age : getAge
};
getAge.apply(kele,[]);//this指向了kele对象,参数为空

特殊对象

标准对象

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

Date

var now = new Date();//Tue Nov 10 2020 17:49:16 GMT+0800 (中国标准时间)
now.getFullYear()//年份
now.getMonth()//月份0-11
now.getDate()//日期
now.getDay()//星期几
now.getHours()//时
now.getMinutes()//分
now.getSeconds()//秒
now.getTime()//时间戳  1970年1月1号0:00到现在的毫秒数

console.log(new Date(1605002232224));//时间戳转时间

转换

now = new Date(1605002232224)
Tue Nov 10 2020 17:57:12 GMT+0800 (中国标准时间)
now.toLocaleString//注意:这是一个方法,不是属性
ƒ toLocaleString() {
      [native code] }
now.toLocaleString()
"2020/11/10 下午5:57:12"
now.toGMTString()
"Tue, 10 Nov 2020 09:57:12 GMT"

JSON

JSON是什么

  • JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
  • 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

在JS中,一切皆为对象,任何JS支持的类型都可以用JSON来表示

格式:

  • 对象都用 {}
  • 数组都用 []
  • 所有的键值对都是用 key:value

JSON和JS对象的转化

var user = {
     
    name : "kele",
    age : 3,
    sex : "男"
}

//把对象转化为字符串  {"name":"kele","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);
//把JSON字符串转化为对象
var obj = JSON.parse(jsonUser);

JSON和JS对象的区别

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

Ajax

  • 原生的JS写法,xhr异步请求
  • jQuery封装好的方法$("#name"),ajax("")
  • axios请求

你可能感兴趣的:(笔记,javascript,脚本语言,java,js)