JavaScript

Posted 2020-11-26 treeter

javascript简介

JavaScript是一种脚本语言，也是一种轻量级的编程语言，可插入html页面的编程代码，插入HTML页面后，可由浏览器执行

引入方式：

1.script标签内写代码

<script>
    // 编写js代码
</script>

2.引入外部的js文件

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

JavaScript语言规范

1.注释

// 单行注释

/*
多行注释
*/

2.结束符

JavaScript中的语句要以分号（；）为结束符

JavaScript语言基础

1.变量声明

JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头

变量名是区分大小写，和Python中类命名一样，推荐使用驼峰体命名，关键字不能用作变量名

声明变量使用var或者let，格式var 变量名

var name = ‘hy‘;
var age = 18;
let myGirlFriend

声明常量使用const来声明，一旦声明为常量，值就不能改变

const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only

2.数据类型

数字类型：JavaScript不区分整型和浮点型，就只有一种数字类型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

还有一种NaN，表示不是一个数字

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

字符串

常用方法

　　length：返回长度　　trim：移除空白　　charAt(n)：返回第n个字符

　　slice(m,n)：切片　　toLowerCase：小写　　toUpperCase：大写　　split：分割

拼接字符串一般用‘+‘

布尔值

var a = true;
var b = false;

空字符串、0、null、undefined、NaN都是false

unll与undefined区别：null表示变量的值是空(null可以手动清空一个变量的值，使得该变量变为object类型，值为null)，undefined则表示只声明了变量，但还没有赋值。

对象：object

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

JavaScript 提供多个内建对象，比如 String、Date、Array 等等

数组：使用单独的变量名来存储一系列的值。类似于Python中的列表。

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

常用方法

　　length：数组大小　　push：追加　　pop：删除取值　　slice：切片

　　join：拼接　　concat：合并数组　　sort：排序

3.运算符

算数运算符：

+、 -、 *、 /、 ++、 --

var x=10;
var res1=x++;
var res2=++x;

res1;
10
res2;
12

// 这里由于的x++和++x在出现赋值运算式，x++会先赋值再进行自增1运算，而++x会先进行自增运算再赋值！

比较运算符

>、 >=、 <、 <=、 !=、 ==、 ===、 !==

1 == “1”  // true  弱等于
1 === "1"  // false 强等于
//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将
//数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误

逻辑运算符

&&：and

||：or

!：not

赋值运算符

=、 +=、 -=、 *=、 /=

4.流程控制

if  ... else：

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

if ... else if ... else：

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

switch语句：

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}
// switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句

for循环：

for (var i=0;i<10;i++) {
  console.log(i);
}

while循环：

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

三元运算：

var a = 1;
var b = 2;
var c = a > b ? a : b
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用；
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;

x
10

5.函数

函数定义：使用function

// 普通函数定义
function f1() {
  console.log("Hello world!");
}

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

// 带返回值的函数
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 调用函数

// 匿名函数方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即执行函数 书写立即执行的函数，首先先写两个括号()()这样防止书写混乱
(function(a, b){
  return a + b;
})(1, 2);

可以使用=>定义函数，如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分：

var f = v => v;
// 等同于
var f = function(v){
  return v;
}

var f = () => 5;
// 等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;  //这里的return只能返回一个值，如果想返回多个值需要自己手动给他们包一个数组或对象中
}

函数中的arguments参数：相当于将传入的参数全部包含

function add(a,b){
  console.log(a+b);
  console.log(arguments.length);
　console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}

add(1,2)

/*
输出：
3
2
1
*/

函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回