JavaScript基础

目录

JavaScript

Javascript简称JS，是脚本语言，JS语言开发的文件以.js为后缀，通过在HTML文件中引入该js文件来控制html代码的交互功能以及前台数据处理的业务逻辑（js语言代码也可以直接写在html文件中），采用的ECMAScript语法，属于编程语言。

ECMAScript目前普遍使用的存在ES5与ES6两个版本

JS的引入方式

  1. 行间式：JS代码书写在标签的事件全局属性中
  2. 内联式：写在scrip标签中，一般放在body标签的最下面，因为代码自上而下运行，放在body标签的最下方，会保证页面所有标签都加载完毕，html再去加载js文件，那么js脚步文件就会更好的控制页面标签的人机交互了
  3. 外联式：写在外部js文件中，在html页面中用script标签引入js文件，建议放在body最下方
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>引入</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        /*#box:active {*/
            /*background-color: red;*/
        /*}*/
    </style>

</head>
<body>
    <!-- 行间式 -->
    <!--<div id="box" onclick="this.style.backgroundColor = 'red'"></div>-->
    <div id="box"></div>

</body>
<!-- 内联式 -->
<!--<script>-->
    <!--box.style.backgroundColor = 'pink'-->
<!--</script>-->
<script src="js/外联.js">
    // 链接了外部js的script标签，就相当于单标签，内部代码块会自动屏蔽
    box.style.borderRadius = '50%'
</script>
</html>

# js/外联.js

box.style.background = 'blue'

JS的基础语法

变量

JS变量不同于python变量，但是变量结构相差不大，也有变量名，赋值符号，变量值，但是需要特定的关键字来定义，现在JS有两种语法共同存在，ES5/ES6这两个版本，但浏览器会自动识别版本，无需担心语法问题

四种定义变量的关键字

  1. 不写：全局变量
  2. var：局部变量
  3. let：块级变量
  4. const：常量
n1 = 10;  // 全局变量
// console.log(n1);  //打印
var n2 = 20;  // 局部变量
// alert(n2);
let n3 = 30;  // 块级变量
// document.write(n3);
const N4 = 40;  // 常量
// console.log(N4);
// N4 = 50;  // 报错，常量值不能修改

变量名命名规范

  1. 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
  2. 区分大小写
  3. 不能出现关键字及保留字
abstract arguments boolean break byte
case catch char class* const
continue debugger default delete do
double else enum* eval export*
extends* false final finally float
for function goto if implements
import* in instanceof int interface
let long native new null
package private protected public return
short static super* switch synchronized
this throw throws transient true
try typeof var void volatile
while with yield

四种变量的分析

function fn() {
    n1 = 10; // 只有全局变量外界才能访问
    var n2 = 20;
    let n3 = 30;
    const n4 = 40;
}
fn();
console.log(n1);

if (true) {  // 块级作用域
    n1 = 10;
    var n2 = 20;
    let n3 = 30;  // let与const声明的变量有块级作用域
    const n4 = 40;  // 常量
}
console.log(n1);
console.log(n2);
{
    let aaa = 10
    }

基本数据类型

值类型

// 数字类型：number
var num = 10;
const PI = 3.14;
console.log(typeof(num), num);  // 结果：number  10

// 字符串类型：string
var s1 = "双引号可以表示字符串";
var s2 = '单引号可以表示字符串';
var s3 = `多行字符串：
再来一行`;
console.log(typeof(s1), s1);  // 结果：string  双引号可以表示字符串

// 布尔类型：boolean
var b1 = true;
var b2 = false;
console.log(typeof(b1), b1);  // 结果：string  双引号可以表示字符串

// 未定义类型：undefined
var u1;
var u2 = undefined;
console.log(typeof(u1), u1);  // 结果：undefined  undefined

引用类型

// 函数类型：function
function fn1() {}
var fn2 = function() {};
console.log(typeof(fn1), fn1);  // 结果：function  ƒ fn1() {}

