关于javascript:JavaScript-权威指南学习笔记一

39次阅读

共计 5656 个字符,预计需要花费 15 分钟才能阅读完成。

JavaScript 权威指南 - 学习笔记

  • JavaScript 是一门高级、动静、解释型变成语言,非常适合面向对象和函数式编程格调。
  • JavaScript 的变量是无类型的。
  • JavaScript 和 Java 除了外表语法大抵类似,它与 Java 是齐全不同的两门变成语言。

Hello World

Node:交互式模式输入 Hello World

node
console.log("Hello World")

Node:非交互式环境输入 Hello World

1. 新建 hello.js 文件

2. 文件写入:console.log(“Hello World”)

3. 应用 node 执行 hello.js 文件

浏览器 JavaScript 控制台输入

1. 新建 hello.js 文件并写入:console.log(“Hello World”)

2. 新建 hello.html 并写入:<script src=”htllo.js”></script>

3. 在浏览器关上 hello.html:file:///F:/javascript/%E7%BB%83%E4%B9%A0DEMO/hello.html

F12 关上开发者工具窗口,就能够在控制台看到输入信息。

申明 - 关键词

  • const:申明常量(不可被批改,从新赋值会抛出 TypeError)
  • let:申明变量(在同一作用域中从新申明雷同变量会导致语法错误)举荐应用此办法申明变量
  • var:申明变量(应用 var 申明的变量作用域为蕴含函数,而非蕴含块,这可能会导致隐含的谬误,举荐应用 let)
  • funtion:定义函数
  • class:定义类

对象

创建对象

  • 间接创建对象

    let empty = {}; // 没有属性的对象
    let point = {x:0, y:0}; // 蕴含两个属性的对象
  • 应用 new 创建对象

    let a = new Object(); // 创立一个空对象,与 {} 雷同
    let b = new Array(); // 创立一个空数组,与 [] 雷同
    let c = new Date(); // 创立一个示意以后工夫的日期对象
    let d = new Map(); // 创立一个映射对象,用于存储键值对
  • 应用 Object.create()创建对象

    Object.create()用于创立一个新对象,应用其第一个参数作为新对象的原型:

    let a = object.create({x: 1, y: 2}); // a 继承属性 x 和 y
    a.x + a.y   // =>3

读取对象属性

要获取一个对象的值,能够应用(.)或([])操作符

let point = {x:0, y:0}; // 蕴含两个属性的对象
let a = point.x  // 获取 point 的 x 属性值
let b = point["y"]  // 获取 point 的 y 属性值

写入对象属性

要创立或设置属性,与查问属性一样,能够应用(.)或([]),只是要把他们放到赋值表达式的右边

let point = {x:0, y:0}; // 蕴含两个属性的对象
point.a = 0;
point["b"] = 0;

删除对象属性

  • delete 操作符用于从对象中移除属性
  • delete 并不操作属性的值,而是操作属性自身
  • delete 操作符只删除本身属性,不删除继承属性

查看对象属性

  • in

    let o = {x: 1};
    "x" in o // =>true: o 有本身属性 "x"
    "y" in o // =>false: o 没有属性 "y"
    "toString" in o // =>true: o 继承了 toString 的属性
  • hasOwnProperty().

    对象 hasOwnProperty()办法用于测试对象是否有给定名字的属性,对继承的属性返回 false

    let o = {x: 1};
    o.hasOwnProperty("x"); // =>true: o 有本身属性 "x"
    o.hasOwnProperty("y") // =>false: o 没有属性 "y"
    o.hasOwnProperty("toString") // =>false: toString 是继承属性
  • object.assign():从一个对象向另一个对象复制属性

数组

创立数组

  • 间接创立

    let empty = []; // 没有元素的数组
    let primes = [1, 2, 3, 4, 5]; // 有 5 个数值元素的数组
    let misc = [1.1, true, "a",]; // 3 种不同类型的元素,最初还有一个逗号
  • Array()创立数组

    • 不传参调用

      let a = new Array(); // 创立一个空数组
    • 创立一个数组,并指定长度

      let a = new Array(10); // 创立一个指定长度的数组
    • 创立两个或更多个数组元素,或传入一个非数值元素

      let a = new Array(5, 4,3,2,1, "testing, testing"); // 创立一个指定长度的数组
  • Array.of()创立一个带元素的数组

    Array.of()  // =>[]; 返回没有参数的空数组
    Array.of(10)  // =>[10]; 创立只有一个数值元素的数组
    Array.of(1,2,3)  // =>[1,2,3];
  • Array.from()通过字符串创立一个数组

    var myArr = Array.from("RUNOOB"); // =>['R', 'U', 'N', 'O', 'O', 'B']

读写数组

  • 应用 [] 操作符拜访数组元素

    let a = ["world"]; // 先创立蕴含一个元素的数组
    let value = a[0]; // 读取元素 0
    a[1] = 3.14; // 写入元素 1 

    超出索引会返回 undefined,不会报错

增加和删除数组元素

  • 数组增加元素

    let a = []; // 创立一个空数组
    a[0] = "zero"; // 增加一个元素
    a.push("one"); // 在开端增加一个值

flat()和 flatMap()打平数组

  • flat()打平一级嵌套

    [1, [2, 3]].flat()  //=>[1, 2, 3]
    [1, [2, [3]]]].flat()  //=>[1, 2, [3]]
  • flat() 传参打平多层级嵌套

    let a = [1,[2,[3,4]]];
    a.flat(1) //=> [1,2,[3,4]]
    a.flat(2) //=> [1,2,3,4]

