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

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

Javascript基础知识（一）

前言

ECMAScript 和 JavaScript关系

Javascript基础语法

JavaScript数据类型

值类型(基本类型)：

引用数据类型：

判断数据类型

各类型常用的操作方法

前路漫漫

引用和评论

某厂面试基础题

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具