JavaScript（上）

入门

引入js

<script src="js/js.js"></script>		不能省略</script>

基本语法

1. 定义变量

   // var 变量名 = 变量值;   变量名命名规范与java一样
   var num = 1;
   
   //局部变量使用let定义
   let num = 1;
   
   //常量使用const定义
   const PI = 3.14;
   

   //var变量在函数内都可以使用，所以为了固定某些变量都会使用let，例如：
   function f() {
       for (var i = 0; i < 10; i++) {			//for (let i = 0; i < 10; i++) 
           console.log(i);
       }
       //用var声明的变量即使在for循环外面也可以使用，所以通常使用let
       console.log(i+1);		//11
   }
   f();
   

2. 弹窗

   // alert(弹窗内容)
   alert('hello');
   

3. 条件控制和注释与java类似

4. JavaScript严格区分大小写

判断参数类型是否为期望类型

function f(x) {
    if(typeof x!="number"){
        throw "Not a number！";		//否则抛出异常
    }
}

for循环特殊用法

var arr=[1,2,3,4];
for(let index in arr){			//在这里index是索引，数组下标
    console.log(arr[index]);
}
for(let index of arr){			//在这里index是元素
    console.log(index);
}

浏览器控制台打印变量

console.log(变量)				//打印变量

检测代码是否出错

<script>
    'use strict';		//必须放在javascript第一行
</script>

数据类型

数据类型基本与java类似，不相同的有以下几点：

Number

js不区分小数和整数，尽量避免使用浮点数运算，存在精度损失

比较运算符

存在===，绝对等于，一般都使用这个比较

数组

//数组中的数据类型可以是不一样的
var arr=[1,'hello',null,true]	//下标越界会显示undefined，未定义的

//可以给数组增加元素，会改变数组长度
arr[7]=10;
console.log(arr);		//[1, "hello", null, true, empty × 3, 10]
console.log(arr[6]);	//undefined

截取数组

//类似String的substring
arr.slice(1,3);			//['hello',null]

插入弹出

arr.push("a","b");		//在数组末尾添加元素a,b
arr.pop();				//弹出数组最后一个元素,弹出后数组不再包含这个元素
unshift(),shift();		//作用与push和pop相同，但在数组头部操作

正序排序

arr.sort();			//1，2，3|A，B，C

元素反转

arr.reverse();

拼接

arr.concat([1,2,3]);	//在arr末尾拼接后返回一个新数组，不会改变arr

打印数组

arr.join(-);		//打印数组元素，以-拼接

字符串

除了用单引号和双引号定义还可以使用（``），在Tab键和Esc键之间

var a = 'world';
var b = `hello ${a}`;
console.log(b);		//hello world

对象

定义

var 对象名 = {
    属性名：属性值，
    属性名：属性值			//最后一个键值对不需要加逗号
}
//键默认是字符串，值可以是任何类型
var person = {
    name: "Tom",
    age: 18,
    hobby: ["swim", "run"]
}

动态增删属性

person.email = "fssfa@qq.com";
delete person.name;

判断属性是否在对象中

'键' in 对象
//对象的父类方法和属性也在该对象中
person.hasOwnProperty('tostring')；		//判断是否是自身的属性,此处为flase

Map

键值对集合

创建

var map = new Map([[键，值],[键，值],[键，值]])
var map = new Map([["a",100],["b",90],["c",80]]);

通过键获得值

map.get("a");		//100

增加或修改键值对

map.set("d",70);		//set也可以改变已有键的值

删除键值对

map.delete("a");

Set

无序不重复集合

创建

var set = new Set([3,1,2])

增加元素

set.add(2);		//增加集合内不存在的元素

删除元素

set.delete(2);

是否包含某元素

set.has(2);

函数

函数定义和调用

定义方式一：
function 函数名(形参) {
    函数代码；
}
定义方式二：
var 函数名 = function(形参) {
    函数代码；
}