// 对象类型：object
var obj1 = {}
console.log(typeof(obj1), obj1);  // 结果：function  {}

其它

// 空类型
var jerry = null;
console.log(typeof jerry, jerry);

// Array对象类型：
var arr1 = [1, 2, 3, 4, 5]
console.log(typeof(arr1), arr1);  // 结果：object  (5) [1, 2, 3, 4, 5]

// 时间
var date = new Date();
console.log(typeof date, date);

// 功能性
随机数: Math.random() - (0, 1)
console.log(Math.random());



// 需求：在正整数区间[m, n]随机一个数
// (0, 1) * 10 => (0, 10) 取值parseInt() => [0, 9] + 5 => [5, 14]
// parseInt(Math.random() * 11) + 5 => [5, 15]
// [m, n] => +的值就是m，*的值 n - m + 1

// ① parseInt(Math.random() * (n - m + 1)) + m => [m, n]
var r_num = parseInt(Math.random() * (14 - 7 + 1)) + 7;
console.log(r_num);

// ② (0, 1) * 超大的数 取整
// 一个正整数 % num => [0, num-1] + m => [m, num-1+m] => n = num+m-1 => num = n-m+1
// 一个正整数 % (n-m+1) + m => [m, n]
var random_num = parseInt( Math.random() * 10000000000 % (14 - 7 + 1) ) + 7;
console.log(random_num)

数据类型的使用

  • 字符串
// string => str
// 1）声明
// 单引号 | 双引号 | 反引号

// 2）字符串拼接
res = 'you are' + ' ' + 'good man!';
console.log(res);

// 3）字符串的切片
s = 'you are good man!';
n_s = s.slice(8, 12);
console.log(n_s);  // good

// 4）字符串替换
s = 'you are good man!';
n_s = s.replace('man', 'woman');
console.log(n_s);

// 5）字符串拆分
s = 'you are good man!';
res = s.split(' ');
console.log(res);

// 6）字符串迭代
s = 'abcdef';
for (num of s) {
    console.log(num)
}
  • 数组
// array => list
// 1）声明
arr = [1, 4, 2, 3, 5];
console.log(arr);
// 2）反转
arr.reverse();
console.log(arr);
// 3）组合
str = arr.join('@');
console.log(str);
// 4）切片
new_arr = arr.slice(1, 4);
console.log(new_arr);
// 5）排序
arr.sort();
console.log(arr);
// 6）增删改查
// 查:只有正向索引
console.log(arr[2]);
// 增
arr.push(888);  // 尾增
console.log(arr);
arr.unshift(666);  // 首增
console.log(arr);
// 删
res = arr.pop();  // 尾删
console.log(arr, res);
res = arr.shift();  // 首删
console.log(arr, res);

// 增删改 综合方法：splice
// 三个参数：开始操作的索引 操作的位数 操作的结果(可变长)
arr = [1, 2, 3, 4, 5];
// 数组长度：arr.length
arr.splice(arr.length, 0, 666, 888);
console.log(arr);
  • 字典（对象）
// object => dict
// 1）定义
height = 180;
dic = {
    'name': 'Owen',  // 本质是对象
    age: 18,  // 所有的key(属性名)都是字符串类型，所以可以省略引号
    height,  // 当value为变量，且变量名与key同名，可以省略value
};
console.log(dic);

// 2）访问
console.log(dic.name);
console.log(dic['age']);

// 3）增删改
// 增
dic.sex = '男';
console.log(dic);
// 删
delete dic.sex;
console.log(dic);
// 改
dic.name = 'Nick';
console.log(dic);

基本运算符

算数运算符

假设：n = 5

运算符 描述 例子 x结果 n结果
+ 加法 x=n+2 7 5
- 减法 x=n-2 3 5
* 乘法 x=n*2 10 5
/ 除法 x=n/2 2.5 5
% 取模(余数) x=n/2 1 5
++ 自增 x=++n 6 6
x=n++ 5 6
-- 自减 x=--n 4 4
x=n-- 5 4

