Javascript基础（一）

引用：
输出
字节与字符的区别
字面量
变量
操作符
语句
注释
数据类型：基本类型、引用类型
类型检测
字符串
对象
函数
作用域
局部变量|全局变量
提升

引用：

a）引入外部文件：

<script src="js/index.js" type="text/javascript"></script>

b）页头引入 c）页中引入 d）元素事件中引入：

<!DOCTYPE html>
<html>
<head><title></title>// 页头引入, 需要快速加载的内容<script type="text/javascript">function alertMessage() {}</script>
</head>
<body><input type="button" onclick="alertMessage()" value="按钮"/>// 不推荐，页中引入<script type="text/javascript">function alertMessage() {}</script>// 元素事件中引入<input type="button" οnclick="alert("绿叶学习网");" value="按钮"/>// 推荐，页尾引入, 不影响页面结构样式加载的速度<script type="text/javascript">function alertMessage() {}</script>
</body>
</html>

输出

输出数据的方式：

a）window.alert() 弹框输出b) document.write() 将内容写到HTML文档流中c) innerHTML写入HTML元素中d）console.log() 写到浏览器的控制台

字节与字符的区别

字节(Byte)是计量单位，表示数据量多少，是计算机信息技术用于计量存储容量的一种计量单位，通常情况下一字节等于八位。

字符(Character)计算机中使用的字母、数字、字和符号。一般在英文状态下一个字母或字符占用一个字节，一个汉字用两个字节表示。
字节与字符：

ASCII 码中，一个英文字母（不分大小写）为一个字节，一个中文汉字为两个字节。
UTF-8 编码中，一个英文字为一个字节，一个中文为三个字节。
Unicode 编码中，一个英文为一个字节，一个中文为两个字节。
符号：英文标点为一个字节，中文标点为两个字节。例如：英文句号 . 占1个字节的大小，中文句号。占2个字节的大小。
UTF-16 编码中，一个英文字母字符或一个汉字字符存储都需要 2 个字节（Unicode 扩展区的一些汉字存储需要 4 个字节）。
UTF-32 编码中，世界上任何字符的存储都需要 4 个字节。

字面量

固定值称字面量，字面量是一个恒定的值**

     a) 数字NUmber： 整数、小数、科学计数eb) 字符串String：使用单引号或者双引号c) 表达式： 用于计算d) 数组Array：[]e) 对象Object：{}f) 函数：function

变量

用于存储数据值，变量是一个名称**
a) 定义：用var、let、cont 来定义，用等号（=）来赋值

var a; // 声明变量，变量得到提升
var b = 1; // 初始化 ，变量不会得到提升

操作符

a) 算术、位运算符：+ - * / %(取模，余数) ++(自增) --(自减)
b) 赋值运算符: = += -= *=  /=  %=
c) 条件、比较、逻辑运算符： ==  !=  < >  <= >= === !==
d) 逻辑运算符：&& || !

// 字符串和数值相加变成组合字符串

语句

向浏览器发出命令，用分号分隔。**

5）关键字：用于标识要执行的操作。eg: if else int var…

注释

a) 单行注释： // ...
b) 多行注释： /* ... */

数据类型：基本类型、引用类型

ECMAScirpt 变量有两种不同的数据类型：基本类型（原始类型），引用类型（对象类型）。

基本类型：undefined null bollean string number symbol bigInt

Undefined：一个没有被赋值的变量的默认值

Null：是一个只有一个值的特殊类型，表示一个空对象引用。可以通过将变量的值设置为 null 来清空变量。

Boolean布尔类型： true、false

Number数字类型：分为正数和负数

String字符串类型：用于表示文本数据。它是一组16位的无符号整数值的“元素”。在字符串中的每个元素占据了字符串的位置。第一个元素的索引为0，下一个是索引1，依此类推。字符串的长度是它的元素的数量。

BigInt: 用任意精度表示整数。可以安全地存储和操作大整数，甚至可以超过数字的安全整数限制

Symbol符号类型：符号类型是唯一且不可修改的，可以用来作为Object的key的值

基本类型特征：

a) 基本类型的值是不可变的，（操作后返回的都是新值，原始的被销毁了）
b）比较是它们的值的比较
c) 数据类型不同的进行比较，自动进行了数据类型的隐式转换。 == 只进行值的比较， ===不仅进行值得比较，还要进行数据类型的比较
d) 基本类型的变量是存放在栈内存（Stack）里的

引用类型： Object Array Date RegExp Function

引用类型的特征：

a) 值是可变的
b) 比较是引用的比较
c) 引用类型的值是保存在堆内存（Heap）中的对象（Object）

var a = {name:"percy"};
var b;
b = a;
a.name = "zyj";
console.log(b.name);    // zyj
b.age = 22;
console.log(a.age);     // 22
var c = {name: "zyj",age: 22
};

