JavaScript基础

一、变量声明

1. JavaScript变量名可以由字母、数字、下划线、$组成，不能以数字开头

2. 声明变量名使用 var 变量名；的格式来进行声明

var name='jason';
var age=20;

注意事项：

（1）变量名区分大小写

（2）推荐使用驼峰式命名规则

（3）保留字不能用作变量名

补充部分：

ES6(ECMAScript 6)新增let命令用户声明变量，用法与var类似，但是所声明的变量只在let命令所在的代码块内有效；

ES6新增const用来声明常量，一旦声明，其值就不可以改变。

for (var i=0;i<5;i++){
    console.log(i)
}
console.log('for end---')
console.log(i)  // 正常输出

for (let x=0;x<5;x++){
    console.log(x)
}
console.log('for end---')
console.log(x)   // 报错

保留字列表

 

二、JavaScript数据类型

字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。

JavaScript拥有动态类型，相同的变量可用作不同的类型。

var x;  // x为undefined
x = 5;  // x为数字
x = 'jason'  // x为字符串

字符串(String)

var a = 'hello';
var b = 'world';
var r = a + b;
console.log(r);  //得到helloworld

常用方法：

 

方法	说明
.length	返回长度
.trim()	移除两侧空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接字符串
.indexOf(substring, start)	子序列位置
.substr(index,total)	从给定索引开始取total个字符
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	转小写
.toUpperCase()	转大写
.split(delimiter, limit)	根据分割符进行分割

代码示例：

var s = '  jason Hen Bang  '
console.log('字符串长度:', s.length)
console.log('去除左右空格:', s.trim())
console.log('去除左侧空格:', s.trimLeft())
console.log('去除右侧空格:', s.trimRight())
console.log('返回第4个字符:',s.charAt(3))
console.log('拼接字符串:', s.concat('very good'))
console.log('子序列位置:', s.indexOf('jason'))
console.log('子序列位置,指定start:', s.indexOf('jason', 3))
console.log('substr用法:', s.substr(2, 5))  // 从索引2开始，取5个字符
console.log('substring用法:', s.substring(2,5))  // 去索引2到5的字符(顾头不顾腚)
console.log('slice切片:',s.slice(3,6))
console.log('转小写:', s.toLowerCase())
console.log('转大写:', s.toUpperCase())
console.log('split分割:', s.split(' '))
console.log('split分割:', s.split())  // 不指定分割符，得到原来的一个整体

/*
字符串长度: 18
去除左右空格: jason Hen Bang
去除左侧空格: jason Hen Bang  
去除右侧空格:   jason Hen Bang
返回第4个字符: a
拼接字符串:   jason Hen Bang  very good
子序列位置: 2
子序列位置,指定start: -1
substr用法: jason
substring用法: jas
slice切片: aso
转小写:   jason hen bang  
转大写:   JASON HEN BANG  
split分割: [ '', '', 'jason', 'Hen', 'Bang', '', '' ]
split分割: [ '  jason Hen Bang  ' ]
*/

ES6中引入了模板字符串。模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

var name = 'jason'
var age = `twenty`
console.log(`hello ${name}, ${age}`)
var text = `this is
a long text`
console.log(text)

/*
输出结果：
hello jason, twenty
this is
a long text
*/

JavaScript数字

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

var x1=34.56;      //带小数点
var x2=34;         //不带小数点
// 科学计数法来写
var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

JavaScript布尔

布尔（逻辑）只能有两个值：true 或 false(true和false都是小写)。

var x=true;
var y=false;

布尔值为假：""(空字符串)、0、null、undefined、NaN都是false。

JavaScript数组

JavaScript中的数组类似于Python中的列表。

// 第一种方式
var teams = new Array();
teams[0] = 'warriors';
teams[1] = 'lakers';
teams[2] = 'rockets';
// 第二种方式
var teams = new Array('warriors', 'lakers', 'rockets');
// 第三种方式
var teams = ['warriors', 'lakers', 'rockets']

