JavaScript
有待補內容
JS102
module
npm
Unit Tests
ES6
概念:
實作:
var 變數名 = require('模組名')
'模組名'
會長得像'./myModule.js'
.js
概念:
實作:
module.exports = function 名
exports 出去
let obj = {
dobule: dobule //已有的function,下同
triple: function(n){
return n * 3;
}
addOne:function(n){
return n + 1;
}
}
module.exports = obj
exports.double = dobule
exports.triple = function(n) {
return n * 3
}
其他說明:
影片的 12:30 處
概念:
實作:
npm -v
查看版本號確認是否有下載成功其他補充:
概念1:
實作1:
npm install npm名
安裝 npmrequire
導入var leftPad = require('left-pad');
概念2:
實作2:
如何裝 npm 前置
npm init
建立一個叫做 package.json
的資料夾
"dependencies"
物件裡面就我們裝的東西的名稱和版本號怎麼下載 npm
npm install npm名 --save
//詳見下面 package.json 及下載別人的程式怎麼使用 npm
var leftPad = require('left-pad');
在 commit 時,大家都怎麼做?
.gitignore
的文字檔裡面再 commitpackage.json 是什麼?
npm init
會自動生成如何把我們用的 library 寫入 json?
--save
--save
已經變成預設的選項了,因此 npm install 不加 --save
也一樣會把資訊寫到 package.json 裡面如何把別人 json
裡有的 npm 下載下來?
$ npm install
進行忘記 $ npm install
會怎樣
can not find module "module name"
警告自己有 module 要用 yarn 或 npm 管理時:
$ yarn init
進行$ npm init
進行概念
"script"
區塊是什麼?
script
可以寫好一些指令script
的腳本實作
{ ...
"scripts":
{
"hello": "echo Hello, world",
},
...
}
npm run 腳本指令
執行$ npm run hello
介紹
實作
指令 | 內容 |
---|---|
$ yarn add "專案名稱" |
等同 npm install 但會自己加入 dependencies |
$ yarn -v |
查看版本號 |
$ yarn |
根據 json 下載 dependencies |
$ yarn run <scriptName> |
等同 npm run <scriptName> |
概念
function repeat(str, times) {
let result = '';
for(let i = 0; i < times; i += 1) {
result += str;
}
return result;
}
console.log(repeat('a',5) === 'aaaaa')
console.log(repeat('abc',1) === 'abc')
概念
技術
怎麼下載 Jest?
怎麼寫測試?
module.exports = functionName
把 function exports 出來.test.js
的檔案裡用 require 把檔案引用進來const stars = require('./hw1');
describe('測試印星星', () => {
test('應該要有一顆星', () => {
expect(stars(1)).toEqual(["*"]);
});
test('應該要有一到三顆星', () => {
expect(stars(3)).toEqual(["*", "**", "***"]);
});
test('應該要有一到六顆星', () => {
expect(stars(6)).toEqual(["*", "**", "***", "****", "*****", "******"]);
});
});
"script"
裡面寫好腳本 ...
"scripts":
{
"hello": "echo Hello, world",
"test":"jest",
...
},
...
"scripts":
{
"hello": "echo Hello, world",
"test":"jest hw1.test.js",
...
},
$ npm run test
$ yarn run test
npx jest hw1.test.js
概念:
概念:
什麼是 ECMAScript?
const 是什麼?
let 和 var 的差別
概念:
\n
才會印多行實作:
``
符號
let str = `
Hello,
world.
`
function sayHi(name) {
console.log(`Hello my frind ${name}, now is ${new Date()}`);
}
sayHi('nick');
${}
裡面是可以放程式碼的${name.toUpperCase}
const obj = {
father :'papa',
mother :'mama'
}
let {
father
} = obj
console.log(father);
// 'papa'
function test({a,b}) {
console.log(a);
}
test({
a:1,
b:2
})
// 1
概念:
...
實作:
let arr = [1, 2, 3];
let arr2 = [4,5,6, ...arr];
console.log(arr2);
// [ 4, 5, 6, 1, 2, 3 ]
可以在 object 中展開別人形成新的 obj
let obj = {
a:'1',
b:'2'
}
let result = {
...obj,
c:3
}
console.log(result);
// { a: 1, b: 2, c: 3 }
也可以展開物件
let arr = [1, 2, 3];
let result = {
...arr,
c:3
}
// { '0': 1, '1': 2, '2': 3, c: 3 }
但是如果有以數字命名的物件性時,物件內的東西會指向最後給他的東西:
let arr = [1, 2, 3];
let obj = {
0:'o',
1:'p'
}
let result = {
...arr,
...obj,
c:3
}
console.log(result);
// { '0': 'o', '1': 'p', '2': 3, c: 3 }
let arr = [1, 2, 3]
let arrCopy = [...arr]
console.log(arrCopy)
console.log(arr1 === arrCopy)
// [1, 2, 3]
// false
obj = obj2
的方式,兩者會指向同一個記憶體位置,此時改變 obj 的值時就會連帶改變 obj2 的值...
運算子會很好用。概念:(待補)
syntax:...rest
概念
實作
function repeat (str = 'hello', times = 2) {
console.log(times);
return str.repeat(times);
}
console.log(repeat());
// 2
// hellohello
概念
實作
原本的寫法:
let arr =[1, 2, 3, 4, 5];
console.log(
arr
.filter(function(value) {
return value > 1
})
.map(function(value){
return value * 2
})
)
有 arrow function 的寫法:
console.log(
arr
.filter(value => { //把 function 刪掉,然後只有一個參數時,() 也可以省略
return value > 1
})
.map(value => {
return value * 2
})
)
更省略的寫法:
console.log(
arr
.filter(value => value > 1) // 整個 () 都不要,直接回傳
.map(value => value * 2)
)
概念
範例
舊寫法:
// export
function add(a,b){
return a + b
}
module.exports = add
// import
let add = require('./utils')
console.log(3,5)
新寫法:
// export
export function add(a,b){ // 這裡前面加了 export
return a + b;
}
export const PI = 3.14; // 這裡前面加了 export
// import
import {add, PI} from './utils' // 新語法
console.log(3,5)
bable-node
指令來跑其他變形:
// export
function add(a,b){
return a + b;
}
let const PI = 3.14;
export{
add,
PI
}
如果想要以其他名稱 export 出去
export{
add as addFunction,
PI
}
// 記得 import 時也要用這個新名稱才找得到是誰
一次全部 import
import * as utils from './utils' // * 就是指所有東西
console.log(utils.addFunction(3,5), utils.PI);
總結:
Export 有幾種方式:
export function add(){},使用 import {add} 引入
export { add },與上面那種一樣
export default function add()
,使用 import add 引入,不需要加大括號
如果想要用其他名字,可以用 as 取別名,例如說 export { add as addFunction }
可以用 import * as utils from 'utils' 把全部都 import 進來
概念