js基础(1)~数据类型，运算符，结构语句，array，object，

本文链接：https://blog.csdn.net/dugujiuding/article/details/120792201

1，js基础

javascript,简写为js，是一种函数式、弱类型的脚本语言。
在一个网页中：

HTML负责页面中有什么。
CSS负责页面长什么样子。
JS负责页面能够干什么。
JS能够控制HTML和CSS

js在页面中运行有两种方式：

直接在script标签中写js代码。
引用外部js文件。Src属性填写的是外部js文件的绝对路径。

<script src="name.js"></script>
控制台输出：Console.log。
赋值：从右往左赋值，等号右边的值赋值给左边。

一个页面中是可以关联多个script标签，代码会按照先后顺序执行。

2，变量和js数据类型

2.1，变量

js变量：存储数据的"容器"。

使用 var 关键词来声明变量.

var  myAge = 31;
/*
  var xxx声明一个变量，
  =表示赋值运算符，作用是把=右边的值赋给左侧的变量。
*/

在es6之后，可以使用 let 和 const 关键词来声明变量。

let name = "小明";
const stature = 1.7;

var，let，const的区别

var声明变量存在变量提升，let和const不存在变量提升。
变量提升：变量可以先使用再声明。
let、const都是块级作用域变量。
块级作用域：只在当前代码块起作用.
const声明的变量不可修改，（指常量对应的内存地址不可修改，而不是对应的值不可修改）

2.2，js数据类型：

js中数据类型分为2种：
1，基本数据类型；字符串类型，数字类型，布尔类型
2，引用数据类型：凡是对象都是引用类型，

基本数据类型与引用数据类型的区别：
基本数据类型保存的是值，引用类型保存的是内存地址。

数据类型：number，用于记录一个数字，直接输入数字。

var num = 30.5;

字符串类型：string，用于记录一段文本，使用双引号包括，也可以使用单引号定义。

var str = "20";   str = '大龙';

布尔类型：boolean,用于记录一个真假值(是否)。true为真，false为假。

var flag = true;

3，基本运算符

四则运算符：+号：可以用于数字相加。

var num =1+2+3;
console.log(num);  //6

变量也可以通过表达式计算。

var num2 =num+num;

当用+号链接字符串时，代表字符串拼接。例如：

var s1 ="a";
var s2 ="b";
var s3 =s1+s2; //s3 = 'ab'

当数字和字符串进行相加时，代码会自动将数字转换为字符串，并与另一个字符串进行拼接，组成新的字符串。

var s4 ="3"+5;
console.log(s4); //35
-号：减号，两个数相减。例如：
var num3 =5-2;
console.log(num3); //num3 = 3

当参与运算的两个值其中只要有一个是字符串时，代码会将字符串转换为数字，然后进行数学相减(前提是字符串里面的内容可以转成数字)。例如：

var num4 ="5" -3;
console.log(num4);=2

*号：乘号，两数相乘。不同的运算拥有不同的优先级，乘法运算的优先级大于加减。
当字符串参与乘法运算时。和减号遵循的规则一样，

/号：除号：和乘法运算规则一样，
%号：取余运算符：两个数字整除之后的余数，

var num7 =5%3;
console.log(num7); //2

++和–：自加1和自减1，
++写在变量后,代表变量先参与表达式计算,后自增
++写在变量前,表示先自增,后参与表达式计算

var num8 =5
var num9 =num8++;
console.log(num8,num9);num8 =6;num9 =5
// 逻辑和++相同，
var num10 =num9--;
console.log("???"+num9,num10);num9 =4;num10 =5
其他运算符
// +=表示自增运算 同样还有-=，*=， /=。
var num11 =10;
num11+=5;（numll=numll+5）;
console.log(num11);

4，布尔运算符

&&表示和运算,当运算符两侧的布尔值都为真时,结果才为真

var f1 =false&&true;
console.log(f1);  //false

||表示或运算，规则是：如果第一个运算子的布尔值为true，则返回第一个运算子的值，且不再对第二个运算子求值；如果第一个运算子的布尔值为false，则返回第二个运算子的值。

var f2 =true||false;
console.log(f2);  //true

!表示非运算,是一个单目运算符,对布尔值进行取反,假的取真,真的取假。
非运算的优先级大于和与或。

var f3 = !true;
console.log(f3);  //false

5，比较运算符

var a =6; var b =5;
// 两个变量进行比较,会得到一个布尔值的结果,不等式成立时为true 不成立则为false
// <小于(左侧小于右侧)， >大于
var f1 =a<b;
// >=大于等于 <=小于等于 规则和大于小于一样
var f2 = a>=b;
// !=不等于
var f3 = a!=b;

