JavaScript基本语法

2019-04-16 本文已影响0人风暴java之灵

常见的输出方式

通过弹窗形式输出
1. alert（输出的内容）；
2. confirm（输出的内容）；
3. prompt（输出的内容）；
通过网页内容输出
1. document.write(输出的内容);
通过开发者工具控制台输出
1. console.log(输出的内容); //普通输出
2. console.warn(输出的内容); //警告输出
3. console.error(输出的内容); //错误输出
注意点:

如果输出的内容不是数字,就需要用引号括起来
区分大小写
每条代码写完都必须写 ; ,否则系统会自动添加,影响浏览器的性能

JavaScript常量

整型常量
实型常量
字符串常量
布尔常量
自定义常量格式 const 变量名称 = 内容;

JavaScript变量

ES6之前: var 变量名称 = 内容;
同时定义多个变量 var num,value,value1,..;
同时给多个变量赋同样的值 value1=num=value=15;
定义多个变量同时赋值 var num = 1,value = 2 , a = 3;
注意点:
1. 变量可以先使用后定义(浏览器的预解析机制)
2. 变量名称可以重复,后定义的会覆盖先定义的
ES6之后 let 变量名称 = 内容;
注意点:
1. 定义变量的方式同 var ;
2. 变量的名称不能重复,解决了排错难的问题;
3. let定义的变量不会预解析(所以不能先使用再定义)

关键字和保留字

关键字： 具有特殊意义的单词，并且不能用作变量名、函数名等。关键字严格区分大小写
保留字： 现在不是关键字，但是将来的版本可能会被定义为关键字的单词。

标识符

自己命名的函数名称，变量名称等被称为标识符。
标识符的命名规则： 只能由英文字母数字、“$”组成. 严格区分大小写,不能为关键字和保留字
标识符命名原则:见名知意 , 用驼峰命名法.

注释

行注释://注释的内容
块注释: /*注释的内容 */

//这是注释的内容
/* function(){   //这是块注释
   console.log(123);
 }
*/

数据类型

基本数据类型
数值类型: 所有数值
布尔类型: 只有false和true
字符串类型: 引号括起来的数据
空类型:
未定义类型: 只有undefined
引用数据类型
Object 对象类型
可以用typeof来获取数据的类型

let  type = typeof  数据;
console.log(type);

数据类型转换

基本类型转换为字符串类型
1. 通过变量名称.toString(); 转换 (该方法不能转换null undefined类型和常亮,因为常量不能被改变,该方法本质是改变原有的数据类型)
2. 通过 String(变量或常亮); 转换 (该方法可以转换全部基本类型,本质是根据原有的量创建一个新的量,不会改变原来的数据类型)
3. 通过变量名称或常亮名称 + ""/'' 转换 (该方法的本质是调用了String方法)

let num = 123 ;
let str = num.toString();//通过.toString()转换
let str1 = String(num); //通过String(); 转换
let str2 = num + "";  //通过第三种方法转换  推荐使用这种方法
let str3 =123 + "";

基本类型转换为数值类型
1. 通过 Number(变量或常量) 转换
2. 通过 +变量或常量 / -变量或常量 (该方法本质是调用了Number()方法, -变量或常量转换的结果为负数)
  注意点: null 空字符串 false 转换结果为 0 . undefined 和不全为数字的字符串转换结果为 NaN .
3. 通过parseInt()/parseFloat()提取字符串中的数值
  注意点: parseInt()/parseFloat()会将传入的数据当做字符串处理,该方法会从左到右的提取数值,遇到非数值立即停止,并返回提取到的数值,如果提取的第一个数据就是字母,就返回NaN.

let str = "123" ;
let num = Number(str); //返回123
let num1 = - str;//返回  -123 
let str1 = "123.3";
let num2 = parseInt(str1); //返回123

基本类型转换为布尔类型
通过Boolean(变量或常量); 转换
空字符串/0/NaN/undefined/null 转换结果为false 其余都是 true;

let num = 123;
let buer = Boolean(num); //结果为true

流程控制

选择结构if
1. if第一种格式

if(条件表达式)  {
      条件满足执行的语句 ;
}

if的第二种格式

if(条件表达式)  {
      条件满足执行的语句 ;
} 
else(条件表达式2) {
条件满足执行的语句 ;
}

if的第三种格式

