最近在写一些简单的前端页面，用到了JS这里记录一下：（本人主开发语言是python所以写一些和python不同的地方）
JS的for循环
<script>
var list1 = ['a','b','c']
for (var x in list1){
console.log(x)
console.log('============')
console.log(list1[x])
}
</script>
console.log(x) 打印的是列表的索引(0,1,2), 我们需要再使用list1[x]才能获取元素
for ... of循环则完全修复了这些问题
JS列表切片：list1.slice(0,2),就算索引超出也不会报错 :list1.slice(0,10000)
JS列表添加元素：list1.push('A')
列表排序：list1.sort()
列表反转：list1.reverse()
列表中的元素链接成字符串：list1.join('-')，不会修改列表本身而是生成一个新的字符串
JS中的字典（对象）
var dict_ = {'name':'fjx',age:18} console.log(dict_.name) console.log(dict_.age)
JS中的字典允许key不用带引号，也是无序的
通过dict_.name 或者dict_['name']来访问
for循环的是字典的key ,for循环的时候不能使用 dict_.x 这种语法，必须使用dict_[x]
如果我们要检测是否拥有某一属性，可以用in操作符：
定义函数：
function test(x) { if(x > 0){ return x; } else { return -x; } }
// 是一个匿名函数，它没有函数名 var fun = function (x) { if(x >0){ return x; }else { return -x } }
//箭头函数：箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数不会创建自己的this，所以它没有自己的this，它只会从自己的作用域链的上一层继承this。
//箭头函数没有自己的this，它会捕获自己在定义时（注意，是定义时，不是调用时）所处的外层执行环境的this，并继承这个this值。所以，箭头函数中this的指向在它被定义的时候就已经确定了，之后永远不会改变。
//箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。
(param1, param2, …, paramN) => { statements }
// 当只有一个参数时，圆括号是可选的：
(singleParam) => { statements }
singleParam => { statements }
// 没有参数的函数应该写成一对圆括号。
() => { statements }
我在vue中使用axios的时候就用到了箭头函数，如果不用箭头函数，采用普通函数这个时候this就不是vue对象了
var vm = new Vue({ el:"#neirong", data(){ return{ task_name: 'test', selected: 'test', pro_list:[], feat_list:null, features:[], node_list:[], nodes:'', data:{} } }, methods:{ taskfun(){ //请求后台发送测试数据 console.log(JSON.stringify(this._data)) var vue_data_url = 'http://0.0.0.0:8000/vue_data' axios.post(vue_data_url, JSON.stringify(this._data),{ headers: { 'Content-Type': 'application/json'} }) .then(response =>{ //这里必须使用箭头函数才能获取到vue的this，使用箭头函数的时候需要灵活运用， this.data = response.data.data console.log(this.data) var build_job_url = 'http://0.0.0.0:8000/build_job' axios.post(build_job_url, this.data) .then(response => { for (var x in response.data.data){ if (response.data.data[x] == ''){ continue } alert(response.data.data[x]) }} ) } ) alert() } },
高阶函数
一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。
function add(x, y, f) { return f(x) + f(y); }
js的map：由于map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果：
function pow(x) {
return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81] console.log(results);
reduce 作用在列表上 list2.reduce(fun) 接受一个函数，这个函数接受两个参数，将两个参数累积计算，依次往后算出一个累积值
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
闭包：高阶函数除了可以接受函数作为参数外，还可以把函数作为结果值返回。当内部函数使用了外部函数的参数时，外部函数又返回内部函数，相关参数和变量都保存在返回的函数中，这种称为“闭包（Closure）”
这里我直接采用廖老师的代码了，和Python的的闭包用法基本一致
function lazy_sum(arr) { var sum = function () { return arr.reduce(function (x, y) { return x + y; }); } return sum; }
当我们调用lazy_sum()时，返回的并不是求和结果，而是求和函数：
var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()
调用函数f时，才真正计算求和的结果：
f(); // 15
在这个例子中，我们在函数lazy_sum中又定义了函数sum，并且，内部函数sum可以引用外部函数lazy_sum的参数和局部变量，当lazy_sum返回函数sum时，相关参数和变量都保存在返回的函数中，这种称为“闭包（Closure）
正则表达式：第一种方式是直接通过/正则表达式/写出来，第二种方式是通过new RegExp('正则表达式')创建一个RegExp对象
var re1 = /ABC\-001/; var re2 = new RegExp('ABC\\-001'); re1; // /ABC\-001/ re2; // /ABC\-001/
使用第一种测试
var re = /\d{3}/; re.test('123') //
感觉js比python还要宽容不管是是不是字符串数字还是数字都能测试通过
JSON：
JSON实际上是JavaScript的一个子集。在JSON中，一共就这么几种数据类型：
- number：和JavaScript的
number完全一致； - boolean：就是JavaScript的
true或false； - string：就是JavaScript的
string； - null：就是JavaScript的
null； - array：就是JavaScript的
Array表示方式——[]； - object：就是JavaScript的
{ ... }表示方式。
以及上面的任意组合。
由于JSON非常简单，很快就风靡Web世界，并且成为ECMA标准。几乎所有编程语言都有解析JSON的库，而在JavaScript中，我们可以直接使用JSON，因为JavaScript内置了JSON的解析。
把任何JavaScript对象变成JSON，就是把这个对象序列化成一个JSON格式的字符串，这样才能够通过网络传递给其他计算机。
如果我们收到一个JSON格式的字符串，只需要把它反序列化成一个JavaScript对象，就可以在JavaScript中直接使用这个对象了。
序列化:把js对象序列化成JSON字符串：
var dict_ = {'name':'fjx',age:18}; JSON.stringify(dict_) '{"name":"fjx","age":18}'
反序列化：把JSON字符串 变成JS对象
JSON.parse('json字符串')
JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45
JSON.parse()还可以接收一个函数，用来转换解析出的属性：
var obj = JSON.parse('{"name":"小明","age":14}', function (key, value) { if (key === 'name') { return value + '同学'; } return value; }); console.log(JSON.stringify(obj)); // {name: '小明同学', age: 14}
JS的面向对象：JavaScript不区分类和实例的概念，而是通过原型（prototype）来实现面向对象编程。
先创建一个原型对象，然后再创建一个对象实例，此时她两没有关系，需要通过__proto__ 关联上，这个时候对象实例就继承了原型对象的方法和属性
var Student = { name: 'Robot', height: 1.2, run: function () { console.log(this.name + ' is running...'); } }; var xiaoming = { name: '小明' }; xiaoming.__proto__ = Student;
如果指向了其他原型对象，那就失去第一次继承（覆盖）。实际当中不使用obj.__proto__。Object.create()方法可以传入一个原型对象，并创建一个基于该原型的新对象，但是新对象什么属性都没有，因此，我们可以编写一个函数来创建xiaoming：
// 原型对象: var Student = { name: 'Robot', height: 1.2, run: function () { console.log(this.name + ' is running...'); } }; function createStudent(name) { // 基于Student原型创建一个新对象: var s = Object.create(Student); // 初始化新对象: s.name = name; return s; } var xiaoming = createStudent('小明'); xiaoming.run(); // 小明 is running... xiaoming.__proto__ === Student; // true
构造函数的方法来创建对象：
先写一个函数（函数名大驼峰），通过this初始化属性或者方法，这个时候创建对象时需要使用new 函数()
学习：https://www.liaoxuefeng.com/wiki/1022910821149312 廖雪峰