JavaScript入门学习

JavaScript

一.什么是JavaScript与作用

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言

嵌入HTML中，与Css一样。
对浏览器事件作出响应
操作HTML元素及节点。
可以动态操作CSS样式。
在数据被提交到服务器之前验证数据。

二.两种引入方式

1.内部标签

demo.html

<script>
    alert("hello")
</script>

2.外部引入

demo.js

// 代码

demo.html

<script src="路径"></script>

三.浏览器控制台调试

四.数据类型

1.变量与严格检查格式

// 统一用 var 来声明变量。
// 在ES6新增加了let 和const来声明变量。

var fuck = "fuck";
var number = 1;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
前提：Idea，设置支持ES6语法

'use strict';严格检查模式，预防JavaScript随意性导致产生的一些问题

必须写在script标签内的第一行！

局部变量建议都使用let去定义
-->
<script>
    'use strict';
    let a = 1;
</script>
</body>
</html>

2.基本变量类型

//--- number
var a  = 1;
a = 123 //整数
a = 123.1 //浮点数
a = -99 //负数
a = NaN //not a number

//--- 字符串
var b = "abc";
b = 'cba';


//--- 布尔值
var c = true;
c = false;

3.运算符

// 1.逻辑运算符

&&  //两个都为真，结果为真
||  //一个为真，结果为真
!   //真即假，假即真


// 2.比较运算符
=    //赋值预算法
==   //等于（类型不一致，值一样，也会判断为true  即判断1=='1'）
===  //绝对等于（类型一样，值一样，结果为true）

（1）NaN，与所有的数值都不相等，包括自己

NaN === NaN; //false

只能通过isNaN()来判断这个数是不是NaN。

（2）浮点数问题

(1/3)===(1-2/3) //结果为false

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

Math.abs(1/3-(1-2/3))<0.00000001 //结果为true

4.null和undifined

null 空
undefined 未定义

5.字符串

（1）正常字符串我们使用单引号或者双引号包裹。

let a = "fuck";
let b = 'fuck';

