5.js01

1.js简介

js全称JavaScript,是一钟轻量级编程语言，可以插入HTML页面由浏览器执行。
nodejs 支持js在后端服务器上运行。
ECMascript是JavaScript的规格。

版本主要使用5.1 6.0

2.两种引入方式

1.在script便签内部直接书写js代码。
2.script标签属性引入外部js代码。

3.语法

console.log('holle word'); 
// 不管那么多，上来就 holle word

3.1注释

 // 当行注释
 /*
 多行注释1
 多行注释2
 多行注释3
 */

3.2结束符

js以;作为语句的结束符号，如果不写不会报错，可可以正常执行，不会没有结束符。

4.变量

先声明后使用.
1.关键字var，var作用域全局。
var name = 'kid'
2.es6语法，let作用于局部。
let name = 'kid'

* 5.1版本无法使用let,6.0版本编译器向下兼容。

5.常量

const  定义常量
const P = 3.1415;

6.命名规范

1.变量名以数字,字母,下划线, $的组合
2.不能以数字开头
3.不能与关键字冲突
js推荐使用驼峰式命名
userName

7.书写位置

1.单独在js文件中书写
2.在浏览器的console界面书写,做上方的按钮之前换页，不是清空，需要换个网页使用。
	在自己的HTML页面书写。shift+空格换行。

8.数据类型

js是一门动态类型语言，变量名可以指向任意类型。

数值类型（number）

var a = 1;
var b = 1.11;

type a;  // 查看数据类型

特殊:NaN数字类型，表示的以上 不是一个数字 --> NOT A NUMBER

类型转换

  parseInt() 转整数
  parseFloat() 转浮点数

parseInt('123456');
123456
parseFloat('11.11');
11.11
parseFloat('11');
11
parseInt('11.11');   // 11  保留整数部分
11
parseInt('123asdas'); // 123 识别数字部分，遇到非数字断开结束转换。
123
parseInt('asdas');    // NaN 非数字
NaN

9.字符类型（string)

var s1 = 'aaa';
var s2 = "aaa";

<·undefined  左侧箭头代码不需要管， 对页面没有任何影响会显示undefined。

模板字符串

  1.定义多行文本
  2.格式化字符换操作

  var s3=`dasd  
  		asdas
  		asddas`

var name = 'kid';
var age = 18;
var sss = `my name is ${name}, I'm ${age} years old`
sss
"my name is kid, I'm 18 years old"

  ${}符号会自己去找前面的变量名的值,如果变量名不存在会，报错。

字符换的拼接

推荐使用+号拼接字符。

name + age;
"kid18"

常用方法

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边空白
.trimRight()	移除右边空白
.chaerAt()	返回第xx个字符
.concat()	拼接
.indexOf()	子序列位置
.substring()	根据索引获取子序列
.slice()	切片
.toLowerCase()	小写
.toUpperCase()	大写
.splist()	分割

1.获取长度

var name = 'hello word'
name.length
10

2.移除空白

只能移除空白，不能在括号内指定字符移除。

// 默认移除左右两边空格
var s1 = ' ni hao ';
s1.trim();
"ni hao"

// 移除左边空格
s1.trimLeft();
"ni hao "

// 移除右边空格
s1.trimRight();
" ni hao"

3.返回索引对应的字符

索引都是以0开始，默认不写是空的话对应的是0。

var s1 = "12345679";
s1.charAt(1)
"2"

4.返回字符型对应的索引

如果是一个字符串，返回的首个字符的索引。

var s1 = "12345679";
s1.indexOf(23);
1

5.索引切片

.sbustring()不识别负数。不用这个。
.slice()识别负数。使用这个。

var s1 = "012345679";
s1.substring(0, 5);   // 起始值，上限值
"01234"
s1.slice(0,-2);      // 从0开始切片到倒数第二个
"0123457"
s1.substring(0, -2); // 不识别负数
""

6.大小写转换

var s1 = "asSSADsada123";
s1.toLowerCase();
"asssadsada123"
s1.toUpperCase();
"ASSSADSADA123"

7.切分

括号内指定以什么切分，后面跟的数字为切分后元素保留的个数。

names ="kid|qz|qq|pp|qaq|···";
"kid|qz|qq|pp|qaq|···"
names.split('|');
(6) ["kid", "qz", "qq", "pp", "qaq", "···"]

names.split('|', 2);
(2) ["kid", "qz"]

8.拼接

js弱类型语言。
concat拼接会自动转换类型，不同的类型会转换相同的类型。