数组常用方法：

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

 sort()方法注意事项：

数组元素即使是数字，并不是按照数字的大小进行排序，回把数字当成字符串，像比较字符串大小一样进行比较排序；先比较第一位的ASCII值大小，如果第一位相同，再比较第二位，以此类推。

实例：

> a = [2, 10, 15, 3]
[ 2, 10, 15, 3 ]
> a.sort()
[ 10, 15, 2, 3 ]

 对数字数组进行由小到大的排序：

function sortNum(m, n) {
    if (m<n) return -1;
    else if (m>n) return 1;
    else return 0
}

var arr = [22,12,3,43,56,47,4];
arr.sort(sortNum)
console.log(arr)

Undefined和Null

null：表示值为空，一般在需要指定或清空一个变量时使用；

undefined：当声明一个变量但未初始化时，该变量的默认值为undefined；还有就是函数没有返回值时，返回的也是undefined。

 

三、运算符

1. 算术运算符

+、-、*、/、%、++、--（加减乘除，取余，自增，自减）

2. 比较运算符

>、>=、<、<=、!=、==、===、!==

注意==、===、!==：

== 值相等结果就为真；=== 值和类型都要相等才为真

> 5 != '5'
false
> 5 !== '5'
true
> 5 == '5'
true
> 5 === '5'
false

 

四、控制语句与循环

1. if条件判断

age = 20
if (age>18) {
    console.log('adult')
} else {
    console.log('teenager')
}
// 输出结果 adult

// 多行条件判断
age = 60
if (age>50) {
    console.log('old man')
} else if (50>age>18) {
    console.log('adult')
} else {
    console.log('teenager')
}
// 输出结果 old man

 2. switch语句

d = new Date()
today = d.getDay()

switch (today) {
    case 1: console.log('Monday'); break
    case 2: console.log('Tuesday'); break
    case 3: console.log('Wednesday'); break
    case 4: console.log('Thursday'); break
    default: console.log('other day')
}
// 注意每个case语句最后都要有break，否则程序会继续执行后续case中的语句

3. for循环语句

// 普通循环
for (var i=0;i<5;i++) {
    console.log(i)
}

// 循环对象，取出对象属性；循环数组
o = {
    name: 'jason',
    age: 20,
    addr: 'BJ'
}
for (k in o) {
    console.log(o[k]);
}

arr1 = ['a', 'b', 'c', 'd']
for (var i=0;i<arr1.length;i++) {
    console.log(arr1[i])
}

4. while循环

x = 10
while (x>=0) {
    console.log(x);
    x-=2;
}

 

五、遍历数组的forEach()与map()方法

/*
forEach()方法用于调用数组中的每个元素，并将元素传递给回调函数；数组中有n个元素就会调用函数n次
理论上这个方法是没有返回值的，仅仅是遍历数组中的每一项，不对原来数组进行修改；但是我们可以自己通过数组的索引来修改原来的数组

调用方式：数组对象.forEach(funtion(currentValue, index, arr), thisValue)

参数说明：
第一个参数：
- function 需要调用的函数
- 函数中的参数：currentValue(当前元素); index(当前元素的索引值); arr(当前元素所属的数组对象); currentValue必须，后两个可选
第二个参数：
thisValue 可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值
*/ 

// 普通调用
arr = ['a', 'b', 'c']
arr.forEach(function (i){
    console.log(i);
})
// 修改原来数组中的值
arr.forEach(function (i, index, curArr){
    curArr[index] = i + i;
})
console.log(arr)


/*
map()方法:
与forEach方法类似，都是遍历数组中的每一项元素，与forEach不同的是，map有返回值，会返回一个新的数组；
数组中的每一个元素作为参数传递给回调函数，回调函数会返回一个值存到新的数组中，全部元素遍历完成后，返回这个新的数组
*/
arr = [1, 3, 5, 7, 9]
var res = arr.map(function (i){
    return 2*i + 1;
})
console.log(res)

 

转载于:https://www.cnblogs.com/gandoufu/p/9585831.html