赋值运算符

假设：x=5，y=5

运算符 例子 等同于 运算结果
= x=y 5
+= x+=y x=x+y 10
-= x-=y x=x-y 0
*= x*=y x=x*y 25
/= x/=y x=x/y 1
%= x%=y x=x%y 0

比较运算符

假设：x = 5

运算符 描述 比较 结果
== 等于 x=="5" true
=== 绝对等于 x==="5" false
!= 不等于 x!="5" fales
!== 不绝对等于 x!=="5" true
> 大于 x>5 false
< 小于 x<5 false
>= 大于等于 x>=5 true
<= 小于等于 x<=5 true

逻辑运算符

假设：n = 5

运算符 描述 例子 结果
&& 与 x=n>10&&++n x=false,n=5（短路）
|| 或 x=n<10||n-- x=true,n=5（短路）
! 非 x=!n x=false,x=5

三目运算符

语句：结果 = 条件表达式 ? 结果1 : 结果2;

假如条件表达式成立，则把结果1赋值给结果，否则就把结果2赋值给结果

案例

// 1）算术运算符
console.log(5 / 2);  // 2.5
console.log(parseInt(5 / 2));
console.log(parseFloat(5 / 2));

// parseInt | parseFloat 可以完成 string => number
res = parseInt('3.14.15abc');
console.log(res);  // 从头往后找整数部分

res = parseFloat('3.14.15abc');
console.log(res);  // 从头往后找小数部分(最多只识别一个小数点)

res = parseInt('a3.14.15abc');  // NaN
console.log(typeof res, res);

// 2) 弱语言类型的js
res = 10 + '5';
console.log(res);  // 字符串：105
res = 10 - '5';
console.log(res);  // 数字：5
// 数字 => 字符串
res = '' + 5;
console.log(typeof res, res);
// 字符串 => 数字
res = +'5';
console.log(typeof res, res);

// 3) 自增自减
num = 10;
num += 1;
console.log(num);
num++;
console.log(num);
num--;
console.log(num);
// 了解：符号 在前优先级高于一切运算符，在后优先级比赋值符还低
// ++在前先自增再运算；++在后先运算再自增
num = 10;
res = num++;
console.log(num, res);

num = 10;
res = ++num;
console.log(num, res);

// 4) 比较运算符的比较
console.log(5 == '5');  // true，只做值比较
console.log(5 === '5');  // false，做值与类型比较
console.log(5 != '5');  // false，只做值比较
console.log(5 !== '5');  // true，做值与类型比较

// 5）逻辑运算符
console.log(true && true);
console.log(false || false);
console.log(!true);
// 短路现象
// &&: 有假则假，前为假，后不用判断
num = 10;
console.log(false && ++num);  // num++ | ++num 都被短路不会被执行
console.log(num);

console.log(true || ++num);  // num++ | ++num 都被短路不会被执行
console.log(num);

// 6）三元运算符（三目运算符）
res = 5 == '5' ? '值相等':'值不等';
console.log(res);

流程控制

分支结构

  • if分支结构
/*
 * if (条件) {
 *     代码块1
 * }
 * else if (条件) {
 *     代码块2
 * }
 * else {
 *     代码块3
 * }
 */
var num = parseInt(Math.random() * 16);
console.log(num);
if (num > 10) {
    console.log("产生的数超过10")
} else if (5 <= num && num <= 10) {
    console.log("产生的数间于5~10")
} else {
    console.log("产生的数不超过5")
}
  • switch分支结构
/*
 * switch(值) {
 * case 条件1:
 * 		代码块1;
 *		break;   // 没有break会自动执行下一个case里面的代码块，直到遇到break或程序结束
 * case 条件2:
 *		代码块2;
 *		break;
 * ...
 * default:   // 没有走任何case，会进入default分支
 * 		代码块3;
 */