比较运算符会组成一个表达式,无论这个表达式有多长,系统再去运行的时候始终会把该表达式的结果以一个bool值来返回出来。

6，结构语句

代码执行顺序是从上往下依次执行代码。
分支结构：决定哪一部分代码执行哪一部分代码不执行。
循环结构：让哪一部分代码执行对应的次数。

6.1，if分支结构

if语句：if代表如果 (内部是条件表达式){满足表达式才会执行的代码}
else语句：else{代码块}。
执行规则:当if括号内的布尔值为true时，执行if{}的代码否则执行else{}的代码。

if搭配else必有一者执行多个if有可能执行也有可能不执行;
if和else是可以连续使用的。
else if：或者如果。

let num = 5;
if(num > 3){
    console.log('num--666')
}else if(num = 5){
    console.log('six-six-six')
}else{
    console.log("百鸟朝凤")
}
//num--666

6.2，非布尔值当做布尔值使用

If判断，判断的条件需要写布尔值或者是布尔表达式才可以。

如果把非布尔值写入if条件中，程序执行的时候这个值会强制转换为布尔值使用。
如果把数字类型作为布尔值使用，那么0为flase，其余都是true。
如果把字符串类型作为布尔值使用，空字符串为flase，非空为true。
如果把对象作为判断条件来判断，只要是对象有内存，结果就是true。
Null：代表当前要读取的内容读不到，也是flase。
如果参数的值为NAN，或者是字符串，对象，undefined等非数字值读不出来，则使用专门的函数进行判断。

isNAN函数：进行变量判断，满足返回true。用来检测变量是否，是，非数字值。

if (Number.isNaN(v2)==true) {
        console.log("读不出来");
    }

对非布尔值使用逻辑运算符，会把非布尔值先转成布尔值在计算。

let s1 = 45
    console.log(!!s1);   //true

6.3，while循环结构

格式：while(布尔条件){循环体}。
执行规则:
1.判断布尔条件,如果为假直接跳出循环如果为真则执行循环体
2.循环体执行一遍之后回到第1步

do while循环：
先执行一遍do里面的内容然后去看判断条件是否满足 如果满足继续走do 不满足则结束
var sum =0;
do{  sum++;console.log(sum);}while(sum<10)
//1-10

6.4，for循环

格式：for(循环控制变量赋值;循环的条件;循环控制变量修改){循环体}
执行规则:
1，执行初始循环控制条件变量赋值
2，判断循环控制条件是否满足,如果不满足则直接退出循环,如果满足则执行循环体。
3，当循环执行完毕后,执行循环控制变量修改,然后回到第二步

