javascript基础语法总结

ECMA基础语法

基础用法

​ 1. 书写位置

​ 1.1 内部

​ 写在html文件里面的底部，body的上面，用script标签包裹住

    <script>
        alert('在这车水马龙的人间，你又能记住我几年？');
    </script>

​ 注意点：写底部是因为代码执行的顺序

​ 1.2 内联

​ 写在标签的内部

    <button onclick="alert('不管啦')">点击我 我就月薪过万</button>

​

​ 1.3 外联

​ 通过src连接js文件

    <script src="./外联.js"></script>

​ 注意点： 标签里面不能写代码，会被忽略

​

​ 2.注释

​ 2.1 单行注释

// ctrl + /
// 单行

​ 2.2 多行注释

// shift + alt + a
/* 多行
多行
多行 */

​ 3. 结束符

• 代表语句结束

• 英文分号 ;

• 可写可不写（现在不写结束符的程序员越来越多）

• 换行符（回车）会被识别成结束符 ,所以一个完整的语句，不要手动换行

• 因此在实际开发中有许多人主张书写 JavaScript 代码时省略结束符

• 但为了风格统一，要写结束符就每句都写，要么每句都不写（按照团队要求.）

​ 4 . 输入输出

​ 4.1 输入

    prompt('输入你的回答');

​ 4.2 输出

​ 1. document.write( )

    document.write('输出你的回答')

​ 2. alert(‘’)

    alert('输出你的回答')

​ 3. console.log()

     console.log('控制台打印') //  f12控制台查看

变量

​ 定义：

​ 变量是存储数据的一个容器

​ 1.变量的基本使用

​ 1.1 变量的声明

          let 变量名
          例如: let age;          

​ let : 关键字

​ 变量名：标识符，取名一般见名知意

​ 1.2 变量的赋值

​ *在变量名后加上 ‘=’ 来赋值，赋值也叫做初始化变量。

          let age;
          age = 18;

​ **也可以声明变量的同时赋值。

          let age = 18;

​ 1.3 更新变量

​ 变量赋值后，我们还可以给它重新赋值

          let age =18;
          //重新赋值
          age = 20;

​ 注意不能重新声明，因为let不允许多次声明

          //这是错误写法，程序会报错
          let age = 18;
          let age =20;

​ 1.4 声明多个变量

​ 可以同时声明多个变量，只要在变量后加个逗号分隔即可

          let age = 18,
              name = '梨花';

​

​ 2.变量的命名规则和规范

​ 1 . 不能使用关键字

​ 比如： let、var、if、for

​ 2. 不能使用数字开头，只能由 下划线、字母、数字、$组成

​ 3.字母严格区分大小写，如 Age 和 age 是不同的变量

​ 4. 起名要有意义

​ 5.使用驼峰命名法

​ 第一个单词首字母小写，后面每个单词首字母大写。

​ 例：userName

​

​ 扩展：

​ let 和var的区别

​ 1. var 声明:

• 可以先使用再声明 (不合理)

• var 声明过的变量可以重复声明(不合理)

• 比如变量提升、全局变量、没有块级作用域等等

  ​ 2. let 声明：

• let 不可以重复声明

• 是块作用域

• 声明不会提升到函数作用域顶部

数据类型

​ JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认！

• 基本数据类型
  • number 数字类型
  • string 字符串型
  • boolean 布尔类型
  • null 空类型
  • undefined 未定义型
• 引用数据类型
  • object 对象
  • function 函数
  • array 数组

数字类型 number

• 正数、负数、小数(浮点数)等 统一称为 数字类型。

  let num1 = 123; //整数
  let num2 = 12.3; //小数
  let num3 = -123; //负数
  

字符串型string

​ 介绍：

​ 单引号（ ’ ’ ） 、双引号（ " "）或反引号( ``)包裹的数据都叫字符串

let str = '122'; //数字被单引号包裹后就成了字符串
let str2 = '你好'; //单引号
let str3 =  "我很好"; //双引号
let str4 = '';  //空字符串

注意点：

1. 无论单引号或是双引号必须成对使用

   //以下是错误示范
   let name = “';
   

2. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）

   //正确嵌套
   let name = '""';
   let name2 = "''";
   
   //下面是错误嵌套
   let name3 = '''';
   let name4 = """";
   

3. 必要时可以使用转义符 \，输出单引号或双引号

模板字符串

​ 以前的字符串拼接方法，拼接麻烦！

 let name = '佐助';
 let age = 19;
 document.write('你们好，我叫' + name + '今年' + age '岁了！');

​ 现在是用模板字符串

• 符号 `` （反引号）
• 在英文输入模式下按键盘的tab键上方那个键（1左边那个键）
• 内容拼接变量时，用 ${} 包住变量

 let name = '佐助';
 let age = 19;
 document.write(`你们好，我叫${
     name},今年${
     age}岁了!`);

布尔类型 boolean

​ 表示肯定或否定时在计算机中对应的是布尔类型数据

​ 有两个值：

​ true(真) 和 false (假)

 let tru = true;
 let fal = false;

未定义型 undefined

​ 介绍：

• 只有一个值，就是undefined

• undefined由null派生来

• undefined是一个假值

  console.log(null === undefined);
  //结果为true
  

​ 出现undefined的情况

1. 只声明变量，不赋值的情况下，变量的默认值为 undefined

   let name;
   console.log(name);
   //结果为undefined
   

​ 几种情况总结

​

情况	说明	结果
let age; console.log(age)	只声明 不赋值	undefined
console.log(age)	不声明 不赋值 直接使用	报错
age = 10;console.log(age)	不声明 只赋值	10(不提倡)

空类型 null

• 空类型的值是null
• null是一个假值

let name = null;
console.log(typeof null);
//结果是object
//为什么？
//因为逻辑上讲，null值表示一个空对象指针

​ null 和 undefined 区别：

1. undefined 表示没有赋值
2. null 表示赋值了，但是内容为空

​ null的应用场景

• 将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

检测类型 typeof

• typeof 关键字检测数据类型

  let name = '鸣人';
  let age = 19;
  let flag = false;
  let unde ;
  console.log(typeof name); //string
  console.log(typeof age); //number
  console.log(typeof flag) //boolean
  console.log(typeof unde) //undefined
  

数据类型转换

• JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。

• 把一种数据类型的变量转换成我们需要的数据类型。

显式转换

1. Number(数据)

   • 转成数字类型

   • 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字

   • NaN也是number类型的数据，代表非数字

     let num = '34';
     console.log(Number(num)); //结果是34
     

2. parseInt(数据)

   • 只保留整数

     let num3 = 34.4444;
     console.log(parseInt(num3));  //结果是34
     

3. parseFloat(数据)

   • 可以保留小数

      let num4 = 34.4444;
      console.log(parseFloat(num4)); //结果是34.4444
     

​ 转换字符串型

1. String(数据)

   let num2 = 123;
   let num = String(num2);
   console.log(num);  //结果是123，但是类型已经转换成了字符串
   console.log (typeof num);  // string
   

2. 变量.toString(进制)

     let num2 = 123;
     let number = num2.toString();
     console.log(typeof number)  //结果是string
   

隐式转换

• 某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

  规则：

  • 号两边只要有一个是字符串，都会把另外一个转成字符串

    let num2 = 123;
    let num1 = '' + num2;
    console.log(typeof num1)  //结果是string
    

  • 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

    console.log(1 * 1);  //结果是1
    console.log('1' * 1); //结果是1
    

  • +号作为正号解析可以转换成Number

    console.log(typeof + '123'); //结果是number
    console.log(+ '11' + 11); //结果是22
    

运算符

算术运算符

• 主要包括加、减、乘、除、取余（求模）。

  • +：求和

    let num1 = 20;
    let num2 = 20;
    console.log(num1 + num2);
    //结果是40
    

  • -：求差

    let num1 = 30;
    let num2 = 20;
    console.log(num1 - num2);
    //结果是10
    

  • *：求积

    let num1 = 2;
    let num2 = 20;
    console.log(num1 * num2);
    //结果是40
    

  • /：求商

    let num1 = 20;
    let num2 = 2;
    console.log(num1 / num2);
    //结果是10
    

  • %：取模（取余数） 开发中经常作为某个数字是否被整除

    let num1 = 20;
    let num2 = 6;
    console.log(num1 % num2); // 结果是2
    

  ​ 取余数是指整数除法中被除数未被除尽部分，且余数的取值范围 为0到除数之间（不包括除数）的整数。

赋值运算符

• 将等号右边的值赋予给左边, 要求左边必须是一个容器 ****

  优点：写法更加简便

  例：sum = sum + i 相等于 sum += i