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

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]