前端js

一、javaScript引入方式：

 

　　　　1.script标签内写

　　　　2.引入额外的js文件

二、javaScript注释：

// 这是单行注释

/*
这是
多行注释
*/

三、javaScript语言基础

　　　　1.变量名可以会用_，数字，字母，$组成，不能以数字开头

　　　　2.声明变量可以使用（var 变量名；）的格式来声明

　　　　　　（变量区分大小写，推荐使用驼峰式，保留字不能做变量名）

　　　　ps：ES6新增了let命令，用于声明变量，用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。

　　　　ES6新增const用来声明常量，一旦声明，其值不能改变，

const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only
abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile
保留字

四、javaScript数据类型

　　　　1.javaScript拥有动态类型

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串

　　　　2.数值（Number）

　　　　JavaScript不区分整型和浮点型，就只有一种数字类型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

　　　　还有一种NaN，表示不是一个数字（Not a Number）

　　　　3.字符串

　　　　　　‘+’ 拼接

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

　　　　　　通过字符串中嵌入变量

// 普通字符串
`这是普通字符串！`
// 多行文本
`这是多行的
文本`
// 字符串中嵌入变量
var name = "jason", time = "today";
`Hello ${name}, how are you ${time}?`

　　　　常用方法：

方法 说明
.length 返回长度
.trim() 移除空白
.trimLeft()  
.trimRight()  
.charAt(n) 返回第n个字符
.concat(value, ...) 拼接
.indexOf(substring, start) 子序列位置
.substring(from, to) 根据索引获取子序列
.slice(start, end) 切片
.toLowerCase() 小写
.toUpperCase() 大写
.split(delimiter, limit) 分割

　　　　4.布尔值（Boolean）

　　　　　　区别于Python，true和false都是小写。

　　　　　　空字符串、0、null、undenfined、NaN都是false

　　　　5.对象（Object）

　　　　　　JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象

　　　　6、数组

　　　　　　类似于python中的列表

　　　　常用方法

方法 说明
.length 数组的大小
.push(ele) 获取尾部的元素
.pop() 获取尾部的元素
.unshift(ele) 头部插入元素
.shift() 头部移除元素
.slice(start, end) 切片
.reverse() 反转
.join(seq) 将数组元素连接成字符串
.concat(val, ...) 连接数组
.sort() 排序
.forEach() 将数组的每个元素传递给回调函数
.splice() 删除元素，并向数组添加新元素。
.map() 返回一个数组元素调用函数处理后的值的新数组

　　　　7、forEach()

　　　　　　语法：forEach(function(currentValue, index, arr), thisValue)

　　　　　　　　　　currentValue 必需。当前元素

　　　　　　　　　　index，arr 可选。分别为当前索引值和所属的数组对象

　　　　　　　　　　thisValue 可选。如果为空，undefined会传递给其值

 　　　　8、splice()

　　　　　语法：splice(index,howmany, item1,.....,itemX)

参数 描述
index 必需。规定从何处添加/删除元素。
该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。
item1, ..., itemX 可选。要添加到数组的新元素

　　　　9.map()

　　　　　　语法：map(function(currentValue,index,arr), thisValue)

参数 描述
function(currentValue, index,arr) 必须。函数，数组中的每个元素都会执行这个函数
函数参数:
参数 描述
currentValue 必须。当前元素的值
index 可选。当期元素的索引值
arr 可选。当期元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
如果省略了 thisValue ，"this" 的值为 "undefined"

　　　　10.类型查询

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

　　　　　　typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。

　　　　　　对变量或值调用 typeof 运算符将返回下列值之一：

　　　　　　　　undefined - 如果变量是 Undefined 类型的

　　　　　　　　boolean - 如果变量是 Boolean 类型的

　　　　　　　　number - 如果变量是 Number 类型的

　　　　　　　　string - 如果变量是 String 类型的

　　　　　　　　object - 如果变量是一种引用类型或 Null 类型的

五、运算符

　　　　1.算数运算符

　　　　　　+ - * / % ++ --

　　　　2.比较运算符

　　　　　　> >= < <= != == === !==
1 == “1”  // true  弱等于
1 === "1"  // false 强等于
//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型)，所以当你用两个等号进行比较时，JS内部会自动先将
//数值类型的1转换成字符串类型的1再进行比较，所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型，防止判断错误

　　　　3.逻辑运算符

　　　　　　&& 、|| 、!  （与、或、非）

　　　　4.赋值运算符

　　　　　　= += -= *= /=

六、流程控制

　　　　1.if-else if-else

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

　　　　2.switch

　　　　　switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

　　　　for

for (var i=0;i<10;i++) {
  console.log(i);
}

　　　　3.while

　　　　4.三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用；
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;

x
10

七、函数

// 普通函数定义
function f1() {
  console.log("Hello world!");
}

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

// 带返回值的函数
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 调用函数

// 匿名函数方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 立即执行函数 书写立即执行的函数，首先先写两个括号()()这样防止书写混乱
(function(a, b){
  return a + b;
})(1, 2);

　　　　ps：ES6中允许使用“箭头”（=>）定义函数。

var f = v => v;
// 等同于
var f = function(v){
  return v;
}

　　　　注意：

　　　　　　函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。

八、函数的全局变量和局部变量：　　　

　　　　局部变量：

　　　　　　在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

　　　　全局变量：

　　　　　　在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

　　　　变量生存周期：

　　　　　　JavaScript变量的生命期从它们被声明的时间开始。

　　　　　　局部变量会在函数运行以后被删除。

　　　　　　全局变量会在页面关闭后被删除。

　　　　作用域

　　　　　　首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！

九、Date对象

　　　　　　创建date对象

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示
View Code

　　　　　　date对象的方法

var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)
View Code

十、JSON对象  ******

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

　　　　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xiaowangba9494/p/11478075.html