函数名();
/*
 *函数没有return执行完后会返回undefined
 *定义一个形参但传了多个参数只会选择第一个参数，定义n个选择前n个
 *不传参数会返回最终返回的return或者undefined,除非手动抛出异常
*/

变量的作用域

在javascripe中，var定义的变量是有作用域的。

在函数中声明则不能在函数外调用（除非闭包）

function f() {
    var x = 1;
}
x=x+1;      //Uncaught ReferenceError: x is not defined

在不同函数内部声明相同变量，两个同名变量不冲突

function f() {
    var x = 1;
}
function f1() {
    var x = 1;
}

函数内部包含函数时，内函数可以调用外函数声明的变量，外函数不能调用内函数声明的变量

function f() {
    var x = 1;
    function f1() {
        var y = 1;
    }
    return x+y;		//Uncaught ReferenceError: y is not defined
}

函数内部包含函数时,内函数与外函数声明同名变量不会冲突。

function f() {
    var x = 1;
    function f1() {
        var x = 2;
        console.log('dsv'+x);
    }
    f1();
    console.log('sava'+x);
}
f();
但是外函数无法使用内函数的变量，如果去掉var x=1,console.log('sava'+x);将报错

在变量声明前使用，变量等于undefined

function f() {
    console.log(x);		//undefined
    var x=2;
}
f();
/*
 *所以声明变量都是放在头部；
 *可以这样声明变量：var a,b,c;
 *或者var a=1
 		  b=2;

在最外层的变量是全局变量

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

由于所有全局变量都绑定到window，不同js文件声明相同变量时会冲突，所以默认规范一个js文件定义一个唯一全局变量，其他全局变量绑定到这个变量上。

var A = {};
A.b = "hello";
A.c = function () {
    var d = A.b;
    console.log(d)
}
A.c();

方法

var person = {
    name:'a',
    age:18,
    email:function () {
        //可以利用this.属性调用自身属性
        return this.name+this.age+'@dva.com';
    }
}

apply

function e () {
    return this.name+this.age+'@dva.com';
}
var person = {
    name:'a',
    age:18,
    email:e
}
person.email();		//"a18@dva.com"
e();				//"undefined@dva.com"
//this默认指向调用的对象，但是apply可以解决这个问题
e.apply(person,[]);		//"a18@dva.com"

apply(方法指定的对象,参数)

内部对象

Date

var now = new Date();   //标准时间
now.getFullYear();      //年
now.getMonth();         //月
now.getDate();          //日
now.getDay();           //星期
now.getHours();         //小时
now.getMinutes();       //分
now.getSeconds();       //秒
now.getTime();          //时间戳
now.toLocaleString();   //本地时间

JSON

轻量级数据交换格式

• 对象使用{}
• 数组使用[]
• 键值对使用 key:value

var user = {
    name: "tom",
    age: 8
};
//js对象转化为JSON字符串
let s = JSON.stringify(user);   	//{"name":"tom","age":8}
//转化为js对象
var u = '{"name":"tom","age":8}';
let parse = JSON.parse(u);

面向对象编程

旧版继承

对象.__proto__ = 希望继承的父类;

var person = {
    name: "tom",
    age: 8,
    run:function () {
        console.log(this.name+"run");
    }
}
var xiaoming = {
    name: "xiaoming",
}
xiaoming.run();		//Uncaught TypeError: xiaoming.run is not a function
xiaoming.__proto__ = person;
xiaoming.run();		//xiaomingrun

新版继承（ES6新品）

class person {
    constructor(name){
        this.name = name;
    }

    hello(){
        alert("hello");
    }
}
//继承
class student extends person {
    constructor(name,age){
        super(name);
        this.age = age;
    }
    run(){
        alert("run");
    }
}
//创建对象
var xiaoming = new student("xiaoming",13);
xiaoming.run();			//alert("run");
xiaoming.hello();		//alert("hello");