ES前端开发和JS初步学习_warning: `value` should in shape of `{ value: stri

ES前端开发

目录

简介
JS简单学习
ES6离线转译安装配置

简介

nodejs可以在服务器端跑JS的软件，在2009年出现，采用事件驱动，非阻塞异步IO模型。
在Nodejs 4.0引入ES6特性。使用最新版的nodeJS。安装镜像站：
https://npm.taobao.org/mirrors/node
linux下载带有linux后缀的，windows下载msi文件即可。如node-v0.12.18-linux-x86.tar.xz ，和node-v0.12.18-x86.msi ，linux查看帮助文档https://github.com/nodesource/distributions/blob/master/README.md，通过nodesource版本管理工具安装即可，windows则需要安装VSCode。windows先安装node，加到path即可，安装VSCode去官网：code.visualstudo.com。
node甚至可以启动一个server。
用JS如何开发。
安装好VSCode后，打开扩展（就是插件），查找node exec，安装。
打开terminal，使用mkdir创建文件夹test，然后cd test，再node . 就会打开新的窗口，左边有一个已经打开的文件夹，创建test.js文件即可编写js代码了，详情可以看node.exec中的帮助。
使用安装界面有帮助文档，F8执行JS代码，F9取消。其他环境也是这样安装 。代码在服务器端和客户端都可以运行，在服务器端一般有V8引擎，不用node。
有时候F8会和翻译软件冲突，从首选项中找键盘快捷方式设定即可。
前端技术在https://developer.mozilla.org/zh-CN/docs/Web/JavaScript可以学到很多。指南https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide。使用任何一种文本编辑器都可以。在MDN学习JS最好。

使用：
注释：/* comment */可以多行，也可以在语言中。
打印只有console.log(str)

ES6 最早实现闭包，实现高阶函数的语言。目前最大的问题是如何把环境搭建起来，即使能写出可以用的代码，能不能跑起来还是问题。ES5可以。

JS简单学习

常量和变量：

标识符：必须是字母、下划线、美元符号和数字，必须是字母、下划线、美元符号开头。大小写敏感。
声明：var 变量，声明时可以不赋值，全局或局部；
let 一个块作用域中的局部变量，声明时可以不赋值；
const 常量，声明时必须赋值；
JS中变量声明和初始化是可以分开的。
d = 3在严格模式下不允许，一般情况下允许。如果只声明不赋值，该变量为undefined。
不同的声明有不同的作用域。例如：

function test(){
    let b;
    b = 20;
}
console.log(b)

var b = 3;

console.log(b)
1
2
3
4
5
6
7
8
9

其中输出为

undefined
3
1
2

var将变量声明作用域提升了，let不行。
常量的地址不能变，例如：
const c = Object() 可以修改其属性，但是无法对c赋值。

数据类型：

ES是动态语言，弱类型语言。一行写完要写‘；’。
类型转换：

console.log('~~~~number~~~~~~~~~');
console.log(a = 1 + 'test', typeof(a));
console.log(a = 2 + null, typeof(a));
console.log(a = 3 + undefined, typeof(a));
console.log(a = 4 + true, typeof(a));
console.log(a = 5 + false, typeof(a));
console.log('~~~~string~~~~~~~~~');
console.log(a = null + 'test', typeof(a));
console.log(a = undefined + 'test', typeof(a)) ;/* NaN属于特殊的数字类型*/
console.log(a = true + 'test', typeof(a));
console.log('~~~~bool~~~~~~~~~');
console.log(a = null + true, typeof(a));
console.log(a = null + false, typeof(a));
console.log(a = null + undefined, typeof(a));
console.log(a = undefined + true, typeof(a));
console.log(a = undefined + false, typeof(a));
console.log(a = null & true, typeof(a)); /* 位运算*/
console.log(a = undefined & true, typeof(a));
console.log('~~~~~bit~~~~~~~~~');
console.log(a = null && true, typeof(a));
console.log(a = false && null, typeof(a));
console.log(a = false && 'test', typeof(a));
console.log(a = true && 'test', typeof(a));
console.log(a = true && '', typeof(a));
输出为
~~~~number~~~~~~~~~
1test string
2 number
NaN number
5 number
5 number
~~~~string~~~~~~~~~
nulltest string
undefinedtest string
truetest string
~~~~bool~~~~~~~~~
1 number
0 number
NaN number
NaN number
NaN number
0 number
0 number
~~~~~bit~~~~~~~~~
null object
false boolean
false boolean
test string
 string
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

弱类型，不需要强制类型转换，会隐式转换。NaN转换数字失败。

总结：

字符串，加号就是拼接字符串，非字符串隐式转换为字符串。
如果没有字符串，加号把其他所有类型都当做数字处理。非数字类型隐式转换为数字；但是undefined特殊，它没有定义值，所以返回NaN。
如果运算符是逻辑运算符，短路符，返回的就是短路时的类型，没有隐式转换。
建议少用隐式转换，除非你很强。

字符串

用单引号或者双引号引用起来的就是字符串，ES6支持反引号例如：

let a = 'abc';
var b = "123";

let c = `x  /*反引号支持多行，仅在反引号中支持插值，需要JS引擎版本很高*/
${a}  /*插值 ES6 提供*/
y
${b}
z
`
console.log(c)
1
2
3
4
5
6
7
8
9
10

转义字符

字符串常用操作

字符串常用操作与python相似，看栗子：

let strtest = ' I.am.the.best.choice.best '

console.log(1,strtest.charAt(3)) /*a*/
console.log(2,strtest[3])/*a*/
console.log(3,strtest.toUpperCase()) /* 转为大写 */
console.log(4,strtest.concat('.com'))/* 尾部追加 */
console.log(5,strtest.slice(3))/*从3截取到最后*/
console.log(6,strtest.slice(3,5)) /* 从3开始截取到5，前包后不包 */
console.log(7,strtest.slice(-3,-2))/*s*/
console.log(8,strtest.slice(-3))/*st*/
console.log(9,strtest.split('.'))/*返回分隔列表 */
console.log(10,strtest.substr(7,2)) /* 从7 开始取2长度 */
console.log(11,strtest.substring(7,10)) /* 从7 开始，到哪里结束，前包后不包 */
console.log(12,strtest.indexOf('be'))/* 从头开始匹配字符串 */
console.log(13,strtest.indexOf('be',11))/* 从11位开始匹配字符串 */
console.log(14,strtest.replace('.',' '))/* 将'.' 替换为' ' */
console.log(15,strtest.trim())/*去除字符串前后的空白字符，包括\n\t等*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

数值类型number

在JS中，数据均为双精度浮点型，范围在-2⁵³-1到2⁵³-1之间，整型也不例外，还有三种符号+Infinity正无穷，-Infinity负无穷，和NaN（not a number）。
二进制：0b0010,0B110
八进制：0755,注意0855会被认为是十进制，因为八进制没有8。ES6中最好使用0o前缀
十六进制：0xAA，0xFF
指数：1E3&