JS-入门

变量：

概念

保存数据的一个容器，方便后续使用

语法

var 变量名 = 要保存的数据

注意：

1. 声明了变量没有赋值，会输出undefined，这个是js赋予变量的默认值

2. 如果没有通过var关键字声明变量，js会自动在代码上方创建该变量，赋值的时候其实是修改变量的数据。

3. 如果直接输出没有声明的变量，会报错，

变量的命名规范

1. 可以包含：字母、数字、_、$符号，不能以数字开头
2. 名称必须以字母开头，
3. 变量名 对大小写敏感，
4. js保留的关键字，不能使用：var 、for 、class…
5. 建议命名
   1. 小驼峰：userName、getMyUserAgeAndName，见词知意，user，age。
   2. 大驼峰：UserName…多用在创建类名上面

变量的使用

var username = 'zs';
var userName = "ls";

console.log(username, userName);
console.log(username, userName);

变量的修改

var 变量名 = 数据；
var 变量名2 = 数据；
变量名 = 新数据；

变量名 = 变量名2

变量的关键字：（拓展）【ES6版本提出的定义规则】

let关键字：不允许重复定义，对于开发更加规范

let usernames="龙哥";
let usernames="飞哥";
//报错：标识符已经被定义了

const关键字：定义常量 （一旦定义了常量就不能重新赋值），也不允许重复定义

const age="18";
age="35";
//报错 赋值给常数变量

数据类型

概念

• 生活中的数据类型
  • 数字：年龄、学号、编号、手机号
  • 文本：生辰八字、姓名、地址
• 在js中也有对应的数据类型，分为了2大类，
  1. 基本数据类型：
     1. number 数字
     2. string 字符串
     3. boolean 布尔值
     4. undefined 未定义
     5. null 空
     6. symbol 唯一值（ES6新增的）
  2. 引用数据类型：
     1. 对象 object
        • 日期、数组、函数…

number：数字

• 所有的正负整数和浮点数（小数）

var num = 10 //number
var num = 10.1 //number
var num = 10.1e10 //number

string：字符串

• 通过引号包裹的文字和数字都是字符串类型

var str = 'hello';
var str2 = '123';
var str3 = '';

• 转义符：\

var str4 = '我叫\'提莫\''
var str6 = 'hello \\\\ world'

• 换行符：\n

var str5 = "第一行\n第二行";

• 字符串的拼接：通过 + 号拼接

var hello = "hello";
var world = "world";
console.log(hello + " 蜗牛 " + world);

模板字符串:ES6新增的字符串模板

• 通过``包裹的字符串
• 可以直接通过 ${} 来包裹变量，避免使用 + ，结构会更加清晰

var hello = "hello";
//模板字符串拼接
console.log(`${hello}:蜗牛学院`);

boolean：布尔值

• 在js中只有两个值：true false

var boo = false //boolean
var boo2 = true //boolean

undefined：未定义

• 在js中undefined只有一个值：undefined
• 声明了变量没有赋值的话，那么这个变量的数据类型是 undefined类型

var text
console.log(text);

null：空

• 代表一个值为空，用于某些变量初始化不知道如何赋值，null占位

var num = null

symbol：唯一值（了解）

var a=10;
var b=10;
console.log(a==b)//true
var sym = Symbol(10);
var sym2 = Symbol(10);
console.log(sym === sym2) //false

引用数据类型：object

var obj = {
    "user":"张山",
    "age":28
};
var obj2 = new Object() 
var arr = new Array() 
var date = new Date()
var func = new Function() //function
console.log(typeof obj2)
console.log(typeof arr)
console.log(typeof date)
console.log(typeof func)

typeof ：判断数据是哪一种类型，是基本类型 还是引用类型

typeof 10 //number
typeof '' //string
typeof true //boolean
typeof undefined //undefined
typeof null //object
typeof {} //object
typeof Symbol() //symbol

数据类型的转换

分类：

强制转换

隐式转换（自动转换）

强制转换：通过js提供的函数方法进行转换。

转字符串：String()，toString()

    var a=1000
    var b=String(a);
    console.log(typeof b,b)

• String()方法可以转换各种数据类型为字符串
• toSting()方法，只能转换除了null、undefined之外的数据类型

    var num = 123
    num=num.toString();
    console.log(typeof num,num)

转数字：Number()、parseInt()、parseFloat()

var str = '123.11'
//var str = '123.1.1'
var num1 = Number(str); 
var num2 = parseInt(str);
var num3 = parseFloat(str) 
console.log(num1);
console.log(num2);
console.log(num3);