if(条件表达式)  {
      条件满足执行的语句 ;
} 
else if(条件表达式1) {
条件满足执行的语句 ;
}
...   ...
else(条件表达式) {
条件满足执行的语句 ;
}

注意点:

; 也是语句
如果条件满足执行的语句只有一条, 那么该处的大括号可以省略不写
if可以嵌套使用
如果if省略大括号,那么ifelse/else 会就近和没有使用的if相匹配

switch选择解构
switch结构格式

switch (条件表达式){
       case 表达式1:
                 语句1;
                 break;
       case 表达式2:
                 语句2;
                 break;       
       case 表达式3:
                 语句2;
                 break;
...  ...
       default :
               语句;
                break;
}

注意点:

条件表达式和表达式均可以是变量,表达式和常量
case判断为===,会同时判断值和类型.
当其中一个case被匹配时,后面的case和default都会失效.
default可以写在任意位置,但是都会最后才判断

while循环
while循环格式:

while(条件表达式){//表达式结果为真时执行
     循环语句;
}

注意: while语句可以一次都不执行

do while循环
格式

do{
循环语句;
}while

注意: dowhile语句最少执行一次

for循环
for循环格式

for(初始化表达式;条件判断语句;循环后增量表达式){ 
         循环语句;
}
//注意:初始化表达式,条件判断语句,循环后增量表达式都可以不写,此时默认条件为真

局部变量和全局变量

在{}里面定义的变量叫局部变量,在{}外面定义的叫全局变量
注意: 通过var定义的变量不区分局部和全局变量

break关键字和continue关键字

break的作用是结束整个循环,break后面不能写语句,因为不会执行
continue的作用是结束本次循环,continue后面也不能写语句

数组

定义数组得方式:

let 数组名称 = new Array(数组大小); 或者 let 数组名称 = new Array();
let 数组名称 = new Array(数据,数据1,数据2,...);
let 数组名称 = [数组大小]; 或者 let 数组名称 = [];
let 数组名称 = [数组1,数值2,数值3,..];
注意点:
数组储存的数据类型可以不一样
数组的容量不足时会自动扩充
数组分配的存储空间不一定连续的,在浏览器中如果数据类型相同会尽量分配连续的空间,如果数据类型不一样,那么就不会分配连续的空间..
访问了未定义的索引,不会报错,会返回undefined.

数组的遍历
建议通过for循环遍历

let arr = [];   //定义数组
for(let i = 0;i < arr.length;i++){ //通过for循环遍历
  console.log(arr[i]);
}

数组的解构(ES6新增的一种赋值方式)

let arr =[1,3,5];
let [a,b,c] = arr;
console.log(a,b,c);//结果为 a保存的值为1,b保存的值为3,c保存的值为5

数组的解构中等号格式两边完全一样才能完全解构

let [a,b,c] =[1,3,5]; //完全解构

数组解构时,左边的个数可以比右边少(左边有多少个就解构多少个,其余的不接收)

let arr =[1,3,5];
let [a,b] = arr;  // 结果为a保存的值为1,b保存的值为3

数组解构时,右边的个数可以比左边少(右边有多少个就解构多少个,其余的数为undefined)

let arr =[1,3];
let [a,b,c] = arr;  // 结果为a保存的值为1,b保存的值为3,c保存的值为undefined

数组解构时,左右个数不一样,可以给左边设定默认值,右边有的数据会把默认值覆盖

let arr =[1,3];
let [a=10,b=100,c=666] = arr;  // 结果为a保存的值为1,b保存的值为3,c保存的值为666

数组解构时,可以通过ES6新增的扩展运算符 ... 打包剩余的数据
注意点: 扩展运算符只能写在最后一个变量之前

let arr =[1,3,5,7];
let [a,b,...c] = arr;  // 结果为a保存的值为1,b保存的值为3,c保存的为数组[5,7]

数组的增删改查
改变数组中某个元素的值

let arr =[1,3,5];
arr[2] = 10;  
console.log(arr); // 结果为arr=[1,10,5]

改变数组中某几个连续的元素的值可以用splice()方法

let arr =[1,3,5,8,7];
arr.splice(1,2,"a","b");//第一个参数表示从哪个索引开始替换,第二个参数表示替换几个,第三个参数开始表示替换的内容
console.log(arr);//结果为 arr=[1,"a","b",8,7]

在数组的最后添加一个或多个元素可以用push()方法,该方法会返回添加元素之后数组的总长度