类型检测

类型检测： typeof、instanceof、constructor属性

a) typeof 只能用于检测基本类型的数据，引用类型检测结果都是Object。能检测出的类型： undefinde null boolean string number symbol object function

var a;
typeof a;    // undefined
a = null;
typeof a;    // object
a = true;
typeof a;    // boolean
a = 666;
typeof a;    // number
a = "hello";
typeof a;    // string
a = Symbol();
typeof a;    // symbol
a = function(){}
typeof a;    // function
a = [];
typeof a;    // object
a = {};
typeof a;    // object
a = /aaa/g;
typeof a;    // object undefined 和 null 的区别
typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

b) instanceof 检测一个引用类型的变量具体是哪中类型

({}) instanceof Object              // true
([]) instanceof Array               // true
(/aa/g) instanceof RegExp           // true
(function(){}) instanceof Function  // true

c) constructor属性：（推荐）
返回所有变量的构造函数

"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }

字符串

a) 字符串语法：

var str = 'hello';
var str = "hello";
var str = "'hello I'm Lotus" //字符串引号与内容引号不同
var str = 'hello I\'m Lotus' //转义字符
var str = "hello \" Lotus\""
// 特殊字符：
\' 单引号
\" 双引号
\\ 反斜杠
\n 换行
\r 回车
\t tab制表符
\b 退格符
\f 换页符

b) 字符串属性和方法：

length：计算返回字符串长度

var str = "Lotus";
var str1 = ' hello "小微"'
document.write(str.length); // 5
document.write(str1.length); // 11

chartAt(): 返回指定索引位置的字符

chartCodeAt(): 返回指定所以位置的Unicode值

concat() ：字符串连接，返回连接后的字符串

indexOf() ：返回查找指定字符第一次出现的位置

lastIndexOf() ：返回查找指定字符最后一次出现的位置

match() ：找到一个或者多个正则表达式的匹配

replace() ：替换与正则表达式匹配的子串

search() ：检索与正则表达式相匹配的值

slice()：返回提取的字符串片段

split() ：把字符串分隔为子字符串数组

substr() ：从起始索引提取字符串中指定数目的字符

substring()：提取字符串两个指定的索引之间的字符

toLowerCase()：把字符串转为小写

toUpperCase() ：把字符串转为大写

toString() ：返回字符串对象值

trim() ：移除字符串首尾空白

valueOf() ：返回某个字符串对象的原始值

let str = "hello lotus";
document.write(str.charAt(1)); // e
document.write(str.charCodeAt(1)); // 101let str1 = 'hello wang';
document.write(str.concat(str1)); //hello lotushello wang
document.write(str.concat(str1, 'abc', '123')); // hello lotushello wangabc123
document.write(str); // hello lotus

对象

拥有属性和方法的数据。对象也是一个变量，但对象可以包含多个值（多个变量)。我们常认为对象是键值对的容器。

a) 对象定义：

<script>var person = {firstName:"John", lastName:"Doe", age:50};
</script>

b) 键值对：name: value,通常称为对象属性。

c) 访问对象属性：

<script>var person = {firstName:"John", lastName:"Doe", age:50};// 1） let name = person.firstName + person.lastName；let age = person.age;// 2) let name = person['firstName'] + person['lastName']let age = person["age"];
</script>

d) 对象方法：对象的方法定义了一个函数，并作为对象的属性存储。访问方法的区别是多一个()，作为函数。

<script>let obj = {name: 'lotus',age: 24,hover: function () {alert('eat')},fullInfo: function () {return this.name + this.age;}}obj.hover()document.write(obj.fullinfo());
</script>

函数

是由事件驱动或者被调用时执行的可重复执行的代码块。是可以通过外部代码调用的一个 “子程序”。每个函数都是一个Function对象

a) 函数定义：

函数声明：通过关键字function定义，把函数作为变量来声明。函数声明后不会立即执行，会在我们需要的时候调用到

<script>function myFunction(a, b) {return a * b;}// js对大小写敏感，function必须小写，调用时大小写也必须一致。// 函数声明不是一个可执行语句，所以不 以分号结尾。
</script>

函数表达式：可以存储在变量中

var x = function (a, b) {return a * b};
var y = x(1, 2);
// 函数表达式存储在变量后，变量也可作为一个函数使用
// 以上没有名称的函数是一个匿名函数

构造函数:通过内置函数构造器Function()来定义。

let a = new Function('a', 'b', 'return a + b');
let b = a(1, 2);
document.write(a); //function anonymous(a,b ) { return a + b }
document.write(b); // 3

b）函数的参数：调用函数时，传递的值就叫参数，供在函数中使用。
多个参数由逗号（,）分隔；

