JS学习笔记

JS学习笔记

JavaScript 输出

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台。

JavaScript数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型。

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

声明变量类型

当您声明新变量时，可以使用关键词 “new” 来声明其类型：

var carname=new String;
var x=   	new Number;
var y=   	new Boolean;
var cars=   new Array;
var person= new Object;

声明类型后，其类型还是可以动态转变的

var x = new String;
x= "asdas";
x = 123;
console.log(typeof(x))//输出number

对象

对象属性

var person={firstname:"John", lastname:"Doe", id:5566};
//对象属性有两种寻址方式：
name=person.lastname;
name=person["lastname"];

访问对象方法

你可以使用以下语法创建对象方法：

methodName : function() { code lines }

你可以使用以下语法访问对象方法：

objectName.methodName()

通常 fullName() 是作为 person 对象的一个方法， fullName 是作为一个属性。

字符串

字符串可以是插入到引号中的任何字符。可以使用单引号或双引号。

可以使用索引位置来访问字符串中的每个字符。

var character = str[0];

字符串可以是对象

通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = "John"

但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String(“John”)

不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用

var x= "asd";
var y = new String("asd");
console.log(x === y) //输出false
console.log(typeof(x))//string
console.log(typeof(y))//object

=== 为绝对相等，即数据类型与值都必须相等。

字符串属性

性	描述
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

字符串方法

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

JS运算符

运算符	描述
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）
===	绝对等于（值和类型均相等）

Javascript循环

For/In 循环

JavaScript for/in 语句循环遍历对象的属性：

var person={fname:"John",lname:"Doe",age:25}; 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

Javascript类型转换

将数字转换为字符串

全局方法 String() 可以将数字转换为字符串。

该方法可用于任何类型的数字，字母，变量，表达式

Number 方法 toString() 也是有同样的效果。

将字符串转换为数字

全局方法 Number() 可以将字符串转换为数字。

JavaScript变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。

JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

JavaScript 初始化不会提升

//示例1
x = 5; // 变量 x 设置为 5
console.log(x); //输出5
var x; // 声明 x 

//示例2
var x;
console.log(x); //输出undefined
x = 5;

//示例3
console.log(x); //输出undefined
var x = 5;

JavaScript严格模式

使用 “use strict” 指令

严格模式通过在脚本或函数的头部添加 “use strict”; 表达式来声明。

JavaScript this 关键字

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

• 在方法中，this 表示该方法所属的对象。
• 如果单独使用，this 表示全局对象。
• 在函数中，this 表示全局对象。
• 在函数中，在严格模式下，this 是未定义的(undefined)。
• 在事件中，this 表示接收事件的元素。
• 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

JavaScript let 和 const

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

JavaScript JSON

JSON 字符串转换为 JavaScript 对象

然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

JSON.stringify()用于将 JavaScript 值转换为 JSON 字符串。

函数定义方法

函数声明

使用function关键字声明一个方法，并指定方法名

function exchangeDate(){
    var date = document.getElementById('value').value;
    alert(new Date(Date.parse(date.replace(/-/g, "/"))));
}

函数表达式

使用function声明方法，但没有指定方法名，最后把方法赋予一个变量，调用时直接使用变量() 调用

var func = function(){
    alert("这是一个函数表达式");
}

匿名函数

使用function关键字声明一个函数，但未给函数命名，所以叫匿名函数

//示例用法：
//1.赋予一个变量则创建函数(函数表达式本质是变量指向了匿名函数)
var fnName = function(){...}

//2.事件处理的回调函数：
elementObj.addEventListener("click",function(event) {
  //do something
});

函数声明和函数表达式两者的区别

1、函数声明提升:

​ 在javascript引擎的时候会将函数声明的优先级提升，函数表达式则需要在代码解析到那一行之后才能触发

2、立即执行：

​ 函数表达式可以加括号直接调用，但是函数声明则不可以。

//方案一：使用函数声明，先调用再定义
funName();
function funcName(){
    //方法主体
}

//方案二：使用函数表达式，先定义，再调用
var funName = function(){
    //方法主体
}
funName();

//方案三：使用函数表达式，立即执行
var funName = function(){
    //方法主体
}();

JavaScript函数参数

functionName(parameter1, parameter2, parameter3) {   
    // 要执行的代码…… 
}

函数显式参数在函数定义时列出。

函数隐式参数在函数调用时传递给函数真正的值。

arguments 对象（隐式参数）

JavaScript 函数有个内置的对象 arguments 对象。

argument 对象包含了函数调用的参数数组。

windows弹窗

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

语法

window.alert("*sometext*");

确认框

确认框通常用于验证是否接受用户操作。

当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。

当你点击 “确认”, 确认框返回 true， 如果点击 “取消”, 确认框返回 false。

语法

window.confirm("sometext");

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

语法

window.prompt("sometext","defaultvalue");