[开发工具]重学前端之JavaScript（1）

JavaScript

一、 引入方式
1.内部标签使用，中直接写

	<script>
        alert('hello world')
    </script>

2.外部引入
<script src="demo01.js"></script>

网页控制台可以直接拿来调试
例如
控制网页的视频倍速：
document.querySelector('video').playbackRate = 2.2;
在控制台输出变量
console.log(变量名)

二、基础定义与操作
'use strict'严格模式
消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为

// 定义变脸   变量类型   变量名 = 变量值
var score = 66;
var name = "lihuan"

数据类型：
1. number
js不区分整数和浮点数

666  //整数
666.66   //浮点数
1.23e3   //科学计数法
-22  //负数
NaN   // not a number
Infinity  //表示无限大

console.log((1/3) === (1-2/3))为false，浮点数存在精度丢失问题
应使用Math.abs((1/3) - (1-2/3)<0.00000001)

2. string 字符串
可以使用单引号或双引号

var name="Lilie";
var name='Hanmeimei';

运用：

'use strict'
// 多行字符编写
var msg = `hello
   world
   你好
   吖`

// 模板字符串
let name = "lihuan";
let age = 20
let add = `你好，${name}，我今年 ${age+1}`

var vscode = "vsCode";
console.log(`字符串长度= ${vscode.length}`);
console.log(vscode[0]);    //第一个字母
console.log(vscode.toLowerCase());    //小写
console.log(vscode.toUpperCase());    //大写
console.log(vscode.indexOf('o'));    //3
console.log(vscode.substring(1));    //sCode
console.log(vscode.substring(1,3));  //[1,3)   sC

3. 布尔值

true
false

4.逻辑运算

&&   与
||   或
!    非

5.比较运算

=     赋值
==    等于（类型不一样，值一样，判断为true）
===   绝对等于（类型一样，值一样，判断为true）

尽可能不使用==
NaN-==NaN，这个与所有的数值都不相等，包括自己只能通过isNaN[NaN)来判断这个数是否是NaN

6. null 和 undefined

• null 空
• undefined 未定义

7.数组

var name=["zs","ls",null,1,true];
var s=new Array();
s[0]="aa";
var ss=new Array("zs","ls",null,1,true);

越界为undefined

运用：

var arr = [1,2,3,4,5,6];
console.log(arr);
console.log(arr.length);
arr.length = 10;   //给 arr.length 赋值，数组大小变化，为undefined
console.log(arr)

var a = [1,2,3,"1","22".length]
console.log(a);
console.log(a.indexOf(1));  //数字1和字符串"1"不一样
console.log(a.slice(1,3));  //类似字符串的substring()，截取Array的一部分
// 尾部
a.push('a','b');
console.log(`新的数组为${a}`);
a.pop();
console.log(`新的数组为`+a);
// 首部
a.unshift('c');
console.log(`新的数组为${a}`);
a.shift();
console.log("新的数组为"+a);
a.sort();  //排序
a.concat([7,8,9]);   //并没有改变数组，只会返回一个新的数组
arr.join('-');    //连接，打印品接数组

qaq = [[1,2],[3,4],["a","b"]];  //二维数组

8.对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔

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

运用：

var person={
    firstname : "hua",
    lastname  : "li",
    id        :  666,
    age       :  21
    };

//对象可以进行赋值，查询不存在的对象显示undefined
// 动态删除
delete person.age;
console.log(person);
// 添加直接给新的属性添加值即可
person.age = 20;
console.log(person);

console.log('age' in person);   // 判断属性值是否在对象中
console.log(person.hasOwnProperty('age'));   // 判断属性是否是这个对象自身拥有而非继承
console.log(person.hasOwnProperty('toString'));

name=person.lastname;

9.Map和Set

var map = new Map([["carl",90],["tom",88],["jack",89]]);
var name = map.get("tom");    //通过key获得value的值
map.set('root',123);   // 新增或者修改
map.delete('carl');  // 删除

set：无需不重复集合

var set = new Set([3,1,1,1,1]); //[3,1]
set.add(2);  // [3,1,2]
set.delete(1);   //  [3,2]
set.has(3);  // 是否包含3

迭代：

// 遍历数组
var arr = [1,2,3,4,5];
for(var x of arr){
    console.log(x);
}

// 遍历map
var map = new Map([["carl",90],["tom",88],["jack",89]]);
for(let y of map){
    console.log(y);
}

// 遍历set
var set = new Set([5,6,7]);
for(let z of set){
    console.log(y);
}

三、函数
定义：

function myFunction(var1,var2)
{
代码
}

function myFunction()
{
    var x=5;
    return x;
}

获取参数：

function allnum(a,b,...rest){
    console.log("a->"+a);
    console.log("b->"+b);
    console.log("其他剩下的参数->"+rest);
}

//或者通过 arguments 获取
var qaq = function(x){
    console.log("x->"+x)
    for (var i = 0; i<arguments.length; i++){
        console.log(arguments[i]);
    }
    return x;
}

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

局部变量：

• 假设在函数体中声明，则在函数体外不可以使用。(可用闭包实现）
• 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
• 内部函数可以访问外部函数的成员，反之则不行
• 假设，内部函数变量和外部函数的变量 重名 ! 函数查找变量从自身函数开始，由“内"向“外"查找,. 假设外部存在这个同名,的函数变量，则内部函数会屏蔽外部函数的变量。
• js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值

全局变量：

• 变量在函数外定义，即为全局变量。
• 默以所有的全局变量，都会自动绑定在window对象下

由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件,使用了相同的全局变
量，就会发生冲突?
开发规范：

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

// 定义全局变量
daydayStudy.name = "dayday";
daydayStudy.add = function(a,b){
    return a+b;
}

局部作用域中使用let
常量const

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

var daydayStudy = {
    // 属性
    name:"carl",
    birth:2000,
    // 方法
    age: function(){
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}

可用 apply 控制 this 的指向:

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

var daydayStudy = {
    // 属性
    name:"carl",
    birth:2000,
    age:getAge
}

getAge.apply(daydayStudy,[]); // this指向了daydayStudy

json

var user = {
    name : "dayday",
    age : 21,
    sex : "男" 
}

// 对象转化为JSON字符串
var jsonUser = JSON.stringify(user);

// json 字符串转化为对象 参数为JSON字符串
var obj = JSON.parse('{"name" : "dayday","age" : 21,"sex" : "男" }')

五、继承
1.原型继承
__proto__

var user = {
    name : "dayday",
    age : 21,
    sex : "男" 
};

var zhangsan = {
    name : "zhangsan",
    run : function(){
        console.log(this.name+"run---------");
    }
}

zhangsan.__proto__ = user;

2.class继承

// 定义一个类  属性+方法
class Student{
    constructor(name){     //constructor 属性返回对象的构造函数
        this.name = name;
    }
    hello(){
        alert("hello");
    }
}

class good extends Student{
    constructor(name,grade){
        super(name);  //继承
        this.grade = grade;
    }
    sayhello(){
        alert("say");
    }
}

var zhangsan = new Student("zhangsan");
var lisi = new good("lisi");