JavaScript基础

Eric实验室

2019-07-01

关注关注

Javascript基础

标识符

所谓的标识符,就是指变量、函数、属性的名字，或者函数的参数。标识符主要有以下规则：

首字符必须是字母、下划线_或者美元符$
其他字符可以是字母、下划线_、美元符$或者数字

标识符的命名遵循驼峰命名，即myCar

用var操作符定义的变量将成为定义该变量的作用域中的局部变量.也就是说,如果在函数中使用var定义一个变量,那么这个变量在函数退出后就会被销毁,如:

function test() {
  var message = "hi";
}
test();
console.log(message); //错误

a = 5 // 省略var操作符,创建的是一个全局变量

`javascript`数据类型

基本数据类型: number, string, boolean, undefined, symbol, null

复杂数据类型: object (三种引用类型: function, arrary, object)

特殊值: NaN, undefined, null

NaN有以下两个特点:

1.任何涉及NaN的操作都会返回NaN,包括NaN/0 // NaN.

2.NaN与任何值都不相等,包括NaN本身,NaN==NaN // false.

鉴于上面两点,判断一个变量是否是NaN需要使用javascript提供的isNaN()方法,例: NaN.isNaN() // true

undefined声明但是没有初始化的变量的值即为undefined,可以理解为此处应该有一个值,但是实际上没有,我们给它一个默认值undefined

// 声明的变量
var a; //相当于var a=undefined;
console.log(typeof a); //undefiend

// 注意一下未声明的变量会直接报错的
console.log(b); //!报错 b is not defined

null是表示缺少的标识，指示变量未指向任何对象，如果定义的变量准备在将来用于保存对象时，那么最好将变量初始化为null

typeof操作符返回一个字符串，表示未经计算的操作数的类型

let s = Symbol
typeof 5 ---------> number
typeof NaN -------> number
typeof 'a' -------> string
typeof true ------> boolean
typeof undefined -> undefined
typeof s ---------> symbol

let fn = function() {}
typeof null ------> object
typeof [] --------> object
typeof {} --------> object
typeof fn --------> function

instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置

基本类型使用字面量赋值,使用instanceof并不能判断其变量类型,因为字面量就是我们所见到的字符,没有调用构造函数,也就不能在原型上找到

let a = 5
a instanceof Number // false

let b = false
b instanceof Boolean // false

let c = Symbol
c instanceof Symbol // false

但是复杂类型使用字面量赋值时,往往能判断其变量类型,这是因为在js中根本不存在真正的空对象，即使是最简单的{}对象也会包含从Object.prototype继承而来的属性和方法

let obj = {}
obj instanceof Object // true
[] instanceof Array // true

// 注意
null instanceof Object // false

`javascript`常用方法

所有的对象都有toLoacleString(),toString(),valueOf()

# 1.Number
    number.isNaN() // 判断是否是NaN
    number.toFixed(2) // 保留小数点后两位
    number.toString() // 将数字转换成字符串
    
    Number可以配合Math对象来使用
    Math.random() // 随机取0-1的数
    Math.abs(number) // 取绝对值
    Math.round(number) // 四舍五入
    Math.floor(number) // 向下取整
    Math.ceil(number) // 向上取整
    
# 2.String
    string.replace(searchValue, replaceValue) // 找到searchValue,只会在第一次的时候换成replaceValue,searchValue可以是正则表达式
    'abcda'.replace('a', 'b') // 'bbcda'
    'abcda'.replace(/a/g,'b') // 'bbcdb'
    
    string.slice(start, end) // 从索引start到end的字符串,end可以为负数,负数表示倒数 
    'abcd'.slice(0,3) //'abc'
    'abcd'.slice(0,-1) //'abc'
    
    string.split('.') // 以.分割字符串,结果为一个数组[] 
    '192.168.1.0'.split('.') // ['192', '168', '1', '0']
    
