前端技术发展史、Nodejs语法

HTML

浏览器

历史

浏览器技术

JavaScript

JS

 ES

V8引擎

CSS(Cascading Style Sheets)层叠样式表

动态网页技术

网页布局

同步

异步

前端开发

硬件发展

 

ES6开发环境准备及基础语法(Nodejs)

 Nodejs

 

安装

国内镜像可以去阿里云镜像
https://npm.taobao.org/mirrors/node

开发

文档

搜索MDN，Mozilla Developer Network，提供非常完善HTML、CSS、JS等技术资料。 
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

指南(非常好的JS文档)
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide

使用任何一种文本编辑器，都可以开发JS，此次使用微软的Visual Studio Code开发。

Visual Studio Code

下载 https://code.visualstudio.com/Download

解决快捷键冲突

注释

 

str = 'hello' + /*comment*/ 'magedu'
console.log(str)
//结果如下
//hellomagedu

常量和变量

str = 'hello' + /*comment*/ 'magedu'
console.log(str)

var a
let b
console.log(1,a,b)

a = 1
b = 'a string'
console.log(2,a,b)

// const c;  不可以
const c = 100
console.log(c)

//c = 200 不可以修改

var y // 只是声明，y值为undefined
var x = 5 //规范的声明并初始化，声明全局或全局变量
x = 6 /*不规范的初始化，不推荐。在严格模式下会产生异常。在赋值之前不能引用，因为它没有声明。一旦这样赋值就是全局作用域*/

function hello()
{
    var a   //只是声明，a为undefined，作用域在函数中
    a = 100
}

console.log(a) //未声明变量异常，ReferenceError: a is not defined

// a = 200 // 不能提升作用域
// var a = 200 ;hello(); // var提升作用域

数据类型

 

// 类型转换
// 弱类型
console.log('======string======')
console.log(a = 3 + 'magedu',typeof(a)) //3magedu string
console.log(a = null + 'magedu',typeof(a))//nullmagedu string
console.log(a = undefined + 'magedu',typeof(a))//undefinedmagedu string
console.log(a = true + 'magedu',typeof(a))//truemagedu string

//  数字
console.log('========number=====')
console.log(a = null + 8, typeof a)//8 number
console.log(a = undefined + 8, typeof a)//NaN number
console.log(a = true + 8, typeof a)//9 number
console.log(a = false + 8, typeof a)//8 number

// boolean
console.log('========bool====')
console.log(a = null + true,typeof a)//1 number
console.log(a = null + false,typeof a)//0 number
console.log(a = undefined + true,typeof a)//NaN number
console.log(a = undefined + false,typeof a)//NaN number
console.log(a = null & true,typeof a)//0 number
console.log(a = undefined & true,typeof a)//0 number

//短路
console.log('=======短路========')
console.log(a = null && true,typeof a)//null object
console.log(a = false && null,typeof a)//false boolean
console.log(a = false && 'magedu',typeof a)//false boolean
console.log(a = true && 'magedu',typeof a)//magedu string
console.log(a = true && '',typeof a)// string

//
console.log('=======null======')
console.log(a = null + undefined,typeof a)//NaN number

字符串

let a = 'abc';
let b = "124";
let c = `line1
    line2
line3
`//支出多行
console.log(c)

//字符串插值，要求在反引号字符串中。Python3.6支持
let name = "tom",age =19
console.log(`Hi my name is ${name},I am ${age}`)

转义字符

字符串操作方法

let school = 'magedu'
console.log(school.charAt(2))//g
console.log(school[2])//g
console.log(school.toUpperCase())//MAGEDU
console.log(school.concat('.com'))//连接
console.log(school.slice(3))//切片，支持负索引
console.log(school.slice(3,5))
console.log(school.slice(-2,-1))
console.log(school.slice(-2))