var s1 = "123";
var s2 = 456;
s1.concat(s1, s2);
"123123456"

10.布尔值(boolean)

全小写
true  真
falst 假
为假的值：0、null、undefined、NaN、数据类型的值为空···

11.null与undefined

null： 值为空，表示清空一个变量时使用。
undefined: 表示声明一个变量，没有赋值。
函数没有指定返回值的时候会返回undefined.

12.对象

1.数组[] ,Array 索引取值时不可以使用负数。
2.自定义对象 {}

 var l1 =[11,22,33,44];
l1[0];   //索引取值
11

var l2=[[123,456,],7];
(2) [Array(2), 7]   // 可以用鼠标点开Array，将值展示出来。

方法	说明
.length	长度
.push()	尾部追加元素
.pop()	获取尾部元素
.undhilt()	头部插入元素
shife()	头部移除元素
.slice()	切片
.reverse()	反转
.join()	将数组元素拼接程字符串
concat()	连接数据
sort()	排序
.forEach()	将数组每个元素传递给回调函数
.splice()	删除元素
.map()	返回一个数组元素调用函数处理后的值的新数组

12.1获取长度

获取元素的个数。

var l1 =[11,22,33,44];
l1.length;
3

12.2元素增减

.push();尾部追加元素
.pop(); 弹出尾部元素 
.shife();头部元素移除
.splice();删除替换元素

var l1 =[11,22,33,44];
l1.push(12);
4   // 添加成功后会现在元素的个数。
l1;
(4) [111, 222, 33, 12]

l1.pop();
12  // 弹出成功后会现在元素的个数。

l1.shift();
111

var l1=[1,2,3,4,5,6];
l1.splice(0,3);   // 起始位，上限值
(3) [1, 2, 3]
l1;
(3) [4, 5, 6]

var l1=[1,2,3,4,5,6];
l1.splice(0,3,'a');      // 先删除，再删除的位上提交东三个参数。
(3) [1, 2, 3]
l1;
(4) ["a", 4, 5, 6]

12.3排序

.reverse(); 反转
.sort();排序

l1=[1,2,3,4,5];
(5) [1, 2, 3, 4, 5]
l1.reverse();
(5) [5, 4, 3, 2, 1]

l1=[2,5,1,4,3];
(5) [2, 5, 1, 4, 3]
l1.sort();
(5) [1, 2, 3, 4, 5]

12.4连接

.join();以某个符号连接数组内的元素转为字符串类型。
.concat();连接数组

var l1=[1,2,3];
l1.join('|');
"1|2|3"

l1.concat([4,5,6]);
(6) [1, 2, 3, 4, 5, 6]

12.5给函数传值

.forEach()将数组每个元素传递给回调函数
.map()返回一个数组元素调用函数处理后的值的新数组

 value 值
 index 索引值
 arr  元素的数据来源
 最多接受三个参数。

l1.forEach(function(value){console.log(value)}, l1);
1                   
2                   
3                   

l1.forEach(function(value,index){console.log(value, index)}, l1);
1  0                 
2  1                
3  2    

l1.forEach(function(value,index,arr){console.log(value, index,arr)}, l1);
1 0 (3) [1, 2, 3] 
2 1 (3) [1, 2, 3] 
3 2 (3) [1, 2, 3] 

l1.map(function(value){return value * 2},l1);
(4) [2, 4, 6, 8]

13.运算符

1.算数运算符

+ - * / //   ++ --

var x 10;
var res1 = x++;  // 先赋值再自增
var res2 = ++x;  // 先自增再赋值

2.比较运算符

// 弱等于
1 == '1'; 内部自动转换成相同的类型进行比较。
true

// 强等于
1 === '1'; 内部不做类型转换。
false

1 !== '1';
false
1 !=== '1'; 
true

3.逻辑运算符

&& || ！
与 或 非
需要住注意什么时候返回布尔值，什么时候返回数据。

5 && '5';  // 第一个值为真，就显示第二个值。
'5'
0 && '5';  // 第一个值为假，结果直接为假。
0

0 || 1;  // 显示为正的值。
1

1 || 0;
1

!true;
false
!false;
true

4.赋值运算符号

+= -= *= /=   =

14.流程控制

14.1if

if 判断

if(条件){代码块};


if else 

if(条件){代码块}
else{代码块};

if else if else

if(条件){代码块}
else if (条件){代码块}
else{代码块};

var age = 19;

if(age > 18){console.log('来啊')};

