未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

最近开始把精力放在重新复习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 复制代码 布尔字面量

只有 true 和 false :

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 垂直制表符 ' 单引号 " 双引号 \ 反斜杠字符(\) 本部分内容到这结束

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:【重温基础】1.语法和数据类型
本站链接:https://www.codesec.net/view/621049.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(59)