• Number()方法将内容转换成 数字类型，false——》0 ，null——》0，undefined——》NaN
• parseInt()方法将内容舍余取整并且转换成数字类型，从左往右依次判断，如果不是数字 则停止，如果第一个就不是数字——>NaN
• parseFloat()方法将内容保留浮点数并转成数字类型，从左往右依次判断，如果不是数字则停止，但是会保留第一个小数点，如果第一个就不是数字——》NaN

转为布尔值: Boolean()

Boolean(1); //true
Boolean(0); //false
Boolean(null); //false
var num = 0
console.log(!!num) //取反两次

• 除了：0、-0、null、undefined、NaN、“”、false之外，都会转换成true

隐式转换

转字符串

• 任意类型 通过 运算符（+）与字符串相加，得到的结果永远都是字符串类型，

var num = 10
console.log( num  + "" )

var boo = undefined
var str = boo + ""
console.log( str, typeof str )

转数字

var str = '10'
var num = str / 1 
var num2 = str - 0
var num3 = str * 1
var num4 = ~~str

• ~：位运算符之一，反转正负之后再-1

运算符

概念：用于操作js的数据的特殊符号

分类：

• 算数运算符
• 赋值运算符
• 比较运算符
• 逻辑运算符

算数运算符

• 完成数学计算
  • /
  • % 取余：得到不被整除的余数 7/3=2 余 1
  • 自增++
  • 自减–

var num = 5;
var num2 = 10;
console.log(num + num2);
console.log(num - num2);
console.log(num * num2);
console.log(num / num2);
console.log(num % num2)
num++
console.log(num++) // num = num + 1  5
console.log(num) //6

console.log(++num) // 6
--num // num = num - 1
console.log(num)

• 自增自减：单独使用++或-- 写在前面和后面没有区别，但是和其他语句一起使用时，
  • 写在前面：先算后读取
  • 写在后面：先读取后计算

赋值运算符

• 可以给变量赋值或者修改变量的值
• =：把右边的值赋给左边的变量
• +=：自身基础上 + =号右边的值，并且赋值给 +号 左边变量
• -=：自身基础上 - =号右边的值，并且赋值给 -号 左边变量
• *=：自身基础上 * =号右边的值，并且赋值 给 *号 左边变量
• /=：自身基础上/ =号右边的值，并且赋值 给 /号 左边变量
• %=：自身基础上%=号右边的值，并且赋值 给 %号 左边变量

 		var num = 10;
    	// console.log(num += 2) //num = num + 2
        // console.log(num -= 2) //num = num - 2
        console.log(num *= 2) // num=  num * 2

比较运算符：数据与数据之间进行各种比较：通过各种特殊符号

• ==：判断两边数据是否相等，不考虑数据类型

• ===：判断两边数据是否相等，考虑数据类型

• <：左边的数据是否小于右边的数据，如果小于，返回 true 如果不小于 返回false

• >：左边的数据是否大于右边的数据，如果大于，返回 true 如果不大于 返回false

• <=：左边的数据是否小于等于右边的数据，如果小于等于，返回 true 如果不小于等于 返回false

• >=：左边的数据是否大于等于右边的数据，如果大于等于，返回 true 如果不大于等于 返回false

• !=：不等于 ，如果左边的数据满足 不等于 右边的数据，true，不满足false，不考虑数据类型

• ！==：不等于 ，如果左边的数据满足 不等于 右边的数据，true，不满足false，考虑数据类型

逻辑运算符：用于多个条件的判断

• &&:并且，与运算，必须满足两个条件或多个条件，一个不满足就为false

var num = 5;
console.log(num <= 5 && num == 5 && num===5 && num > 5) //false

​ 其他用法：查找为结果为false的值，依次向后查找，如果找到一个false的值，就返回该值，如果没有就返回最后一个值

var num0 = 0;
var num1 = 1;
var num2 = 2;

console.log( num1 && num0 && num2)

• ||:或者，表示只要满足其中一个即可就为true ，都不满足才为false

console.log(num < 5 || num != 5 || num == 5)

其他用法：查找为结果为true的值，依次向后查找，如果找到一个true的值，就返回该值，如果没有就返回最后一个值

var num0 = 0;
var num1 = 1;
var num2 = 2;

console.log( num0 || num2 || num1)

• !：取反，对结果取反

console.log( !(num==5) )
console.log( !(num>5) )
console.log( !0 )
console.log( !true )

