Javascript基础知识（一）

前言

前端开发最基本的就是HTML + CSS + JS了，刚入行时听到的介绍就是，写页面亦如造房子，HTML为搭户型，CSS是房屋装饰，JS则好比是水电安装，是最后的功能了。 下面我们开始装水电了.....

ECMAScript 和 JavaScript关系

ECMAScript是由欧洲计算机制造商协会(European Computer Manufacturers Association)颁布的关于JavaScript的语言规范，即JS的发展是以ECMAScript为标准进行的。自1997年发布首版以来，已经历经N多版，好像我还在百度搜索let、const等ES6语法时，听说现在倏的就ES10都出草案了！目前个人开发主要是 ES5/6。ECMAScript版本历史

Javascript基础语法

1. 输出

window.alert('hello guys!')//弹出警告窗
document.write('I am contents.');//将内容写到HTML文档中
console.log('我在控制台输出！','others');//将内容输出到浏览器控制台
console.log('Let us play %s this %s !','basketball','friday');//%s 字符串占位符===>
// 'Let us play basketball this friday'
var familyInfo = { 
    name:'前端牛逼',
    id:666
}
console.log('家族ID是 %d，家族信息是 %O',1235,familyInfo)//%d 整数占位符 %O对象占位符
//当然，如果觉得这样的log输出有点“脱裤子放屁”，还是直接如下不用占位符吧
console.log('家族ID是:',familyID ,'家族信息是',familyInfo);

//有一些用的相对少些的Log输出：

console.debug(object)
//在控制台输出一条消息，包含一个指向代码调用位置的超链接。假如是直接在控制台输入该命令，//就不会出现超链接（和console.log()一样）。

console.info(object)
//在控制台输出一条带有“信息”图标的消息和一个指向代码调用位置的超链接。

console.warn(object)
//在控制台输出一条带有“警告”图标的消息和一个指向代码调用位置的超链接。

console.error(object)
//在控制台输出一条带有“错误”图标的消息和一个指向代码调用位置的超链接。

console.dir(object)
//以列表形式输出一个对象的所有属性，有点和你查看DOM窗口相类似。

2.运算

var num  = (5 + 2)*10; // 70   = + - *  / %(取膜 ) ++ --
10%3// 1
//注意一下这两个区别
var i = 0;
var num =  i++;//0  
var num1 = ++i;//1


//比较运算
var count =  0; 
if(count > 0){console.log('num 大于 0')}//  JS比较运算符中:     == === !== != <  > 
null == undefined //true
null === undefined //false

不同数据类型做比较时的一些规则

//逻辑运算符
// &&    and    
 (2 < 10 && 3 > 1) //true
// || or     
(a || b) //只要一个为true，结果即为true 
// ! not    
 var num = 0;
!num //true(将num转换为布尔值再取反);

3.javascript 关键字和保留字（备胎咯）

关键字 (用于标识要执行的操作)： break、case、catch、continue、default、delete、do、else、finally、for、function、
if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void

保留字(当前的语言版本中并没有使用，但在以后 JavaScript 扩展中会用到)：abstract
boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto、implements、import、int

4.注释

//单行注释
//console.log('num');

 alert('error') // 单行末注释

//块注释
/*
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
*/

5.条件语句

if(isVVmusic){
//客户端内
}else{
//端外
}

if(sex == '男'){
 console.log('小哥哥')
}else if(sex == '女'){
 console.log('小姐姐')
}else{
 console.log('萨瓦迪卡~')
}


switch(res.retCode){
    case 1000:
        console.log('创建活动成功!')
        break;
    case 1001:
        console.log('不在申请时间内!')
        break;
    case 1002:
        console.log('userID不存在!')
        break;
    default:
       console.log('参数不正确');
}

//有一种情况可能只是要根据条件去取一个值，比如toast的提示文案，这时用条件判断显得裹脚布又长又臭的时候，可以考虑另一种方式比如：
var toastTexts = {
    '1000':'创建活动成功!',
    '1001':'不在申请时间内!',
    '1002':'参数不正确',
    '1003':'userID不存在!',
    '1008':'比赛以结束'，
    ......
}
if(res && res.retCode){
 let toast = toastTexts[res.retCode];
 alert(toast);
}

6.循环语句

• for - 循环代码块一定的次数

for (语句 1; 语句 2; 语句 3){

被执行的代码块

}
语句 1 （代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

for (var i =0 ;i<list.length;i++){
       var item = list[i];
       console.log(item.name);  
    }