数组转换为字符串

  • join()

    let a = [1, 2, 3];
    a.join() //=>"1,2,3"
    a.join("") //=>"1 2 3"a.join("") //=>"123"
    let b = new Array(10); // 长度为 10 但没有元素的数组
    b.join("-") //=>"---------": 蕴含 9 个连字符的字符串
  • toString()

    [1,2,3].toString() //=>"1,2,3"
    ["a", "b", "c"].toString() //=>"a,b,c"
    [1, [2, "c"]].toString() //=>"1,2,c"

如果想把数组的文本内容保存起来以备后用,能够应用 JSON.stringify()

数组迭代

1. 数组循环

var officers = [s

    {id: 20, name: 'Captain'},

    {id: 24, name: 'General'},

    {id: 56, name: 'Admiral'},

    {id: 88, name: 'Commander'}

];

 

2.for 循环,使用率最高,也是最根本的一种遍历形式

var officersIds = [];

for(var i=0,len=officers.length;i<len; i++){officersIds.push(officers[i].id);

}

console.log(officersIds); // [20,24,56,88]

 

3.forEach 循环

forEach 中传入要执行的回调函数,函数有三个参数。第一个参数为数组元素(必选),第二个参数为数组元素索引值(可选),第三个参数为数组自身(可选)

var officersIds = [];

officers.forEach(function (officer,index,array) {console.log(index); //0,1,2,3,

    console.log(officer); //{id: 20, name: "Captain Piett"},{id: 24, name: "General Veers"},{id: 56, name: "Admiral Ozzel"},{id: 88, name: "Commander Jerjerrod"}

    officersIds.push(officer.id);

});

console.log(officersIds); //[20,24,56,88]

4.for in 循环

for...in 循环可用于循环对象和数组, 举荐用于循环对象, 能够用来遍历 JSON

var officersIds = [];

for(var key in officers){console.log(key); // 0 1 2 3 返回数组索引

    console.log(officers[key]); //{id: 20, name: "Captain Piett"},{id: 24, name: "General Veers"},{id: 56, name: "Admiral Ozzel"},{id: 88, name: "Commander Jerjerrod"}

    officersIds.push(officers[key].id);

}

console.log(officersIds); //[20,24,56,88]

5.for of 循环

可循环数组和对象,举荐用于遍历数组。for...of 提供了三个新办法:key()是对键名的遍历;value()是对键值的遍历;entries()是对键值对的遍历;let arr = ['科大讯飞', '政法 BG', '前端开发'];

for (let item of arr) {console.log(item); //  科大讯飞  政法 BG  前端开发

}

// 输入数组索引

for (let item of arr.keys()) {console.log(item);  // 0 1 2

}

// 输入内容和索引

for (let [item, val] of arr.entries()) {console.log(item + ':' + val); //  0: 科大讯飞  1:政法 BG  2:前端开发

}

var officersIds = [];

for (var item of officers) {console.log(item); //{id: 20, name: "Captain Piett"},{id: 24, name: "General Veers"},{id: 56, name: "Admiral Ozzel"},{id: 88, name: "Commander Jerjerrod"}

    officersIds.push(item.id);

}

console.log(officersIds); // [20,24,56,88]

// 输入数组索引

for(var item of officers.keys()){console.log(item); // 0 1 2 3

}

// 输入内容和索引

for (let [item, val] of officers.entries()) {console.log(item) // 0 1 2 3 输入数组索引

    console.log(val);//{id: 20, name: "Captain Piett"},{id: 24, name: "General Veers"},{id: 56, name: "Admiral Ozzel"},{id: 88, name: "Commander Jerjerrod"}

    console.log(item + ':' + val);

}

6.map 循环

map() 会返回一个新数组,数组中的元素为原始数组元素调用函数解决后的值。map() 办法依照原始数组元素程序顺次解决元素。map 不批改调用它的原数组自身。map()中传入要执行的回调函数,函数有三个参数。第一个参数为数组元素(必选),第二个参数为数组元素索引值(可选),第三个参数为数组自身(可选)

 

var arr = [{name:'a',age:'18'},

    {name:'b',age:'19'},

    {name:'c',age:'20'}

];

arr.map(function(item,index) {if(item.name == 'b') {console.log(index)  // 1

    }

})

7.filter

filter() 办法创立一个新的数组,新数组中的元素是通过查看指定数组中符合条件的所有元素。array.filter(function(currentValue,index,arr){}, thisValue)

 

var designer = peoples.filter(function (people) {return people.job === "designer";});

组合应用

var totalScore = peoples

    .filter(function (person) {return person.isForceUser;})

    .map(function (choose) {return choose.mathScore + choose.englishScore;})

    .reduce(function (total, score) {return total + score;}, 0);

Array.from()

var divs = document.querySelectorAll('div.pane');  

var text = Array.from(divs, (d) => d.textContent);  

console.log("div text:", text);

// Old, ES5 way to get array from arguments

function() {var args = [].slice.call(arguments);

  //...

}

 

// Using ES6 Array.from

function() {var args = Array.from(arguments);

  //..

}

var filled = Array.from([1,,2,,3], (n) => n || 0);  

console.log("filled:", filled);  

// => [1,0,2,0,3]
本文仅供学习交换应用,如侵立删!

正文完
 0