拓展：

NaN：isNaN() 判断是不是NaN，如果是NaN返回 true，不是NaN返回false

• 会隐式转换成数字类型再检测

console.log( isNaN(123) );
console.log( isNaN('123') );//转换数字后变成 isNaN(123)
console.log( isNaN('abc') );
console.log( isNaN('') );
console.log( isNaN(null) );
console.log( isNaN(undefined) );
console.log( isNaN(false) );

• NaN: not a number ,NaN与任何值都不相等，包括它自己
  • NaN参与数学计算得到的值永远都是NaN

三目运算符（三元运算符）：做判断的

判断条件（返回true或false）? 条件成立（true）时执行的代码 : 条件不成立（false）时执行的代码 

var age = prompt('输入年龄');
age >= 18 ? console.log('成年了，能蹦迪了') : console.log('未成年人禁止入内')

console.log(`我今年${age}岁，${age >= 18 ? '成年了，能蹦迪了' : '未成年人禁止入内'}` )

循环结构

概念：循环就是指，生活中:反复的执行一件事情，在代码中:就是反复执行复合条件的代码

while循环

while(条件){
    //满足条件循环执行的代码
}
var num = 1
while(num <= 10000){
    console.log(num); //1   2 3 4 5
    num++ //2 3 4 5 6
}

注意避免死循环

while(true){
    //循环体
}

do while循环

do{
    //首先会执行一次这里的代码，之后必须满足条件才会执行
}while(条件)


var num = 1
do{
    console.log(num); // 1 2 3 4 5
    num++ //2 3 4 5 6
}while(num<=5)

例如：

var num = 1
do{
    console.log(num); //循环体永远为1，条件会一直成立
}while(num<5)

for循环（重点）

​```js
for(循环的初始条件; 循环的条件判断 ; 循环的操作次数){
//循环期间执行的代码
}

for( var i = 1 ; i <= 5 ; i++){
console.log(i)
}

#### 注意：使用循环的时候，80%的时间都是for循环。

##### 区别：

for循环一般明确循环次数，我们可以执行{}里面循环体的业务

while循环适合于不知道循环次数，当某一个条件成立的时候，结束对应的循环

do-while适合于程序开始的时候，先执行一次循环体代码，根据循环体结果决定是否继续进行下一步

### break、continue

- break:直接跳出循环，并终断循环

```js
for(var i = 1; i<=5;i++){
    if (i == 3) {
        break;
    }
    console.log(i)
}

• continue：跳出当次循环，继续后续的循环

for(var i = 1; i<=5;i++){
    if (i == 3) {
        continue;
    }
    console.log(i)
}

双重循环

for(var i = 1 ;i <= 5 ; i++){
    //第N次循环
    console.log(i) // 第一次	1 
    for(var j = 1; j <= 5 ; j++){
        console.log(j) //1 2 3 4 5
    }
}

控制结构（流程控制语句）

概念：代码按照一定的条件，按照自己的顺序执行。

分类：

• 分支结构
• 循环结构

分支结构

• 根据不同的返回结果，去执行不同的代码

if分支

• if

if(条件){
   // 如果条件为真，则执行此处代码
}

• if else

if(条件){
   // 如果条件为真，则执行此处代码
}else{
   // 如果条件为假，则执行此处代码
}

• if else if else：允许多个条件判断，需要搭配if来使用

  var num = prompt('输入成绩')
  if (num >= 90 ) {
      console.log('优秀')
  }else if(num > 70){
      console.log('良')
  }else if(num>=60){
      console.log('中')
  }else{
      console.log('不及格')
  }
  

  注意：只要满足其中的一个条件，后面的都不会执行

switch分支

• 分支结构的一种。主要判断某个条件是否全等，考虑数据类型

var num = parseInt(prompt('输入星期几'));
switch(num){
    case 0: 
        console.log('今天星期日');
        break;
    case 1: 
        console.log('今天星期1');
        break;
    case 2: 
        console.log('今天星期2');
        break;
    case 3: 
        console.log('今天星期3');
        break;
    case 4: 
        console.log('今天星期4');
        break;
    case 5: 
        console.log('今天星期5');
        break;
    case 6: 
        console.log('今天星期6');
        break;
    default:
        console.log('输入错误，请输入1-7之间的整数')
        break;
}

• 和if的不同：
  1. if如果判断进入了一个条件，之后的条件都不会执行，switch如果没有break，首先进入成立的条件，一直执行到结束
  2. 当不知道具体值的时候用if，当知道具体值的时候用switch

