JavaScript学习笔记（数组、对象、函数）

最近在写一些简单的前端页面，用到了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循环则完全修复了这些问题

console.log(list1.length) 给列表长度赋值能修改列表的长度

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 廖雪峰

posted @ 2022-03-10 10:35 Tarzen 阅读(232) 评论(0) 收藏举报

刷新页面返回顶部

Tarzen