资讯专栏INFORMATION COLUMN

【重温基础】1.语法和数据类型

Darkgel / 2487人阅读

摘要:语法和数据类型正文开始本章节复习的是中的基本语法,变量声明,数据类型和字面量。声明一个块作用域的局部变量,可赋一个初始值。变量声明有三种方式如,声明局部变量和全局变量。

最近开始把精力放在重新复习JavaScript的基础知识上面,不再太追求各种花枝招展的前端框架,框架再多,适合实际项目才是最重要。
上星期在掘金发布了几篇文章,其中最大块算是 【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理),也是让我好好把这些规范复习了一遍,虽然不是完全的原创,而是自己的一些复习笔记,但是还是让我感觉还是挺有用的,在项目开发过程中,有有意识的去使用到这些新的规范。
这次开始复习 MDN 这个系列的文章,巩固好自己的基础,也让自己养成记录学习的习惯,当然这些文章我也会同步到自己的博客。
希望自己的文章会对各位有所帮助,也欢迎各位大佬指点。

1.MDN 语法和数据类型

正文开始

本章节复习的是JS中的基本语法,变量声明,数据类型和字面量。

首先要记住:JavaScript 对大小写敏感,即var att;var Att 是两个不同变量。

1.注释
// 单行注释
/*
    多行注释
*/
2. 声明

JavaScript有三种声明方式:

var 声明一个变量,可赋一个初始值。

let 声明一个块作用域的局部变量,可赋一个初始值。

const 声明一个块作用域的只读命名的常量。

声明变量

变量的名字又叫做“标识符”,必须以字母、下划线(_)或者美元符号($)开头,并且区分大小写。
变量声明有三种方式:

var a = 1,声明局部变量和全局变量。

a = 1,声明一个全局变量,且在严格模式报错,不应该使用。

let a = 1,声明一个块作用域的局部变量。

注意

若没有为变量赋初始值,则值默认为undefined

let a;
console.log(a);   // undefined

若没有声明变量而直接使用,会抛出ReferenceError错误;

console.log(b);   // Uncaught ReferenceError: b is not defined

当变量值为undefined时,布尔值环境会当做false,数值环境会当做NaN

var a;
if(!a){
    console.log("a为undefined"); // a为undefined
}
a + 1;  // NaN

当变量值为null时,布尔值环境会当做false,数值环境会当做0

let a = null;
if(!a){
    console.log("a为unll"); // a为unll
}
a + 1;  // 1
变量作用域

全局变量:即声明在函数之外,当前文档所有地方都可以访问;
局部遍历:即声明在函数内部,仅在当前函数内可以访问;
在ES5之前没有语句块作用域的概念,并只能使用var进行声明,用var声明的变量,在函数内和全局都可以访问,而在ES6开始,将只能在声明的作用域中使用:

if(true){
    var a = 1;
}
a; // 1

if(true){
    let b = 2;
}
b; // ReferenceError: b is not defined
变量声明提前

即将变量的声明提升到函数或语句的顶部,并返回undefined直到变量被初始化操作。
千万注意
ES5以及之前,才有变量声明提前,在ES6开始就不存在变量提升。

// ES5及之前
console.log(a);   // undefined
var a = 1;
console.log(a);   // 1

// ES6开始
console.log(b);   // Uncaught ReferenceError: b1 is not defined
let b = 2;
console.log(b);   // 2
函数提升

函数声明有两种方式:函数声明函数表达式两种方式:

// 函数声明
f();   // "hi leo"
function(){
    console.log("hi leo");
};

// 函数表达式
g();   // Uncaught TypeError: g is not a function
var g = function(){  // 换成 let 声明也一样
    console.log("hi leo");
}
全局变量

全局变量默认是全局对象(window)的属性,常常使用window.variable语法来设置和访问全局变量。
这边还需要记住:

ES5之中,顶层对象的属性等价于全局变量(浏览器环境中顶层对象是window,Node中是global对象);