<script>function way(a, b) {alert(a + b);}way(2, 3);
</script>

c) 带返回值的函数：使用return语句返回值；执行return时函数会停止执行，并返回指定的值。

<script>function way(a, b) {return a + b;}let c = way(2, 3); // 5;
</script>

<script>function way(a, b) {return a > b;}let c = way(2, 3); // false;
</script>

<script>let c = 0;function way(a, b) {if (a < b) {return;};c = a + b;}let c = way(2, 3); // undefined;document.write(c);  // 5
</script>

作用域

作用域为可访问变量、对象、函数的集合。

局部作用域：在函数内声明，变量为局部作用域。

全局作用域：网页中所有脚本和函数。

局部变量：在函数内声明的变量 | 函数接收的参数，只能在函数内部访问。

全局变量：在函数外声明 | 函数内没定义直接赋值的变量

局部变量|全局变量

a) 局部变量：在函数内部声明的变量（使用 var），只能在函数中使用，该变量的作用域是局部的。

b) 全局变量：在函数外声明的变量，网页上所有脚本和函数都能访问它。
变量的生命周期：从被声明的时候开始，局部变量会在函数执行结束后被删除，全局变量会在页面关闭后删除。

c) 向未声明的变量赋值：该变量自动被当作window的一个属性。即成为全局变量。

<script>let a = 0, b = 1; // 全局let c = 4;function way() {let a = 2, b = 3; // 局部c = 6;d = 5;document.write(a,b); // 2, 3document.write(c); // 6document.write(d); // 5}way();document.write(a,b); // 0,1document.write(c); // 6document.write(d); // 5
</script>

d) 对非正规声明的全局变量可以通过delete来删除：

<script>let a = 0; // 全局c = b;delete a; // 报错console.log(a); // 0delete b; // trueconsole.log(b); //
</script>

提升

变量提升：

a) 函数和变量的声明都能被提升到函数的最顶部。

b) 变量可以使用后再声明

c) 声明变量，变量提升，值不会提升

a = 5; //变量设置
var a; // 声明a
document.write(a); //5document.write(b); //undefined
var b = 5; // 声明b
document.write(b); // 5
// 严格模式中，不允许使用未声明的变量

函数提升：

a) 函数声明的时候得到提升

b) 函数表达式不会得到提升

 way();  // 2,3function way() {let a = 2, b = 3; // 局部document.write(a,b); // 2, 3}way(); // 2,3

Javascript基础（一）相关推荐

JavaScript基础笔记集合（转）
JavaScript基础笔记集合 JavaScript基础笔记集合 js简介 js是脚本语言.浏览器是逐行的读取代码,而传统编程会在执行前进行编译 js存放的位置 html脚本必须放在< ...
javascript基础语法——表达式
前面的话一般地,关于javascript基础语法,人们听得比较多的术语是操作符和语句.但是,其实还有一个术语经常使用,却很少被提到,这就是javascript表达式(expression).本文将详 ...
Javascript基础与面向对象基础~第四讲 Javascript中的类对象
今天来说JS中如何实现类(class),事实上本应该昨天晚上写的,可我失言了,在些说一声"抱歉"!JS中的类是JS面向对象的基础,也是我最拿手的东西,你写的代码能否提高一个层次,一 ...
javascript基础系列(入门前须知)
-----------------------小历史---------------------------- javascript与java是两种语言,他们的创作公司不同,JavaScript当时是借 ...
JavaScript基础系列---闭包及其应用
闭包(closure)是JavaScript中一个"神秘"的概念,许多人都对它难以理解,我也一直处于似懂非懂的状态,前几天深入了解了一下执行环境以及作用域链,可戳查看详情,而闭包与 ...
夯实JavaScript基础之prototype, __proto__, instanceof
function New(f){return function(){var o = {'__proto__': f.prototype};f.apply(o, arguments);return o; ...
JavaScript基础，Cookies,Sessions
php和JavaScript,掌握JavaScript基础,自定义函数,流程控制语句,事件,调用JavaScript脚本,在PHP中使用JavaScript. JavaScript是网景公司开发的,是 ...
JavaScript基础一
1.1 javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) J ...
Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
JavaScript基础---语言基础（1）
写在前面: 通过四篇博客把JS基础中的基础整理一下,方便自己查阅,这些内容对于实际项目开发中也许并不会在意,但是作为JS的语言基础,自觉还是应该熟悉.在完成这三篇博客(JavaScript基础---语 ...

Javascript基础（一）

Javascript基础（一）

引用：

输出

字节与字符的区别

字面量

变量

操作符

语句

注释

数据类型：基本类型、引用类型

类型检测

字符串

对象

函数

作用域

局部变量|全局变量

提升

Javascript基础（一）相关推荐

最新文章

热门文章