来啊

var age = 16;

if(age > 18){console.log('来啊')}

else{console.log('滚蛋')};

滚蛋

var age = 17;

if(age > 18){console.log('来啊')}
 
else if(age > 16){'看情况培养'}

else{'滚蛋'};

14.2switch

提现列举好可能出现的条件和解决方法。

var num = 1;
switch(num){
	case 0:
		console.log('x');
		break;             // 不加break 匹配一个case后还会一直往下执行，而且不需要验证。
	case 1:
		console.log('xx');
		break;
	case 2:
		console.log('xxx');
		break;
    default:               // 以上都没有匹配到才执行
        console.log('没有');   
}

14.3for循环

for(条件) {代码块};

// 打印 0-9
for (let i = 0; i < 9; i++)
{
	console.log(i)
}

let i = 0;
for ( ; i < 9; i++)
{
	console.log(i)
}

// 循环打印出数组的每一个元素
var l1 = [1,,2,3,4,5,6];
x = l1.length;
for(let i=0; i < x; i++)
{
	console.log(l1[i])
}

14.4while循环

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

14.4三元运算

var res = 1 > 2 ? 1:3;
条件成立，取问号后面的值，条件不成立取冒号后面的值。

var res = 1 > 2 ? 1:3;
res;
3

var res = 1 < 2 ? 1:3;
res;
1

15.函数

在js中定义函数需要function关键字。
function 函数名 (形参1····){};
先定义后调用。

15.1无参函数

function func1 ()
{
	console.log('holle word');
}

func1();

15.2有参数函数

function func2(a, b)
{
	console.log(a,b);
}

func2(1, 2);
1 2

func2(1, 2, 3);   // 多了只取想对应的数据
1 2

func2(1);         // 少了 
1 undefined

argumens 获取函数内所有的参数

function func2(a, b)
{	
	console.log(arguments);
	console.log(a,b);
}

func2(1, 2, 3, 4)

function func3(a,b){
	if (arguments.length > 2 )
		{
			console.log('参数多了只要两个！');
            
		}
    else if (arguments.length < 2 )
   		 {
       		 console.log('参数少了需要两个！'); 
   		 }
    else {
              console.log(a,b);
	     }
}

15.3返回值

关键字 return,如果返回多个值,就是最后那个值返回。

function func1 ()
{
    console.log('holle word');
    return 1,2,3;
}

res = func1();
res;
3

15.4匿名函数

function {console.log('holle word');}  //没有名字

15.5箭头函数

var func1 = v => v;    // 箭头左边的是形参，右边的返回值，
// 等价于
var func1 = function(v){return v;}

var func2 = (arg1,arg2) => arg1 +  arg2
// 等价于
var func2 (arg1,arg2)
{
    return arg1 + arg2
}

15.6全局变量和局部变量

查找方式。

16.自定义对象

创建自定义对象的方式：
1. 变量 = {key : value}
2. new Object();

var d = {'name': 18};

d['name'];     // 取值方式1
18

d.name;          // 取值方式2
18

for (let i in d) // 取值方式2
{
	console.log(i, d[i]) // 不能使用点
}

var ll = new Object();
ll.age = 18;
ll;
{age: 18}
ll.age;
18

17.内置对象

1.Date时间对象

let d3 = new Date();
let d4 = new Date('2020/01/01 11:11:11');  
let d5 = new Date(1111,11,11,11,11,11,11);

let d3 = new Date();
d3;
Thu Aug 05 2021 22:32:48 GMT+0800 (中国标准时间)
d3.toLocaleString();
"2021/8/5 下午10:32:48"

let d4 = new Date('2020/01/01 11:11:11');
undefined
d4.toLocaleString();
"2020/1/1 上午11:11:11"

// 错误的案例
let d4 = new Date('2020/00/01 11:11:11');   // 00月
undefined
d4.toLocaleString();
"Invalid Date"

let d5 = new Date(1111,11,11,11,11,11,11);  //  月份从o开始的 0 -11月
undefined
d4.toLocaleString();
"2020/1/1 上午11:11:11"

1.1内置方法

.getDate();     //  获取日（几月第几日）
.getDay();      //  获取星期
.getMonth();    //  获取月份 （月份从 o 开始的 0 - 11月）
.getFullYear(); //  获取完整的年份
.getHours();    //  获取小时
.getMinutes();  //  获取分钟
.getSeconds();   //  获取秒
.getMilliseconds(); //  获取毫秒
.getTime();     //  获取时间戳