let url = 'www.magedu.com'
console.log(url.split('.'))
console.log(url.substr(7,2))//返回子串从何处开始，取多长
console.log(url.substring(7,10))//返回子串，从何处开始，到什么为止

let s = 'magedu.com'
console.log(s.indexOf('ed'))//3
console.log(s.indexOf('ed',4))//7
console.log(s.replace('.edu','.com'))
s = '\tmag edu \r\n'
console.log(s.trim())//去除两端的空白字符。

数值型number

 

console.log(Number.MAX_VALUE)//1.7976931348623157e+308
console.log(Number.MIN_VALUE)//5e-324
console.log(Number.POSITIVE_INFINITY)//Infinity
console.log(Number.NEGATIVE_INFINITY)//-Infinity
console.log(Number.NaN)//NaN

数字的方法

 

console.log(Math.PI)
console.log(Math.abs(-1))
console.log(Math.log2(16))
console.log(Math.sqrt(2))
console.log(Math.random())

运算符

算数运算符

let i = 0;
let a = i++;
console.log(a,i)// 0 1
console.log(a,i++)//0 1
a = ++i
console.log(a,i)//3,3

挑战题

比较运算符

 

console.log(100>'200')//false
console.log(300>'200')//true
console.log(300>'2000')//false
console.log(3000>'2a')//false
console.log('3000'>'2000')//true
//宽松比较
console.log(300 == '300')//true
console.log('200' == '200')//true
//严格比较 ===
console.log(300 === '300')//false
console.log('300' === '300')//true

 

逻辑运算符

位运算

 

三元运算符

 

console.log(('3'>30)?'true':'false')//false

逗号运算符

let a = 4+5,b = true, c = a >20?'true':'false'
console.log(a)//9
console.log(c)//false

其他

console.log('a' instanceof String)//false
console.log(1 instanceof Number)//false
a = new String('b')
console.log(a instanceof String)//true
console.log(a instanceof Object)//true
console.log(new Number(1) instanceof Number)//true

console.log(typeof('a'))//string
console.log(typeof 'a')//string
console.log(typeof a)//object
console.log(typeof typeof a)//string

x = 42;
var y = 43; 
let z = 60;
myobj = new Number();
myobj.h = 4
console.log(delete x );//true   (can delete if delcared implicitly)
console.log(delete y );//false  (cannot delete if declared with var)
console.log(delete z );//false  (cannot delete if declared with let)
console.log(delete Math.PI );   //false    (cannot delete predefined properties)
console.log(delete myobj.h );   //true     (can delete user-defined properties)
console.log(delete myobj );     //true     (can delete if delcared implicitly)

var trees = new Array("redwood","bay","cedar","oak","maple")
for (var i=0;i)
    console.log(trees[i])
console.log("==================") 
delete trees[3]//数组中元素被删除，但空着的位置是undefined
for (var i=0;i)
    console.log(trees[i])

var trees = new Array("redwood","bay","cedar","oak","maple")
console.log(0 in trees)         // true，0在数组对象的index中  
console.log(6 in trees)         // false，6不在数组对象的index中
console.log("bay" in trees)     // false，bay不是属性，它是值
console.log("length" in trees)  // true，length是对象的属性

delete trees[3]
console.log(3 in trees) //false

//Custom objects
let mycar ={
    color:"red",
    year:1998
}
console.log("color" in mycar)   //true
console.log("model" in mycar)   //false
console.log("year" in mycar)    //true

运算符优先级

 

表达式

 

function* inc()
{
    let i = 0;
    let j = 3;
    while (true){
        yield i++;
        if (!j--) return 100;
    }
}
let gen = inc()
for (let i=0;i<6;i++)
    console.log(gen.next());
/*输出结果如下：
{ value: 0, done: false }
{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: 100, done: true }
{ value: undefined, done: true }
 */ 

JS语法

语句块

待续。。。

转载于:https://www.cnblogs.com/xiaoshayu520ly/p/11324416.html