数组

概念

数组是指，一堆有序数据的集合，即，能储存多个数据在一个变量，并且保持一定的顺序

数组的定义

var arr = new Array(数据1,数据2,数据3...); //构造函数法
var arr2 = [数据1,数据2,数据3...]; //字面量法

• 特点：
  1. 数组可以存储任意类型的数据
  2. 数组有两大特性：长度length（数组的属性）、下标（数组中数据存放 的位置）
  3. 数组里的数据可以通过一些方式进行。数据的：增 、查、删 、改

数组的下标：

表示数组中数据存放的位置，通过数字表示，按照顺序 从 0 开始。

0代表第一条数据、1代表第二条数据。

最后一条下标：数据的数量 - 1，

我可以通过数组下标对数组进行各种操作

var arr = [1,2,3,4,5];
arr[下标]
arr[0] 
arr[0] = 新数据

数组的长度：

 var arr = [1,2,3,4,5,6];

//查看数组的数据数量
 console.log(arr.length)

//通过length删除数组最后一条数据
arr.length = arr.length - 1
console.log(arr)

数组数据的操作

查找数据

 var arr = [1,2,3,4,5,6];
arr[0]；
arr[4];
arr[arr.length - 1]; //获取数组最后一条数据

arr[arr.length]; //undefined 如果改下标位置没有数据则输出 undefined

新增数据

var arr = [1,2,3,4,5,6];
arr[6] = 7;
arr[arr.length] = 7
console.log(arr)

修改数据

var arr = [1,2,3,4,5,6];
arr[0] = 0;
arr[arr.length-1] = 7

删除数据

var arr = [1,2,3,4,5,6];

arr.length--; //删除最后一条数据
delete arr[1] //删除下标为1里面的数据，但是位置还在,输出该数据为empty

arr.length = 0 //清空数据
arr = []

console.log(arr)

数组的遍历

• 通过循环，依次查询数组中的每一条数据

• 针对多个数据，那么我们需要去遍历数组，才能获取到每一条数据

var arr = [3,4,1,5,9,7,8,6,0];
var num;
for(var i = 0;i < arr.length;i++){
    // console.log( arr[i] )
    if(arr[i] == 7){
        // console.log(arr[i])
        num = arr[i]
    }
}
console.log(num)

定时器

//设置定时器
var a=setInterval(function(){
             console.log("蜗牛");
              },1000);
//清除定时器
              clearInterval(a);

判断数组的数据类型【拓展】

• 由于typeof只判断是不是引用数据类型和基本数据类型，所以引用数据类型都返回 object

• isArray():

  Array.isArray(变量)  //
  

  • 如果是数组返回：true
  • 如果不是：false

• instanceof

  console.log(变量 instanceof Array)
  

数组经典算法：数组排序

冒泡排序

• 从左往右，依次一一比较，如果后面的数大于前面的数，则两数交换；
  • 第一轮，通过第一轮交换会把最大的数放在最后面，第二轮把第二大的放在倒数第二个…以此类推

选择排序

• 依次从左往右从数组中找到最小的值，并且与数组中的第一个数 进行交换
  • 第一轮，找到最小的值放在第一个位置，第二轮，找到第二小的值，放在第二个位置…以此类推

冒泡排序和选择排序的执行效率

• 经过测试，选择排序效率略高于冒泡，但是由于不稳定因素，看脸

二维数组：数组里储存了另一个数组

var arr = [[1,2,3],[4,5],[6]]

for(var i =0;i<arr.length;i++){
    for(var j = 0;j<arr[i].length;j++){
        console.log(arr[i][j])
    }
}

数组常用的api

什么是api

• 用户编程接口 （application programming interface），api接口就是一个函数，用户能够直接调用，使用其对应的方法。
• 1个api对应1个功能，Number()、Math.random()、alert().

数组相关api

数组的增加与删除，修改

方 法	语 法	说 明	改变原数组	返回值	js版本
push()	array.push(item1, item2, ..., itemX)	向数组末尾添加新元素	true	array.length	ECMAScript 1
unshift()	array.unshift(item1, item2, ..., itemX)	向数组开头添加新元素	true	array.length	ECMAScript 1
pop()	array.pop()	删除数组的最后一个元素	true	删除的元素	ECMAScript 1
shift()	array.shift()	删除数组的第一个元素	true	删除的元素	ECMAScript 1
splice()	array.splice(开始下标（包含）, 删除元素的个数, 新增元素1, ....., 新增元素n)	1.一个参数时会将指定下标元素和之后的元素全部删除； 2.有两个参数时可以删除指定位置之间的元素 3.多个参数时可以修改任意位置的元素	true	删除的元素组成的数组	ECMAScript 1