• for/in - 循环遍历对象的属性

var res = {
        name:'刘德华',
        age:50,
        place:'hongkong'
    }  
    for (var key in res){
      console.log('%O : %O',key,res[key]);  
    }

• while - 当指定的条件为 true 时循环指定的代码块

var i =0;
    while (i<5)
    {
        if(i === 2) break;
        console.log('当前数字是'+ i);
        i++;
    }

• do/while - 同样当指定的条件为 true 时循环指定的代码块

  do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

var i = 0;
    do{
        console.log('number is '+ i)
        i++;
    } 
   while (i<5);

break 语句用于跳出循环。（不可以用于es6的forEach）

continue 用于跳过循环中的一个迭代。

JavaScript数据类型

Javascript的数据类型可以分为：基本数据类型（值类型）和引用数据类型

值类型(基本类型)：

• 字符串（String）
• 数字(Number)
• 空（Null）
• 未定义（Undefined）
• 布尔(Boolean)
• Symbol(*Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值)

引用数据类型：

• 对象(Object)
• 数组(Array)
• 函数(Function)

从上图可以看出，基本数据类型保存的是具体的值，当将a变量的值赋值给b变量，b变量之后的任何    操作就和a无关了;而当把引用数据类型的值赋值给些个（ C、D ）变量，C得到的是一个引用地址，同样D也是，当操作C或者D中某一个的属性时，实际上是顺着这条同样的引用地址改了堆内存中的值，因此其它引用了这一相同地址的变量再取自身当中某属性值时，都是被更改过的。

判断数据类型

typeof   123　　 //'number'
    typeof   'abc'　　//'string'
    typeof    true       //'boolean'
    typeof    undefined   //'undefined'
    typeof    null        //'object'
    typeof    { }           //'object'
    typeof    [ ]           //'object'
    typeof    console.log       //'function'

各类型常用的操作方法

1.String

• charAt 获取字符串中指定位置的字符，若指定位置没有，则返回空字符串

'let us play basketball!'.charAt(0);//'l'   返回索引位置0处的字符
'let us play basketball!'.charAt(100000);// '' 如果参数 大于 'string'.length-1 (找不到)即返回 ''

• charCodeAt 获取字符串指定位置字符的unicode编码

'let us play basketball!'.charCodeAt(1);// 101 
'let us play basketball!'.charCodeAt(1000) //NaN 如果参数 大于 'string'.length-1 (找不到)即返回 NaN

• fromCharCode() 可接受一个或多个Unicode值，然后返回一个字符串。

String.fromCharCode(97, 98, 99, 100, 101); //'abcde'

• indexOf(string,start)用来检索指定的字符串值在字符串中首次出现的位置。它可以接收两个参数，string表示要查找的子字符串，start表示查找的开始位置，省略的话则从开始位置进行检索。

'let us play basketball!'.indexOf('us');// 4
'let us play basketball!'.indexOf('us',5);// -1 找不到则返回-1

• lastIndexOf(string) 与indexOf类似，它返回的是一个指定的子字符串值最后出现的位置，其检索顺序是从后向前

'let us play basketball!'.lastIndexOf('b');// 18
'let us play basketball!'.lastIndexOf(' ',5);// 3 从索引为5处开始往前查找

-search(substr/regexp) 检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。它会返回第一个匹配的子字符串的起始位置，如果没有匹配的，则返回-1。

'let us play basketball!'.search('us');// 4
'let us play basketball!'.search(/us/);// 4
'let us play basketball!'.search(/usb/);// -1

• subString(start,end) 从start位置截取到end位置截取字符串

'let us play basketball!'.substring(4,6);// 'us' //注意是包括开始项位置，不包括结束项位置
'let us play basketball!'.substring(7);// "play basketball!" //第二个参数不传，则默认截取到最后一位
'let us play basketball!'.substring(1000);//''  参数大于字符串length时返回 ""

• slice(start,end) 与substring()方法非常类似，它传入的两个参数也分别对应着开始位置和结束位置。而区别在于，slice()中的参数可以为负值，如果参数是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符。

'let us play basketball!'.slice(0,3);// 'let'  
'let us play basketball!'.slice(-5,-1);// 'ball' //截取顺序依然是从左到右

• replace(string/regexp,string) 字符串替换 第一个参数可以是字符串也可以是正则，将匹配到的内容用第2个参数替换掉

'let us play basketball!'.replace('us','me');// "let me play basketball!"
'let us play basketball!'.replace(/basketball/,'baseball');// "let us play baseball!"
'let us play basketball!'.replace(/ /g,'--');// "let--us--play--basketball!" 利用g修饰符全部替换