// 循环体内,可以使用循环来控制变量
// i代表循环的值 i
//循环嵌套：一个循环内部可以写另一个循环
for(var i=0;i<10;i++){
	for(var j=0;j<10;j++){
		console.log(i+""+j);
	{
}

循环退出：
contince：立刻结束循环体执行,执行循环控制变量更改,然后在重新进入条件判断，
break：用于退出当前循环。

contince和break的区别：
1，contince是跳过本次循环，继续执行下一次的循环。break是直接结束循环。
2，嵌套循环break一次调不出来，如果需要跳出外层的循环可以给外层循环起个名字,在break后面追加该名字就行。

6.5，js中的=、==和===的区别

=是赋值运算符,
==是判断值是否相等,
===是判断值和类型是否相等(先比较值，后比较类型)。

7，数组（array）

array：存储多个同类型的数据，数组是引用类型。
创建数组：

//1.使用new关键字
var nameList = new Array();
//2，使用[]字面量。
var nameList = [];

数据在array中以索引(序号)进行存储，数据在数组中是有序的。可以通过索引访问数组中的数据，索引是从0开始的。

var arr = [1,2,3];
console.log(arr[0])  //1

数组也是一种对象。所以数组也有属性，其中length属性表示数组的长度，也就是数组中元素的个数。

 var arr = [1,2,3];
console.log(arr.length)   //3

7.1，数组常用的方法

arr[0]使用索引对数组里面的元素进行读与写。

push方法用于向数组的最后追加一个元素。

    var arr = [1,2,3];
    console.log(arr[0])   //3
    arr.push(4);

pop用于删除数组中最后一个元素，返回值是删除的这个元素。

    var arr = [1,2,6];
    console.log(arr.pop())  //6

数组中的push和pop是一对栈(stack)。栈是一个线性数据结构，只有一个入口同时也是出口，先进后出，后进先出。

unshift：将一个元素添加到数组的最前端。

    var arr = [1,2,6];
    arr.unshift('a')
    console.log(arr)   //[ "a", 1, 2, 6 ]

shift：从数组最前端删除一个元素，返回值也是删除的元素。

    var arr = [1,2,6];
    console.log(arr.shift()) //1

Shift和unshift也是一对栈操作。Push和shift是一对，队列(queue)操作。队列是一种线性的数据结构，先进先出，后进后出。

splice：有3个参数，用来向数组中添加或者是删除元素：

1参（第一个参数）：从哪个位置开始删(根据索引)，
2参：删除几个元素，
3参：删除之后替换新的元素
前两个参数是必须的，后面的都是可选的
    var arr1 = ['a','b','c'];
    arr1.splice(2,1,99,88);
    console.log(arr1)   //[ "a", "b", 99, 88 ]

reverse：用于将数组中的元素顺序反转：：

var arr1 = ['a','b','c'];
    arr1.reverse()
    console.log(arr1)  //[ "c", "b", "a" ]

slice：用于数组截取，有2个参数。

1参：从哪个位置开始截取(包含)
2参：截取到哪个位置(不包含当前位置元素)，把截取的内容返回到新数组上，原数组不变。
如果不写第二个参数，则截取到最后。
如果第二个参数写-n ，则表示截取到倒数第n个。

    var arr1 = ['a','b','c','d','e'];
    console.log(arr1.slice(1,3))   //[ "b", "c" ]

indexof：获取元素第一次在数组中出现的索引，如果不包含则返回-1。

var arr1 = ['a','b','c','d','e'];
   console.log(arr1.indexOf('c'))  //2
   console.log(arr1.indexOf('w'))  //-1

join：将数组的内容拼接成一个字符串。

var arr1 = ['a','b','c','d','e'];
    var str = arr1.join('')
    console.log(str)  //abcde

8，字符串对象

字符串.startsWith：判断本字符串是否以参数字符串开头，返回值是一个布尔值，如果是则返回true,不是返回false。
字符串.endsWith() ：判断本字符串是否以另一个字符串结尾。
字符串.length 表示本字符串中字符的个数(长度)。
字符串.substr() 方法，用于字符串截取，

1参：从第几个字开始截，
2参：截多少个字，
返回值就是截取到的新字符串。如果没有传递第二个参数，则截取到字符串末尾。

字符串.substring() 方法，字符串截取，

1参：从第几个字开始截(含)，
2参：截取到第几个字(不含)。

substr和substring的区别

相同点：只有一个参数时,两者都是截取字符串从当前下标以后，到字符串最后的字符串片段

let str = 'abcdefgh'
    console.log(str.substr(3))  //defgh
    console.log(str.substring(3))  //defgh

不同点：有2个参数时：
substr（satrt,end）：第二个参数是截取字符串的长度（从起始点截取end长度的字符串）；
substring（satrt,end）：第二个参数是截取字符串最终的下标（截取2个位置之间的字符串,‘含头不含尾’）。

let str = 'abcdefgh'
    console.log(str.substr(2,5))    //cdefg
    console.log(str.substring(2,5))  //cde

字符串.split(分隔符)

用于字符串分隔，参数是分隔符，返回值是一个数组，数组中包含了分隔之后的所有字符串。
1，如果分隔符是空字符串，则会将字符串的每个字符分开。

let str = 'abcde'
    console.log(str.split(''))  //Array(5) [ "a", "b", "c", "d", "e" ]

2，如果不填写分隔符参数，则返回数组中是原字符串.

let str = 'abcde'
    console.log(str.split()) //Array [ "abcde" ]

检测当前字符串是否包含有目标字符串，返回bool值，true代表包含

let str = "abc123qwertyu"
    ind =str.includes("23q");
    console.log(ind);  //true

8.valueof是字符串的方法，作用是取出来传递进去的字符串值。本方法对数字类型，布尔类型也能用。

var strObj =new String("123");
var str2 =strObj.valueOf();
console.log(str2);   //123

9，函数

funtion：声明一个函数，
格式：funtion 函数名（参数列表）{函数体}，

function people(name, age, sex) {}

函数调用格式为:函数名(实参列表)。
实参：实际的参数。

 people("小明", 30, true);

调用函数时,函数的函数体内代码会被执行,函数中的参数值就是本次调用所传递进去的，
参数值,函数调用本身也是一个表达式,表达式的值就是函数的返回值，
函数的作用域：

作用域：每一个参数都有一个作用范围，超过范围就失效，这个范围就叫作用域。

10，对象

10.1，对象基础

对象：把变量，函数整合到一起的一个复杂的数据类型。
对象的三大特征：封装，继承，多态。
1，创建对象

new：开辟内存，Object()构造对象的函数。对象的声明和实现可以写在一起。

let obj = new Object();

对象也可以使用字面量创建法来创建

var obj3 = {
   // 字面量创建的时候属性与属性之间要用,分割
   name: "大哥",
   major: "学生",
}

2，属性赋值
属性赋值和常规变量赋值一样，调用的时候只需要对象.属性名。

obj.age = 20;
obj.sex = "男";
//调用时
console.log(obj.age);  //20

10.2，Object.defineProperty

Object.defineProperty方法：为一个对象定义一个属性。方法有3个参数：
1参：添加属性的对象。
2参：添加的属性名
3参：属性的配置对象

Object.defineProperty(o,"p1",{
	// 属性的初始值
	value:"v1",
	// 属性是否可读写，默认为false，
	//如果是false则为只读属性
	writable:true,
	// 属性是否可枚举(可遍历)，默认为false
	enumerable:true
});

Object.defineProperty方法可以为对象添加set/get属性，
1，当为这个属性赋值时，本质上是执行了这个属性的set方法，所赋的值会作为参数传入set方法
2，获取这个属性时，本质上是调用了get方法，并获取它的返回值。

Object.defineProperty(o2,"age",{
	get(){
		// console.log("get方法被调用了");
		return this._age;
	},
	
	set(v){
		// console.log("set方法被调用了");
		// console.log(v);
		// 对象属性的set/get方法中的this就是对象本身。
	}
});

//set/get属性，相比普通的属性：
1，可监听。
2，可限制。

3，方法调用
当对象的属性后面的赋值变成了函数的时候，那么这个属性叫做对象的方法。调用：对象.方法名。

let obj = new Object();
 obj.eat = function () {
        console.log("今早吃了五个肉包子");
    }   
    //调用时
    obj.eat();

4，属性删除

格式：delete 对象.属性

5，属性访问
5.1，对象.属性，
对象就是一个容器，数据在对象中以键值对的形式出现。在下面对象man中：name就是键，大哥就是值。
5.2，对象[“键”]，
对象的另一种访问方式：根据键来取值，[]内部要用双引号来包裹键名称。

 var man = new Object();
    man.name = "大哥";
	man.age = 1;
	//取值时
	console.log(man.age);  //1 
	 console.log(man["name"]);  //大哥

对象的属性还可以是一个对象。

//对象属性的快递遍历
Forin循环：专门用来做对象属性的遍历，key代表一个空属性。
把obj上面的属性赋值给key
for (var key in obj) {
	//其他的逻辑
}

②getPrototypeOf()获取某个对象的原型
③setPrototypeOf()设置某个对象的原型
④hasOwnProperty()判断对象是否含有某个属性

10.3，封箱(装箱)操作

当使用基本数据类型调用方法的时候，js执行器就会根据这个类型临时的创建出一个对应的对象，用于封装这个基本数据类型。当使用这个基本数据类型调用方法时，实际上是系统预先设置的对象所提供的方法，用完之后会把这个对象自动释放掉，变成最初的值，这个过程叫封箱操作，作用是减轻程序员的负担。

10.4，Math对象：

Math对象，js内置对象的一个对象，内置对象的出现主要就是为了解决某种单一的功能。
(1)math对象常用的方法

数字比较。

math.max比大
console.log(Math.max(5,3));
math.min比小

四舍五入取整
console.log(Math.round(3.5));
向下取整
console.log(Math.floor(3.5));
向上取整
console.log(Math.ceil(3.5));
随机数
console.log(Math.random());

math对象的其他方法

圆周率(做圆周动画的时候需要使用)：Math.PI。

console.log(Math.PI);

自然对数：Math.E
console.log(Math.E);
计算一个数的绝对值
onsole.log(Math.abs(-4));
幂运算，计算x的y次方
console.log(Math.pow(x,y));
开平方
console.log(Math.sqrt(25));
开多次方
console.log(Math.pow(27,1/3));
三角函数，正弦函数。30代表角度(编程语言中只能识别弧度，所以传入角度得到弧度)
console.log(Math.sin(30*Math.PI/180));
// Math.cos余弦  Math.tan 正切 Math.cot余切