案例：

var arr=["a","b","c",1,2,3]
arr.splice(1);//删除下标为1和之后的全部数据  结果为 a
arr.splice(1,2);//从下标为1的位置开始，删除包含下标为1的两个数据   所有结果为a 1 2 3  
arr.splice(2,1,5)//找到下标为2的元素c,通过1进行删除并且通过数字5进行替换 所以结果为：a b 5 1 2 3
arr.splice(1,1,5,6)//找到下标为1的元素b,通过1进行删除并且通过数字5,6进行替换
//所以结果为：a 5 6 c 1 2 3
console.log(arr)

数组的查询：查询数组中指定的元素 是否存在，返回元素的位置

方 法	语 法	说 明	改变原数组	返回值	js版本
indexOf()	array.indexOf(item)	查询元素在数组中第一次出现的下标,考虑数据类型	false	index（下标） 没找到返回-1	ECMAScript 5
lastIndexOf()	array.lastIndexOf(item)	查询元素在数组中最后一次出现的下标,考虑数据类型	false	index（下标） 没找到返回-1	ECMAScript 5
includes()	array.includes(element)	查询元素在数组中是否存在,考虑数据类型	false	true/false	ECMAScript 7

数组的排序

方 法	语 法	说 明	改变原数组	返回值	js版本
reverse()	array.reverse()	反转数组中元素的顺序	true	反转后的数组	ECMAScript 1
sort()	array.sort() array.sort(function(a, b){return a-b}) array.sort(function(a, b){return b-a})	1.适用于全小写或全大写的字母排序 2. a - b 从小到大排序 3. b - a 从大到小排序	true	排序后的数组	ECMAScript 1

数组的拼接

方 法	语 法	说 明	改变原数组	返回值	js版本
concat()	array1.concat(array2, array3, ..., arrayX)	方法用于拼接两个或多个数组。	false	合并后的新数组	ECMAScript 1

• 扩展运算符进行拼接数组：(…)

var arr2 = [1,2,3];
var arr3 = [4,5]；
newArr = [...arr2,...arr3]

数组转字符串

方 法	语 法	说 明	改变原数组	返回值	js版本
join()	array.join(分隔符（默认逗号）)	将数组里的元素按照指定字符拼接成一个字符串	false	string	ECMAScript 1

数组循环遍历

方 法	语 法	说 明	改变原数组	返回值	js版本
for循环	for(var i = 0; i < array.length; i++) {console.log(arr[i]);}			/
for of	for (var item of array) {console.log(item);}	其中 item 是数组中的每一个元素，arr 是要遍历的数组名。	false	/	ECMAScript 6
forEach()	数组名.forEach(function (item, index) {console.log(item，index);})	其中 item 是数组中的每一个元素名，index 是对应元素的下标。	false	undefined	ECMAScript 5
map()	数组名.map(function (item, index) {console.log(item，index); return item})	其中 item 是数组中的每一个元素名，index 是对应元素的下标。返回一个长度一致的新数组	false	new array	ECMAScript 5
filter()	数组名.filter(function (item, index) {console.log(item，index); return 筛选条件})	其中 item 是数组中的每一个元素名，index 是对应元素的下标。返回一个筛选过后的新数组	false	new array	ECMAScript 5
every()	数组名.every(function (item, index) {console.log(item，index); return 判断条件})	其中 item 是数组中的每一个元素名，index 是对应元素的下标。根据判断条件返回真假，一假则假	false	boolean	ECMAScript 5
some()	数组名.some(function (item, index) {console.log(item，index); return 判断条件})	其中 item 是数组中的每一个元素名，index 是对应元素的下标。根据判断条件返回真假，一真则真	false	boolean	ECMAScript 5
find()	数组名.find(function(item, index){console.log(item，index); return 判断条件}})	其中 item 是数组中的每一个元素名，index 是对应元素的下标。根据判断条件返回第一个满足条件的item	false	返回第一个满足条件的item，没有符合的返回 undefined	ECMAScript 6
reduce()	数组名.reduce(function(total, item, index), 初始值)	其中 item 是数组中的每一个元素名，index 是对应元素的下标。total为初始值或先前返回的值	false	遍历完最后一次的返回结果	ECMAScript 5