# 3.Array
    Array.isArray(arr) // 检测数组 true/false
    
    arr.concat() 方法用于连接两个或多个数组
    array.join('.') // 将数组的每一项转换成字符串,并用.连接
    ['192', '168', '1', '0'].join('.') // '192.168.1.0'
    
    let arr = [1, 2, 3, 4] // 以下arr默认都是 [1, 2, 3, 4] 后进先出叫栈,先进先出叫堆
    
    arr.slice(0,2) //[1,2] 返回一个新的数组对象，这一对象是一个由 begin和 end（不包括end）决定的原数组的浅拷贝。原始数组不会被改变。
    
    arr.splice(start, number, addItem) // 删除或替换现有元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
    arr.splice(0, 2, 3) // [3, 3, 4] // 从索引为0的位置删除两项(1,2),并插入一项(3)
    
    // 栈方法
    arr.unshift(0) // arr变成了[0, 1, 2, 3, 4],  修改数组长度,将0放到了数组的第一项
    arr.pop() // 3 修改数组长度,移除数组的最后一项并返回 arr变成了[1, 2, 3]
    
    // 堆方法
    arr.shift() // 1 修改数组长度,数组的第一项并返回 arr变成了[2, 3, 4]
    arr.push(5) // arr变成了[1, 2, 3, 4, 5], 修改数组长度,将5放到了数组的最后一项
    
    // 重排序
    arr.sort() // 首字符排列
    arr.sort((a,b) => a-b) // a-b从小到大, b-a从大到小
    
    arr.reverse() // 顺序颠倒
    
    arr.filter(item => item >= 2) // [3, 4], 过滤数组元素生产新的数组,,不改变原数组
    
    // react 常用
    arr.map(item => item+1 ) //[2, 3, 4, 5] 对数组中的每个元素进行处理，得到新的数组,不改变原数组
    arr.map((item,index) => <div key={index}>{item}</div>) //react中常用, jsx语法
    
    arr.findIndex(item => item > 2) //2 返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1
    
    arr.indexOf(item => item === 1) //0 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

更多方法请参考: MDN

`javascript`语法

==/!=先转换再比较(强制转型) ===/!==仅比较不转换

null == undefined; //true 它们是类似的值
null === undefined; //false 它们是不同类型的值

条件操作符又称三元运算符

let max = (num1>num2) ? num1 : num2

当判断一个范围时请使用if语句

var scroe = 80
if(scroe >= 90) {
    console.log("成绩为优");
}else if(scroe >= 80) {
    console.log("成绩为良")
}else if(scroe >= 60) {
    console.log("成绩为及格")
}else {
    console.log("成绩为不及格");
}

在对比有限个值时,值不能太多,一般在1-4之间,使用switch语句

switch(m) {
    case x:
        //语句
        break;
    case y: 
        //语句
        break;
    default:
        //语句
        break;
}

循环次数已知,选择for循环

for(初始化条件表达式;条件表达式;条件改变表达式) {
    //循环体
}

循环次数未知,但是循环结束条件已知选择while语句

while(条件表达式) {
    //循环体
}

循环体至少执行一次时,选择do while语句例如:要先考试才能知道是否及格

do{
    //循环体
}while(条件表达式)

var score = 48;
do {
    console.log('没及格,需要再来考试!');
    score += 15;
} while (score < 60);

break 直接跳出循环

var num = 0;
for (var i = 1; i < 10; i++) {
    if (i % 5 == 0) {
        break;
    }
    num++;
}
console.log(num); //4 当i=4时,num=4,再执行循环i=5,跳出循环,下面的num++并没有执行,此时num还是4;

continue 跳出本次循环,继续执行下面的循环

var num = 0;
for (var i = 1; i < 10; i++) {
    if (i % 5 == 0) {
        continue;
    }
    num++;
}
console.log(num); //当i=4和9时,跳过了num++,循环完成时num=8;

// 函数执行完之后会立即销毁!!!
function sum(num1, num2) {
    return num1 + num2; //函数是否需要返回值是要看我们是否需要用到函数的返回值
}

function hello() {//函数在执行完return之后会立即退出
    return;
    console.log('你好,世界!'); //这段语句不会执行
}

函数声明:函数声明整体提升,函数表达式/变量声明:函数表达式命名提升

function test(a,b) {
   console.log(a)  
   console.log(b) 
   var b = 234
   console.log(b)  
   a = 123
   console.log(a) 
   function a() {}
   var a
   b = 234
   var b = function () {}
   console.log(a)
   function b () {}
   console.log(b)
}
test(1) // 打印结果为 fn a, fn b, 234, 123, 234, fn

typeof javascript var 变量