let arr =[1,3,5];//在最后添加一个元素
let length = arr.push("a"); 
console.log(arr); // 结果为arr=[1,3,5,"a"]
console.log(length);//结果为4

let arr =[1,3,5]; //在后面添加两个元素
let length = arr.push("a",2); 
console.log(arr); // 结果为arr=[1,3,5,"a",2]
console.log(length);//结果为4

在数组的最前面添加一个或多个元素可以用unshift()方法,该方法会返回添加元素之后数组的总长度

let arr =[1,3,5];//在最后添加一个元素
let length = arr.unshift("a"); 
console.log(arr); // 结果为arr=["a",1,3,5]
console.log(length);//结果为4

let arr =[1,3,5];//在前面添加两个元素
let length = arr.unshift("a",2); 
console.log(arr); // 结果为arr=["a",2,1,3,5]
console.log(length);//结果为5

删除数组中最后一个元素用pop();方法该方法会返回被删除的元素

let arr =[1,3,5];//删除最后一个元素
let str = arr.push(); 
console.log(arr); // 结果为arr=[1,3]
console.log(str);//结果为5

删除数组中第一个元素用shift();方法该方法会返回被删除的元素

let arr =[1,3,5];//删除最后一个元素
let str = arr.shift(); 
console.log(arr); // 结果为arr=[3,5]
console.log(str);//结果为1

删除索引为2的元素用splice();方法

let arr =[1,3,5];
arr.splice(2,1);//参数1:从什么位置开始删除 参数2:删除多少个
console.log(arr);//结果为 arr=[1,3]

数组的常用方法
清空数组的方法

 let arr = [1,2,3,3,4];    
        //arr = [];  //方法1
        //arr.length = 0;  //方法2 
        arr.splice(0,arr.length); //方法3
        console.log(arr);//结果返回空数组

拼接数组两种方法一种concat()方法,一种用扩展运算符(生成新数组,原数组不受影响)

let arr =[1,3,5];
let arr2 = [2,4];
let arr3 = arr.concat(arr1);
console.log(arr3); //结果为 [1,3,5,2,4];

let arr =[1,3,5];
let arr2 = [2,4];
let arr3 = [...arr,...arr1]; //推荐使用这一种
console.log(arr3); //结果为 [1,3,5,2,4];

截取数组中的某一段,用 slice();方法

let arr =[1,3,5,7,9];
let arr2 = arr.slice(1,4);//包左不包右,包括开头的索引,但不包括结束的索引
console.log(arr2);//结果为[3,5,7]

将数组转换为字符串

let arr =[1,3,5];
let arr2 = arr.toString();
console.log(arr2);//结果为1,3,5 
console.log(typeof arr2);// 结果为string

将数组转换为指定格式的字符串,用join()方法.

let arr =[1,3,5];
let arr2 = arr.join("*"); 不传递参数就是默认调用arr.toString()方法,传递参数后会将参数作为元素和元素的连接符号
console.log(arr2);//结果为1*3*5 
console.log(typeof arr2);// 结果为string

查找某个元素的索引用indexOf();方法

let arr =[1,3,5];
let a = arr.indexOf(3); //默认从左向右查找,找到立即停止,找不到返回-1
console.log(a);//结果为1

let arr =[1,3,5];
let a = arr.lastIndexOf(3); //默认从右往左查找,找到立即停止,找不到返回-1
console.log(a);//结果为1

let arr =[1,3,5,6,3];
let a = arr.indexOf(3,2); //查找3,从索引2开始查找
console.log(a);//结果为4

判断数组是否包含某个元素用includes();方法(包含返回true 否则返回false) 或者用indexOf();

let arr =[1,3,5];
let a = arr.includes(3);
console.log(a);//结果为true

二维数组
二维数组是指在数组中的每一个元素又是一个数组.

let arr = [[1,3],[2,4],[3,5]]; //二维数组
let arr1 = arr[0]; //获取二维数组的第一个元素
console.log(arr1); //结果 [1,3]
let arr11 = arr[1][1]; //获取二维数组中的第二个元素的第二个元素
console.log (arr[1][1]); //结果 4

遍历二维数组

let arr = [[1,2],[3,4],[5,6]];
for(let i = 0;i <arr.length;i++){
        let arr1 = arr[i];
      for(let j =0;j <arr1.length;j++) {
         console.log(arr1[j]);
        }
}