month = parseInt(Math.random() * (12 - 1 + 1)) + 1;
console.log(month);
switch (month) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
        console.log('%s月31天', month);
        break;  // 用来结束case，跳出switch分支结构，多个分支可以共享一个break
    case 2:
        console.log('2月28天');
        break;
    case 4:
    case 6:
    case 9:
    case 11:
        console.log('%s月30天', month);
        break;
    default:
        console.log('月份参数有误');
}

循环结构

  • for循环
for (循环变量①; 条件表达式②; 循环变量增量③) {
    代码块④;
}
// for循环执行的顺序：① ②④③ ... ②④③ ②，入口为①，出口为②，②④③就是循环过程

// 案例：
for (var i = 0; i < 5; i++) {
    console.log(i);
}

// 结果：
0
1
2
3
4

// for…in迭代器
var arr = [1, 2, 3, 4, 5]
for (num in arr) {
	console.log(num);
}

// 结果：
0
1
2
3
4
  • while循环
while (条件表达式) {
    代码块;
}
// 条件满足执行代码块，条件不满足跳出循环

// 案例：
var i = 0;
while (i < 5) {
    console.log(i);
    i++;
}

// 结果：
0
1
2
3
4
  • do...while 循环：先执行一次循环体，再判断条件
var num = 90;
do {
    console.log(num);
    num++;
} while (num <= 10);

//结果：
90

"""
1) for：解决知道循环次数的循环

2) while：
  	  解决一切for与do...while能解决的问题(结合函数的思想)
   	  解决不知道循环次数的循环(循环用break结合)

3) do...while：完成循环体必须要提前执行一次的循环
"""

函数

函数的组成

  • 函数名 ：函数名存放的就是函数的地址
    通过 函数名() 调用函数的

  • 参数列表：将外界资源传给内部的桥梁
    你传你的，我收我的，用...接收可变长

  • 函数体 ： 解决需求的代码块
    功能代码块

  • 返回值 ： 将内部数据反馈给外部
    只能返回一个值，不写或空return返回undefined

定义函数的三种方式

""" 
第一种：
关键字 函数名(参数列表) {
        函数体;
        返回值
    }
    
第二种：
var 函数名 = 关键字(参数列表) {
        函数体;
        返回值
    }
    
第三种：
var 函数名 = (参数列表) => {
        函数体;
        返回值
    }
"""

有名函数

// 定义
function add(n1, n2) {
    return n1 + n2
}
// 使用
res = add(10, 20);
console.log(res);

// 函数名的运用
my_add = add;
console.log(my_add(100, 200));

// 少传未接收到的形参赋值为undefined，多传的实参自动被丢弃
function fn(n1, n2) {
    console.log('传输的n1：%s | n2：%s', n1, n2)
}
fn(10, 20);
fn();
fn(100);
fn(1000, 2000, 3000);

// 可变长参数
function func(...num) {
    console.log(num)
}
func(1, 2, 5, 3, 4);

// 用变量接收 - 函数的第二种声明方式
var fun = function () {
    console.log('函数的第二种声明方式')
};
fun();

// 函数的第三种声明方式
var fun2 = (n1, n2) => {  // 有函数体标明{}
    console.log('n1:%s | n2:%s', n1, n2);
    return n1 + n2
};
console.log(fun2(222, 444));

var fun3 = (n1, n2) => n1 + n2;  // 只有返回值可以省略{}
console.log(fun3(222, 444));

匿名函数

// 匿名函数
// 匿名函数的自调用 - 调用一次后就会被回收资源
(function () {
    console.log('匿名函数')
})();


// 匿名函数自调用，可以产生局部作用域与外界隔离
(function () {
    let number = 888
})()
// console.log(number)  // 外界不可以直接访问
posted @ 2019-08-05 20:50  蔚蓝的爱  阅读(176)  评论(0)  编辑  收藏  举报