• split('') 按某字符将整个字符串拆分成数组，参数为字符串或者正则

'let us play basketball!'.split(' ');//["let", "us", "play", "basketball!"]
'let us play basketball!'.split(/ /);//["let", "us", "play", "basketball!"]

• toLowerCase()和toUpperCase() 将字符串转换成全部大写或者全部小写

'let us play basketball!'.toUpperCase();//LET US PLAY BASKETBALL!"

2.Array

• push(arg1,arg2,arg3) 向数组后面依次添加新的一项,返回的是新数组的长度

var arr1 = [1,2,3];
arr1.push(3,4,5);//6
console.log(arr1);//[1, 2, 3, 3, 4, 5]

• pop() 删除数组最后一项，并且返回该项

var arr1 = [1,2,3];
arr1.pop();//3
console.log(arr1);//[1, 2]

• shift() 删除数组第一项，并且返回该项

var arr1 = [1,2,3];
arr1.shift();//1
console.log(arr1);//[2,3]

• unshift() 向数组开头添加一项，并且返回新数组长度

var arr1 = [1,2,3];
arr1.unshift(0);// 4
console.log(arr1);//[0,1,2,3]

• concat() 将多个数组拼成一个新的数组，并返回新数组

var arr1 = [1,2,3],
    arr2 = [4,5,6],
    arr3;
arr3 = arr1.concat(arr2);
console.log(arr1);// [1,2,3]
console.log(arr2);//[4,5,6]
console.log(arr3);//[1,2,3,4,5,6]

• join() 把数组中的每一项 按照指定的分隔符拼接成字符串

var arr1 = ['let','us','play','basketball'];
var str1 = arr1.join(' ');
console.log(str1);//"let us play basketball"

• splice 删除数组中的任意项 返回值是被删除的数组项(会改变原数组)

var arr1 = ['let','us','play','basketball'];
var arr2 = arr1.splice(0,2);
console.log(arr1);// ["play", "basketball"]
console.log(arr2); //["let", "us"]

• slice:复制数组 返回值是复制到的新数组 写上数值之后 不包含被复制的最后一项(不改变原数组)

var arr1 = [1,2,3,4,5,6];
var arr2 = arr1.slice(1,3);
console.log(arr1);// [1, 2, 3, 4, 5, 6]
console.log(arr2); // [2, 3] 也是包括开始位置项，不包括结束位置项

• reverse:倒序数组 返回值倒序数组 （原有数组改变）

var arr1 = ['a','b','c','d'];
var arr2 = arr1.reverse();
console.log(arr1);//["d", "c", "b", "a"]
console.log(arr2);//["d", "c", "b", "a"]

• sort 数组排序

var arr1 = [1,5,6,8,2];
arr1.sort(function(a,b){return a-b});//[1, 2, 5, 6, 8] 升序
arr1.sort(function(a,b){return b-a});// [8, 6, 5, 2, 1] 降序

3.Object

• hasOwnProperty():返回一个布尔值，表示某个对象是否含有指定的属性，而且此属性非原型链继承。

var obj1 = {name:'kobe',age:18};
obj1.hasOwnProperty('name');//true
obj1.hasOwnProperty('height');//false

• isPrototypeOf():返回一个布尔值，表示指定的对象是否在本对象的原型链中。

var Plays = function(obj){
    this.name = obj.name;
    this.age = obj.age;
}
var player1 = new Plays({name:'kobe',age:18});
console.log(Plays.prototype.isPrototypeOf(player1));//true

• propertyIsEnumerable():判断指定属性是否可枚举。

var obj1 = {a:1};
obj1.propertyIsEnumerable('a');//true
obj1.propertyIsEnumerable('__proto__');//false

• toString():返回对象的字符串表示。

var obj1 = {a:1};
obj1.toString();//"[object Object]"

• watch():给对象的某个属性增加监听。
• unwatch():移除对象某个属性的监听。
• valueOf():返回指定对象的原始值。

4.Number

• toFixed(x)——把数字转换为字符串，x为小数点后位数

10.235233.toFixed(1);///10.2

• toPrecision(x)——把数字格式化为指定的长度

23.3336.toPrecision(2);//23
111.toPrecision(2); //Uncaught SyntaxError: Invalid or unexpected token

• valueOf()——返回值

var boo = new Boolean(false)
document.write(boo.valueOf());//false

以上就是我的分享内容了！