ES6之中var/function声明的全局变量,依然是顶层对象的属性,但是let/const/class声明的全局变量不属于顶层对象的属性,即ES6开始,全局变量和顶层对象的属性是分开的。

// ES5
var a = "leo";
window.a; // "leo"

// ES6
let b = "leo";
window.b; // undefined
常量

ES6之后我们可以使用const来声明一个只读的常量,并且在声明时必须赋值,之后在相同作用域中不能赋值不能重新声明,否则报错。

const a;   
// Uncaught SyntaxError: Missing initializer in const declaration

const b = "leo";
b = "hi";
// Uncaught TypeError: Assignment to constant variable.

function f(){
    const a1 = "hi";
    console.log(a1);
}
f(); // "hi"
const a1 = "hi leo";
a1; // "hi leo"

尽管const声明的变量不能直接修改值,但是对于对象和数组,却是不受保护可以修改的:

const a = {name:"leo",age:25};
a.name = "pingan"; // a => {name: "pingan", age: 25}

const b = ["hi", "leo"];
b[1] = "pingan";   // b => ["hi", "pingan"]
3.数据结构和类型 数据类型

JavaScript中一共分为7中不同类型:

六种原型数据类型:

1.Boolean : 布尔值,true和false;

2.null : 对大小写敏感(即null/Null/NULL完全不同);

3.undefined : 空类型,变量未定义时候的值;

4.Number : 数值类型,如100;

5.String : 字符串类型,如"hi pingan";

6.Symbol(ES6新增) : 表示一种唯一且不可变的数据;

以及Object对象类型

数据类型转换

由于JavaScript是门动态类型语言,因此在开发过程可以不需要指定数据类型,在执行时会自动转换:

var a = 100;
a = "hi leo"; // 这样不报错

另外还有:

let a1 = "10";
let b1 = 20;
a1 + b1; // 30

let a2 = "leo " + 10 + " age"; // "leo 10 age"

"10" - 5;  // 5
"10" + 5;  // 105

转换字符串为数字小技巧
小技巧很多,这里说个最简单的:

// 这样不会使两个数字计算总和:  
"1.1" + "1.2";   // "1.11.2"

// 实际上要这样:
+"1.1" + +"1.2"; // 2.3
4.字面量

字面量是用来表示如何表达这个值,简单理解就是变量赋值时右边的都是字面量。比如:

let a = "hi leo";

hi leo为字符串字面量,a为变量名。
字面量分为七种:

1.数组字面量

2.布尔字面量

3.浮点数字面量

4.整数字面量

5.对象字面量

6.正则字面量

7.字符串字面量

数组字面量

使用数组字面量创建数组的时,指定元素的值,并作为数组的初始化,从而确定数组长度。

let a = ["hi","leo","hello","pingan"];
a[1];     // "leo"
a.length; // 4

若使用多余逗号,作为数组字面量,则值为undefined,并且数组长度也会正常计算:

let a = ["hi", ,"leo"];
a[0];  // "hi"
a[1];  // undefined
a.length; // 3
布尔字面量

只有truefalse

let a = true;
整数字面量

整数可以用十进制(基数为10)、十六进制(基数为16)、八进制(基数为8)以及二进制(基数为2)表示。

浮点数字面量

浮点数字面量组成:

一个十进制的整数,可以带正负号;

小数点

小数部分(只能十进制)

指数部分

let a = 3.14;  // 3.14
let b = -.001; // -0.001
let c = -3.14e+12; // -3.14*1012
let d = .1e-23;// 0.1*10 - 23 = 10-24 = 1e-24
对象字面量

对象字面量是由{}包含一个或多个 键:值 对的列表:

let a1 = "hi leo";
let a2 = function(){ return "my name is pingan" };

let obj = {
    n1 : "pingan",
    n2 : a1,
    n3 : a2()
}
obj; // {n1: "pingan", n2: "hi leo", n3: "my name is pingan"}

也可以使用任意数字或字符串作为对象属性的名字,但必须用""引号包裹:

let obj = {
    "" : "hi leo",
    "!" : "hi pingan",
    2 : "hi number"
}
obj;     // {2: "hi number", "": "hi leo", !: "hi pingan"}
obj[""]; // "hi leo"
obj[2];  // "hi number"
正则字面量

使用字符被正斜杠“/”围起来的表达式:

var a = /ab+c/; 
字符串字面量

使用单引号("")或者双引号("")括起来的字符串:

let a = "leo";
a.length;  // 3

ES6中新增了模板字符串,作用于:

方便拼接字符串

有效实现字符串换行

防止注入攻击

建立基于字符串的高级数据抽象

// 拼接字符串
let name = "leo";
let a = `
    hi ${name}
`;
a; // "hi leo"

// 换行
let b = `
    hi
    leo
`;
b;
// "
//     hi
//     leo
// "

常用特殊字符:

字符 含义
b 退格符
f 换页符
n 换行符
r 回车符
t Tab (制表符)
v 垂直制表符
" 单引号
" 双引号
反斜杠字符()

本部分内容到这结束

Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推荐 https://github.com/pingan8787...
JS小册 js.pingan8787.com

欢迎关注微信公众号【前端自习课】每天早晨,与您一起学习一篇优秀的前端技术博文 .

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99855.html

相关文章

  • 重温基础16.JSON对象介绍

    摘要:系列目录复习资料资料整理个人整理重温基础篇重温基础对象介绍本章节复习的是中的关于对象相关知识。概念概念有三点全称对象表示法。对象没有分号,而对象有。序列化对象时,所有函数及原型成员都会被忽略,不体现在结果上。 本文是 重温基础 系列文章的第十六篇。今日感受:静。 系列目录: 【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理) 【重温基础】1-14篇 【重温基础】15...

    0x584a 评论0 收藏0
  • 重温基础】5.表达式运算符

    摘要:系列目录复习资料资料整理个人整理重温基础语法和数据类型重温基础流程控制和错误处理重温基础循环和迭代重温基础函数本章节复习的是中的表达式和运算符,用好这些可以大大提高开发效率。 本文是 重温基础 系列文章的第五篇。今日感受:家的意义。 系列目录: 【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理) 【重温基础】1.语法和数据类型 【重温基础】2.流程控制和错误处理 【重温基...

    马忠志 评论0 收藏0
  • 重温基础10.数组

    摘要:本文是重温基础系列文章的第十篇。返回一个由回调函数的返回值组成的新数组。返回一个数组迭代器对象,该迭代器会包含所有数组元素的键值对。回调函数接收三个参数,当前值当前位置和原数组。 本文是 重温基础 系列文章的第十篇。 今日感受:平安夜,多棒。 系列目录: 【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理) 【重温基础】1.语法和数据类型 【重温基础】2.流程控制和错误...

    DangoSky 评论0 收藏0
  • 重温基础14.元编程

    摘要:本文是重温基础系列文章的第十四篇。元,是指程序本身。有理解不到位,还请指点,具体详细的介绍,可以查看维基百科元编程。拦截,返回一个布尔值。 本文是 重温基础 系列文章的第十四篇。 这是第一个基础系列的最后一篇,后面会开始复习一些中级的知识了,欢迎持续关注呀! 接下来会统一整理到我的【Cute-JavaScript】的JavaScript基础系列中。 今日感受:独乐乐不如众乐乐...

    cc17 评论0 收藏0
  • 重温基础12.使用对象

    摘要:本文是重温基础系列文章的第十二篇。注意对象的名称,对大小写敏感。基础用法第一个参数是目标对象,后面参数都是源对象。用途遍历对象属性。用途将对象转为真正的结构。使用场景取出参数对象所有可遍历属性,拷贝到当前对象中。类似方法合并两个对象。 本文是 重温基础 系列文章的第十二篇。 今日感受:需要总结下2018。 这几天,重重的感冒发烧,在家休息好几天,伤···。 系列目录: 【复习资料...

    garfileo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<