JavaScript基本语法

常见的输出方式

  • 通过弹窗形式输出
    1. alert（输出的内容）；
    2. confirm（输出的内容）；
    3. prompt（输出的内容）；
  • 通过网页内容输出
    1. document.write(输出的内容);
  • 通过开发者工具控制台输出
    1. console.log(输出的内容); //普通输出
    2. console.warn(输出的内容); //警告输出
    3. console.error(输出的内容); //错误输出
  • 注意点:
  1. 如果输出的内容不是数字,就需要用引号括起来
  2. 区分大小写
  3. 每条代码写完都必须写 ; ,否则系统会自动添加,影响浏览器的性能

JavaScript常量

  1. 整型常量
  2. 实型常量
  3. 字符串常量
  4. 布尔常量
  5. 自定义常量 格式 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(条件表达式)  {
      条件满足执行的语句 ;
}
  1. if的第二种格式
if(条件表达式)  {
      条件满足执行的语句 ;
} 
else(条件表达式2) {
条件满足执行的语句 ;
}
  1. if的第三种格式
if(条件表达式)  {
      条件满足执行的语句 ;
} 
else if(条件表达式1) {
条件满足执行的语句 ;
}
...   ...
else(条件表达式) {
条件满足执行的语句 ;
}

注意点:

  1. ; 也是语句
  2. 如果条件满足执行的语句只有一条, 那么该处的大括号可以省略不写
  3. if可以嵌套使用
  4. 如果if省略大括号,那么ifelse/else 会就近和没有使用的if相匹配
  • switch选择解构
    switch结构格式
switch (条件表达式){
       case 表达式1:
                 语句1;
                 break;
       case 表达式2:
                 语句2;
                 break;       
       case 表达式3:
                 语句2;
                 break;
...  ...
       default :
               语句;
                break;
}

注意点:

  1. 条件表达式和表达式均可以是变量,表达式和常量
  2. case判断为===,会同时判断值和类型.
  3. 当其中一个case被匹配时,后面的case和default都会失效.
  4. default可以写在任意位置,但是都会最后才判断
  • while循环
    while循环格式:
while(条件表达式){//表达式结果为真时执行
     循环语句;
}

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

  • do while循环
    格式
do{
循环语句;
}while

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

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

局部变量和全局变量

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

break关键字和continue关键字

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

数组

  • 定义数组得方式:
  1. let 数组名称 = new Array(数组大小); 或者 let 数组名称 = new Array();
  2. let 数组名称 = new Array(数据,数据1,数据2,...);
  3. let 数组名称 = [数组大小]; 或者 let 数组名称 = [];
  4. let 数组名称 = [数组1,数值2,数值3,..];
    注意点:
  5. 数组储存的数据类型可以不一样
  6. 数组的容量不足时 会自动扩充
  7. 数组分配的存储空间不一定连续的,在浏览器中如果数据类型相同会尽量分配连续的空间,如果数据类型不一样,那么就不会分配连续的空间..
  8. 访问了未定义的索引,不会报错,会返回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]);
        }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 219,366评论 6赞 508
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,521评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 165,689评论 0赞 356
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,925评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,942评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,727评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,447评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,349评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,820评论 1赞 317
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,990评论 3赞 337
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,127评论 1赞 351
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,812评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,471评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,017评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,142评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,388评论 3赞 373
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,066评论 2赞 355

推荐阅读更多精彩内容

  • JavaScript基本语法
    一、变量 1.标识符 标识符(变量名、函数名等)的定义需要遵循一定的规则， 具体如下 (1)由大小写字母、数字、下...
    舞索威阅读 1,274评论 0赞 1
  • Javascript基本语法
    一个完整的JavaScript实现包含了三个部分： ECMAScript DOM BOM。 JS的特点： 解释型语...
    咻咻咻滴赵大妞阅读 456评论 0赞 7
  • JavaScript 基本语法
    JavaScript 的基本语法 语句 JavaScript 程序的执行单位为行（line），也就是一行一行地执行...
    hnscdg阅读 650评论 0赞 0
  • JavaScript基本语法
    JavaScript代码可以直接嵌在网页的任何地方，不过我们一般都把JavaScript代码放到 中： ...
    hi武林高手阅读 309评论 1赞 2
  • （二）JavaScript基本语法
    1.语句 这条语句先用var命令，声明了变量a，然后将1 + 2的运算结果赋值给变量a。1 + 2叫做表达式（ex...
    徵羽kid阅读 289评论 4赞 0