(2）注意转义字符

let a = '\u4e2d ' //\u#### Unicode 字符
let a = '\x41' //Ascll字符

（3）多行字符串编写 ``

var msg = `
        hello
        你好,张三。
        `

（4）模板字符串，拼接字符串

let name = '张三';
let msg = `你好呀，${name}`; //'你好呀，张三'

（5）字符串长度：

msg.length; //6

（6）大小写转换

let a = "student";
a.toUpperCase(); // 'STUDENT'
a.toLowerCase(); // 'student'

（7）字符串查找

a.indexOf(‘t’); //1

（8）截取

a.substring(2) //udent, 下标几到最后
a.substring(2,3) //u, 下标几到下标几

6.数组

Java的数组必须是相同类型的对象。JS中不需要这样！

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

// 保证代码的可读性，尽量使用[]
var arr = [1,2,3,'hello',null,true];//取数组下标：如果越界了，就会报undefined
arr[1]; //2
arr[9]; //undefined

（1）获取长度

arr.length; // 6
//假如给arr.length赋值，数组的大小就会发生变化，如果赋值过小，元素就会丢失
arr.length = 5; // a = [1, 2, 3, 4, 5]

（2）获得下标索引

arr.indexOf(2); // 1

（3）数组截取

arr.slice(2); //[3, 4, 5]  类似于String中的substring
arr.slice(2,4); //[3, 4]

（4）元素操作

//插入最后一位
arr.push("a"); //[1, 2, 3, 4, 5, 'a']

//插入最前一位
arr.unshift("b") //['b', 1, 2, 3, 4, 5, 'a']

//删除最后一位
arr.pop(); //['b', 1, 2, 3, 4, 5]

//删除最前一位
arr.shift(); //[1, 2, 3, 4, 5]

（5）排序

arr.sort(); //[1, 2, 3, 4, 5]

（6）反转

arr.reverse();// [5, 4, 3, 2, 1]

（7）合并

let arr2 = ['a','b','c']
arr.concat(arr2); //[1, 2, 3, 4, 5, 'a', 'b', 'c']
//返回一个新的数组，不改变原来的数组arr

（8）连接符

// join();//默认，去拼装数组。可以指定
arr.join("-");//'1-2-3-4-5'

7.对象

对象是大括号，数组是中括号，每一个属性之间使用逗号隔开，最后一个不需要加逗号

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

let obj = {
    name : "张三",
    tags : ['吃饭','睡觉','打豆豆']
}

js中的对象， {…..}表示一个对象，键值对描述属性xx : xx，多个属性之间使用逗号隔开，最后一个属性不加逗号！

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

（1）取值

obj.name;// 法外狂徒
obj.sex;// 取一个不存在的对象属性，不会报错！会显示:undefined

（2）赋值

obj.name = "法外狂徒";

（3）添加属性,直接给新的属性添加值即可

obj.sex = '男';

（4）删除属性

delete obj.sex;

（5）判断属性值是否在这个对象中 XX in XXX

"name" in obj; //true
'toString' in obj; //true,父类中有。

(6）判断属性值是否在这个对象的自身上

obj.hasOwnProperty("toString"); // false
obj.hasOwnProperty("name"); // true

五.流程控制

1.判断语句

// if 判断
let a = 1;
if (a > 1){
    console.log("判断一")
}else if (a > 5){
    console.log("判断二")
}else {
    console.log("判断三")
}

2.循环语句

// while循环
while(a < 10){
    a ++;
    console.log(a);
}

// for循环
for(let i = 0; i < 10; i++){
    console.log(i);
}

//forEach循环
let tags = ['吃饭','睡觉','打豆豆'];
tags.forEach((value,index)=>{
    console.log(value+','+index);
})

// for in 遍历下标
for (let tag in tags){
    console.log(tag[num]);
}

//通过for of遍历值
for (let tag of tags){
    console.log(tag);
}

六.Map 和 Set

1.Map

let map = new Map([['1',"小明"],['2',"小华"],['3',"张三"]]);
    map.get('3'); // 张三
    map.delete('1'); // 删除元素
    map.set('6',"kuangstudy"); // 存在就修改，不存在就添加


//遍历map
for (let x of map){
    console.log(x);
}

2.Set

无序不重复的集合

var set = new Set([3,2,1]);
set.add(5);//增加元素

set.delete(3);//删除元素

set.has(1);//判断是否包含元素

set.size;//长度

//遍历遍历set
for (var x of set){
    console.log(x);
}

七.函数

1.定义函数

定义方式一：

function abs(x){

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

}

一旦执行到return 代表函数结束，返回结果！

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

定义方式二：

var abs = function(x){

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

}

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

方式一和方式二等价！

2.调用与参数问题

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

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

（1）arguments：代表传递进来的所有参数，是一个数组


function abs(x){

    for(let i of arguments){
        console.log(i);
    }

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

3. rest：定义参数以外的所有参数，返回一个数组


function abs(a,b,...rest){

console.log(a);
console.log(b);
console.log(rest);

}

3.局部变量

访问不存在的变量名会报XXX is not defined

function abs(x) {
    var a = 1;
}
a = a + 2; //报错：a is not defined

function abs(x) {

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

内部函数可以访问外部函数的成员，反之则不行（与Java一样内部类可以访问外部类，外部类访问不了内部类）

var a = 1;
function abs(x) {
    var b = a + 2;
}
a = b + 2;//报错：b is not defined

假设，内部函数变量和外部函数的变量重名


function f(){
var a = 1;

function d(){
    var a ="A";
}
    console.log("内部"+a); // A 从内向外查找
}
f();//内部A
console.log("外部"+a);// 1

使用闭包可以解决外部访问函数内部变量的方法。

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

function ab(){
    for(vat i = 0;i<100;i++){
        console.log(i);
    }
    console.log(i);// 100 出了作用域还可以使用
}

function ab(){
    for(let i = 0;i<100;i++){
        console.log(i);
    }
    console.log(i);//报错
}

4.全局变量

var x = 1;

function abc() {

console.log(x);// 1

}

abc()

console.log(x);// 1

全局对象

var a = "xxx";

window.alert(a); // xxx 
alert(window.a); // xxx

结论：默认所有全局变量都绑定到window对象下，alert本身属于window对象下的变量；

var a = 1;

window.alert(a); // 1

var fuck = window.alert;

fuck(a) // 1

window.alert = function() {

};

window.alert(a); // 失效

window.alert = fuck;

window.alert(a);// 1

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有函数作用范围内找到，就会向外查找，如果全集作用域都没有找到，就报错；

规范：由于我们所有的全局变量都会绑定到我们的window 上，如果不同的js文件，使用了相同的全局变量，冲突~> 如何减少冲突

// 唯一全局变量
var xxlApp={};
 
// 定义全局变量
xxlApp.name = "王小姐";

xxlApp.age = function (a,b){
    return a + b;
}

将自己的代码放入自己定义的唯一空间名字中，降低全局命名冲突问题

5.常量

var PI = 3.14
console.log(PI);

PI = 123; //可以修改
console.log(PI);

在ES6引入了常量关键字 const

const PI = 3.14; //只读变量
PI = 123;//报错 Attempt to assign to const or readonly variable
console.log(PI);

6.方法定义与调用

var fuck = {
    name:"fuck",
    bitrh:2000,
// 方法定义
    age : function() {
        var now = new Date().getFullYear();
        return now-this.bitrh;
    }
    
}

function getAge() {
    var now = new Date().getFullYear();
    return now - this.bitrh;
}

var fuck = {
    name:"nn",
    bitrh:1111,
    age:getAge
    
}


 getAge() // Nan
 fuck.age() // yes

apply:

在js中可以控制this的指向

function getAge() {
    var now = new Date().getFullYear();
    return now - this.bitrh;
}

var fuck = {
    name:"nn",
    bitrh:1111,
    age:getAge
    
}

getAge.apply(fuck,[]);// this 指向fuck，参数为空

 getAge() // Nan
 fuck.age() // yes